Hero

Reference Pulse Hero

A reference hero block. Conic-gradient halo rotating behind a radial pulse, with motion-driven entry on the headline. Drop your own children in to replace the default composition; the background also ships as a standalone export.

UniqueUI CLI

npx uniqueui add hero-reference-pulse

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/hero-reference-pulse.json -y

Preview

Hero block

Build with light, not boxes.

A reference hero block. Drop in your own children to override the default composition — the background lives on its own as well.

Usage

import { ReferencePulseHero } from "@/components/ui/hero-reference-pulse";

export default function Demo() {
  return <ReferencePulseHero />;
}

Scenarios

Default composition

Drop the hero in and the default headline + CTAs render.

import { ReferencePulseHero } from "@/components/ui/hero-reference-pulse";

export default function Default() {
  return <ReferencePulseHero />;
}

Custom content via children

Pass your own children to override the default composition.

import { ReferencePulseHero } from "@/components/ui/hero-reference-pulse";

export default function Custom() {
  return (
    <ReferencePulseHero>
      <h1 className="text-5xl font-semibold">Your headline</h1>
      <p className="mt-4 text-white/70">Your subtitle goes here.</p>
    </ReferencePulseHero>
  );
}

Background only

Compose your own section and use only the background layer.

import { ReferencePulseBackground } from "@/components/ui/hero-reference-pulse";

export default function BgOnly() {
  return (
    <section className="relative isolate min-h-screen">
      <ReferencePulseBackground hue={210} speed={9} />
      <div className="relative">…your content…</div>
    </section>
  );
}

Props

Prop	Type	Description
`children`	`ReactNode`	Slotted hero content. Pass your own headline / CTA / nav. When omitted, a default composition renders.
`className`	`string`	Extra classes on the outer `<section>`.
`backgroundProps`	`{ hue?: number; speed?: number; className?: string }`	Forwarded to the background layer.