---
title: "Fluid Image — Free Framer component · Best of Framer"
description: "Free Framer component · by Sanna Granqvist · Effects · ranked #37 among Framer components. WebGL fluid that follows your cursor"
canonical: "https://framer.elliotli.dev/component/fluid-image"
---

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

# Fluid Image

WebGL fluid that follows your cursor

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

![Fluid Image preview image 1](https://framer.elliotli.dev/og/component/fluid-image/926070e661f23d44/1600x1200.jpg)

## Summary

WebGL fluid that follows your cursor

## Description

The effect runs on four gradient colors that blend and shift as the cursor moves. Gradient toggle, radius, strength, distortion, hue shift, and color cycle speed all live under the Effect group.

Animation controls cover overall speed, trail persistence, and pointer smoothing — smoothing affects how closely the fluid tracks the cursor versus drifting behind it. Overflow padding lets the canvas bleed past the image edges for a softer boundary.

Under Advanced: quality toggle (high uses curl noise for a cleaner flow field, low is faster), fade-in duration, and max DPR cap. The image prop hot-reloads the texture without destroying the GL context, so swapping images in the CMS works cleanly.

Click anywhere on the image to trigger a radial burst that expands and decays.

The RAF loop pauses when the pointer leaves and all effects have settled — it doesn't keep running in the background.

Static fallback renders a plain image for SSR and thumbnails. Reduced motion disables pointer tracking.

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

-   All · #37

## Details

- **Author**: Sanna Granqvist
- **Published**: 2026-04-08
- **Updated**: 2026-04-07
- **Added**: 2026-03-06
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows