Merge pull request #76 from pras75299/feat/hero-radial-burst

feat(registry): add hero-radial-burst block with time-of-day themes

Author: pras75299

apps/www/components/ui/hero-radial-burst.tsx

@@ -29,6 +29,7 @@ import {
   LucideScanLine,
   LucideScrollText,
   LucideShield,
+  LucideSparkle,
   LucideSparkles,
   LucideSquare,
   LucideStars,
@@ -101,6 +102,7 @@ const iconMap = {
   LucideScanLine,
   LucideScrollText,
   LucideShield,
+  LucideSparkle,
   LucideSparkles,
   LucideSquare,
   LucideStars,
@@ -3421,6 +3423,39 @@ const componentDefinitions = [
       }
     ],
     "usageCode": "import { FlowFieldHero } from \"@/components/ui/hero-flow-field\";\n\nexport default function Hero() {\n  return (\n    <FlowFieldHero theme=\"dark\">\n      <span className=\"mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 font-mono text-[10px] uppercase tracking-[0.2em] text-white/70 backdrop-blur\">\n        <span\n          aria-hidden\n          className=\"h-1.5 w-1.5 rounded-full bg-sky-400 shadow-[0_0_10px_2px] shadow-sky-400/40\"\n        />\n        Field · scroll to flow\n      </span>\n      <h1 className=\"text-balance text-4xl font-semibold tracking-tight sm:text-6xl\">\n        Momentum you can see.\n      </h1>\n      <p className=\"mt-5 max-w-xl text-pretty text-base text-white/65 sm:text-lg\">\n        A canvas flow field of streamlines that bend and wave with the page\n        scroll position. Scroll-driven, not cursor-driven — no external deps.\n      </p>\n      <div className=\"mt-9 flex flex-wrap items-center justify-center gap-3\">\n        <button\n          type=\"button\"\n          className=\"group inline-flex h-11 cursor-pointer items-center gap-2 rounded-full bg-white px-6 text-sm font-medium text-black transition-transform duration-200 hover:-translate-y-px\"\n        >\n          <span>Get started</span>\n          <span aria-hidden className=\"transition-transform duration-200 group-hover:translate-x-0.5\">\n            →\n          </span>\n        </button>\n        <button\n          type=\"button\"\n          className=\"inline-flex h-11 cursor-pointer items-center gap-2 rounded-full border border-white/15 px-6 font-mono text-xs uppercase tracking-[0.18em] text-white/85 backdrop-blur transition-colors hover:bg-white/5\"\n        >\n          View source\n        </button>\n      </div>\n    </FlowFieldHero>\n  );\n}"
+  },
+  {
+    "slug": "hero-radial-burst",
+    "name": "Radial Burst Hero",
+    "description": "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.",
+    "icon": "LucideSparkle",
+    "category": "Hero",
+    "kind": "block",
+    "addedAt": "2026-06-02",
+    "props": [
+      {
+        "name": "defaultTheme",
+        "type": "\"pre-dawn\" | \"sunrise\" | \"daytime\" | \"dusk\" | \"sunset\" | \"night\"",
+        "default": "\"night\"",
+        "description": "Initial time-of-day theme. Re-synced if it changes (e.g. from a site theme toggle); the in-block switcher overrides until then."
+      },
+      {
+        "name": "title",
+        "type": "ReactNode",
+        "description": "Headline content. Defaults to \"The backbone of global commerce\"."
+      },
+      {
+        "name": "burstProps",
+        "type": "{ className?: string; density?: number; interactive?: boolean }",
+        "description": "Forwarded to the canvas burst layer (`RadialBurst`). `density` scales ray count (0.4–2); set `interactive` to false to disable pointer reactivity."
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "description": "Classes for the outer `<section>`."
+      }
+    ],
+    "usageCode": "import { RadialBurstHero } from \"@/components/ui/hero-radial-burst\";\n\nexport default function Hero() {\n  return (\n    <RadialBurstHero\n      defaultTheme=\"night\"\n      title={\n        <>\n          The backbone\n          <br />\n          of global commerce\n        </>\n      }\n    />\n  );\n}"
   }
 ] satisfies ComponentDefinition[];
 

apps/www/config/components.ts

@@ -79,6 +79,7 @@ import { LogoMarqueeHero } from "@/components/ui/hero-logo-marquee";
 import { MagneticLettersHero } from "@/components/ui/hero-magnetic-letters";
 import { TerminalHero } from "@/components/ui/hero-terminal";
 import { FlowFieldHero } from "@/components/ui/hero-flow-field";
+import { RadialBurstHero } from "@/components/ui/hero-radial-burst";
 import { motion } from "motion/react";
 import { useRef, useState } from "react";
 import {
@@ -3834,4 +3835,16 @@ export const componentDemos: Record<string, DemoComponent> = {
   "hero-flow-field": ({ theme = "dark" }) => (
     <FlowFieldHero theme={theme as "light" | "dark"} />
   ),
+  "hero-radial-burst": ({ theme = "dark" }) => (
+    <RadialBurstHero
+      defaultTheme={theme === "light" ? "daytime" : "night"}
+      title={
+        <>
+          The backbone
+          <br />
+          of global commerce
+        </>
+      }
+    />
+  ),
 };

apps/www/config/demos.tsx

@@ -1126,5 +1126,10 @@ export const docsScenarios: Record<string, ComponentDocs> = {
     "slug": "hero-flow-field",
     "overview": "Scroll-driven canvas flow field. Particles flow along a summed-sine vector field and leave fading comet trails; the field's phase tracks `window.scrollY`, so the streamlines bend and wave as the page scrolls, with a slow idle drift keeping it alive at rest. A centered radial scrim lifts text contrast over the field, and the `theme` prop switches the whole palette (field, scrim, text, CTAs) between light and dark. `FlowFieldBackground` is a separate export and can be reused under any composition.",
     "scenarios": []
+  },
+  "hero-radial-burst": {
+    "slug": "hero-radial-burst",
+    "overview": "An interactive fiber-optic burst rises from a bottom-center origin that touches the bottom edge: fine rays fan across the upper semicircle (longest near vertical, forming a soft dome), each a base-bright→tip-faint gradient drawn as a soft wide glow pass plus a crisp core, with a single glowing dot riding its tip. Every ray continuously grows, slightly over-extends, fades, and respawns with a fresh angle, length, speed, and opacity, so the loop is seamless with no global reset. Hovering the middle or tip of a fiber makes it and its neighbours brighten, stretch, and bend toward the cursor before easing back; the dense zone near the origin does not react. The burst is kept to a short lower band, masked so it never reaches the headline above. Six time-of-day themes — Pre-dawn, Sunrise, Daytime, Dusk, Sunset, Night — are selectable from an in-block dropdown; switching crossfades the background gradient and eases the burst colors between palettes. `RadialBurst` is exported separately for reuse under your own layout.",
+    "scenarios": []
   }
 };

apps/www/config/docs-scenarios.ts

@@ -1197,6 +1197,25 @@
           "target": "components/ui/magnetic-text.tsx"
         }
       ]
+    },
+    {
+      "name": "hero-radial-burst",
+      "type": "registry:ui",
+      "title": "Radial Burst Hero",
+      "description": "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.",
+      "dependencies": [
+        "motion",
+        "lucide-react",
+        "clsx",
+        "tailwind-merge"
+      ],
+      "files": [
+        {
+          "path": "components/ui/hero-radial-burst.tsx",
+          "type": "registry:component",
+          "target": "components/ui/hero-radial-burst.tsx"
+        }
+      ]
     }
   ]
 }

apps/www/public/r/hero-radial-burst.json

@@ -669,5 +669,37 @@
         "Initial release: standalone per-letter cursor-tracking text component. Wraps any string with springs that lean toward the pointer; falloff is linear inside `radius`, zero outside; capped at `strength`. Optional `animateEntry` staggers letters in on mount. `as` prop lets it render as h1/h2/p/span. aria-label on the wrapper + aria-hidden on every glyph keep screen readers from spelling out the word."
       ]
     }
+  ],
+  "hero-radial-burst": [
+    {
+      "version": "2.0.1",
+      "date": "2026-06-05",
+      "changes": [
+        "Theme switcher now uses a plain button-menu pattern (disclosure button + `aria-current` on the active theme) instead of `role=\"listbox\"`/`role=\"option\"`, which had promised listbox keyboard semantics the widget did not implement."
+      ]
+    },
+    {
+      "version": "2.0.0",
+      "date": "2026-06-03",
+      "changes": [
+        "Rewrote the burst as a continuous, seamlessly looping fiber-optic engine: rays grow, over-extend, fade, and respawn with fresh angle/length/speed/opacity instead of a one-time reveal.",
+        "Added pointer reactivity — fibers near the cursor (middle→tip only) brighten, stretch, and bend toward it, then ease back; the dense zone near the origin stays calm.",
+        "Each fiber now carries a single glowing dot fixed at its tip instead of dots travelling along it.",
+        "Softened the origin: fibers fade to near-zero through the dense convergence zone and peak only after fanning apart, plus a diffuser core bloom, so the bottom-center no longer blows out to white.",
+        "Raised the fiber count for a fuller, more balanced spread.",
+        "Increased overall fiber count and shortened the burst (~100px), with the origin touching the bottom edge.",
+        "Widened the fan horizontally and lengthened the side fibers so it spreads to the full width along the bottom (height unchanged).",
+        "Constrained the burst to a masked lower band so it no longer reaches the headline.",
+        "Removed the count-up stat row; the hero now shows the headline only.",
+        "Added a `burstProps.interactive` flag to toggle pointer reactivity."
+      ]
+    },
+    {
+      "version": "1.0.0",
+      "date": "2026-06-02",
+      "changes": [
+        "Initial release."
+      ]
+    }
   ]
 }

apps/www/public/r/registry.json

@@ -63,6 +63,7 @@
     "hero-magnetic-letters",
     "hero-terminal",
     "hero-flow-field",
-    "magnetic-text"
+    "magnetic-text",
+    "hero-radial-burst"
   ]
 }