---
title: "PixelRainFX — Free Framer component · Best of Framer"
description: "Free Framer component · by Rashid Iqbal · Cursors. Image reveal with falling particle rain"
canonical: "https://framer.elliotli.dev/component/pixelrainfx"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/PixelRainFX

# PixelRainFX

Image reveal with falling particle rain

[View on Framer](https://framer.com/marketplace/components/pixelrainfx/?via=elliot-li)

![PixelRainFX preview image 1](https://framer.elliotli.dev/og/component/pixelrainfx/5480c9216dbcbb26/1600x1200.jpg)

## Summary

Image reveal with falling particle rain

## Description

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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5478

## Details

- **Author**: Rashid Iqbal
- **Published**: 2026-05-04
- **Updated**: 2026-06-08
- **Added**: 2026-04-06
- **Categories**: Cursors

## More like this

-   [Ribbon Hero](/component/ribbon-hero) — Divyesh WebCraft · Free — 3D ribbon with smooth motion
-   [Spider Hunt](/component/spider-hunt) — Karim Saif · $6 — ٍpider that tracks your cursor
-   [Pixel Fluid](/component/pixel-fluid) — Jamik · $12 — Fluid cursor trail in pixels/ASCII
-   [CursorImageTrail](/component/cursorimagetrail) — princeee · $20 — Image Trail is a dynamic Framer component that creates an immersive hover experience by displaying a sequence of images that trail behind…