Shadcn.io is not affiliated with official shadcn/ui
Paper Cut Text
Layered paper-cut craft typography with stacked depth layers, soft drop shadows, and optional cursor-driven parallax tilt for an editorial paper-craft aesthetic for React, Next.js, motion, and Tailwind CSS.
Paper Cut Text preview
Type that looks hand-cut from layered colored paper. Each glyph is rendered as a stack of three to four offset copies — each layer a touch darker and shifted a pixel down-right — and a soft drop-shadow filter glues them together so the seams look like real paper edges catching light. The top layer is the visible color; everything beneath is gradient depth. With tilt enabled, the cursor's position over the component becomes a parallax driver: back layers shift more than the top, so as you move the mouse the stack appears to rotate in 3D space, like a tactile pop-up book. The motion is spring-damped via Motion's useSpring so the response feels physical rather than twitchy. Drop it on editorial hero typography, design portfolios, craft-aesthetic landings, or anywhere you want the page to feel made by hands rather than rendered by a CDN.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the paper-cut-text text effect into my projectRelated Components
Paper Fold Text
Origami-style fold-and-unfold reveals
Stamp Text
Letters that stamp in like rubber stamps with overshoot
Line Shadow Text
Diagonal line-pattern shadow for graphic depth
Gradient Text
Animated gradient sweeping through letters
Chromatic Text
RGB channel separation aesthetic
Text Pressure
Variable-font pressure response to cursor
FAQ
Was this page helpful?
Sign in to leave feedback.
Paint Text
Cursor-driven text painter that reveals each glyph as the pointer crosses it, leaving the painted letters fully visible while unpainted glyphs render as a soft ghost outline, built with React, Next.js, motion, and TypeScript.
Paper Fold Text
Letters that unfold into place from a folded paper crease, with the top half rotating down to reveal each character for an origami-style reveal animation for React applications.