Neon Flicker Text
NewPro
A neon tube sign that stutters on with a soft glow on the wall behind it, while a few dead letters stay dark and catch late.
Customize
#ff784f
Tube
2
1
When to use it
- Hero titles for arcade, retro or nightlife themed pages
- Open or Live status signs on an event or stream page
- Game over and Insert coin screens
Good to know
- Plan
- Pro
- Dependencies
- None beyond React
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 291
Installation
Neon Flicker Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy neon-flicker-text.tsx into components/ui.
Usage
import { NeonFlickerText } from "@/components/ui/neon-flicker-text";
<NeonFlickerText text="Open all night" deadCount={2} className="text-7xl font-semibold" />Props
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text of the sign. |
| color | string | "#ff784f" | Color of the gas in the tube. |
| tube | "outline" | "solid" | "outline" | Light only the contour of each letter, like a bent glass tube, or the whole letter. |
| duration | number | 1.4 | Seconds the sign takes to stutter on, not counting the dead letters. |
| deadCount | number | 2 | How many letters fail at first and catch late. |
| deadLetters | number[] | — | Exact letters that fail, counted from 0 without spaces. Overrides deadCount. |
| catchDelay | number | 0.35 | Extra seconds before the dead letters start to sputter. |
| glow | number | 1 | How far the light reaches. |
| flicker | boolean | true | Keep buzzing now and then after the sign is on. |
| once | boolean | true | Light up only the first time the sign enters the viewport. |
| className | string | — | Extra classes for the text, such as font and size. |