FancyUI
Saved GitHub Get started
Canvas — fluid smoke trail — preview

Canvas — fluid smoke trail

FancyUI FANCYUI

A WebGL smoke trail whose splats follow the pointer's velocity.

#playful#glow#hover

Open docs

Use in FancyUI

Type
Interaction
Interaction
Hover
Style
Playful, Glow
Code availability
Open source

Why it works

Velocity, not position, drives each splat, so a fast flick throws a long plume and a slow drag leaves a soft wisp. Dye and velocity dissipate at different rates, which is what makes the trail curl before it fades.

When to use it

A playful hero or a portfolio splash where the cursor is the toy.

Things to watch

A WebGL simulation on window-level mouse and touch listeners. It does not honour reduced motion on its own, and it is a singleton by default — one per page. Blank until the pointer moves.

Implementation clues

  • WebGL fluid sim
  • splat force from pointer velocity
  • dye dissipation
  • pause when hidden