Retro Lines

Retro perspective grid with scrolling waves

retro-lines-tw

Customize

Tweak the props live

Animation

Speed0.5

Scroll Speed2

Opacity1

Perspective

Density150

Curvature60

Curve Exponent4

Vanish Point3.5

Wave

Wave Scale50

Wave Amplitude2

Wave Power6

Wave Threshold0.35

Lines

Line Start-1

Line End0.5

Line Gap0.3

Color

Color Speed7

Color Frequency2

Color 1

#290596

Color 2

#93229D

Background

#FFFFFF

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

Default:undefined

speednumber

Overall animation speed multiplier (0.01–3.0)

Default:0.5

scrollSpeednumber

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

Default:2

densitynumber

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

Default:150

curvaturenumber

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

Default:60

curveExponentnumber

Exponent controlling perspective distortion intensity (1–8)

Default:4

vanishPointnumber

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

Default:3.5

waveScalenumber

Scale of the wave pattern (5–100)

Default:50

waveAmplitudenumber

Strength of the sinusoidal wave distortion (0–10)

Default:2

wavePowernumber

Exponent sharpening the wave peaks (1–20)

Default:6

waveThresholdnumber

Minimum wave intensity to be visible (0–1)

Default:0.35

lineStartnumber

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

Default:-1

lineEndnumber

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

Default:0.5

lineGapnumber

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

Default:0.3

colorSpeednumber

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

Default:7

colorFrequencynumber

Spatial frequency of the color pattern (0.5–10)

Default:2

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)

Default:1

cursorInteractionboolean

Enable cursor interaction to shift the vanishing point

Default:false