霓虹閃爍文字
霓虹燈管質感文字，隨機微閃爍與多層光暈，可自訂色彩。
以多層 text-shadow 疊出白熱核心與彩色光暈的霓虹燈管文字，每個字母依索引種子的偽隨機軌道偶爾熄滅又亮起，像接觸不良的招牌燈管，適合深色背景的標題與氛圍場景。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.5
1
<NeonFlickerText />
安裝
npx shadcn@latest add https://webberui.com/r/neon-flicker-text.json或在 components.json 設定 registries 後，改用 @webberui/neon-flicker-text 安裝。
安裝依賴後，從 registry JSON（/r/neon-flicker-text.json 的 files[0].content）複製 neon-flicker-text.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { NeonFlickerText } from "@/components/ui/neon-flicker-text";
<div className="bg-neutral-950 p-12 text-center">
<NeonFlickerText
text="深夜食堂"
color="#f472b6"
flickerIntensity={0.5}
className="text-6xl font-bold tracking-widest"
/>
</div>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要顯示的霓虹文字內容 |
color | string | "#22d3ee" | 霓虹主色（任何合法 CSS 顏色值），同時作為燈管與內圈光暈色 |
glowColor | string | 同 color | 外圈光暈顏色，未指定時沿用主色 |
flickerIntensity | number | 0.5 | 閃爍強度（0 ~ 1）：越高熄滅越頻繁、熄得越深 |
speed | number | 1 | 閃爍節奏的速度倍率 |
className | string | — | 透傳到最外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，文字恆亮不閃爍，仍保留完整霓虹光暈
- 完整文字以
sr-only供螢幕閱讀器朗讀，拆分後的字素對輔助科技隱藏（aria-hidden） - 閃爍為個別字母、低頻率的短暫透明度變化，且熄滅時仍保留殘影字形，避免大面積高頻閃光
- 閃爍軌道以索引種子的確定性偽隨機產生，SSR 與 CSR 輸出一致，不會造成 hydration 錯誤