彩蛋觸發器

在頁面任何角落埋一個秘技：全域監聽鍵盤序列（預設為經典的上上下下左右左右 B A），每答對一鍵亮起一顆進度點、按錯則搖晃歸零，完整輸入後觸發全屏彩帶與旋轉徽章，也可換成你自己的彩蛋內容。透過 ref 的 press() 還能讓畫面按鈕代替鍵盤輸入。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

提示文字hint

顯示輸入進度點showProgress

彩蛋展示時間（毫秒）resetAfter

4000

<KonamiCode />

安裝

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

或在 components.json 設定 registries 後，改用 @webberui/konami-code 安裝。

安裝依賴後，從 registry JSON（/r/konami-code.json 的 files[0].content）複製 konami-code.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

使用

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

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

自訂序列與彩蛋內容，並用 ref 讓畫面按鈕也能輸入：

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">你發現了隱藏優惠碼 🎁</div>
</KonamiCode>

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

Props

Prop	型別	預設值	說明
`sequence`	`string[]`	經典 Konami 秘技	觸發彩蛋的按鍵序列（`KeyboardEvent.key`，字母不分大小寫）
`onUnlock`	`() => void`	—	序列完成、彩蛋解鎖時的回呼
`hint`	`string`	—	顯示在進度點下方的提示文字，留空則不顯示
`showProgress`	`boolean`	`true`	是否顯示輸入進度點
`resetAfter`	`number`	`4000`	彩蛋展示時間（毫秒），時間到自動重置；設 `0` 則不自動重置
`children`	`ReactNode`	—	解鎖後顯示的彩蛋內容；未提供時使用預設的全屏彩帶＋旋轉徽章
`className`	`string`	—	透傳到外層容器

ref 型別為 KonamiCodeHandle，提供 press(key)（以程式送入按鍵）與 reset()（重置進度與解鎖狀態）。

可及性

使用者系統開啟「減少動態效果」時，不噴彩帶、徽章僅淡入淡出，進度點也不做彈跳與搖晃
解鎖時以 sr-only 的 role="status" 即時區域向螢幕閱讀器播報「彩蛋已解鎖」
進度點與彩帶皆為裝飾性元素，以 aria-hidden 對輔助科技隱藏
在 input、textarea 或 contentEditable 中打字不會誤觸序列，含修飾鍵的組合鍵也會被略過
透過 ref 的 press() 可讓畫面按鈕代替鍵盤輸入，滑鼠與觸控使用者同樣能觸發

Playground

安裝

使用

Props

可及性

On this page