Hero 221 - Headline with hand-drawn underline strokePro
Centered typographic hero where one key phrase in the headline gets a hand-drawn SVG underline that draws itself on entry, with muted lead-in words and a small byline row of avatars.
About Hero 221
Centered typographic hero where one key phrase in the headline gets a hand-drawn SVG underline that draws itself on entry, with muted lead-in words and a small byline row of avatars.
Hero 221 is a hero block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 86 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- typography
- underline
- svg
- minimal
- centered
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add hero-221Dependencies installed automatically: lucide-react, motion.
Uses: button, reveal, use-reduced-motion, utils.
Usage
import Hero221 from "@/components/blocks/hero-221"
export default function Page() {
return <Hero221 />
}