Stamp Text for React

Stamp Text presses a line onto the page a letter at a time: each letter lands from a little above and larger, snaps to its size with a flash of ink, and stays leaning a few degrees, as if stamped by hand. It plays once, as soon as the page shows it, or when it scrolls into view.

Use it for a status such as "Approved" or "Shipped", a badge, a product mark or a short heading with a handmade feel. For a bouncier, cartoon landing with a burst, use Pop Text; for letters that slide in smoothly, Splitting Text. The landing is a CSS keyframe animation the install adds to your stylesheet, and each letter's lean is a sin() of its place in the text, so it looks random but is the same on every render, with no animation library. With reduced motion the text is simply there, still leaning.

Installation

Usage

import { StampText } from "@/components/ui/stamp-text";

<h2>
  <StampText text="Signed and sealed" />
</h2>

Demos

Tilt

tilt is the most a letter leans either way, 4 degrees by default: 0 keeps every letter upright, and 10 gives a hurried, ransom-note look.

Words

by="words" stamps whole words, 220 ms apart, each with its own lean; inside a bordered label it reads as a rubber stamp. Use it too for scripts whose letters join, such as Arabic, which a split between letters would break.

Accessibility

Screen readers read the whole text once, as plain text: the stamped letters are hidden from them, and a visually hidden copy carries it. Words wrap whole, and the line keeps its direction on a right-to-left page. Each letter's ink dips once as it lands, never a repeated flash. With reduced motion every letter is in place from the start.

FAQ

API Reference