Retro Lines
Retro perspective grid with scrolling waves
retro-lines-tw
Customize
Animation
0.5
2
1
Perspective
150
60
4
3.5
Wave
50
2
6
0.35
Lines
-1
0.5
0.3
Color
7
2
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 |