PixelRainFX

Pixel Rain

Turn any image into a falling particle rain effect with interactive hover reveal.

Features

• 5 Rain Filters — Matrix, Duotone, Grayscale, Amber, and Original Color

• Mouse / Touch Reveal — Hover to reveal the original image underneath

• 3 Reveal Shapes — Circle, Square, and Irregular (organic noise edge)

• Smooth Trail — Optional cursor trail with fade-in/out and shrinking tail

• Soft Edge — Toggle between hard cutoff and smooth gradient reveal borders

• Image Fit — Fill, Cover, Contain, and Center modes

• High Performance — 60fps with 40,000+ particles using pixel-level rendering

Customizable Props

Prop Description Image Any image from Framer assets Image Fit Fill, Cover, Contain, Center Rain Filter Matrix, Duotone, Grayscale, Original Color, Amber Reveal Size 0–500px (set 0 to disable) Reveal Shape Circle, Square, Irregular Reveal Edge Hard or Soft Fade Smooth Trail On/Off trailing cursor effect Bright Color Duotone mode bright areas Dark Color Duotone mode dark areas Background Canvas background color Column Gap Horizontal spacing between columns Dash Height Height of each dash segment Dash Gap Vertical gap between dashes Density Particle count (1K–100K) Speed Base fall speed Contrast Gamma curve on brightness Radius Border radius

How It Works

Particles fall in vertical columns. Each particle reads the brightness of the image pixel beneath it — bright areas slow particles down (making them "stick"), dark areas let them fall fast. This creates a natural image reveal through motion.

The reveal cursor shows the original full-color image, with optional smooth follow and fading trail.

Tips

• Start with Matrix filter for a sci-fi look

• Use Duotone with your brand colors for on-brand effects

• Set Reveal Size to 0 if you just want the rain effect without interaction

• Increase Density for sharper image detail (costs more GPU)

• Works on mobile and tablet with full touch support