Neon Reveal

A neon tube that lights up and reveals the content below

neon-reveal-tw

Customize

Tube Color

Light Color

Background

Duration

2500ms

Delay

300ms

Thickness

3.0px

Glow

1.00

Spill

1.00

Reach

1.00

Intensity

1.00

Feather

0.15

Inset

24px

Length

0.90

Hum

1.00

Flicker

1.00

MirroredInteractiveIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#FF9FFC", "#B163E9"]`	Colour of the neon tube and of the light it pours. The light runs from the tube colour through the light colour into a deep shade of it. On light backgrounds both become pastel inks.
`backgroundColor`	string	`"transparent"`	Background of the stage. Transparent reads the colour behind the component.
`direction`	"down" \| "up" \| "left" \| "right"	`"down"`	Which way the light pours. Down puts the tube on the top edge.
`expandFrom`	"center" \| "left" \| "right"	`"center"`	Where the tube starts to light up before it runs across. On side tubes left is the bottom end.
`trigger`	"mount" \| "inView" \| "manual"	`"mount"`	When the reveal plays. Manual waits for replay() or a click.
`revealDelay`	number	`0`	Wait before the tube switches on, in milliseconds.
`revealDuration`	number	`2500`	Time the light takes to run across the tube, in milliseconds.
`easing`	"out" \| "smooth" \| "gentle" \| "linear"	`"out"`	Timing of the sweep. Out starts fast and lands softly.
`thickness`	number	`3`	Width of the tube, in pixels.
`glow`	number	`1`	Size and strength of the halo around the tube.
`spill`	number	`1`	Brightness of the light the tube pours over the content.
`reach`	number	`1`	How far that light travels before it fades out.
`intensity`	number	`1`	Overall exposure of the tube and its light.
`feather`	number	`0.15`	Softness of the reveal edge, as a share of the frame.
`inset`	number	`24`	Distance of the tube from its edge, in pixels.
`length`	number	`0.9`	Length of the tube, as a share of the frame. Shorter tubes show their rounded ends.
`mirrored`	boolean	`false`	Adds a second tube on the opposite edge, pouring the other way.
`hum`	number	`1`	Gentle breathing of the lit tube.
`flicker`	number	`1`	How hard the tube stutters as it switches on. 0 fades it on cleanly.
`interactive`	boolean	`true`	Click to re-ignite: the light cuts out, the tube stutters back on and the reveal plays again. Clicks during a reveal make it flicker. Links and buttons in the content are ignored.
`intro`	boolean	`true`	Plays the reveal. Off shows the content and the lit tube at once.
`paused`	boolean	`false`	Freezes the motion. Reduced-motion users get the revealed state as a still frame.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`scrollThreshold`	number	`0.3`	Share of the component that must be visible for the inView trigger.
`onStart`	() => void	`undefined`	Called each time the tube switches on.
`onComplete`	() => void	`undefined`	Called each time a reveal finishes.
`children`	ReactNode	`undefined`	Content revealed under the light, centred in the frame.
`ref`	{ replay }	`undefined`	replay() switches the tube off and plays the reveal again.
`className`	string	`undefined`	Classes for the root, which fills its parent.
`style`	CSSProperties	`undefined`	Inline styles for the root element.

colors[string, string]

Colour of the neon tube and of the light it pours. The light runs from the tube colour through the light colour into a deep shade of it. On light backgrounds both become pastel inks.

Default["#FF9FFC", "#B163E9"]

backgroundColorstring

Background of the stage. Transparent reads the colour behind the component.

Default"transparent"

direction"down" | "up" | "left" | "right"

Which way the light pours. Down puts the tube on the top edge.

Default"down"

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

Where the tube starts to light up before it runs across. On side tubes left is the bottom end.

Default"center"

trigger"mount" | "inView" | "manual"

When the reveal plays. Manual waits for replay() or a click.

Default"mount"

revealDelaynumber

Wait before the tube switches on, in milliseconds.

Default0

revealDurationnumber

Time the light takes to run across the tube, in milliseconds.

Default2500

easing"out" | "smooth" | "gentle" | "linear"

Timing of the sweep. Out starts fast and lands softly.

Default"out"

thicknessnumber

Width of the tube, in pixels.

Default3

glownumber

Size and strength of the halo around the tube.

Default1

spillnumber

Brightness of the light the tube pours over the content.

Default1

reachnumber

How far that light travels before it fades out.

Default1

intensitynumber

Overall exposure of the tube and its light.

Default1

feathernumber

Softness of the reveal edge, as a share of the frame.

Default0.15

insetnumber

Distance of the tube from its edge, in pixels.

Default24

lengthnumber

Length of the tube, as a share of the frame. Shorter tubes show their rounded ends.

Default0.9

mirroredboolean

Adds a second tube on the opposite edge, pouring the other way.

Defaultfalse

humnumber

Gentle breathing of the lit tube.

Default1

flickernumber

How hard the tube stutters as it switches on. 0 fades it on cleanly.

Default1

interactiveboolean

Click to re-ignite: the light cuts out, the tube stutters back on and the reveal plays again. Clicks during a reveal make it flicker. Links and buttons in the content are ignored.

Defaulttrue

introboolean

Plays the reveal. Off shows the content and the lit tube at once.

Defaulttrue

pausedboolean

Freezes the motion. Reduced-motion users get the revealed state as a still frame.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

scrollThresholdnumber

Share of the component that must be visible for the inView trigger.

Default0.3

onStart() => void

Called each time the tube switches on.

Defaultundefined

onComplete() => void

Called each time a reveal finishes.

Defaultundefined

childrenReactNode

Content revealed under the light, centred in the frame.

Defaultundefined

ref{ replay }

replay() switches the tube off and plays the reveal again.

Defaultundefined

classNamestring

Classes for the root, which fills its parent.

Defaultundefined

styleCSSProperties

Inline styles for the root element.

Defaultundefined

Name

Type

Default

Description

colors

[string, string]

["#FF9FFC", "#B163E9"]

Colour of the neon tube and of the light it pours. The light runs from the tube colour through the light colour into a deep shade of it. On light backgrounds both become pastel inks.

backgroundColor

string

"transparent"

Background of the stage. Transparent reads the colour behind the component.

direction

"down" | "up" | "left" | "right"

"down"

Which way the light pours. Down puts the tube on the top edge.

expandFrom

"center" | "left" | "right"

"center"

Where the tube starts to light up before it runs across. On side tubes left is the bottom end.

trigger

"mount" | "inView" | "manual"

"mount"

When the reveal plays. Manual waits for replay() or a click.

revealDelay

number

0

Wait before the tube switches on, in milliseconds.

revealDuration

number

2500

Time the light takes to run across the tube, in milliseconds.

easing

"out" | "smooth" | "gentle" | "linear"

"out"

Timing of the sweep. Out starts fast and lands softly.

thickness

number

3

Width of the tube, in pixels.

glow

number

1

Size and strength of the halo around the tube.

spill

number

1

Brightness of the light the tube pours over the content.

reach

number

1

How far that light travels before it fades out.

intensity

number

1

Overall exposure of the tube and its light.

feather

number

0.15

Softness of the reveal edge, as a share of the frame.

inset

number

24

Distance of the tube from its edge, in pixels.

length

number

0.9

Length of the tube, as a share of the frame. Shorter tubes show their rounded ends.

mirrored

boolean

false

Adds a second tube on the opposite edge, pouring the other way.

hum

number

1

Gentle breathing of the lit tube.

flicker

number

1

How hard the tube stutters as it switches on. 0 fades it on cleanly.

interactive

boolean

true

Click to re-ignite: the light cuts out, the tube stutters back on and the reveal plays again. Clicks during a reveal make it flicker. Links and buttons in the content are ignored.

intro

boolean

true

Plays the reveal. Off shows the content and the lit tube at once.

paused

boolean

false

Freezes the motion. Reduced-motion users get the revealed state as a still frame.

dpr

number

2

Maximum device pixel ratio for the canvas.

scrollThreshold

number

0.3

Share of the component that must be visible for the inView trigger.

onStart

() => void

undefined

Called each time the tube switches on.

onComplete

() => void

undefined

Called each time a reveal finishes.

children

ReactNode

undefined

Content revealed under the light, centred in the frame.

ref

{ replay }

undefined

replay() switches the tube off and plays the reveal again.

className

string

undefined

Classes for the root, which fills its parent.

style

CSSProperties

undefined

Inline styles for the root element.