Floating Lines
Customize Floating Lines
Bend Radius5.0
Bend Strength-0.50
Animation Speed1.00
Parallax Strength0.20
Mouse Damping0.050
Props
| Property | Type | Default | Description |
|---|---|---|---|
| lineCount | number | 50 | Number of floating lines (10-200) |
| lineWidth | number | 2 | Width of each line in pixels (0.5-10) |
| lineLength | number | 100 | Maximum length of lines in pixels (20-500) |
| speed | number | 1 | Animation speed multiplier (0.1-5) |
| opacity | number | 0.6 | Base opacity of lines (0.1-1) |
| color | string | #ffffff | Color of the floating lines |
| gradient | boolean | | Enable or disable gradient effect on lines |
| gradientColors | string[] | ["#ffffff", "#000000"] | Colors for gradient effect when enabled |
| direction | string | random | Direction of line movement - 'horizontal', 'vertical', 'diagonal', or 'random' |
| waveAmplitude | number | 20 | Amplitude of wave motion (0-100) |
| waveFrequency | number | 0.01 | Frequency of wave motion (0.001-0.1) |
| mouseInteraction | boolean | | Enable or disable mouse interaction effects |
| mouseRadius | number | 150 | Radius of mouse interaction effect in pixels (50-300) |
| mouseForce | number | 0.5 | Strength of mouse interaction force (0-2) |
| fadeEdges | boolean | | Enable or disable edge fading effect |
| fadeDistance | number | 50 | Distance from edges to start fading (0-200) |
| pulse | boolean | | Enable or disable pulsing animation |
| pulseSpeed | number | 1 | Speed of pulse animation (0.1-3) |
| className | string | custom-floating-lines | Additional CSS class names for styling |
| width | string | 100% | Width of the floating lines container |
| height | string | 600px | Height of the floating lines container |
| quality | string | high | Rendering quality - 'low', 'medium', or 'high' |
Dependencies
oglreact
Created with ❤️ by Cybershoora