03 — Presets

01 — Presets

One component, three moods.

The same layer, three settings. Each card has its own trail, set to stay inside its frame.

The same layer, three settings. Each card has its own trail, set to stay inside its frame.

Aurora

Rainbow · Screen · Swirl 12

Ink

#15161A · Multiply · Fade 1.5

Smoke

#F4F1EA · Screen · Swirl 25

WebGL

WebGL

GPU fluid solver

GPU fluid solver

0

0

Dependencies

Dependencies

Idle

Idle

Sleeps when still

Sleeps when still

A11y

A11y

Honors reduced motion

Honors reduced motion

Free

Free

For any project

For any project

02 — Playground

Tune it live.

Every control below drives the real component. Find a look you like, then copy the values into the properties panel.

Every control below drives the real component. Find a look you like, then copy the values into the properties panel.

Live previewMove your cursor here
Color
Blend
Cursor
Shading
color: "#7FD8FF"
blend: "screen"
cursor: "ring"
fade: 2.5
force: 6000
radius: 0.25
swirl: 10

04 — Built in

03 — Built in

Small layer, careful details.

Liquid Smoke Cursor is one code component with plain controls. The defaults look right; the details keep it light.

Any color, or rainbow

Pick a color or a color style, or let the hue cycle on its own.

Four blend modes

Screen for dark sites, Multiply for dark ink on light ones, plus Normal and Difference.

Full page or one card

Pin it as a fixed overlay for the whole site, or set Area to Inside to keep it in one frame.

Sleeps when still

Once the trail fades, the simulation stops until the next move. No idle GPU work.

Kind to slow machines

Skips software-rendered WebGL, so devices without a GPU never pay for it.

Reduced motion

Visitors who ask their system for less motion don’t see it. One toggle to change.

05 — Install

04 — Install

Drop it in.

Three steps, no code. It works on any Framer plan, and it’s free for client work too.

Three steps, no code. It works on any Framer plan, and it’s free for client work too.

01

Add it to your project

Copy the component into Framer with one click, or remix this site to get every preset with it.

02

Pin it full screen

Place it on your page, set Position to Fixed and pin all four edges. Clicks pass straight through.

03

Pick a look and publish

Choose a color and a blend mode, then tune fade, force and swirl to taste.

Create a free website with Framer, the website builder loved by startups, designers and agencies.