Paper Cut Text for React

Paper Cut Text stacks a line on sheets of itself, as if each letter were cut from layered paper: every sheet below sits a step lower and a shade closer to the page, and one soft shadow glues them together. While the pointer is over it the stack tilts toward it, the deeper sheets shifting further, like a pop-up book.

Use it for an editorial headline, a portfolio, or a craft-themed page that should feel made by hands. For a single still shadow of lines, use Line Shadow Text; for a pressed, embossed look, Emboss Text. The top sheet is the real text and the others are copies in shades of its colour; the pointer writes two registered CSS properties that a transition eases, so the tilt springs without an animation library. With reduced motion it doesn't tilt.

Installation

Usage

import { PaperCutText } from "@/components/ui/paper-cut-text";

<h1>
  <PaperCutText text="Hand cut" />
</h1>

Demos

Layers

layers is how many sheets lie under the top one, 4 by default: two read as a crisp two-tone cut, six or seven as a deep pop-up. tilt={false} holds the stack still.

Color

The sheets are shades between the text's colour and the page's: on a coloured surface, set --paper-cut-text-base to that surface's colour so the deeper sheets fade into it.

Accessibility

The top sheet is the real text, read once by screen readers and selectable; the sheets under it are copies hidden from them and from the pointer. The tilt answers a mouse or pen, not touch, and with reduced motion the stack stays still. In forced-colors mode the sheets are dropped.

FAQ

API Reference