Site

Lightspeed

Hyperspace light streak effect with click interaction

lightspeed-tw

Customize

Tweak the props live

Animation

Speed0.5

Intensity1

Rotation0

Opacity1

Interaction Enabled

Streak Settings

Streak Count128

Stretch Factor0.05

Fade Power2

Colors

Primary Color

#5227FF

Secondary Color

#FF9FFC

Tertiary Color

#B19EEF

Performance

Quality

Max FPS60

Pause When Offscreen

Props

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

Default:1.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

Default:128

stretchFactornumber

Vertical stretch factor of streaks

Default:0.05

intensitynumber

Overall intensity/brightness multiplier

Default:1.0

interactionEnabledboolean

Enable compression on mouse click

Default:true

rotationnumber

Rotation angle in radians

Default:0

fadePowernumber

Distance-based fade multiplier

Default:2.0

opacitynumber

Overall opacity (0-1)

Default:1.0

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

Quality preset for performance/visual tradeoff

Default:"medium"

maxFPSnumber

Maximum frames per second cap

Default:60

pauseWhenOffscreenboolean

Pause rendering when component is off-screen

Default:true

classNamestring

Additional CSS classes

Default:""

childrenReact.ReactNode

Content to render on top of the effect

Default:undefined