Liquid Cursor · a real-time fluid simulation for your cursor · v1.0
Stir your website.
Real fluid dynamics on the GPU, moved by your visitors' cursor and fingers. Ink behind your hero, a liquid trail over the whole page, pictures that ripple like glass, and covers that wipe away. A script tag, a React component or a Framer component, for every platform.
One-time payment · Instant download · Single-project license · Free v1.x updates
- Real fluid dynamics on the GPU
- Hero, trail, distort, reveal
- Crisp at any pixel density
- No dependencies · 14.8 KB gzipped
Showcase: all 12 presets and the four modes
Ink
Blue and violet ink in dark water: glossy, swirling, alive under the cursor. A hero background that waits for your visitors.
preset="ink"Open Ink in the playground →Neon trail
A cursor trail of light over the whole page. See-through and click-through: your site stays exactly as it is under it.
preset="neon-trail"Open Neon trail in the playground →Glass distort
The fluid's velocity moves a picture like liquid glass, with a chromatic split. An image, a video, or an <img> on your page.
preset="glass-distort" image="dusk.jpg"Open Glass distort in the playground →Liquid reveal
Stir to wipe the night away and find the dusk underneath. The cover flows back as the fluid settles.
preset="liquid-reveal" image="dusk.jpg" cover-image="night.jpg"Open Liquid reveal in the playground →Plasma ink
Rainbow plasma with strong swirls, bloom and light shafts that stream from your cursor.
preset="plasma-ink"Open Plasma ink in the playground →Watercolor
Pigment on paper: the ink blend absorbs light instead of adding it, so it works on light pages. Slow and thick.
preset="watercolor"Open Watercolor in the playground →Mono smoke
Black ink smoke following the cursor over a light page. A quiet trail for editorial and portfolio sites.
preset="mono-smoke"Open Mono smoke in the playground →Lava lamp
Big, glossy, slow blobs that move like hot wax when you push them. Thick and lazy.
preset="lava-lamp"Open Lava lamp in the playground →Chroma ripple
Strong chromatic ripples over a poster, tinted with a rainbow trail.
preset="chroma-ripple" image="poster.jpg"Open Chroma ripple in the playground →Aurora trail
Green, blue, violet and pink light trailing the cursor across a dark site.
preset="aurora-trail"Open Aurora trail in the playground →Smoke
Soft grey smoke, with light shafts that stream from the pointer through it.
preset="smoke"Open Smoke in the playground →Paper ink
Navy ink dropped on paper: a calm, print-like fluid for light brands.
preset="paper-ink"Open Paper ink in the playground →
Every input stirs it
This one has no wanderers, so only you move it. Move, click, swipe, hover the buttons (they have data-liquid-splat), or call the API. Then put a real trail over this whole page.
- Pointer and multi-touch. Every move pushes the fluid with its own speed and direction. Each finger is its own stream, and touch never blocks the page from scrolling.
- Click and tap bursts. A ring of fluid bursts out from every click or tap.
- Wanderers. While nobody stirs, slow drifting splats keep it alive. They step aside the moment someone moves.
- Scroll. Scrolling the page pushes fluid in from the sides.
- Your elements. Anything with data-liquid-splat splashes the fluid when hovered, in its own color. Try the buttons.
- JavaScript. splat(x, y, dx, dy, color), burst(), clear(), pause() and resume(): splash on your own events.
Playground
Pick a preset, then change its mode, colors, blend, curl, dissipation, viscosity, splat radius, bloom and shading. The code under the preview follows along: copy it for a script tag, React or Framer.
Move over it, click it, swipe it. Distort and reveal use pictures from this page.
<script src="/liquid-cursor.min.js" defer></script>
<pf-liquid-cursor preset="ink" style="height: 100vh"></pf-liquid-cursor>Like what you made? The snippet runs with the script from the download.
Buy Liquid Cursor · $14Works with
- FramerCode component with a properties panel: presets, Mode, Image and Cover Image pickersIn the v1.0 download
- WebflowPaste the footer code, then a Code Embed with <pf-liquid-cursor> (or a site-wide trail in the footer)In the v1.0 download
- Plain HTML / any siteOne script + <pf-liquid-cursor preset="ink">In the v1.0 download
- WordPressCustom HTML block with the script and the tagIn the v1.0 download
- ShopifyTheme assets + a Custom Liquid section (or a store-wide trail in theme.liquid)In the v1.0 download
- Squarespace, WixCode Injection / embed block (plan must allow custom code)In the v1.0 download
- React, Next.js, Vite<LiquidCursor preset="ink">children</LiquidCursor>, server-rendered placeholderIn the v1.0 download
What it does
- A real fluid. Stable fluids on the GPU: advection, divergence, a pressure solve, vorticity confinement for the swirls, and dye. Nothing loops: it moves because something stirred it.
- Four modes. A hero background; a cursor trail over the whole page (see-through, click-through); an image or video that the fluid moves like liquid glass; and a reveal that wipes a cover away to show what's underneath.
- Every input. Mouse, pen and multi-touch with their velocity, click and tap bursts, wanderers while idle, scroll pushes, hover splashes from your own elements, and a JS API.
- 12 looks, endless variations. Ink, smoke, neon trail, watercolor, lava lamp, plasma ink, mono smoke, paper ink, aurora trail, glass distort, chroma ripple, liquid reveal. Or your own: rainbow, palette, single or image colors; light or ink blending; curl, dissipation, viscosity, splat radius and force; bloom, light shafts and glossy shading.
- For light pages too. The ink blend absorbs light like pigment on paper, so it looks right on white and cream, not just on black.
- Crisp at any pixel density. The canvas is always at the screen's full resolution; the simulation runs on its own grid and is drawn up with a smooth bicubic filter, shading comes from a filtered surface (no sparkly specks), and the output is dithered against banding. Slow devices get a coarser simulation, never a blurrier canvas.
- Polite. Pauses offscreen, sleeps once the fluid is still, shares the WebGL budget with our other components, shows a still frame with Reduce Motion (a trail simply disappears), and falls back to Canvas 2D without WebGL.
What's in the download
- liquid-cursor.min.js: drop-in script for any website (36 KB, 14.8 KB gzipped)
- liquid-cursor.esm.js + TypeScript types, for bundlers
- react/LiquidCursor.tsx: React component (React 18+, one file, server-rendered placeholder)
- framer/LiquidCursor.tsx: the Framer code component, with Mode and image pickers
- demo.html with every preset and mode, and quick starts for each platform
- Free updates to v1.x
Single-project license (LICENSE.md in the download): one website or project per license. The simulation is our own code; its approach follows Pavel Dobryakov's WebGL-Fluid-Simulation (MIT), credited in LICENSE.md.
Install in about a minute
Upload liquid-cursor.min.js from the download to your site.
Add the script once, and the tag where the fluid goes. Give it a size, or use a trail preset for the whole page.
Pick a preset, or set colors, mode, curl, bloom and the rest as attributes.
<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>Paste script/webflow/footer-code.html from the download into Site settings → Custom code → Footer code (nothing to host).
Add a Code Embed in your hero with the tag below, set to absolute and full size. Or put a trail tag in the Footer code for the whole site.
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.
Upload liquid-cursor.min.js to your theme folder (or with a file manager plugin) and copy the URL.
Add a Custom HTML block with the script and the tag.
<script src="https://your-site.com/wp-content/themes/your-theme/js/liquid-cursor.min.js" defer></script>
<pf-liquid-cursor preset="watercolor" style="height: 560px"></pf-liquid-cursor>On WordPress.com, you need a plan that allows custom code.
Online Store → Themes → Edit code → Assets: upload liquid-cursor.min.js, and add the script tag before </body> in theme.liquid.
Add a Custom Liquid section with the tag.
<script src="{{ 'liquid-cursor.min.js' | asset_url }}" defer></script>
<pf-liquid-cursor preset="glass-distort" image="{{ 'hero.jpg' | asset_url }}" style="height: 600px"></pf-liquid-cursor>Copy react/LiquidCursor.tsx into your project. It needs only 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>Next.js: the server renders a CSS stand-in in the preset's colors; WebGL takes over in the browser.
In your Framer project, go to Assets → Code → + → New component file, and name it LiquidCursor.
Replace the file's contents with framer/LiquidCursor.tsx from the download, and save.
Drag LiquidCursor onto the canvas, pick a preset and a mode; for Distort and Reveal, pick the images in the panel.
On the Framer canvas you see a still frame, which keeps the editor fast. Set On Canvas to Live to stir it there.
Squarespace and Wix: add the script and the tag in a Code or Embed block (your plan must allow custom code). The download's README has a quick start for every platform and the full settings reference.
Liquid Cursor
$14 one-time
- Script tag, React and Framer builds
- All 12 presets, the four modes and every setting
- Free v1.x updates
- Single-project license
Secure checkout by Polar. Instant download after payment.
FAQ
Where does it work?
Anywhere you can add a script tag: Webflow, WordPress, Shopify, Squarespace, Wix, plain HTML. Also React/Next.js and Framer. Site builders need a plan that allows custom code.
How is this different from Shader Gradients?
Shader Gradients are animated backgrounds that move on their own. Liquid Cursor is a fluid simulation: nothing moves until your visitors stir it (or the optional wanderers do), and it can also be a cursor trail over the page, distort your images, or reveal one image under another. They can share a page.
Does the trail get in the way of my site?
No. A trail is a see-through overlay with pointer-events: none, so clicks, hovers, text selection and scrolling all go to your page as usual. Where there's no dye it's fully transparent.
Can I use my own images and videos?
Yes. Distort and reveal take any image or video URL, or an <img>/<video> already on your page by CSS selector. Images on another domain need CORS headers (Access-Control-Allow-Origin); the component asks for them automatically, and the browser console says so if they're missing.
Will it slow my page down?
The script is 14.8 KB gzipped with no dependencies. It runs only while on screen, sleeps once the fluid is still, and on slow devices it simulates on a coarser grid instead of lowering the resolution.
Does it work on phones?
Yes. Each finger stirs its own stream while the page scrolls normally, a tap sends a burst, and it renders at the phone's full pixel density.
What about Reduce Motion and old browsers?
With Reduce Motion on, a hero shows a still frame and a trail doesn't draw at all. Browsers without the WebGL features it needs get a Canvas 2D still.
What's the license?
Single project: one website or project per purchase. The details are in LICENSE.md in the download. The simulation is our own code; its approach follows Pavel Dobryakov's MIT-licensed WebGL-Fluid-Simulation, credited in LICENSE.md.
Do I get updates?
Yes, free updates for v1.x.
Questions before buying?
Email hi@gunnargray.com.
Hear about updates
The launch, new presets, v1.x releases and the occasional new tool. No more than that.