Hero Section

Blocks & Slices

A complete marketing hero block — mono uppercase eyebrow, tracking-tight headline with one gradient-accented word, subcopy, primary/secondary CTA pair, and a mono stats row — that spring-staggers in on mount over two blurred radial glows drifting on slow keyframe orbits; under prefers-reduced-motion the content reveals instantly with no stagger and the glows hold a static frame.

Inspired by Cult Pro — marketing hero blocks (pattern) — independently built, not affiliated. Attribution policy

Parable Registry

Ship interfaces that feel alive

Production-grade motion blocks you can paste straight into any React app.

12k stars
400+ teams
54 blocks

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/hero-section.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/hero-section.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-2xl px-4">
    <HeroSection
      className="rounded-2xl border border-white/10 bg-[#0f0f10]"
      eyebrow="Parable Registry"
      title="Ship interfaces that feel alive"
      accentWord="alive"
      subtitle="Production-grade motion blocks you can paste straight into any React app."
      primaryLabel="Get started"
      secondaryLabel="Browse blocks"
      onPrimary={() => {}}
      onSecondary={() => {}}
      stats={[
        { value: "12k", label: "stars" },
        { value: "400+", label: "teams" },
        { value: "54", label: "blocks" },
      ]}
    />
  </div>

Props

HeroSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">

Prop	Type	Default	Description
eyebrow	string	—	Small mono uppercase kicker above the headline.
title*	React.ReactNode	—	The headline. Pass a string to let `accentWord` gradient-wrap one word.
accentWord	string	—	Substring of a string `title` to paint with the accent gradient.
subtitle	React.ReactNode	—	Supporting paragraph under the headline.
primaryLabel	string	—	Primary CTA text. Omit to hide the button.
onPrimary	() => void	—	Fires when the primary CTA is pressed.
primaryHref	string	—	Renders the primary CTA as a real `<a>` pointing here.
secondaryLabel	string	—	Secondary CTA text. Omit to hide the button.
onSecondary	() => void	—	Fires when the secondary CTA is pressed.
secondaryHref	string	—	Renders the secondary CTA as a real `<a>` pointing here.
stats	HeroStat[]	—	Mono proof-point row under everything, e.g. 12k stars · 400+ teams.
accent	string	"#8b5cf6"	Gradient/glow start colour and CTA fill. Mirrors `--pb-violet`.
accentAlt	string	"#ec4899"	Gradient/glow end colour. Mirrors `--pb-fuchsia`.
children	React.ReactNode	—	Extra content rendered below the actions (e.g. a screenshot or badge).

npm dependencies

motion
lucide-react