Shadcn.io is not affiliated with official shadcn/ui
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.
Paper Fold Text preview
Type that unfolds. Each letter is split horizontally down the middle: the bottom half stays anchored while the top half starts rotated forward 90° on the X axis — effectively folded down onto itself like a closed flap-display board. As the animation runs the top half rotates back up to vertical, snapping into place to complete the letter. Letters animate in sequence with a configurable stagger so the word reads left-to-right like origami unfolding. Triggered by useInView so the reveal plays when the text scrolls into view. Drop it into a hero, a section header, or any spot where you want type that arrives with the satisfying clack of a Solari board.
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-fold-text text effect into my projectRelated Components
Rolling Text
3D character rolling animation between strings
Flip Words
3D word flipping with letter reveals
Text Reveal
Cinematic text reveals with clip-path animations
Blur Text
Text animation from blur to focus
Splitting Text
Character, word, or line splitting with timing
Text Generate Effect
Word-by-word fade-in reveal
FAQ
Was this page helpful?
Sign in to leave feedback.
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.
Password Text
Text rendered as masking dots that morph one-by-one into the real characters with a staggered cross-fade and subtle scale, built with React, Next.js, and motion/react for privacy-aware UI.