UniqueUI

Hero

Radial Burst Hero

A Stripe-style hero block: an interactive fiber-optic radial burst on canvas. Fine glowing rays stream out of a bottom-center origin in a wide fan, each one continuously growing, over-extending, fading, and regenerating with fresh angle/length/speed/opacity, with a single glowing dot riding each fiber's tip. Hovering the middle or tip of a fiber makes it (and its neighbours) brighten, stretch, and bend toward the cursor, then ease back to their drift; the dense zone near the origin stays calm. The burst sits in a short lower band, masked so it fades out below the headline. Ships with six time-of-day themes (Pre-dawn, Sunrise, Daytime, Dusk, Sunset, Night) and an in-block switcher; the background crossfades and the burst colors lerp between themes. devicePixelRatio-aware, keyboard-accessible switcher, honors `prefers-reduced-motion` (renders a calm static frame), and uses `motion` for the intro, theme blend, and dropdown.

UniqueUI CLI

npx uniqueui add hero-radial-burst

shadcn CLI

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

Preview

The backbone
of global commerce

Usage

import { RadialBurstHero } from "@/components/ui/hero-radial-burst";

export default function Hero() {
  return (
    <RadialBurstHero
      defaultTheme="night"
      title={
        <>
          The backbone
          <br />
          of global commerce
        </>
      }
    />
  );
}

Props

PropTypeDescription
defaultTheme"pre-dawn" | "sunrise" | "daytime" | "dusk" | "sunset" | "night"Initial time-of-day theme. Re-synced if it changes (e.g. from a site theme toggle); the in-block switcher overrides until then.
titleReactNodeHeadline content. Defaults to "The backbone of global commerce".
burstProps{ className?: string; density?: number; interactive?: boolean }Forwarded to the canvas burst layer (`RadialBurst`). `density` scales ray count (0.4–2); set `interactive` to false to disable pointer reactivity.
classNamestringClasses for the outer `<section>`.