Future UI

Particle Rain

✦ Effects

Directional canvas particle rain with corner-curving and edge-fade effects.

particlesphysicscanvaseffectwrapper

No preview available

Canvas2D Physics ~ Directional particle rain with corner curving

Controls

#a855f7
200
0.7
0.8

Effects / React Component

About Particle Rain

Directional canvas particle rain with corner-curving and edge-fade effects.

Category Effects
Framework React + TypeScript
Tags particles, physics, canvas, effect, wrapper

Install Particle Rain in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/particle-rain.json?key=YOUR_LICENSE_KEY"

Usage example

import { useRef } from 'react';
import { ParticleRain } from './ParticleRain';

export default function Example() {
  const cardRef = useRef<HTMLDivElement>(null);
  return (
    <div style={{ position: 'relative' }}>
      <ParticleRain
        targetRef={cardRef}
        accentColor="#a855f7"
        direction="top"
        particleCount={200}
        intensity={0.7}
        fadeStart={0.8}
      />
      <div ref={cardRef} style={{
        width: 320, height: 200, borderRadius: 16,
        background: '#111', color: '#fff',
      }}>
        Your content here
      </div>
    </div>
  );
}