Installation

npx payload-components add hero-kinetic

What it installs

Copies 3 source files into your project:

src/blocks/shared/heroFields.tsshared
src/blocks/HeroKinetic/config.ts
src/blocks/HeroKinetic/Component.tsx

…and makes 4 edits to wire the block into your project:

Registers the block	`src/collections/Pages/index.ts`
Maps the renderer	`src/blocks/RenderBlocks.tsx`
Regenerates types	`src/payload-types.ts`
Regenerates the admin import map	`src/app/(payload)/admin/importMap.js`

Registers the blocksrc/collections/Pages/index.ts

Maps the renderersrc/blocks/RenderBlocks.tsx

Regenerates typessrc/payload-types.ts

Regenerates the admin import mapsrc/app/(payload)/admin/importMap.js

heroFields.ts is the shared field core for this family — every variant composes it. Editing it updates each installed block at once, and re-running an install never overwrites a copy you have changed.

Re-running the install converges: it detects existing wiring, skips it, and records install state in .payload-components/state.json.

Content model

The first four fields come from the shared heroFields base. marqueeItems, image, imageCaption, and proofItems define this editorial variant. All animation is presentation: it runs from the motion package inside the installed component, honors prefers-reduced-motion (the final state renders without JavaScript or motion, and the marquee becomes a static wrapped row), and never adds editor-managed fields. The component splits the title string into balanced line masks itself and sets the closing word in the theme's serif accent — no extra fields.

Prop

Type

Usage

Add the block to a page. In the Payload admin, open (or create) a Page and add the HeroKinetic block to its layout.

Fill the content. Complete the fields from the content model above — the component ships sample content you can start from.

Publish. Save and publish the page; the block renders through RenderBlocks on the frontend, fully typed — no extra wiring.

Requirements

Target: payload-website-starter
Payload: v3
Next.js: 15 / 16
shadcn UI: none

Your project must already expose components.json, src/payload.config.ts, src/blocks/RenderBlocks.tsx, src/collections/Pages/index.ts — the surfaces payload-components add patches. The CLI verifies this against the support matrix before touching anything.

In this family

hero-basic

Hero BasicA headline-led marketing hero with CTA links, proof badges, Payload block config, and frontend rendering.

hero-video

Hero VideoA full-bleed video hero with editor-managed media, CTA links, proof labels, and a reduced-motion poster fallback.

hero-product-tilt

Hero Product TiltA centered product hero with a static perspective frame, CTA links, proof labels, and editor-managed media.

hero-aurora

Hero AuroraA motion-first product hero with an animated aurora field, staggered headline reveal, pointer-parallax media panel, and a live metric ticker.

hero-kineticcurrent

Hero KineticA motion-first editorial hero with a line-masked type reveal, cinematic media plate, and a velocity-aware marquee strip.