Lumina
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | string | "100%" | Container width |
height | number | string | 120 | Container height |
particleCount | number | 20 | Number of particles to animate |
particleColor | string | "#00f7ff" | Color of the particles |
className | string | undefined | Additional CSS classes for the container |
Features
- Smooth Animation: Particles rise with natural easing
- Customizable: Adjust particle count, color, and container size
- Responsive: Works with any container dimensions
- Performance Optimized: Uses Framer Motion for smooth animations
- Infinite Loop: Particles continuously animate in cycles
Usage Examples
Basic Usage
import { RisingGlow } from "@/components/rising-glow";
export default function App() {
return (
<div className="relative">
<RisingGlow />
<div className="relative z-10 p-8">
<h1>Your content here</h1>
</div>
</div>
);
}Custom Configuration
import { RisingGlow } from "@/components/rising-glow";
export default function App() {
return (
<div className="relative">
<RisingGlow
width="100vw"
height={200}
particleCount={30}
particleColor="#ff6b6b"
className="absolute inset-0"
/>
</div>
);
}As Background Effect
import { RisingGlow } from "@/components/rising-glow";
export default function HeroSection() {
return (
<section className="relative min-h-screen bg-black">
<RisingGlow
width="100%"
height="100vh"
particleCount={50}
particleColor="#00d2ff"
/>
<div className="relative z-10 flex items-center justify-center min-h-screen">
<h1 className="text-6xl font-bold text-white">Welcome</h1>
</div>
</section>
);
}