A lightweight Node.js package designed to seamlessly integrate Easter eggs into your JavaScript or TypeScript web applications.
npm install easter-eggs.tseaster-eggs.ts is a small TypeScript module designed to add secret sequences to a web app. You define which interactions must be performed (keyboard, buttons, etc.) and which action should run once the combo succeeds.
---
``bash`
npm install easter-eggs.ts
The package ships TypeScript types and also works from plain JavaScript (ESM).
---
- EasterBuilder (src/easter.builder.ts) orchestrates the relationship between a TriggerHandler (what has to happen) and an ActionHandler (what gets fired).TriggerHandler
- Triggers inherit from (src/triggers/trigger.handler.ts) and follow an observer pattern: they notify the builder when the expected sequence is achieved.ActionHandler
- Actions implement (src/actions/action.handler.ts) and contain the logic to run (DOM updates, animations, etc.).
As long as you call both setTriggerHandler(...) and setActionHandler(...), the builder attaches the events and triggers the action once the sequence is completed correctly.
---
`ts
import {
EasterBuilder,
KonamiTrigger,
MatrixEffectActionHandler,
} from "easter-eggs.ts";
new EasterBuilder()
.setTriggerHandler(new KonamiTrigger()) // up, up, down, down...
.setActionHandler(new MatrixEffectActionHandler()); // Matrix-like rain of characters
`
⚠️ KeyboardInputTrigger and KonamiTrigger rely on the KeyboardEvent.code property (e.g. KeyA, ArrowUp). Make sure you use the right identifiers.
---
- KeyboardInputTrigger (src/triggers/keyboardHandlers/keyboard.input.trigger.ts) addKeyboardTrigger("KeyA")
Stack the desired sequence with . Every key you add must be pressed in order; any mistake resets the sequence.
- KonamiTrigger (src/triggers/keyboardHandlers/konami.trigger.ts)
Preconfigures the famous Konami code. Instantiate it like any other keyboard trigger.
- ClickButtonTrigger (src/triggers/click.button.trigger.ts) id
Ideal when you need a series of clicks on DOM buttons ( required). Use addClickTrigger("myButton", 3) to demand consecutive clicks on the same element.
You can also build custom triggers by extending TriggerHandler and calling this.handleTrigger(...) to progress through the sequence.
---
- CustomActionHandler (src/actions/custom.action.handler.ts)
Accepts a custom function—perfect for running your own application logic.
- EasterModalActionHandler (src/actions/easter.modal.action.handler.ts)
Injects a
containing a GIF into document.body. Just pass the URL when instantiating.- MatrixEffectActionHandler (
src/actions/matrix.action.handler.ts + src/actions/matrixEffect)
Adds a full-screen