Smallcaps Text for React

Smallcaps Text turns a line into small capitals, capitals drawn at the height of lowercase letters, and back: each letter dissolves into its other form a moment after the one before it, with a slight rise, so the change drifts slowly along the line. It turns while the pointer is over it, or on its own, in a loop.

Use it for editorial headings, running heads, a byline or quiet navigation, where the type should feel considered rather than loud. For the bolder turn to full capitals, use Caps Toggle Text; for words that change altogether, Morph Text. The text and its small capitals sit in the same place, the second set with the font's own small capitals through CSS font-variant-caps, 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 form changes at once and the loop rests.

Installation

Usage

import { SmallcapsText } from "@/components/ui/smallcaps-text";

<a href="/essays">
  <SmallcapsText text="Essays" />
</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.

Tracking

Small capitals read better with a little more space between them, so they get 0.05em of letter spacing; --smallcaps-text-tracking sets it, here opened up for a running head. With trigger="loop", duration is how long each form stays, 3000 ms by default, and stagger the time between one letter settling and the next, 50 ms.

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 form changes without fading, and the loop stays on the text as written.

FAQ

API Reference