Outline Text
Hollow stroked text with a solid color fill that animates in from any direction on hover, view, loop, or always for React applications built with Next.js, motion, and Tailwind CSS.
Outline Text preview
Two layers of the same string, perfectly aligned. The bottom layer is text-stroke only — a hollow outline drawn with -webkit-text-stroke at the chosen weight and color. The top layer is the full-color fill, clipped from outside in via clip-path inset, so toggling the trigger animates the fill into the outline like ink rising up the glyphs. Direction is configurable — fillFrom='bottom' is the classic awards-page reveal, 'left' feels like a typewriter wipe, 'center' irises out from the middle. Triggers cover the full lifecycle: hover for interactive cards, view for scroll-triggered headlines, loop for ambient cycling, and always for a static filled state. Designed for hero text, agency portfolios, decorative typography, and case-study covers where the type itself needs to perform.
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 outline-text text effect into my projectRelated Components
Gradient Text
Flowing gradient color animations
Text Hover Effect
SVG mask-based hover gradient reveals
Line Shadow Text
Animated diagonal line shadow effect
Blur Text
Text animation from blur to focus
Mask Reveal Text
Sliding panel wipe reveal
Text Reveal
Cinematic clip-path text reveals
FAQ
Was this page helpful?
Sign in to leave feedback.
Neon Text
Authentic neon-sign aesthetic with layered text-shadow halo, startup flicker sequence, and ambient buzz animations built with React, Next.js, motion, and Tailwind CSS.
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.