Hero Collection 02

Three advanced hero sections — a fluid gradient canvas, a CSS 3D parallax tilt, and a text-masked light sweep — all variants of a single component.

Loading preview…

npx shadcn@latest add "https://webberui.com/r/hero-collection-02.json?t=<install token>"

Playground

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

Stylevariant

Content alignmentalign

Animation speedspeed

Tilt strengthintensity

Pointer interactioninteractive

<HeroCollection02 />

Installation

npx shadcn@latest add "https://webberui.com/r/hero-collection-02.json?t=<install token>"

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

Usage

import { HeroCollection02 } from "@/components/ui/hero-collection-02";

<HeroCollection02
  variant="fluid"
  eyebrow="Just launched"
  title="An animation-first interface"
  description="A fluid gradient background flows live on the canvas, gently disturbed by the cursor."
  actions={
    <button className="rounded-full bg-neutral-900 px-5 py-2 text-sm text-white">
      Get started
    </button>
  }
/>

The three variants

variant	Effect	Technique
`fluid`	A fluid gradient field flowing live, disturbed by the cursor	Per-pixel flow field in canvas 2D (a compromise for WebGL)
`depth`	Each decorative layer tilts by depth into a 3D parallax	CSS 3D `perspective` + `translateZ`
`masked`	A gradient flows inside a mask of the title text	`background-clip: text` + animated background offset (a compromise for a video mask)

Props

Prop	Type	Default	Description
`variant`	`"fluid" \| "depth" \| "masked"`	`"fluid"`	Hero style
`title`	`React.ReactNode`	—	The main heading (required); under `masked` the flowing gradient mask is applied to it
`eyebrow`	`React.ReactNode`	—	A small label above the title
`description`	`React.ReactNode`	—	Descriptive text below the title
`actions`	`React.ReactNode`	—	The call-to-action area (put your buttons here)
`align`	`"center" \| "left"`	`"center"`	Content alignment
`colors`	`string[]`	built-in palette	Gradient color stops (2 or more); used by `fluid` and `masked`
`speed`	`number`	`1`	Animation speed multiplier
`intensity`	`number`	`12`	Maximum tilt angle for `depth` (degrees)
`interactive`	`boolean`	`true`	Whether pointer interaction is enabled (mouse only)
`children`	`React.ReactNode`	—	Custom content appended after the call to action
`className`	`string`	—	Appended to the outermost `<section>`; can override the height and so on

How it works

fluid: multi-layer sine flow fields are computed per pixel in a low-resolution offscreen buffer, then smoothly scaled back up onto the main canvas, which naturally produces a softened sense of flow; devicePixelRatio is clamped to a maximum of 2, and a ResizeObserver tracks the container size.
depth: the <section> sets perspective, the tilting wrapper is preserve-3d, and the decorative layers use different translateZ values plus opposing translation amounts to produce the parallax; the tilt angle is smoothed by a spring (useSpring) and returns to zero when the cursor leaves.
masked: the title uses background-clip: text to let the gradient show through, and animates background-position to simulate a video-like light sweep; the first color is repeated at the end of the gradient so the loop is seamless.

Accessibility

When the user has "reduce motion" enabled at the system level: fluid draws only a single static frame of the flow field, depth disables the tilt, and masked stops the gradient from flowing — none of them start a requestAnimationFrame or an infinite animation.
The outermost element is role="region" with aria-roledescription="hero"; every decorative layer (canvas, glow, mask) is aria-hidden, so it does not interfere with screen readers.
Pointer interaction only takes effect when pointerType === "mouse", so touch and keyboard use are unaffected; the buttons inside actions are yours to supply and focus and keyboard triggering work as normal.
Timers, requestAnimationFrame, the ResizeObserver, and the pointer event listeners are all cleaned up when the component unmounts.