Shadcn.io is not affiliated with official shadcn/ui
Smallcaps Text
Animated cross-fade between lowercase and proper small-caps using font-variant-caps with per-letter stagger for typographic interactions in React, Next.js, Tailwind CSS, and motion.
Smallcaps Text preview
A refined typographic effect that animates between lowercase and the typeface's true small-caps — uppercase letterforms scaled to lowercase x-height via the OpenType font-variant-caps: all-small-caps feature, not a CSS text-transform fake. The component renders two stacked layers of the same string and cross-fades them letter-by-letter with a configurable stagger, so the eye reads a small wave of glyphs settling into their alternate form. Small-caps usually want a touch more tracking to breathe, so the small-caps layer ships with tracking-wide baked in. Four triggers are supported out of the box: hover, click, a continuous loop on a configurable interval, and view which fires once when the component scrolls into the viewport. Built for editorial headers, type-design demos, and minimal marketing copy where the type should feel considered, not loud. Pass lowercase text — the component handles the variant.
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 smallcaps-text text effect into my projectRelated Components
Caps Toggle Text
Per-letter cross-fade between lowercase and uppercase forms
Splitting Text
Character, word, or line splitting with timing
Variable Proximity
Variable-font weight tracks the cursor's distance
Text Pressure
Variable-font axes respond to cursor pressure
Iris Text
Per-letter iris reveal with circular clip-path
Gradient Text
Animated linear gradient text with optional neon glow
FAQ
Was this page helpful?
Sign in to leave feedback.