Hero Collection 01

Three animated hero sections — a drifting gradient mesh, a canvas particle field, and per-character split text — sharing one content API, with the content revealing in sequence as it enters the viewport.

Loading preview…

npx shadcn@latest add https://webberui.com/r/hero-collection-01.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Background stylevariant

Kickereyebrow

Headlinetitle

Content alignmentalign

Stagger (s)stagger

0.12

Noise overlay (gradient style only)grain

<HeroCollection01 />

Installation

npx shadcn@latest add https://webberui.com/r/hero-collection-01.json

Or, once registries are configured in components.json, install it as @webberui/hero-collection-01.

Usage

import { HeroCollection01 } from "@/components/ui/hero-collection-01";

<HeroCollection01
  variant="gradient"
  eyebrow="Animation first"
  title="Turn every section into a scene"
  subtitle="A drifting gradient mesh underneath, with the content fading in one piece at a time."
  actions={[
    { label: "Get started", href: "/docs", variant: "primary" },
    { label: "See examples", href: "/components", variant: "secondary" },
  ]}
/>

Switching variant on the same content gives you the particle field or the split text style instead:

<HeroCollection01 variant="particles" title="Ship with motion" />
<HeroCollection01 variant="split" title="Words that arrive one by one" />

Props

Prop	Type	Default	Description
`variant`	`"gradient" \| "particles" \| "split"`	`"gradient"`	Background animation style
`eyebrow`	`string`	—	The kicker above the title
`title`	`string`	—	The main heading (required)
`subtitle`	`string`	—	Subheading text
`actions`	`HeroAction[]`	—	The CTA buttons
`align`	`"center" \| "left"`	`"center"`	Content alignment
`colors`	`string[]`	three cool-toned colors	Accent colors for the gradient/particles
`delay`	`number`	`0`	Delay before the reveal starts (seconds)
`stagger`	`number`	`0.12`	Reveal interval between the content blocks (seconds)
`once`	`boolean`	`true`	Play only the first time the element enters the viewport
`grain`	`boolean`	`false`	Overlay low-opacity grain (only applies to the `gradient` style)
`children`	`ReactNode`	—	Extra foreground content, placed after the button row

HeroAction

Field	Type	Description
`label`	`string`	Button text
`href`	`string`	When set, renders as an `<a>`; otherwise a `<button>`
`onClick`	`() => void`	Click handling when there is no `href`
`variant`	`"primary" \| "secondary"`	Solid or outlined style
`icon`	`ReactNode`	Leading icon node

How it works

One set of content, three backgrounds: the eyebrow / title / subtitle / actions content API is shared by all three styles, so swapping variant alone moves you between gradient, particles, and split text — handy for A/B testing the same page or reskinning a section to match its tone.
Gradient mesh (gradient): three radial-gradient color blobs softened with blur-3xl, each drifting back and forth in mirror mode between an origin and a target on its own period, which forms a slowly breathing mesh. With grain on, an inline feTurbulence noise layer is stacked on top to kill the banding you get across large gradients.
Particle field (particles): drifting particles and links between nearby ones, drawn in pure canvas 2D (no WebGL, no third-party packages). Sharpness is corrected with devicePixelRatio and the container size is followed with a ResizeObserver; when colors is not specified it reads currentColor and uses a MutationObserver to watch class changes on <html>, so the colors update the moment you switch between light and dark themes.
Split text (split): the title is split on whitespace and revealed word by word with a stagger (including offset and a blur reveal); if the title has no whitespace (Chinese or Japanese, for example), it automatically falls back to splitting per grapheme with Intl.Segmenter, so emoji and combining characters are never broken apart. Behind it sits a ring of slowly pulsing soft light plus a faint mesh.
Reveal choreography: the outer container uses whileInView plus staggerChildren to fade the kicker, title, subtitle, and buttons in sequence; the split style then expands the title word by word with a second layer of staggerChildren, producing a two-stage layered rhythm.

Accessibility

The section carries an aria-labelledby pointing at the title, and the title is the only <h1>.
Every background (gradient / particles / glow) is an aria-hidden decorative layer, so screen readers only reach the text content.
The split style puts the complete title in sr-only and marks the per-word visual spans aria-hidden, so what is announced is a complete sentence rather than fragmented words.
When the user has "reduce motion" enabled at the system level, the background animations are disabled in favour of a static version, the content appears directly with no offset, and the split style stops splitting per character and renders the complete title instead.
Depending on whether href is present, the CTA renders as a native <a> or <button>, so it can be operated with the keyboard and carries a focus-visible focus ring.