Fluid Media

Fluid Media transforms any image or video into a living, interactive surface.

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. What You’ll Get High‑impact, pointer‑reactive refraction and ripple effects Setup in minutes—supports image or video with graceful fallback GPU‑accelerated rendering designed for responsiveness Customize in Minutes Input: choose video or image , add poster for low‑power fallback Fluid: tune dpr , dissipation , forceBias , and radius Look: adjust distortionStrength and chromaticStrength Controls 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 Perfect For 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 Why It Converts 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 Quick Start 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