Caps Toggle Text for React

Caps Toggle Text turns a line to capitals and back without moving it: each letter cross-fades to its other case a moment after the one before it, the leaving letter shrinking and sinking as its twin grows in, so a wave of capitals runs along the line. It turns while the pointer is over it, or on its own, in a loop.

Use it for navigation links, a button label or a wordmark that should react to the pointer with a typographic touch. For the quieter change to the font's small capitals, use Smallcaps Text; for words that change altogether, Morph Text. The text and its capitals sit in the same place and CSS transitions turn each letter, or CSS keyframe animations the install adds to your stylesheet for the loop, with no animation library and no script. With reduced motion the case changes at once and the loop rests.

Installation

Usage

import { CapsToggleText } from "@/components/ui/caps-toggle-text";

<a href="/work">
  <CapsToggleText text="work" />
</a>

Demos

Hover

trigger="hover", the default, turns the text while the pointer is over it, and back when it leaves. Inside a link or a button it also turns while that has keyboard focus, so the keyboard sees what the pointer sees.

Timing

With trigger="loop", duration is how long each case stays, 2400 ms by default. stagger is the time between one letter turning and the next, 35 ms: short for a snap, long for a slow wave.

Accessibility

Screen readers read the text once, as written, from a visually hidden copy; the two layers of letters are hidden from them. The loop pauses while the pointer is over it, and with reduced motion the case changes without fading or scaling, and the loop stays on the text as written.

FAQ

API Reference