Twilight Lines
Soft glowing lines that pulse with a warm sweep
twilight-lines-tw
Customize
Tweak the props live2
0.5
1.8
0.05
0.01
#4D33CC3
#CC4D4D0.25
35
5.5
0.05
1
#FFFFFFProps
| Name | Type | Default | Description |
|---|---|---|---|
width | string | number | "100%" | Container width |
height | string | number | "100%" | Container height |
className | string | "" | Additional CSS classes |
children | ReactNode | undefined | Content rendered above the effect |
lineCount | number | 2 | Number of horizontal lines stacked across the canvas |
waveAmplitude | number | 0.5 | Vertical sway amplitude applied to every line |
waveFrequency | number | 1.8 | Spatial frequency of the horizontal sway |
lineThickness | number | 0.05 | Floor of the line distance — controls visible thickness |
lineGlow | number | 0.01 | Numerator of the inverse-distance glow term |
lineColor | string | "#4D33CC" | Hex color of the lines |
lineIntensity | number | 3 | Brightness multiplier for the lines |
pulseColor | string | "#CC4D4D" | Hex color of the warm flash sweeping along the lines |
pulseSpeed | number | 0.25 | Speed and frequency of the sweeping flash |
pulseWidth | number | 35 | Bell width of the flash — larger = wider hot spot |
pulseIntensity | number | 5.5 | Brightness multiplier for the flash |
chromaticAberration | number | 0.05 | Strength of the radial RGB split applied to the composite |
backgroundColor | string | "#000000" | Hex background fill color |
opacity | number | 1 | Master alpha (0–1) |
dpr | number | 1.5 | Maximum device pixel ratio |
widthstring | numberContainer width
Default:
"100%"heightstring | numberContainer height
Default:
"100%"classNamestringAdditional CSS classes
Default:
""childrenReactNodeContent rendered above the effect
Default:
undefinedlineCountnumberNumber of horizontal lines stacked across the canvas
Default:
2waveAmplitudenumberVertical sway amplitude applied to every line
Default:
0.5waveFrequencynumberSpatial frequency of the horizontal sway
Default:
1.8lineThicknessnumberFloor of the line distance — controls visible thickness
Default:
0.05lineGlownumberNumerator of the inverse-distance glow term
Default:
0.01lineColorstringHex color of the lines
Default:
"#4D33CC"lineIntensitynumberBrightness multiplier for the lines
Default:
3pulseColorstringHex color of the warm flash sweeping along the lines
Default:
"#CC4D4D"pulseSpeednumberSpeed and frequency of the sweeping flash
Default:
0.25pulseWidthnumberBell width of the flash — larger = wider hot spot
Default:
35pulseIntensitynumberBrightness multiplier for the flash
Default:
5.5chromaticAberrationnumberStrength of the radial RGB split applied to the composite
Default:
0.05backgroundColorstringHex background fill color
Default:
"#000000"opacitynumberMaster alpha (0–1)
Default:
1dprnumberMaximum device pixel ratio
Default:
1.5