Wobble Text for React

Wobble Text makes a word jiggle like jelly: every letter rocks from side to side and swells a little as it swings back, each a beat behind the one before, so the word moves as one soft piece. Point at it and the wobble grows, then eases back when the pointer leaves.

Use it for a playful word: a game's title, a call to action, a 404, a kids' app. For letters that ride a wave across the line instead of rocking in place, use Wave Text; for letters that squash flat and spring up, Stretch Text. The motion is two CSS keyframe animations the install adds to your stylesheet, a rock and a swell, both scaled by one registered CSS property that a transition eases on hover, so the wobble grows without changing pace. There's no animation library and no JavaScript. With reduced motion the text is still.

Installation

Usage

import { WobbleText } from "@/components/ui/wobble-text";

<h1>
  <WobbleText text="Jelly time" />
</h1>

Demos

Intensity

intensity is how far each letter rocks and swells: subtle for a hint, medium, the default, for a headline, strong for a word that should be silly. duration is one wobble, there and back, 800 ms by default.

Link

Inside a link or a button, the text wobbles harder while the pointer is over it or while the link has keyboard focus, so it answers both. hover={false} keeps the wobble the same throughout.

Accessibility

Screen readers read the text once, as plain text, from a visually hidden copy; the wobbling letters are hidden from them. Words wrap whole, and the line keeps its direction on a right-to-left page. The letters rock by a few degrees, so the word stays readable at every moment, hovered too. With reduced motion the letters are still and upright.

FAQ

API Reference