---
title: "Fluid Media — Framer component · Best of Framer"
description: "$10.00 · Framer component · by FunTech Inc. · Effects. Fluid Media transforms any image or video into a living, interactive surface."
canonical: "https://framer.elliotli.dev/component/fluid-media"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Fluid Media

# Fluid Media

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

![Fluid Media preview image 1](https://framer.elliotli.dev/og/component/fluid-media/c04945430517550d/1600x1200.jpg)

## Summary

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

## Description

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

1.  Place the component and set **mediaType** (video or image)
    
2.  Provide **video** or **image** and a **poster** if needed
    
3.  Tune **distortionStrength** and **chromaticStrength**
    
4.  Adjust **dpr**, **dissipation**, **forceBias**, and **radius** for feel
    
5.  Preview and publish
    

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

-   All · #9337

## Details

- **Author**: FunTech Inc.
- **Price**: $10.00
- **Published**: 2025-10-15
- **Updated**: 2025-10-15
- **Added**: 2025-10-01
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo