{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hero-aurora", "title": "Hero Aurora", "description": "Motion-first product hero with an animated aurora field, staggered reveal, parallax panel, and metric ticker.", "dependencies": [ "motion" ], "registryDependencies": [ "badge" ], "files": [ { "path": "payload-components/source/blocks/shared/heroFields.ts", "content": "import type { Field } from 'payload'\n\nimport { linkGroup } from '@/fields/linkGroup'\n\n/**\n * Shared field core for the Hero component family.\n *\n * Every hero variant spreads these fields first and then appends its own\n * variant-specific ones. Editing the\n * shared headline/eyebrow/description/CTA shape here updates every installed\n * hero block at once, so the family never drifts field-by-field across a repo.\n *\n * Installed once per repo at `src/blocks/shared/heroFields.ts`; re-running\n * `payload-components add hero-*` never overwrites a copy you have already edited.\n */\nexport const heroFields: Field[] = [\n {\n name: 'eyebrow',\n type: 'text',\n },\n {\n name: 'title',\n type: 'text',\n required: true,\n },\n {\n name: 'description',\n type: 'textarea',\n required: true,\n },\n linkGroup({\n overrides: {\n admin: {\n initCollapsed: true,\n },\n maxRows: 2,\n minRows: 1,\n },\n }),\n]\n", "type": "registry:file", "target": "~/src/blocks/shared/heroFields.ts" }, { "path": "payload-components/source/blocks/HeroAurora/config.ts", "content": "import type { Block } from 'payload'\n\nimport { heroFields } from '@/blocks/shared/heroFields'\n\nexport const HeroAurora: Block = {\n slug: 'heroAurora',\n // Existing apps must migrate stored data before adopting this identifier:\n // https://www.payload-components.xyz/docs/registry#installed-source-and-migrations\n dbName: 'pc_hero_aurora',\n interfaceName: 'HeroAuroraBlock',\n fields: [\n // Shared hero core (eyebrow, title, description, CTA links). Variant-specific\n // fields follow; edit the shared shape in @/blocks/shared/heroFields.\n ...heroFields,\n {\n name: 'metrics',\n type: 'array',\n admin: {\n initCollapsed: true,\n },\n fields: [\n {\n name: 'value',\n type: 'text',\n required: true,\n },\n {\n name: 'label',\n type: 'text',\n required: true,\n },\n ],\n maxRows: 3,\n },\n {\n name: 'productImage',\n type: 'upload',\n relationTo: 'media',\n },\n {\n name: 'imageCaption',\n type: 'text',\n },\n {\n name: 'proofItems',\n type: 'array',\n admin: {\n initCollapsed: true,\n },\n fields: [\n {\n name: 'label',\n type: 'text',\n required: true,\n },\n ],\n maxRows: 4,\n },\n ],\n labels: {\n plural: 'Hero Aurora Blocks',\n singular: 'Hero Aurora',\n },\n}\n", "type": "registry:file", "target": "~/src/blocks/HeroAurora/config.ts" }, { "path": "payload-components/source/blocks/HeroAurora/Component.tsx", "content": "'use client'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport type { Transition } from 'motion/react'\nimport { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from 'motion/react'\n\nimport type { HeroAuroraBlock as HeroAuroraBlockData } from '@/payload-types'\n\nimport { CMSLink } from '@/components/Link'\nimport { Media } from '@/components/Media'\nimport { Badge } from '@/components/ui/badge'\nimport { cn } from '@/utilities/ui'\n\n/* Hero Aurora — a motion-first product hero.\n *\n * Everything luminous is derived from the theme tokens (--brand, --brand-200,\n * --primary, --border, --background) via color-mix, so the same component\n * re-tints itself under any theme scope without a single hardcoded hue.\n * Motion (via the `motion` package) is presentation only: transform/opacity,\n * one spring set for the pointer parallax, and a scoped\n * prefers-reduced-motion net that forces the finished frame — before\n * hydration, without JavaScript, and in screenshot captures. */\n\ntype Props = HeroAuroraBlockData & {\n id?: string\n className?: string\n disableInnerContainer?: boolean\n}\n\nconst EASE_OUT: Transition['ease'] = [0.16, 1, 0.3, 1]\nconst WORD_SPRING: Transition = { damping: 26, mass: 0.8, stiffness: 340, type: 'spring' }\nconst PANEL_SPRING: Transition = { damping: 26, mass: 1.1, stiffness: 150, type: 'spring' }\nconst CHIP_SPRING: Transition = { damping: 22, mass: 0.7, stiffness: 380, type: 'spring' }\nconst POINTER_SPRING = { damping: 20, mass: 0.4, stiffness: 160 }\n\n/* Aurora drift + the reduced-motion net. Scoped to this block's data\n * attributes and shipped inside the component so consumer repos inherit the\n * safety net with the file. Transform-only keyframes on pre-blurred\n * (gradient-falloff) layers — no animated filters, no background repaints. */\nconst auroraCss = `\n@keyframes pc-aurora-drift-a{0%,100%{transform:translate3d(-3%,-2%,0) scale(1)}50%{transform:translate3d(4%,3%,0) scale(1.08)}}\n@keyframes pc-aurora-drift-b{0%,100%{transform:translate3d(3%,3%,0) scale(1.06)}50%{transform:translate3d(-4%,-2%,0) scale(1)}}\n@keyframes pc-aurora-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}\n@keyframes pc-aurora-rays{0%,100%{transform:translate3d(-1.4%,0,0)}50%{transform:translate3d(1.4%,0,0)}}\n.pc-aurora-drift-a{animation:pc-aurora-drift-a 26s ease-in-out infinite}\n.pc-aurora-drift-b{animation:pc-aurora-drift-b 34s ease-in-out infinite}\n.pc-aurora-breathe{animation:pc-aurora-breathe 30s ease-in-out infinite}\n.pc-aurora-rays{animation:pc-aurora-rays 42s ease-in-out infinite}\n@media (prefers-reduced-motion: reduce){\n.pc-aurora-drift-a,.pc-aurora-drift-b,.pc-aurora-breathe,.pc-aurora-rays{animation:none}\n[data-aurora-root] *{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important}\n[data-aurora-root] [data-aurora-reveal]{opacity:1!important;transform:none!important;stroke-dasharray:none!important}\n}\n`\n\n/* Server and client render identical initial markup (no hydration drift);\n * reduced motion zeroes the transition instead, and the scoped CSS net keeps\n * the frame final even before any JavaScript runs. */\nconst entrance = (reduceMotion: boolean, delay: number, distance = 18) => ({\n animate: { opacity: 1, y: 0 },\n initial: { opacity: 0, y: distance },\n transition: reduceMotion ? { duration: 0 } : { delay, duration: 0.65, ease: EASE_OUT },\n})\n\nconst springEntrance = (\n reduceMotion: boolean,\n delay: number,\n spring: Transition,\n distance: number,\n scale?: number,\n) => ({\n animate: { opacity: 1, scale: 1, y: 0 },\n initial: { opacity: 0, scale: scale ?? 1, y: distance },\n transition: reduceMotion ? { duration: 0 } : { ...spring, delay },\n})\n\n/* ------------------------------------------------------------------ */\n/* Metric ticker */\n/* ------------------------------------------------------------------ */\n\ntype ParsedMetric = {\n decimals: number\n grouped: boolean\n prefix: string\n suffix: string\n target: number\n}\n\nconst parseMetricValue = (raw: string): ParsedMetric | null => {\n const match = /^([^0-9]*)([0-9][0-9,]*(?:\\.[0-9]+)?)([\\s\\S]*)$/.exec(raw.trim())\n if (!match) return null\n const [, prefix, numeric, suffix] = match\n const target = Number.parseFloat(numeric.replace(/,/g, ''))\n if (!Number.isFinite(target)) return null\n const decimals = numeric.includes('.') ? numeric.split('.')[1].length : 0\n return { decimals, grouped: numeric.includes(','), prefix, suffix, target }\n}\n\nconst formatMetricValue = (parsed: ParsedMetric, value: number): string => {\n const text = parsed.grouped\n ? value.toLocaleString('en-US', {\n maximumFractionDigits: parsed.decimals,\n minimumFractionDigits: parsed.decimals,\n })\n : value.toFixed(parsed.decimals)\n return `${parsed.prefix}${text}${parsed.suffix}`\n}\n\n/* Server-renders the final value (captures and no-JS read the finished\n * number), then counts up through the same rAF motion runs on. The count\n * writes textContent directly — zero re-renders. Unparsable values simply\n * keep the parent fade. A ghost span reserves the final width so the ticker\n * never causes layout shift. */\nfunction MetricTicker({\n delay,\n reduceMotion,\n value,\n}: {\n delay: number\n reduceMotion: boolean\n value: string\n}) {\n const nodeRef = useRef(null)\n\n useEffect(() => {\n const node = nodeRef.current\n const parsed = parseMetricValue(value)\n if (reduceMotion || !node || !parsed) return\n\n const controls = animate(0, parsed.target, {\n delay,\n duration: 1.3,\n ease: EASE_OUT,\n onComplete: () => {\n node.textContent = value\n },\n onUpdate: (latest) => {\n node.textContent = formatMetricValue(parsed, latest)\n },\n })\n\n return () => {\n controls.stop()\n node.textContent = value\n }\n }, [delay, reduceMotion, value])\n\n return (\n \n \n {value}\n \n \n {value}\n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* Aurora field — the layered light atmosphere behind the content */\n/* ------------------------------------------------------------------ */\n\nfunction AuroraField() {\n return (\n
\n {/* Base wash pooling under the headline. */}\n \n {/* Aurora arch — the top rim of a huge ring rising behind the\n headline, breathing slowly. */}\n
\n \n
\n {/* Curtain rays hanging from the arch, shimmering sideways. */}\n
\n \n
\n {/* Drifting corner glows — soft gradient falloff stands in for blur,\n so the drift is pure compositor transform. */}\n \n \n \n {/* Ink floor grounds the composition. */}\n \n {/* Veil keeps the headline zone airy and AA-clean on any tint. */}\n \n
\n )\n}\n\n/* ------------------------------------------------------------------ */\n/* Dashboard glow — the token-derived scene shown without an image */\n/* ------------------------------------------------------------------ */\n\nconst CHART_LINE =\n 'M0 300 C84 292 128 250 196 246 C258 242 300 210 356 196 C418 180 458 150 516 128 C572 106 634 92 720 72'\nconst CHART_GHOST =\n 'M0 326 C96 320 160 296 232 290 C320 282 380 260 452 246 C540 228 632 210 720 198'\n\nfunction DashboardGlow({ reduceMotion }: { reduceMotion: boolean }) {\n const gradientId = React.useId()\n\n return (\n
\n {/* Tinted glass base. */}\n \n {/* Graph grid. */}\n \n {/* Bloom behind the chart's climb. */}\n \n {/* Signal line, drawing itself on arrival. */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n )\n}\n\n/* ------------------------------------------------------------------ */\n/* Block */\n/* ------------------------------------------------------------------ */\n\nexport const HeroAuroraBlock: React.FC = ({\n className,\n description,\n disableInnerContainer,\n eyebrow,\n id,\n imageCaption,\n links,\n metrics,\n productImage,\n proofItems,\n title,\n}) => {\n const reduceMotion = useReducedMotion() ?? false\n\n /* Pointer parallax — one springed value set, active only on hover-capable\n pointers. Touch and reduced-motion keep the panel perfectly still. */\n const [pointerFine, setPointerFine] = useState(false)\n useEffect(() => {\n const query = window.matchMedia('(hover: hover) and (pointer: fine)')\n const update = () => setPointerFine(query.matches)\n update()\n query.addEventListener('change', update)\n return () => query.removeEventListener('change', update)\n }, [])\n const interactive = pointerFine && !reduceMotion\n\n const pointerX = useMotionValue(0.5)\n const pointerY = useMotionValue(0.5)\n const rotateX = useSpring(useTransform(pointerY, [0, 1], [4.5, -4.5]), POINTER_SPRING)\n const rotateY = useSpring(useTransform(pointerX, [0, 1], [-6.5, 6.5]), POINTER_SPRING)\n const panelX = useSpring(useTransform(pointerX, [0, 1], [-6, 6]), POINTER_SPRING)\n const panelY = useSpring(useTransform(pointerY, [0, 1], [-4, 4]), POINTER_SPRING)\n const sheenX = useSpring(useTransform(pointerX, [0, 1], [-70, 70]), POINTER_SPRING)\n const shadowX = useTransform(rotateY, [-6.5, 6.5], [16, -16])\n\n const handlePointerMove = (event: React.PointerEvent) => {\n if (!interactive || event.pointerType === 'touch') return\n const rect = event.currentTarget.getBoundingClientRect()\n pointerX.set((event.clientX - rect.left) / rect.width)\n pointerY.set((event.clientY - rect.top) / rect.height)\n }\n const handlePointerLeave = () => {\n pointerX.set(0.5)\n pointerY.set(0.5)\n }\n\n const words = (title ?? '').trim().split(/\\s+/).filter(Boolean)\n\n return (\n
\n \n \n \n \n
\n {eyebrow ? (\n \n \n \n {eyebrow}\n \n \n ) : null}\n\n
\n

\n {title}\n \n {words.map((word, index) => {\n const isLast = index === words.length - 1\n return (\n \n \n {word}\n \n {isLast ? null : ' '}\n \n )\n })}\n \n

\n \n {description}\n \n
\n\n {links && links.length > 0 ? (\n \n {links.map(({ link }, index) => (\n \n ))}\n \n ) : null}\n\n {metrics && metrics.length > 0 ? (\n \n {metrics.map(({ label, value }, index) => (\n 0 && 'sm:border-s sm:border-border/70 sm:ps-10',\n )}\n >\n
\n \n
\n
\n {label}\n
\n
\n ))}\n \n ) : null}\n\n {proofItems && proofItems.length > 0 ? (\n
\n {proofItems.map(({ label }, index) => (\n \n \n \n {label}\n \n \n ))}\n
\n ) : null}\n \n\n \n {/* Ground shadow leans against the tilt. */}\n \n \n {/* Clipped scene layer (image or the token-derived glow). */}\n
\n {productImage ? (\n \n ) : (\n \n )}\n {/* Pointer sheen, gliding across the glass. */}\n \n
\n\n {productImage ? null : (\n <>\n {/* KPI chips float above the panel plane — they detach in Z\n as the panel tilts toward the pointer. */}\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n )\n}\n", "type": "registry:file", "target": "~/src/blocks/HeroAurora/Component.tsx" } ], "meta": { "payloadComponent": { "installCommand": "payload-components add hero-aurora", "postInstall": [ "generate:types", "generate:importmap" ], "requiresPayloadComponentWrapper": true, "supportedTargets": [ "payload-website-starter", "payload-blocks-app" ] } }, "docs": "Payload Components installs this as a Payload CMS block for the Payload website starter shape.\n\nRecommended install:\n\n```bash\npnpm payload-components add hero-aurora\n```\n\nDirect shadcn install URL:\n\n```bash\npnpm dlx shadcn@latest add https://www.payload-components.xyz/r/hero-aurora.json\n```\n\nDirect shadcn installs only copy the block source files and shadcn UI dependencies. Use `payload-components add hero-aurora` when you also want Payload layout registration, `RenderBlocks` wiring, `generate:types`, and `generate:importmap` handled for you.", "type": "registry:block" }