Which framework does this target?

React/TypeScript with framer-motion and Lucide. The supplied Button adds Radix Slot, class-variance-authority and cn requirements. Adapt these to the host repository; other-framework ports are not prebuilt.

Does it call any external service?

The inspected hero cycles local text state and contains no service calls or image URLs. Local fonts are named by the design reference but not bundled. Actual network behavior depends on integration and should be checked there.

Can I turn the motion off?

Yes, by editing both the timer and animated rendering. Simply changing a transition duration leaves the words cycling. Choose a static word and stop the timeout for a complete reduced-motion treatment.

Can visitors choose the displayed word?

No control is implemented. A two-second timeout cycles the source array automatically; personalization or selection controls would be additional work.

Will the buttons open the expected pages?

They currently render labels and icons without actions. Connect and test real release-note, booking and account destinations before publishing.

Minimal Motion Hero

Previews from the publisher

Keep the hero focused on one sentence while its final word changes automatically. Five supplied adjectives cycle through a vertically animated position every two seconds, above supporting copy and a pair of actions. The React source includes a release-notes button as well. The changing headline is an authored display sequence, not a visitor-controlled state or working sign-up flow.

What you get

A React/TypeScript Hero component, minimal usage example and local Button source. Copy and edit them in your project; they are source to maintain rather than a separately versioned npm block.
A centered responsive text layout, a rotating five-word array and spring-based vertical word transitions. A two-second timeout advances the selected index and clears on effect cleanup. Heading/copy sizes change at the medium breakpoint and vertical spacing increases on large screens.
Written references define warm paper/teal light tokens, dark roles, Outfit body type, Sora headings and a 0.875rem base radius. The icon contract uses inline SVG with 1.5 px square-cap strokes and labeled monochrome marks for real vendors. Apply these during integration: the example’s fixed styles and effect parameters are not all controlled by one theme token.
Icon/imagery guidance, third-party notes and a source checker. No image or WOFF 2 font binaries ship in the ZIP. Resolve React, framer-motion, lucide-react, Radix Slot, class-variance-authority, cn and project styling when integrating the supplied Button.

Before you choose

Use a rotating word only when each variant makes a useful, truthful sentence. Keep a complete static message for readers who avoid motion, and finish the action wiring before considering the hero ready.

Good fit

A product or service with a short message whose changing final word adds meaning without changing the whole layout.
A page needing an editable text-first opening instead of a visual asset-heavy hero.
A team willing to maintain component source and deliberately connect the actions and motion preferences in its host application.

Not for

Visitor-controlled word selection, personalization, generated copy or automatic measurement of which phrase converts best.
A dependency-free/versioned block or an automatic theme match for an established design system.
Working release-note navigation, booking, account creation, authentication or checkout supplied solely by the button labels.

How to use

You say

/hero-minimal-motion Add the Minimal Motion Hero section to the top of the landing page for [product name]. Use my supplied copy and assets, and follow the existing page framework and styling.

Read the target framework and component/style conventions, then copy Hero, demo and Button as appropriate. Resolve React hooks, framer-motion, lucide-react, Radix Slot, class-variance-authority and cn. Set the client boundary in frameworks that need one; other stacks require a real port, with standalone HTML reserved for an intentional standalone deliverable.
Edit the fixed opening phrase, titles array and description directly in source, or add a prop API. Choose similarly compact words and verify the longest one in the clipped rotating region. The supplied array is illustrative, not generated from your product or controlled by the visitor.
Wire all three buttons: release notes, Book a call and Create an account currently have no destinations or handlers. Review the non-wrapping two-action row on a phone; responsive heading classes do not guarantee every label set fits.
Apply the written theme/icon contract and provide local font files. Resolve or replace the nonstandard text-spektr-cyan-50 class against the host theme. This text-only scene needs no raster by default; if extending it, follow person/abstract/photo slot rules and keep assets local.
For reduced motion or a fixed headline, stop the two-second state timer as well as replacing the animated word spans with a readable static word. There is no single off constant and no built-in preference branch. Run node scripts/check-blocks.mjs TARGET, build and check actions, focus, full word bounds and small-screen reading. The scanner cannot confirm those runtime behaviors.

Requirements and costs

You bring: Not collected yet
Dependencies: Not collected yet
Outside costs: Not collected yet
Publisher testing: v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT