Parallel Studio
See Deltaproof
Back to blog
5 min readParallel Studio

Liquid Cursor Effect: A Fluid Trail for Webflow, Framer and Any Website

liquid cursorfluid cursorcursor trailwebglwebflowframer

You have probably seen the effect: move the mouse across a page and colorful ink swirls behind it, blooms, and slowly fades. It's usually called a fluid cursor, liquid cursor, or fluid trail, and it's one of the most requested interactive effects for hero sections and portfolio sites.

This post explains how the effect works, what to watch out for, and how to add it to Webflow, Framer, React, or any site that allows a script tag.

Fake trails vs. a real fluid

There are two ways to build a "liquid" cursor.

A fake trail draws fading circles or a line that follows the mouse. It's cheap and fine for a simple trail, but it never swirls. Nothing pushes against anything.

A fluid simulation solves the physics on the GPU: the cursor injects velocity and dye, the velocity carries the dye along, pressure keeps the flow coherent, and swirls form on their own. The result moves because something stirred it, not because it is looping.

Liquid Cursor is the second kind. It does advection, a pressure solve, vorticity confinement for the swirls, and dye, all on the GPU.

Four modes, one tag

The same component can be used four ways:

  • Hero: a fluid background in a box you size.
  • Trail: a see-through overlay over the whole page. It has pointer-events: none, so clicks, hovers, text selection and scrolling all go to your page as usual.
  • Distort: the fluid moves an image or video like liquid glass, with a chromatic split.
  • Reveal: stirring wipes a cover image away to show another underneath; the cover flows back as the fluid settles.

Plain HTML

Upload liquid-cursor.min.js from the download, add the script once, and place the tag:

<script src="/js/liquid-cursor.min.js" defer></script>

<!-- a hero background -->
<pf-liquid-cursor preset="ink" style="height: 100vh"></pf-liquid-cursor>

<!-- or a cursor trail over the whole page -->
<pf-liquid-cursor preset="neon-trail"></pf-liquid-cursor>

There are 12 presets: ink, smoke, neon-trail, watercolor, lava-lamp, plasma-ink, mono-smoke, paper-ink, aurora-trail, glass-distort, chroma-ripple, and liquid-reveal. Watercolor uses an ink blend that absorbs light like pigment on paper, so it works on light pages; mono-smoke and paper-ink are made for them too.

Webflow

  1. Paste script/webflow/footer-code.html from the download into Site settings → Custom code → Footer code. Nothing to host.
  2. Add a Code Embed in your hero with the tag below, set to absolute and full size. For a site-wide trail, put a trail tag in the Footer code instead.
  3. Publish. Custom code runs on the published site.
<pf-liquid-cursor preset="plasma-ink" style="position: absolute; inset: 0; height: 100%"></pf-liquid-cursor>

Custom code needs a paid Webflow site plan.

Framer

  1. Go to Assets → Code → + → New component file and name it LiquidCursor.
  2. Replace the contents with framer/LiquidCursor.tsx from the download and save.
  3. Drag it onto the canvas, pick a preset and a mode. For Distort and Reveal, pick the images in the properties panel.

The canvas shows a still frame to keep the editor fast; set On Canvas to Live to stir it there.

React and Next.js

Copy react/LiquidCursor.tsx into your project (React 18+). Put it in a box with a height; children are drawn on top:

import LiquidCursor from "./LiquidCursor"

<section style={{ height: "100vh" }}>
  <LiquidCursor preset="ink">
    <h1>Your headline</h1>
  </LiquidCursor>
</section>

On Next.js the server renders a CSS stand-in in the preset's colors, and WebGL takes over in the browser.

Tuning the feel

Presets are starting points. Useful attributes from the docs:

  • curl: how much it swirls (0 to 60, default 20).
  • dissipation: how fast the dye fades (0 to 5; 0 keeps it).
  • velocity-dissipation: higher feels thicker, like syrup.
  • bloom and rays: glow around bright dye, and light shafts streaming from the pointer.
  • blend: light for dark backgrounds, ink for light ones.
  • wanderers: slow drifting splats that keep it alive when nobody is moving the mouse; they step aside the moment someone does.

Elements with a data-liquid-splat attribute splash the fluid when hovered, so your buttons can stir it too.

Touch, performance and accessibility

  • Touch: each finger stirs its own stream and touch never blocks scrolling. A tap sends a burst.
  • Performance: the script is 14.8 KB gzipped with no dependencies. It pauses offscreen, sleeps once the fluid is still, and on slow devices simulates on a coarser grid rather than making the canvas blurrier.
  • Reduce Motion: a hero shows a still frame and a trail doesn't draw at all.

When not to use it

  • Over body text where the colors would hurt readability. Use a hero box, or a subtle preset like mono-smoke.
  • Anywhere you can't add custom code.

See it in context

Liquid Cursor is one of the Parallel Studio web effects on /effects. The Liquid Cursor page lets you try the presets with your own mouse, which tells you more than any screenshot.

Pricing

Liquid Cursor is $14 one-time for a single project, with free updates to v1.x. The full catalog is available through the All-Access Pass for $49.

Start with one trail or one hero, test it on a phone, and keep the rest of the page quiet.