Gradient Heading

Text Animations

A polymorphic heading (h1–h6/p) whose text is painted with a background-clipped brand gradient in three variants and four sizes. When motion is allowed the gradient drifts on a slow ~8s ease-in-out loop; under prefers-reduced-motion or animate={false} it renders a legible static gradient with edge-defining shadow.

Inspired by Cult UI — Gradient Heading (free, MIT) — independently built, not affiliated. Attribution policy

Ship it beautifully

Signal, not noise

Forged in chrome

Installation

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

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

Usage

The exact code rendering the preview above.

<div className="flex w-full flex-col items-center gap-6 px-6 py-10 text-center">
    <GradientHeading as="h2" variant="aurora" size="xl">
      Ship it beautifully
    </GradientHeading>
    <div className="flex flex-col gap-3">
      <GradientHeading as="p" variant="signal" size="md">
        Signal, not noise
      </GradientHeading>
      <GradientHeading as="p" variant="steel" size="md">
        Forged in chrome
      </GradientHeading>
    </div>
  </div>

Props

GradientHeadingProps extends React.HTMLAttributes<HTMLHeadingElement>

Prop	Type	Default	Description
as	GradientHeadingTag	"h2"	Element to render. Defaults to `"h2"`. Use `h1`–`h6` for document structure, or `p` when the visual style is wanted without heading semantics.
variant	GradientHeadingVariant	"aurora"	Gradient palette. Mirrors the site's `--pb-*` tokens. - `aurora` — violet → fuchsia → ember (default) - `steel` — warm vellum → chrome-ish grays - `signal` — violet → signal cyan
animate	boolean	true	Slowly drift the gradient (~8s loop). Ignored under reduced motion.
size	GradientHeadingSize	"md"	Size preset. Defaults to `"md"`.