Drift Text for React

Drift Text lets each letter float on its own: it bobs a little up and down and sways from side to side, slowly, at a pace of its own, so nothing lines up and the motion hardly ever repeats. The line stays readable throughout; it just never quite sits still.

Use it for calm, ambient copy: a hero line on a quiet page, a wellness app, a background caption. For letters that move together on a wave, use Wave Text; for the whole line breathing as one, Breathing Text. Each letter runs two CSS keyframe animations the install adds to your stylesheet, a bob and a sway, whose lengths and starting points come from a small formula of the letter's place, so the server and the browser draw the same thing. There's no animation library and nothing random. Pointed at, the letters hold still; with reduced motion they sit on the line.

Installation

Usage

import { DriftText } from "@/components/ui/drift-text";

<h1>
  <DriftText text="Let your mind wander" />
</h1>

Demos

Intensity

intensity is how far each letter wanders and turns: subtle is barely there, medium, the default, a gentle float, strong a line adrift in the wind.

Duration

duration is how long a letter takes, on average, to bob and sway once, 5000 ms by default; each letter's own time is a little longer or shorter. A short one is restless, a long one sleepy.

Accessibility

Screen readers read the text once, as plain text, from a visually hidden copy; the drifting letters are hidden from them. Words wrap whole, and the line keeps its direction on a right-to-left page. The letters move by a few hundredths of their size, so the text stays readable at every moment. The motion never ends, so it holds still while the pointer is over it, or while a link around it has keyboard focus, and with reduced motion it doesn't move at all.

FAQ

API Reference