Retro Lines

Wavy lines receding toward a retro horizon

retro-lines-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Back to the future of design

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

Back to the future of design

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

Back to the future of design

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

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

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