Neon Reveal

Realistic neon bar effect that sweeps across the container

neon-reveal-tw

Neon Reveal

Customize

Reveal Delay (ms)

1000

Reveal Duration (ms)

2500

Color (Hue)

260

Bar Width

1.00

Bar Height

0.020

Vertical Offset

1.00

Mirrored

Intensity

1.5

Glow Spread

0.5

Follow CursorAnimate On Scroll

Scroll Threshold

0.3

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

revealDelaynumber

Number of milliseconds to wait before starting the reveal animation

Default0

revealDurationnumber

Duration of the reveal animation in milliseconds

Default2000

verticalOffsetnumber

Vertical offset of the neon bar (0.0 to 1.0, where 0 is bottom and 1 is top)

Default0.7

direction"horizontal" | "vertical"

Direction of the neon bar

Default"horizontal"

colornumber

Hue of the neon bar (0-360 degrees)

Default200

barWidthnumber

Width/length of the bar as a percentage (0.0 to 1.0, where 1.0 is full width)

Default1.0

barHeightnumber

Height/thickness of the bar (0.0 to 1.0)

Default0.02

mirroredboolean

Whether to render a mirrored bar on the opposite side

Defaultfalse

expandFrom"center" | "left" | "right"

Where the bar expands from: center, left, or right

Default"center"

animateOnScrollboolean

Trigger animation when element enters viewport

Defaultfalse

scrollThresholdnumber

Viewport intersection threshold for scroll trigger (0.0 to 1.0)

Default0.3

intensitynumber

Overall glow intensity multiplier

Default1.0

glowSpreadnumber

How far the glow spreads from the bar

Default1.0

followCursorboolean

Make the glow follow the cursor position

Defaultfalse

onStart() => void

Callback when animation starts

Defaultundefined

onComplete() => void

Callback when animation completes

Defaultundefined

classNamestring

Additional CSS classes for the container

Default""

childrenReactNode

Content to render inside the component

Defaultundefined