Neon Flicker
Customize
Props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | "NEON" | Display text to animate. |
charDelay | number | 0.18 | Stagger delay (s) between each character turning on. |
color | string | "#00f5ff" | CSS color value for the lit-up text, e.g. "#fff" or "crimson". |
glow | string | color | Peak glow color, used at full brightness. Falls back to `color` when omitted. |
glowSoft | string | color | Mid-flicker glow color, used at partial brightness. Falls back to `color` when omitted. |
dim | string | color | Idle/off-state color shown before the animation starts. Falls back to `color` when omitted. |
minGlow | number | 0 | Minimum glow intensity, 0-1. 0 disables glow at the dimmest point of the flicker. |
maxGlow | number | 1 | Maximum glow intensity, 0-2. 1 is the original glow strength, 2 is extra intense. |
repeat | boolean | false | Loop the flicker animation indefinitely. |
className | string | "" | Extra classes applied to the root wrapper div. |
textstringDisplay text to animate.
"NEON"charDelaynumberStagger delay (s) between each character turning on.
0.18colorstringCSS color value for the lit-up text, e.g. "#fff" or "crimson".
"#00f5ff"glowstringPeak glow color, used at full brightness. Falls back to `color` when omitted.
colorglowSoftstringMid-flicker glow color, used at partial brightness. Falls back to `color` when omitted.
colordimstringIdle/off-state color shown before the animation starts. Falls back to `color` when omitted.
colorminGlownumberMinimum glow intensity, 0-1. 0 disables glow at the dimmest point of the flicker.
0maxGlownumberMaximum glow intensity, 0-2. 1 is the original glow strength, 2 is extra intense.
1repeatbooleanLoop the flicker animation indefinitely.
falseclassNamestringExtra classes applied to the root wrapper div.
""Dependencies
Crafted withbyMohammad Tasin
ReactBytesGet verified guest posts across 100+ sites.
Instant placements, fixed pricing
100+ Sites · 12 Countries
Fixed Pricing · Instant TAT