{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hero-kinetic", "title": "Hero Kinetic", "description": "Motion-first editorial hero with a line-masked type reveal, cinematic plate, and velocity marquee.", "dependencies": [ "motion" ], "registryDependencies": [], "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/HeroKinetic/config.ts", "content": "import type { Block } from 'payload'\n\nimport { heroFields } from '@/blocks/shared/heroFields'\n\nexport const HeroKinetic: Block = {\n slug: 'heroKinetic',\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_kinetic',\n interfaceName: 'HeroKineticBlock',\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: 'marqueeItems',\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: 8,\n },\n {\n name: 'image',\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 Kinetic Blocks',\n singular: 'Hero Kinetic',\n },\n}\n", "type": "registry:file", "target": "~/src/blocks/HeroKinetic/config.ts" }, { "path": "payload-components/source/blocks/HeroKinetic/Component.tsx", "content": "'use client'\n\nimport React, { useMemo, useRef } from 'react'\n\nimport {\n motion,\n useAnimationFrame,\n useMotionValue,\n useReducedMotion,\n useScroll,\n useSpring,\n useTransform,\n useVelocity,\n} from 'motion/react'\n\nimport type { HeroKineticBlock as HeroKineticBlockData } from '@/payload-types'\n\nimport { CMSLink } from '@/components/Link'\nimport { Media } from '@/components/Media'\nimport { cn } from '@/utilities/ui'\n\n/* Kinetic editorial hero — a title-sequence treatment of the shared hero\n * fields. The headline splits itself into balanced line masks and rises word\n * by word (the closing word lands in the serif accent); the media plate opens\n * from a letterbox slit and settles with a slow parallax; the marquee strip\n * loops continuously and leans into scroll velocity, reversing with it.\n *\n * Motion contract: transform/opacity only, no layout shift, no animated blur.\n * `prefers-reduced-motion` lands the final frame instantly — the JS timeline\n * is gated by useReducedMotion() and every animated style is pinned to its\n * final value by `motion-reduce:` utilities, so even the pre-hydration HTML\n * renders complete. The marquee degrades to a static wrapped row. */\n\ntype Props = HeroKineticBlockData & {\n id?: string\n className?: string\n disableInnerContainer?: boolean\n}\n\nconst EASE: [number, number, number, number] = [0.22, 1, 0.36, 1]\n\n/** Split a headline into (at most) two visually balanced word lines,\n * preferring a break right after sentence punctuation. */\nconst balanceTitle = (title: string): string[][] => {\n const words = title.trim().split(/\\s+/).filter(Boolean)\n if (words.length <= 3) return [words]\n\n let bestIndex = 1\n let bestScore = Number.POSITIVE_INFINITY\n for (let index = 1; index < words.length; index += 1) {\n const left = words.slice(0, index).join(' ').length\n const right = words.slice(index).join(' ').length\n const score = Math.abs(left - right) - (/[.!?:;—–-]$/.test(words[index - 1]) ? 6 : 0)\n if (score < bestScore) {\n bestScore = score\n bestIndex = index\n }\n }\n\n return [words.slice(0, bestIndex), words.slice(bestIndex)]\n}\n\nconst wrapRange = (min: number, max: number, value: number): number => {\n const range = max - min\n return ((((value - min) % range) + range) % range) + min\n}\n\n/* Seamless velocity marquee: the item group renders enough times to cover any\n * container, then a single rAF loop translates the track and wraps it every\n * group-width. Scroll velocity (springed) boosts the speed and flips the\n * direction, so the strip answers the reader's hand. */\nconst KineticMarquee: React.FC<{\n items: NonNullable\n reduce: boolean\n}> = ({ items, reduce }) => {\n const { copies, speed } = useMemo(() => {\n const chars = items.reduce((total, item) => total + item.label.length, 0)\n const groupWidth = Math.max(chars * 12 + items.length * 72, 160)\n const groupCopies = Math.min(24, Math.max(2, Math.ceil(3200 / groupWidth)))\n /* ~44px/s of baseline drift, expressed in % of the whole track per second. */\n return { copies: groupCopies, speed: (44 / (groupWidth * groupCopies)) * 100 }\n }, [items])\n\n const baseX = useMotionValue(0)\n const { scrollY } = useScroll()\n const scrollVelocity = useVelocity(scrollY)\n const smoothVelocity = useSpring(scrollVelocity, { damping: 50, stiffness: 400 })\n const velocityFactor = useTransform(smoothVelocity, [0, 900], [0, 4], { clamp: false })\n const direction = useRef(1)\n const groupPercent = 100 / copies\n const x = useTransform(baseX, (value) => `${wrapRange(-groupPercent, 0, value)}%`)\n\n useAnimationFrame((_, delta) => {\n if (reduce) return\n const factor = velocityFactor.get()\n if (factor < -0.1) direction.current = -1\n else if (factor > 0.1) direction.current = 1\n const boost = 1 + Math.min(Math.abs(factor), 5)\n baseX.set(baseX.get() - direction.current * speed * boost * (Math.min(delta, 48) / 1000))\n })\n\n return (\n
\n \n \n {Array.from({ length: copies }, (_, copy) => copy).flatMap((copy) =>\n items.map((item, index) => (\n \n \n {item.label}\n \n \n \n )),\n )}\n \n
\n\n {/* Reduced-motion (and no-preference-unknown) fallback: the same items as\n a static wrapped row. Swapped purely in CSS so the pre-hydration frame\n is already correct; under motion it stays in the accessibility tree. */}\n \n \n )\n}\n\n/* Token-built abstract \"film still\" for the no-upload default: layered\n * gradients over the foreground tone — top wash, drifting light beam, sun\n * disc, emerald horizon, scanline grain. Every colour derives from theme\n * variables, so it re-tones with the consumer's palette. */\nconst KineticStill: React.FC<{ reduce: boolean }> = ({ reduce }) => (\n
\n \n \n \n \n \n \n
\n)\n\n/* Cinematic plate: a letterbox slit irises open over the frame while the\n * content settles from an overscanned scale, then keeps a slow scroll\n * parallax. Crop marks register once the reveal completes. */\nconst KineticPlate: React.FC<{\n image: HeroKineticBlockData['image']\n imageCaption: HeroKineticBlockData['imageCaption']\n reduce: boolean\n}> = ({ image, imageCaption, reduce }) => {\n const frameRef = useRef(null)\n const { scrollYProgress } = useScroll({ offset: ['start end', 'end start'], target: frameRef })\n const parallax = useTransform(scrollYProgress, [0, 1], ['-4%', '4%'])\n const settle = reduce ? { duration: 0 } : { delay: 0.45, duration: 1.3, ease: EASE }\n\n return (\n
\n \n \n \n {image ? (\n \n ) : (\n \n )}\n \n \n \n\n \n \n \n\n {imageCaption ? (\n \n \n {imageCaption}\n \n ) : null}\n
\n )\n}\n\nexport const HeroKineticBlock: React.FC = ({\n className,\n description,\n disableInnerContainer,\n eyebrow,\n id,\n image,\n imageCaption,\n links,\n marqueeItems,\n proofItems,\n title,\n}) => {\n const reduce = useReducedMotion() ?? false\n const lines = useMemo(() => balanceTitle(title), [title])\n const lineOffsets = useMemo(\n () => lines.map((_, index) => lines.slice(0, index).reduce((total, line) => total + line.length, 0)),\n [lines],\n )\n\n const enter = (delay: number, duration = 0.7) =>\n reduce ? { duration: 0 } : { delay, duration, ease: EASE }\n\n return (\n
\n
\n \n
\n {/* Masthead: eyebrow plus a hairline rule that draws itself in. */}\n
\n {eyebrow ? (\n \n \n {eyebrow}\n \n ) : null}\n \n
\n\n {/* The headline splits itself into balanced lines; every word rises\n out of its own overflow mask. The mask padding (cancelled by\n negative margins) keeps descenders and italic overhangs unclipped. */}\n

\n {lines.map((line, lineIndex) => (\n \n {line.map((word, wordIndex) => {\n const order = lineOffsets[lineIndex] + wordIndex\n const isClosingWord =\n lineIndex === lines.length - 1 && wordIndex === line.length - 1\n return (\n \n \n \n {word}\n \n \n {wordIndex < line.length - 1 ? ' ' : null}\n \n )\n })}\n \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 {/* Hover micro-detail: an emerald hairline draws under the CTA. */}\n \n \n ))}\n \n ) : null}\n\n {proofItems && proofItems.length > 0 ? (\n
    \n {proofItems.map(({ label }, index) => (\n \n \n {String(index + 1).padStart(2, '0')}\n \n {label}\n \n ))}\n
\n ) : null}\n
\n
\n\n \n\n {marqueeItems && marqueeItems.length > 0 ? (\n \n ) : null}\n
\n \n
\n )\n}\n", "type": "registry:file", "target": "~/src/blocks/HeroKinetic/Component.tsx" } ], "meta": { "payloadComponent": { "installCommand": "payload-components add hero-kinetic", "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-kinetic\n```\n\nDirect shadcn install URL:\n\n```bash\npnpm dlx shadcn@latest add https://www.payload-components.xyz/r/hero-kinetic.json\n```\n\nDirect shadcn installs only copy the block source files and shadcn UI dependencies. Use `payload-components add hero-kinetic` when you also want Payload layout registration, `RenderBlocks` wiring, `generate:types`, and `generate:importmap` handled for you.", "type": "registry:block" }