Neon Reveal

Realistic neon bar effect that sweeps across the container

neon-reveal-tw

Neon Reveal

Customize

Tweak the props live

Timing & Direction

Reveal Delay (ms)1000

Reveal Duration (ms)2500

Direction

Expand From

Bar Settings

Color (Hue)260

Bar Width1

Bar Height0.02

Vertical Offset1

Mirrored

Effects & Scroll

Intensity1.5

Glow Spread0.5

Follow Cursor

Animate On Scroll

Scroll Threshold0.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

Default:0

revealDurationnumber

Duration of the reveal animation in milliseconds

Default:2000

verticalOffsetnumber

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

Default:0.7

direction"horizontal" | "vertical"

Direction of the neon bar

Default:"horizontal"

colornumber

Hue of the neon bar (0-360 degrees)

Default:200

barWidthnumber

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

Default:1.0

barHeightnumber

Height/thickness of the bar (0.0 to 1.0)

Default:0.02

mirroredboolean

Whether to render a mirrored bar on the opposite side

Default:false

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

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

Default:"center"

animateOnScrollboolean

Trigger animation when element enters viewport

Default:false

scrollThresholdnumber

Viewport intersection threshold for scroll trigger (0.0 to 1.0)

Default:0.3

intensitynumber

Overall glow intensity multiplier

Default:1.0

glowSpreadnumber

How far the glow spreads from the bar

Default:1.0

followCursorboolean

Make the glow follow the cursor position

Default:false

onStart() => void

Callback when animation starts

Default:undefined

onComplete() => void

Callback when animation completes

Default:undefined

classNamestring

Additional CSS classes for the container

Default:""

childrenReactNode

Content to render inside the component

Default:undefined