Easter Egg Trigger: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add konami-code.en

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<KonamiCode/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/konami-code.en.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

Easter Egg Trigger