Follow Cursor

ProInteractivityWebGLpowered by @vectorvesper/motion

A WebGL2 fluid simulation that smears colour through a velocity field as the pointer moves. Colour is injected where a damped follower trails the cursor, so the flow keeps easing out after the pointer stops. Four configurable colour stops with tunable speed and sensitivity, and a capability probe that fails closed when WebGL2 is unavailable.

Follow Cursor

Pointer

Fullscreen to test full viewport

Included with membership

Members install Follow Cursor with one command and get the full source, the usage code and the Framer remix, licensed for client work. One membership covers the whole library and the CLI.

See Pro pricing Log in

When to use it

A full-viewport backdrop that reacts to the pointer — a landing page, a hero, a section that is mostly atmosphere. It is a background layer, so it wants content on top of it and a container that gives it a size. On a page that is mostly text it is a lot of continuous motion behind the reading.

Give the parent position: relative and a height, then stack your content above it with a higher z-index.
Pick colours that sit close together in tone. Four distant hues turn to mud where the fluid mixes.
Lower opacity rather than dulling the colours when it competes with the content on top.
Give it a bounded container rather than the whole viewport if it feels heavy — it draws at full device resolution with no quality step-down, so area is the cost.

Avoid:

Do not put readable text directly on it without a backdrop. The fluid moves under the words and the contrast changes as it does.
Do not mount more than one on a page — each holds its own drawing context, and browsers cap how many can exist at once.
Do not use it behind a form or anything requiring sustained attention.

Props

A living background that reacts to the pointer. Colour flows across the whole surface on its own, and moving the cursor pushes through it like a hand through smoke. Sits behind your content and fills whatever box you give it.

<FollowCursor />

The background surface. Fills its container, so give the parent a height.

Prop	Type	Default	Description
`fluidMode`	`"aurora" \| "ink" \| "silk" \| "plasma"`	`"aurora"`	The look of the flow. Aurora drifts in wide sheets, ink bleeds and spreads, silk stays smooth and banded, plasma churns.
`color1`	`ShaderBgColor`	`[0.02, 0.01, 0.08]`	Darkest of the four colours the gradient mixes between, as 0–1 channel values. This one reads as the background.
`color2`	`ShaderBgColor`	`[0.32, 0.04, 0.65]`	Second gradient colour.
`color3`	`ShaderBgColor`	`[0.0, 0.85, 0.95]`	Third gradient colour.
`color4`	`ShaderBgColor`	`[0.95, 0.15, 0.65]`	Fourth gradient colour — usually the brightest accent.
`speed`	`number`	`1.0`	How fast the background moves on its own, with no pointer involved. 0 holds it still.
`sensitivity`	`number`	`1.0`	How hard the pointer pushes into the flow. Higher values leave a stronger wake behind a quick movement.
`density`	`number`	`1.0`	How tightly the colour bands pack together. Higher values give finer detail across the same area.
`flowStrength`	`number`	`1.0`	How far the flow distorts the gradient. Low values keep it close to a plain gradient; high values smear it.
`vignetteStrength`	`number`	`0.6`	Darkening toward the edges. 0 removes it and leaves the colour flat to the border.
`opacity`	`number`	`1.0`	Overall opacity of the surface, 0–1.
`mount`	`"auto" \| "eager"`	`"eager"`	When to build the fluid simulation. The default builds it on mount. Set "auto" to wait until the background is near the viewport and the page has frame headroom. This is the most expensive background in the set — the simulation allocates its working buffers up front — so deferring it is worth more here than elsewhere. Neither setting takes it off the shared frame loop or overrides the reduced-motion preference. A scene running its own loop would be invisible to the scheduler, so it could not be set aside under load, and it would slow every other animation on the page rather than only itself.

It has no reduced-motion state — the surface keeps flowing on its own whatever the visitor's preference. This is continuous, large-area motion, so render something else entirely when the preference is set rather than expecting the component to soften.

It draws at the screen's own pixel ratio and does not step down on constrained devices, so on a full-viewport section it is the most expensive thing on the page. Where the GPU cannot support the fluid path at all it stops rather than falling back — the capability probe fails closed.

Client component. It opens a GPU drawing context on mount — import it dynamically with ssr: false if your route renders on the server.

This is the full-surface background. For a pointer trail drawn over your page instead, see Halo Cursor.

It draws on the shared frame loop rather than starting one of its own, so putting several animated components on a page costs one callback, not one each, and the scheduler can set decorative work aside when frames get tight. This is the most expensive background in the set, so it benefits most from mount="auto": the simulation buffers are not allocated until the background is close and the page can afford them. If the browser takes the drawing context away — which it does under memory pressure, and more often on a page with several of these — the component reports it and rebuilds once the context comes back, instead of leaving a permanently black rectangle.

Back to all components