Ripple Text for React

Ripple Text turns a line into the surface of a pond. Press a letter and a wave runs out from it to both ends of the text: each letter bobs up and settles a beat after its neighbour, a little lower the further the wave has come. Press again, anywhere, and a fresh wave starts from there.

Use it for a playful headline, a 404 page or a title that should answer a tap. For a wave that rolls on its own, use Wave Text; for a ripple on a button, Ripple Button. A press writes the letter's place to a CSS variable and restarts a CSS keyframe animation the install adds to your stylesheet, delayed on each letter by its distance from that place: no state, no animation library and no frame loop. With reduced motion the letters stay put.

Installation

Usage

import { RippleText } from "@/components/ui/ripple-text";

<h1>
  <RippleText text="Make a splash" />
</h1>

Demos

Intensity

intensity is how high the first crest lifts the letter pressed: subtle, medium (the default) or strong. Further out the wave is lower, never under a quarter of that.

Timing

stagger is the time the wave takes from one letter to the next, 45 ms by default, so a lower value runs it faster; duration is how long one letter takes to bob and settle, 900 ms.

Accessibility

Screen readers read the text once, from a visually hidden copy, never letter by letter. The ripple is decoration: it answers the pointer only, has no stop in the tab order and changes nothing, so keyboard and screen reader users miss nothing, and the letters are back on their line within a second. With reduced motion a press does nothing.

FAQ

API Reference