Evervault Card
hover 揭示加密亂碼與漸層的卡片。
游標滑過卡片時，以指標為圓心開一個圓形視窗，露出底下不斷跳動的加密亂碼與冷色漸層，模擬 Evervault 招牌的密文效果。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
140
1500
<EvervaultCard />
安裝
npx shadcn@latest add https://webberui.com/r/evervault-card.json或在 components.json 設定 registries 後，改用 @webberui/evervault-card 安裝。
安裝依賴後，從 registry JSON（/r/evervault-card.json 的 files[0].content）複製 evervault-card.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { EvervaultCard } from "@/components/ui/evervault-card";
<EvervaultCard text="webber" className="max-w-xs" />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | "hover" | 卡面中央顯示的文字 |
gradient | string[] | ["#a855f7", "#6366f1", "#22d3ee"] | 揭示光暈的漸層色 |
radius | number | 140 | 揭示光暈半徑（px） |
chars | number | 1500 | 亂碼總字元數，越多越密也越吃效能 |
corners | boolean | true | 是否顯示四角的十字裝飾 |
可及性
- 使用者系統開啟「減少動態效果」時，停用亂碼與遮罩追蹤，只保留靜態卡片
- 亂碼揭示層帶
aria-hidden，對輔助科技隱藏，只朗讀中央文字 - 隨機亂碼採掛載旗標兩段式渲染，避免 SSR hydration mismatch