FancyUI
Saved GitHub Get started
Text — liquid warp — preview

Text — liquid warp

FancyUI FANCYUI

Glyphs warp under the cursor with a chromatic split along the push.

#playful#editorial#hover

Open docs

Use in FancyUI

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

Why it works

A fluid velocity field displaces the text's UVs and the colour channels separate along that vector, so the split shows which way the glyphs were pushed.

When to use it

A single display headline that is meant to be played with.

Things to watch

WebGL on a window-level pointer listener, with a static fallback under reduced motion and below a width. The canvas is decorative; keep the real text in the DOM for assistive tech.

Implementation clues

  • fluid velocity field
  • UV displacement
  • chromatic ratio
  • static below a width