Pixel Rain
Turn any image into a falling particle rain effect with interactive hover reveal.
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
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
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.
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
Rashid Iqbal
