Fluid Media
Real‑time fluid distortion with chromatic aberration—drive image/video with pointer velocity and render as a full‑bleed, GPU‑accelerated shader for bold, tactile visuals.
Make it with Workshop
Build your own component with AI
Real‑time fluid distortion with chromatic aberration—drive image/video with pointer velocity and render as a full‑bleed, GPU‑accelerated shader for bold, tactile visuals.
Make it with Workshop
Build your own component with AI
Fluid Media transforms any image or video into a living, interactive surface. Pointer motion generates velocity‑driven waves and subtle chromatic splits—cinematic depth with modern, responsive performance.
High‑impact, pointer‑reactive refraction and ripple effects
Setup in minutes—supports image or video with graceful fallback
GPU‑accelerated rendering designed for responsiveness
Input: choose video or image, add poster for low‑power fallback
Fluid: tune dpr, dissipation, forceBias, and radius
Look: adjust distortionStrength and chromaticStrength
mediaType — video or image
loading — Element to display before media is loaded
video — Video URL (when using video input)
poster — Fallback image for low‑power mode
loop — Loop playback for videos
image — Image URL (when using image input)
dpr — Resolution scale for performance/quality balance
dissipation — Trail fade speed; higher = faster decay
forceBias — Input force multiplier (ripple strength)
radius — Interaction radius (ripple size)
distortionStrength — Refractive offset intensity
chromaticStrength — RGB split intensity
Hero media with expressive, living‑surface effects
Product imagery that reacts to cursor/touch
Event/fashion/creative tech landing pages
Portfolios seeking premium shader aesthetics
Instantly grabs attention with motion that feels physical
Calibrated controls keep the message clear and on‑brand
Works across devices with considered performance and fallback
Built for Framer—no custom code required
Place the component and set mediaType (video or image)
Provide video or image and a poster if needed
Tune distortionStrength and chromaticStrength
Adjust dpr, dissipation, forceBias, and radius for feel
Preview and publish
