Easter Eggs
A secret-code kit: Konami code or any word → barrel roll, Matrix rain, confetti, disco, earthquake.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Register sequences and map them to built-in effects or your own functions. Typing in inputs is ignored, and every effect cleans up after itself.
Installation
$ npm i @guetix/easter-eggs
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { easterEggs, effects } from "@guetix/easter-eggs";
easterEggs({
eggs: {
konami: effects.barrelRoll,
matrix: effects.matrix,
hire: () => location.assign("/contact"),
},
});Usage
example.tsx
import { easterEggs, effects } from "@/components/guetix/easter-eggs";
import { useEffect } from "react";
export function Secrets() {
useEffect(() => easterEggs({ eggs: { konami: effects.confetti } }).destroy, []);
return null;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eggs | Record<string, (el) => void> | — | sequence → effect. |
| target | HTMLElement | document.body | Where effects apply. |
| onEgg | (code) => void | — | Analytics hook. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Ignores typing in form fields; effects honour reduced motion.