Easter Egg Trigger

A hidden interaction that listens for a key sequence to trigger an easter egg, with a progress indicator.

Bury a cheat code anywhere on the page: it listens globally for a keyboard sequence (the classic up up down down left right left right B A by default), lighting one progress dot per correct key and shaking back to zero on a wrong one, then firing full-screen confetti and a spinning badge once the sequence completes — or your own easter egg content instead. The ref's press() also lets on-screen buttons stand in for keyboard input.

Loading preview…

npx shadcn@latest add https://webberui.com/r/konami-code.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Hint texthint

Show input progress dotsshowProgress

Easter-egg display time (ms)resetAfter

4000

<KonamiCode />

Installation

npx shadcn@latest add https://webberui.com/r/konami-code.json

Or, once registries are configured in components.json, install it as @webberui/konami-code.

Usage

import { KonamiCode } from "@/components/ui/konami-code";

<KonamiCode
  hint="↑ ↑ ↓ ↓ ← → ← → B A"
  onUnlock={() => console.log("Unlocked!")}
/>

Custom sequence and easter egg content, with a ref so on-screen buttons can type too:

import { KonamiCode, type KonamiCodeHandle } from "@/components/ui/konami-code";

const ref = React.useRef<KonamiCodeHandle>(null);

<KonamiCode ref={ref} sequence={["g", "o", "o", "d"]}>
  <div className="rounded-xl bg-white p-6 shadow-xl">You found a hidden promo code 🎁</div>
</KonamiCode>

<button onClick={() => ref.current?.press("g")}>G</button>

Props

Prop	Type	Default	Description
`sequence`	`string[]`	the classic Konami code	The key sequence that triggers the easter egg (`KeyboardEvent.key`, letters are case-insensitive)
`onUnlock`	`() => void`	—	Callback fired when the sequence completes and the easter egg unlocks
`hint`	`string`	—	Hint text shown under the progress dots; leave empty to hide it
`showProgress`	`boolean`	`true`	Whether to show the input progress dots
`resetAfter`	`number`	`4000`	How long the easter egg is shown (ms) before it resets automatically; set `0` to never auto-reset
`children`	`ReactNode`	—	The easter egg content shown after unlocking; when omitted, the default full-screen confetti plus spinning badge is used
`className`	`string`	—	Forwarded to the outer container

The ref type is KonamiCodeHandle, providing press(key) (feed in a key programmatically) and reset() (reset the progress and unlocked state).

Accessibility

When the user has "reduce motion" enabled at the system level, no confetti is fired, the badge only fades in and out, and the progress dots do not pop or shake
On unlock, an sr-only role="status" live region announces "easter egg unlocked" to screen readers
The progress dots and confetti are decorative and are hidden from assistive technology with aria-hidden
Typing inside an input, textarea, or contentEditable cannot trigger the sequence by accident, and key combinations that include modifier keys are skipped
The ref's press() lets on-screen buttons stand in for keyboard input, so mouse and touch users can trigger it too