Light Lines
An animated background with vertical lines and traveling light particles. Creates a beautiful, dynamic background perfect for hero sections and landing pages.
Install using CLI
npx shadcn@latest add "https://obsidianui.dev/r/light-lines.json"Install Manually
1
Install dependencies
2
Copy the source code
Copy into components/ui/light-lines.tsx
Note: This is a large component (360+ lines) with SVG paths. Install via CLI for the full source code.
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| linesOpacity | number | 0.05 | Opacity of static lines |
| lightsOpacity | number | 0.9 | Opacity of animated lights |
| speedMultiplier | number | 1 | Animation speed multiplier |
| gradientFrom | string | '#2462F6' | Gradient start color |
| gradientTo | string | '#5999F8' | Gradient end color |
| lightColor | string | '#fff' | Color of animated lights |
| lineColor | string | '#fff' | Color of static lines |
| children | React.ReactNode | - | Content to overlay |
Customization
Custom Colors
<LightLines
gradientFrom="#8B5CF6"
gradientTo="#EC4899"
lightColor="#ffffff"
/>