Retro Lines

Retro perspective grid with scrolling waves

retro-lines-tw

Customize

Speed

0.50

Scroll Speed

2.0

Opacity

1.00

Density

150

Curvature

Curve Exponent

4.0

Vanish Point

3.5

Wave Scale

Wave Amplitude

2.0

Wave Power

6.0

Wave Threshold

0.35

Line Start

-1.00

Line End

0.50

Line Gap

0.30

Color Speed

7.0

Color Frequency

2.0

Color 1

Color 2

Background

Cursor Interaction

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`0.5`	Overall animation speed multiplier (0.01–3.0)
`scrollSpeed`	number	`2`	Vertical scroll rate of the grid cells (0–10)
`density`	number	`150`	Number of grid cells per unit: controls line density (10–300)
`curvature`	number	`60`	Perspective bend divisor: higher values flatten the curve (5–200)
`curveExponent`	number	`4`	Exponent controlling perspective distortion intensity (1–8)
`vanishPoint`	number	`3.5`	Y-axis offset for the vanishing point (0–10)
`waveScale`	number	`50`	Scale of the wave pattern (5–100)
`waveAmplitude`	number	`2`	Strength of the sinusoidal wave distortion (0–10)
`wavePower`	number	`6`	Exponent sharpening the wave peaks (1–20)
`waveThreshold`	number	`0.35`	Minimum wave intensity to be visible (0–1)
`lineStart`	number	`-1`	Y coordinate where lines begin appearing (-2–0)
`lineEnd`	number	`0.5`	Y coordinate reference for line sizing gradient (0–2)
`lineGap`	number	`0.3`	Gap between lines: higher values create more spacing (0.05–2)
`colorSpeed`	number	`7`	Speed multiplier for color cycling between the two tones (0–20)
`colorFrequency`	number	`2`	Spatial frequency of the color pattern (0.5–10)
`color1`	string	`"#290596"`	Primary line color (hex)
`color2`	string	`"#93229D"`	Secondary line color (hex)
`backgroundColor`	string	`"#000000"`	Background color (hex)
`opacity`	number	`1`	Master opacity (0–1)
`cursorInteraction`	boolean	`false`	Enable cursor interaction to shift the vanishing point

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes for styling

Default""

childrenReactNode

Content rendered above the effect

Defaultundefined

speednumber

Overall animation speed multiplier (0.01–3.0)

Default0.5

scrollSpeednumber

Vertical scroll rate of the grid cells (0–10)

Default2

densitynumber

Number of grid cells per unit: controls line density (10–300)

Default150

curvaturenumber

Perspective bend divisor: higher values flatten the curve (5–200)

Default60

curveExponentnumber

Exponent controlling perspective distortion intensity (1–8)

Default4

vanishPointnumber

Y-axis offset for the vanishing point (0–10)

Default3.5

waveScalenumber

Scale of the wave pattern (5–100)

Default50

waveAmplitudenumber

Strength of the sinusoidal wave distortion (0–10)

Default2

wavePowernumber

Exponent sharpening the wave peaks (1–20)

Default6

waveThresholdnumber

Minimum wave intensity to be visible (0–1)

Default0.35

lineStartnumber

Y coordinate where lines begin appearing (-2–0)

Default-1

lineEndnumber

Y coordinate reference for line sizing gradient (0–2)

Default0.5

lineGapnumber

Gap between lines: higher values create more spacing (0.05–2)

Default0.3

colorSpeednumber

Speed multiplier for color cycling between the two tones (0–20)

Default7

colorFrequencynumber

Spatial frequency of the color pattern (0.5–10)

Default2

color1string

Primary line color (hex)

Default"#290596"

color2string

Secondary line color (hex)

Default"#93229D"

backgroundColorstring

Background color (hex)

Default"#000000"

opacitynumber

Master opacity (0–1)

Default1

cursorInteractionboolean

Enable cursor interaction to shift the vanishing point

Defaultfalse