Liquid Text for React

Liquid Text makes a line behave like liquid: every letter sways on its own, two slow swells out of step, and where neighbours come close they melt into one blob and pull apart again, like droplets on glass. While the pointer is over it the letters sway further and run into each other.

Use it for a hero word or a short title in a heavy weight, at a large size. For letters that rise and fall on a wave without merging, use Wave Text; for a pointer that bends the text, Elastic Text. Each letter's sway is two CSS keyframe animations, added to your stylesheet by the install and phased by the letter's place, so it never quite repeats; an SVG goo filter (a blur, then a sharp cut of its edge) merges the letters that touch. With reduced motion the letters hold still.

Installation

Usage

import { LiquidText } from "@/components/ui/liquid-text";

<h1 className="font-black text-6xl">
  <LiquidText text="Liquid" />
</h1>

Demos

Intensity

intensity is how far the letters sway: subtle, medium or strong. Hovering eases any of them out to nearly twice as far.

Blur

blur is how far apart letters can be and still melt together, in pixels, 2 by default. More makes thick gel; on smaller text use less, about a twentieth of the font size, or the holes in letters such as e and a fill in.

Accessibility

Screen readers read the text once, from a visually hidden copy; the swaying letters are hidden from them. The goo rounds letters off, so keep it to large, heavy text, a headline of 36 px and up, and check it still reads. With reduced motion the letters hold still, and in forced-colors mode the filter is dropped.

FAQ

API Reference