Lightspeed

Hyperspace light streak effect with click interaction

lightspeed-tw

Customize

Speed

0.5

Intensity

1.0

Rotation

0.0

Opacity

1.0

Interaction Enabled

Streak Count

128

Stretch Factor

0.05

Fade Power

2.0

Primary Color

Secondary Color

Tertiary Color

Max FPS

60

Pause When Offscreen

Props

18

Name	Type	Default	Description
`width`	number \| string	`"100%"`	Width of the component in pixels or CSS value
`height`	number \| string	`"100%"`	Height of the component in pixels or CSS value
`speed`	number	`1.0`	Animation speed multiplier
`primaryColor`	string	`"#FF5722"`	Primary streak color in hex format
`secondaryColor`	string	`"#2196F3"`	Secondary streak color in hex format
`tertiaryColor`	string	`"#4CAF50"`	Tertiary streak color in hex format
`streakCount`	number	`128`	Number of horizontal streak columns
`stretchFactor`	number	`0.05`	Vertical stretch factor of streaks
`intensity`	number	`1.0`	Overall intensity/brightness multiplier
`interactionEnabled`	boolean	`true`	Enable compression on mouse click
`rotation`	number	`0`	Rotation angle in radians
`fadePower`	number	`2.0`	Distance-based fade multiplier
`opacity`	number	`1.0`	Overall opacity (0-1)
`quality`	"low" \| "medium" \| "high"	`"medium"`	Quality preset for performance/visual tradeoff
`maxFPS`	number	`60`	Maximum frames per second cap
`pauseWhenOffscreen`	boolean	`true`	Pause rendering when component is off-screen
`className`	string	`""`	Additional CSS classes
`children`	React.ReactNode	`undefined`	Content to render on top of the effect

widthnumber | string

Width of the component in pixels or CSS value

Default"100%"

heightnumber | string

Height of the component in pixels or CSS value

Default"100%"

speednumber

Animation speed multiplier

Default1.0

primaryColorstring

Primary streak color in hex format

Default"#FF5722"

secondaryColorstring

Secondary streak color in hex format

Default"#2196F3"

tertiaryColorstring

Tertiary streak color in hex format

Default"#4CAF50"

streakCountnumber

Number of horizontal streak columns

Default128

stretchFactornumber

Vertical stretch factor of streaks

Default0.05

intensitynumber

Overall intensity/brightness multiplier

Default1.0

interactionEnabledboolean

Enable compression on mouse click

Defaulttrue

rotationnumber

Rotation angle in radians

Default0

fadePowernumber

Distance-based fade multiplier

Default2.0

opacitynumber

Overall opacity (0-1)

Default1.0

quality"low" | "medium" | "high"

Quality preset for performance/visual tradeoff

Default"medium"

maxFPSnumber

Maximum frames per second cap

Default60

pauseWhenOffscreenboolean

Pause rendering when component is off-screen

Defaulttrue

classNamestring

Additional CSS classes

Default""

childrenReact.ReactNode

Content to render on top of the effect

Defaultundefined