Installation
Usage
import { SparkRain } from "@/components/motionx/spark-rain";Basic usage
<div className="h-[500px] w-full">
<SparkRain className="bg-background">
<h1 className="relative z-10 text-4xl font-bold">Your Content</h1>
</SparkRain>
</div>Custom colors
<SparkRain
beamColor="from-emerald-400 via-emerald-400/60 to-transparent"
sparkColor="from-emerald-400 to-emerald-400/60"
beamCount={20}
sparkCount={20}
className="bg-background"
>
<h1 className="relative z-10 text-4xl font-bold">Matrix Rain</h1>
</SparkRain>Minimal, slow beams
<SparkRain
beamCount={8}
sparkCount={8}
minDuration={6}
maxDuration={12}
className="bg-background"
>
<p className="relative z-10 text-muted-foreground">Subtle background</p>
</SparkRain>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content rendered on top of the effect |
className | string | — | Container CSS classes (set background here) |
beamCount | number | 14 | Number of falling beams |
beamColor | string | "from-indigo-500 via-purple-500 to-transparent" | Tailwind gradient classes for beams |
sparkColor | string | "from-indigo-500 to-purple-500" | Tailwind gradient classes for collision sparks |
sparkCount | number | 16 | Number of particles per collision |
minDuration | number | 3 | Minimum beam fall duration in seconds |
maxDuration | number | 8 | Maximum beam fall duration in seconds |
Note: Beams are dynamically positioned based on container width using ResizeObserver. The component fills 100% of its parent — set explicit height on the wrapper.