Make your AI a shadcn expert
Previous: Drift Text
Next: Echo Text

Drop Cap Text

Editorial-style illuminated drop-cap that scales the first letter to span multiple lines, with the paragraph wrapping naturally and an animated reveal for React applications.

Drop Cap Text preview

Scroll to load preview

An editorial drop-cap done right — the kind of opening flourish you'd expect on a New York Times feature, a Granta essay, or a hardback chapter heading. The first character of the paragraph is pulled out as a large initial that spans two, three, or four lines of running text, while the rest of the prose flows around it the way a magazine layout would. On reveal, the cap scales in from a slight 0.8x with a dignified ease, and the ornamental variant draws a thin SVG flourish behind the letter via path-length animation. Four cap styles ship out of the box — solid, outlined, gradient, and ornamental — each with a different typographic personality. Drop it on the first paragraph of a blog post, a feature article, a marketing landing essay, a print-style portfolio, or any premium content surface where the opening word should feel deliberately set rather than typed.

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 drop-cap-text text effect into my project

Highlight Text

Animated marker highlight that draws across phrases

Gradient Text

Flowing gradient color animations across letters

Text Reveal

Cinematic clip-path text reveals on scroll

Motion Highlight

Dynamic background highlight animations

Neon Text

Glowing neon-tube lettering with flicker

Terminal Text

Terminal-style typing with prompt and cursor

FAQ

Was this page helpful?

Sign in to leave feedback.

Drift Text

Letters drifting autonomously with independent low-amplitude pseudo-random motion on x, y, and rotation for React applications.

Echo Text

Text rendered with stacked translucent ghost copies that lag behind the source on text changes for an echoing reverberation effect for React applications.