Neon Reveal
Realistic neon bar effect that sweeps across the container
neon-reveal-tw
Neon Reveal
Customize
1000
2500
1
260
1
0.02
0.3
1.5
0.5
Props
| Name | Type | Default | Description |
|---|---|---|---|
| revealDelay | number | 0 | Number of milliseconds to wait before starting the reveal animation |
| revealDuration | number | 2000 | Duration of the reveal animation in milliseconds |
| verticalOffset | number | 0.7 | Vertical offset of the neon bar (0.0 to 1.0, where 0 is bottom and 1 is top) |
| direction | "horizontal" | "vertical" | "horizontal" | Direction of the neon bar |
| color | number | 200 | Hue of the neon bar (0-360 degrees) |
| barWidth | number | 1.0 | Width/length of the bar as a percentage (0.0 to 1.0, where 1.0 is full width) |
| barHeight | number | 0.02 | Height/thickness of the bar (0.0 to 1.0) |
| mirrored | boolean | false | Whether to render a mirrored bar on the opposite side |
| expandFrom | "center" | "left" | "right" | "center" | Where the bar expands from: center, left, or right |
| animateOnScroll | boolean | false | Trigger animation when element enters viewport |
| scrollThreshold | number | 0.3 | Viewport intersection threshold for scroll trigger (0.0 to 1.0) |
| intensity | number | 1.0 | Overall glow intensity multiplier |
| glowSpread | number | 1.0 | How far the glow spreads from the bar |
| followCursor | boolean | false | Make the glow follow the cursor position |
| onStart | () => void | undefined | Callback when animation starts |
| onComplete | () => void | undefined | Callback when animation completes |
| className | string | "" | Additional CSS classes for the container |
| children | ReactNode | undefined | Content to render inside the component |