Pendulum Text for React

Pendulum Text hangs each letter from a thread. Brush a letter with the pointer and it swings away from it; press and every letter swings away from the press, the nearest hardest. Each one sways back and forth, smaller every time, until it hangs still again, and since no two threads are quite the same length, letters swung together slowly drift out of step. At rest each letter hangs at a slight tilt of its own.

Use it for a playful headline, a shop sign, a toy or a 404 page. For letters that wobble on their own, use Wobble Text; for a slow drift that never stops, Drift Text. A swing is a CSS keyframe animation the install adds to your stylesheet, a damped turn about a point above the letter; a handler writes how hard and which way to a CSS variable and restarts it, with no state, no animation library and no frame loop. With reduced motion the letters hang still.

Installation

Usage

import { PendulumText } from "@/components/ui/pendulum-text";

<h1>
  <PendulumText text="Swing" />
</h1>

Demos

Angle

angle is the widest a letter swings either way, 20° by default, and duration how long a swing takes to die down, 2400 ms. A gentle sway wants a small angle and a short swing; a wild one, both larger.

Strings

The threads are faint lines in the text's own colour. strings={false} hides them; the letters still hang from the same point above them.

Accessibility

Screen readers read the text once, from a visually hidden copy, never letter by letter. The swing 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. The letters stay readable as they sway, and with reduced motion they hang still, each at its slight tilt.

FAQ

API Reference