卡片與網格
Evervault Card
hover 揭示加密亂碼與漸層的卡片。
游標滑過卡片時，以指標為圓心開一個圓形視窗，露出底下不斷跳動的加密亂碼與冷色漸層，模擬 Evervault 招牌的密文效果。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add evervault-cardPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
140
1500
編輯中的呼叫預設屬性
<EvervaultCard/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/evervault-card.json或在 components.json 設定 registries 後，改用 @webberui/evervault-card 安裝。
使用
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