---
title: "FluidMediaReveal — Framer component · Best of Framer"
description: "$10.00 · Framer component · by FunTech Inc. · Sections. FluidMediaReveal turns any image or video into an interactive “reveal” layer."
canonical: "https://framer.elliotli.dev/component/fluidmediareveal"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/FluidMediaReveal

# FluidMediaReveal

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

![FluidMediaReveal preview image 1](https://framer.elliotli.dev/og/component/fluidmediareveal/bab76715440e57e4/1600x1200.jpg)

## Summary

FluidMediaReveal turns any image or video into an interactive “reveal” layer.

## Description

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
    

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

-   All · #9379

## Details

- **Author**: FunTech Inc.
- **Price**: $10.00
- **Published**: 2025-11-06
- **Updated**: 2025-11-05
- **Added**: 2025-10-25
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes