FluidMediaReveal

FluidMediaReveal turns any image or video into an interactive “reveal” layer. Your pointer movement drives a real‑time fluid simulation that sets transparency, unveiling media where motion occurs. It’s full‑bleed, GPU‑accelerated, and sits transparently over your layout for dramatic, on‑brand reveals.

What You’ll Get

• Instant, motion‑driven reveal that feels tactile and premium

• Works with images or video, with graceful low‑power fallback

• Transparent overlay that preserves your underlying design

Customize in Minutes

• Visual: auto‑fit to container; use it as a transparent overlay above backgrounds or content

• Behavior: tune dpr, dissipation, forceBias, radius, and contrast for intensity and fade

• Layout: control renderer maxDpr; choose pointer eventSource (canvas/window); optional fallback while loading

Controls

• mediaType — Input type: video or image. Default: image

• image — Image URL when mediaType=image

• video — Video URL when mediaType=video

• poster — Poster image used in low‑power/autoplay‑blocked cases

• loop — Loop playback for video. Default: true

• contrast — Reveal contrast (alpha emphasis). Default: 1.0

• dpr — Internal sim resolution scale (perf vs quality). Default: 0.2

• dissipation — Trail fade speed; higher = faster decay. Default: 0.99

• forceBias — Pointer force multiplier (reveal strength). Default: 20

• radius — Interaction radius (reveal size). Default: 50

• maxDpr — Renderer pixel ratio cap. Default: 2

• eventSource — Pointer source: canvas or window. Default: canvas

• fallback — Optional React node shown until ready

Perfect For

• Hero headers, launch promos, and campaign takeovers

• Masked transitions and dramatic media reveals

• Portfolios and experimental landing sections

Why It Converts

• Motion‑based reveal grabs attention immediately

• Transparent layer keeps message and layout readable

• Brand‑fit tuning via intensity, radius, and contrast

• Built for Framer—no code required

Quick Start

1. Drop FluidMediaReveal on the canvas and size the container

2. Set mediaType and provide image or video (plus poster for video)

3. Tune contrast, then adjust dpr, dissipation, forceBias, radius

4. Optionally set maxDpr and eventSource; preview and publish