5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tdce,

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

Drop FluidMediaReveal on the canvas and size the container
Set mediaType and provide image or video (plus poster for video)
Tune contrast, then adjust dpr, dissipation, forceBias, radius
Optionally set maxDpr and eventSource; preview and publish

5a:[["$","$L5d",null,{"post":{"id":"019a56e6-923a-7794-927d-9e3192b9e60f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"5e8da349-b593-4c28-8cdf-3530a0062349","name":"FunTech Inc.","slug":"funtech","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/442429/avatar-t6Q2uE9AuBkFWaqehGf7xaJrlEFQBr.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"O9aWcIJO39Q3MDkYL1at","resolved":true,"title":"FluidMediaReveal","body":"$5e","bodyJson":null,"introduction":"","slug":"fluidmediareveal","author":{"framerUserId":"5e8da349-b593-4c28-8cdf-3530a0062349","name":"FunTech Inc.","slug":"funtech","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/442429/avatar-t6Q2uE9AuBkFWaqehGf7xaJrlEFQBr.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/O9aWcIJO39Q3MDkYL1at/fluidmediareveal-VIVkh5DDZYq6FEZDlNWguyKf6VUUUe","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-25T07:14:16.416Z","updatedAt":"2025-11-05T17:16:31.566Z","publishedAt":"2025-11-06T02:02:22.650Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://spiky-view-994157.framer.app/","price":"10","paymentUrl":"https://funtech.lemonsqueezy.com/buy/c155dfe1-7f98-4560-a5cd-e23cc7edb4d0","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"0EGr0twmCfsCV4V6iISu","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-06T02:02:22.650Z","updatedAt":"2025-11-06T02:02:22.650Z","reported":false}}],"$L5f"]

Suggested for you