Skip to content
Block

Hero Section

A centered hero with a staggered headline, blur-fade supporting copy, and magnetic CTAs.

Now in public beta

Ship polished interfaces in half the time

A component toolkit that handles the motion, accessibility, and polish, so your team can focus on the product underneath it.

Free for individuals. No credit card required.

Installation

The CLI installs the block together with its pieces: the shadcn button plus Text Animate, Blur Fade, and Magnetic from this registry.

terminal
npx shadcn@latest add https://ui.thilina.dev/r/hero-section.json

Usage

app/page.tsx
import { HeroSection } from "@/components/blocks/hero-section";

export default function Page() {
  return <HeroSection />;
}

The copy, badge, and CTA targets are plain JSX at the top of the file; edit them in place. The entrance is choreographed: badge first, headline staggering in by word, supporting copy, then the buttons, each a beat apart.

Accessibility

The headline stays a real h1 (the animated words are decorative and aria-hidden, with the sentence exposed to screen readers whole). All entrances collapse to static content under prefers-reduced-motion.

Command Palette

Search for a command to run...