4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T57b,import type { Block } from 'payload' import { heroFields } from '@/blocks/shared/heroFields' export const HeroAurora: Block = { slug: 'heroAurora', // Existing apps must migrate stored data before adopting this identifier: // https://www.payload-components.xyz/docs/registry#installed-source-and-migrations dbName: 'pc_hero_aurora', interfaceName: 'HeroAuroraBlock', fields: [ // Shared hero core (eyebrow, title, description, CTA links). Variant-specific // fields follow; edit the shared shape in @/blocks/shared/heroFields. ...heroFields, { name: 'metrics', type: 'array', admin: { initCollapsed: true, }, fields: [ { name: 'value', type: 'text', required: true, }, { name: 'label', type: 'text', required: true, }, ], maxRows: 3, }, { name: 'productImage', type: 'upload', relationTo: 'media', }, { name: 'imageCaption', type: 'text', }, { name: 'proofItems', type: 'array', admin: { initCollapsed: true, }, fields: [ { name: 'label', type: 'text', required: true, }, ], maxRows: 4, }, ], labels: { plural: 'Hero Aurora Blocks', singular: 'Hero Aurora', }, } 53:T6af3,'use client' import React, { useEffect, useRef, useState } from 'react' import type { Transition } from 'motion/react' import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from 'motion/react' import type { HeroAuroraBlock as HeroAuroraBlockData } from '@/payload-types' import { CMSLink } from '@/components/Link' import { Media } from '@/components/Media' import { Badge } from '@/components/ui/badge' import { cn } from '@/utilities/ui' /* Hero Aurora — a motion-first product hero. * * Everything luminous is derived from the theme tokens (--brand, --brand-200, * --primary, --border, --background) via color-mix, so the same component * re-tints itself under any theme scope without a single hardcoded hue. * Motion (via the `motion` package) is presentation only: transform/opacity, * one spring set for the pointer parallax, and a scoped * prefers-reduced-motion net that forces the finished frame — before * hydration, without JavaScript, and in screenshot captures. */ type Props = HeroAuroraBlockData & { id?: string className?: string disableInnerContainer?: boolean } const EASE_OUT: Transition['ease'] = [0.16, 1, 0.3, 1] const WORD_SPRING: Transition = { damping: 26, mass: 0.8, stiffness: 340, type: 'spring' } const PANEL_SPRING: Transition = { damping: 26, mass: 1.1, stiffness: 150, type: 'spring' } const CHIP_SPRING: Transition = { damping: 22, mass: 0.7, stiffness: 380, type: 'spring' } const POINTER_SPRING = { damping: 20, mass: 0.4, stiffness: 160 } /* Aurora drift + the reduced-motion net. Scoped to this block's data * attributes and shipped inside the component so consumer repos inherit the * safety net with the file. Transform-only keyframes on pre-blurred * (gradient-falloff) layers — no animated filters, no background repaints. */ const auroraCss = ` @keyframes pc-aurora-drift-a{0%,100%{transform:translate3d(-3%,-2%,0) scale(1)}50%{transform:translate3d(4%,3%,0) scale(1.08)}} @keyframes pc-aurora-drift-b{0%,100%{transform:translate3d(3%,3%,0) scale(1.06)}50%{transform:translate3d(-4%,-2%,0) scale(1)}} @keyframes pc-aurora-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}} @keyframes pc-aurora-rays{0%,100%{transform:translate3d(-1.4%,0,0)}50%{transform:translate3d(1.4%,0,0)}} .pc-aurora-drift-a{animation:pc-aurora-drift-a 26s ease-in-out infinite} .pc-aurora-drift-b{animation:pc-aurora-drift-b 34s ease-in-out infinite} .pc-aurora-breathe{animation:pc-aurora-breathe 30s ease-in-out infinite} .pc-aurora-rays{animation:pc-aurora-rays 42s ease-in-out infinite} @media (prefers-reduced-motion: reduce){ .pc-aurora-drift-a,.pc-aurora-drift-b,.pc-aurora-breathe,.pc-aurora-rays{animation:none} [data-aurora-root] *{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important} [data-aurora-root] [data-aurora-reveal]{opacity:1!important;transform:none!important;stroke-dasharray:none!important} } ` /* Server and client render identical initial markup (no hydration drift); * reduced motion zeroes the transition instead, and the scoped CSS net keeps * the frame final even before any JavaScript runs. */ const entrance = (reduceMotion: boolean, delay: number, distance = 18) => ({ animate: { opacity: 1, y: 0 }, initial: { opacity: 0, y: distance }, transition: reduceMotion ? { duration: 0 } : { delay, duration: 0.65, ease: EASE_OUT }, }) const springEntrance = ( reduceMotion: boolean, delay: number, spring: Transition, distance: number, scale?: number, ) => ({ animate: { opacity: 1, scale: 1, y: 0 }, initial: { opacity: 0, scale: scale ?? 1, y: distance }, transition: reduceMotion ? { duration: 0 } : { ...spring, delay }, }) /* ------------------------------------------------------------------ */ /* Metric ticker */ /* ------------------------------------------------------------------ */ type ParsedMetric = { decimals: number grouped: boolean prefix: string suffix: string target: number } const parseMetricValue = (raw: string): ParsedMetric | null => { const match = /^([^0-9]*)([0-9][0-9,]*(?:\.[0-9]+)?)([\s\S]*)$/.exec(raw.trim()) if (!match) return null const [, prefix, numeric, suffix] = match const target = Number.parseFloat(numeric.replace(/,/g, '')) if (!Number.isFinite(target)) return null const decimals = numeric.includes('.') ? numeric.split('.')[1].length : 0 return { decimals, grouped: numeric.includes(','), prefix, suffix, target } } const formatMetricValue = (parsed: ParsedMetric, value: number): string => { const text = parsed.grouped ? value.toLocaleString('en-US', { maximumFractionDigits: parsed.decimals, minimumFractionDigits: parsed.decimals, }) : value.toFixed(parsed.decimals) return `${parsed.prefix}${text}${parsed.suffix}` } /* Server-renders the final value (captures and no-JS read the finished * number), then counts up through the same rAF motion runs on. The count * writes textContent directly — zero re-renders. Unparsable values simply * keep the parent fade. A ghost span reserves the final width so the ticker * never causes layout shift. */ function MetricTicker({ delay, reduceMotion, value, }: { delay: number reduceMotion: boolean value: string }) { const nodeRef = useRef(null) useEffect(() => { const node = nodeRef.current const parsed = parseMetricValue(value) if (reduceMotion || !node || !parsed) return const controls = animate(0, parsed.target, { delay, duration: 1.3, ease: EASE_OUT, onComplete: () => { node.textContent = value }, onUpdate: (latest) => { node.textContent = formatMetricValue(parsed, latest) }, }) return () => { controls.stop() node.textContent = value } }, [delay, reduceMotion, value]) return ( {value} ) } /* ------------------------------------------------------------------ */ /* Aurora field — the layered light atmosphere behind the content */ /* ------------------------------------------------------------------ */ function AuroraField() { return (

{/* Base wash pooling under the headline. */}

{/* Aurora arch — the top rim of a huge ring rising behind the headline, breathing slowly. */}

{/* Curtain rays hanging from the arch, shimmering sideways. */}

{/* Drifting corner glows — soft gradient falloff stands in for blur, so the drift is pure compositor transform. */}

{/* Ink floor grounds the composition. */}

{/* Veil keeps the headline zone airy and AA-clean on any tint. */}

) } /* ------------------------------------------------------------------ */ /* Dashboard glow — the token-derived scene shown without an image */ /* ------------------------------------------------------------------ */ const CHART_LINE = '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' const CHART_GHOST = 'M0 326 C96 320 160 296 232 290 C320 282 380 260 452 246 C540 228 632 210 720 198' function DashboardGlow({ reduceMotion }: { reduceMotion: boolean }) { const gradientId = React.useId() return (

{/* Tinted glass base. */}

{/* Graph grid. */}

{/* Bloom behind the chart's climb. */}

{/* Signal line, drawing itself on arrival. */}

) } /* ------------------------------------------------------------------ */ /* Block */ /* ------------------------------------------------------------------ */ export const HeroAuroraBlock: React.FC = ({ className, description, disableInnerContainer, eyebrow, id, imageCaption, links, metrics, productImage, proofItems, title, }) => { const reduceMotion = useReducedMotion() ?? false /* Pointer parallax — one springed value set, active only on hover-capable pointers. Touch and reduced-motion keep the panel perfectly still. */ const [pointerFine, setPointerFine] = useState(false) useEffect(() => { const query = window.matchMedia('(hover: hover) and (pointer: fine)') const update = () => setPointerFine(query.matches) update() query.addEventListener('change', update) return () => query.removeEventListener('change', update) }, []) const interactive = pointerFine && !reduceMotion const pointerX = useMotionValue(0.5) const pointerY = useMotionValue(0.5) const rotateX = useSpring(useTransform(pointerY, [0, 1], [4.5, -4.5]), POINTER_SPRING) const rotateY = useSpring(useTransform(pointerX, [0, 1], [-6.5, 6.5]), POINTER_SPRING) const panelX = useSpring(useTransform(pointerX, [0, 1], [-6, 6]), POINTER_SPRING) const panelY = useSpring(useTransform(pointerY, [0, 1], [-4, 4]), POINTER_SPRING) const sheenX = useSpring(useTransform(pointerX, [0, 1], [-70, 70]), POINTER_SPRING) const shadowX = useTransform(rotateY, [-6.5, 6.5], [16, -16]) const handlePointerMove = (event: React.PointerEvent) => { if (!interactive || event.pointerType === 'touch') return const rect = event.currentTarget.getBoundingClientRect() pointerX.set((event.clientX - rect.left) / rect.width) pointerY.set((event.clientY - rect.top) / rect.height) } const handlePointerLeave = () => { pointerX.set(0.5) pointerY.set(0.5) } const words = (title ?? '').trim().split(/\s+/).filter(Boolean) return (

{eyebrow ? ( ) : null}

{title}

{description}

{links && links.length > 0 ? ( {links.map(({ link }, index) => ( ))} ) : null} {metrics && metrics.length > 0 ? ( {metrics.map(({ label, value }, index) => (

0 && 'sm:border-l sm:border-border/70 sm:pl-10', )} >

{label}

))} ) : null} {proofItems && proofItems.length > 0 ? (

{proofItems.map(({ label }, index) => ( ))}

) : null}

{/* Ground shadow leans against the tilt. */} {/* Clipped scene layer (image or the token-derived glow). */}

{productImage ? ( ) : ( )} {/* Pointer sheen, gliding across the glass. */}

{productImage ? null : ( <> {/* KPI chips float above the panel plane — they detach in Z as the panel tilts toward the pointer. */}

)} {/* Glass edge highlight. */}

) } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["badge"]}]]}],["$","$L50",null,{"sourceUrl":"https://www.payload-components.xyz/r/hero-aurora.json","proxyUrl":"https://shadcnregistry.com/r/payload-components/hero-aurora","itemId":"@payload-components/hero-aurora"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"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":"$52","type":"registry:file","target":"~/src/blocks/HeroAurora/config.ts"},{"path":"payload-components/source/blocks/HeroAurora/Component.tsx","content":"$53","type":"registry:file","target":"~/src/blocks/HeroAurora/Component.tsx"}]}]]}],"$L54"]}]

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

{title}

Hero Aurora

Installation

Files

~

Styles