Hero direction field guide

Distinctive hero sections for AI-built landing pages

A distinctive hero needs a clear composition and interaction idea, not just a new gradient. Choose a source example by message density, visual direction, motion, content constraints, responsive behavior, accessibility, dependencies, and license. Then adapt the content hierarchy deliberately instead of asking an AI tool to preserve every decorative detail unchanged.

Responsive proof set

Five exact published React heroes across geometric, product, cinematic, route-led, and generative directions were replayed across Chromium · 1440 × 900, Chromium mobile · 390 × 844, and Chromium · reduced motion. Each adapter was exercised through its available passive, pointer, keyboard, touch-equivalent, menu, CTA, scrubber, selection, or pause path. The comparison reports public preview behavior and catalog metadata; it does not inspect protected source or measure conversion performance.

Reviewed: 2026-08-26 by vro.dev public hero preview audit.

Hero selection rubric

Item	Direction	Content capacity	CTA capacity	Motion	Mobile behavior	Dependencies	Best fit	Limit
Orbit Shape Hero	Quiet geometric atmosphere	Compact badge, two short headline lines, and one supporting paragraph	No built-in CTA in the published preview; add a small native action group only if the message needs it	Not declared	No touch-only gesture is required to understand or use the protected component.	lucide-react, react	Studio, portfolio, or brand-positioning page with concise conversion copy	The composition loses hierarchy when long copy or a dense action set competes with the floating shapes
Perspective Product Hero	Code-native product runway	Announcement, two-line headline, supporting paragraph, two actions, navigation, and illustrative workspace	One primary and one secondary hero action, plus product navigation and a mobile disclosure	Not declared	The mobile disclosure and stacked conversion actions use ordinary touch activation with generous targets.	react	Software launch or technical product page that benefits from showing a believable interface	The workspace is illustrative; authentication, routing, data, execution, evidence, and persistence remain host responsibilities
Expanding Cinema Hero	Cinematic editorial stage	Eyebrow, display title, one supporting line, framed media, scrubber, and three compact schedule rows	A reserve action per schedule row; the visual stage should remain the dominant conversion idea	Not declared	Touch interactions preserve the reviewed mobile layout, direct manipulation path where applicable, and practical target sizing.	react	Culture, entertainment, campaign, or launch page with rights-cleared hero media	Requires a predictably sized container and rights-cleared local media; dense explanatory copy weakens the cinematic frame
Journey Roadmap Hero	Route-led interactive narrative	Eyebrow, headline, paragraph, primary action, and two to six selectable stops with attached detail	One primary action plus direct stop selection with roving keyboard navigation	Not declared	Touch interactions preserve the reviewed mobile layout, direct manipulation path where applicable, and practical target sizing.	lucide-react, react	Travel, process, roadmap, onboarding, or milestone story where sequence is the message	Stop count and percentage positions need editorial care; too many labels or long chapters crowd the map
Paper Ink Shader Hero	Generative editorial surface	Eyebrow, display headline, supporting paragraph, two actions, and one motion control	One primary and one secondary action with a separate pause/resume control	Not declared	Touch interactions preserve the reviewed mobile layout, direct manipulation path where applicable, and practical target sizing.	lucide-react, react, three	Creative-tool, editorial, or art-direction launch where atmosphere is part of the product promise	Requires WebGL plus a complete static fallback; copy contrast and GPU cost must be rechecked in the final host

Five example analyses

Quiet geometric atmosphere

Orbit Shape Hero

Frame concise conversion copy with translucent geometric capsules that enter and drift across a centered dark hero while remaining static under reduced motion.

Content capacity: Compact badge, two short headline lines, and one supporting paragraph

CTA capacity: No built-in CTA in the published preview; add a small native action group only if the message needs it

Observed path: Passive composition, desktop-to-mobile resize, and reduced-motion resting frame

Reduced motion: The component respects prefers-reduced-motion while preserving the same content, state, and useful static visual result.

Code-native product runway

Perspective Product Hero

Introduce a software platform through compact navigation, a precise conversion hierarchy, and an original code-native product workspace receding into a perspective runway.

Content capacity: Announcement, two-line headline, supporting paragraph, two actions, navigation, and illustrative workspace

CTA capacity: One primary and one secondary hero action, plus product navigation and a mobile disclosure

Observed path: Workspace run actions, mobile navigation disclosure, desktop-to-mobile resize, and reduced motion

Reduced motion: The product runway holds a stable perspective and all interaction transitions are removed.

Cinematic editorial stage

Expanding Cinema Hero

A cinematic hero brief that expands a central frame and stages supporting media through scroll or direct scrubbing.

Content capacity: Eyebrow, display title, one supporting line, framed media, scrubber, and three compact schedule rows

CTA capacity: A reserve action per schedule row; the visual stage should remain the dominant conversion idea

Observed path: Range scrubbing, keyboard adjustment, reserve action, desktop-to-mobile resize, and reduced motion

Reduced motion: The component respects prefers-reduced-motion and presents the same content and actions without continuous or spatial animation.

Route-led interactive narrative

Journey Roadmap Hero

A route-led trip planner with selectable stops, progress, and contextual itinerary details.

Content capacity: Eyebrow, headline, paragraph, primary action, and two to six selectable stops with attached detail

CTA capacity: One primary action plus direct stop selection with roving keyboard navigation

Observed path: Pointer selection, Arrow/Home/End navigation, primary action, desktop-to-mobile resize, and reduced motion

Reduced motion: The component respects prefers-reduced-motion and presents the same content and actions without continuous or spatial animation.

Generative editorial surface

Paper Ink Shader Hero

A live generative visual workspace with a full-bleed shader, static fallback, pause control, and conversion actions.

Content capacity: Eyebrow, display headline, supporting paragraph, two actions, and one motion control

CTA capacity: One primary and one secondary action with a separate pause/resume control

Observed path: Pointer response, native actions, pause/resume, desktop-to-mobile resize, and reduced motion

Reduced motion: The component respects prefers-reduced-motion and presents the same content and actions without continuous or spatial animation.

Method and limits

This is a responsive public-preview and content-capacity audit, not a conversion study, performance benchmark, or guarantee for every product, copy deck, browser, or host layout. Browser declarations remain item metadata. Replace fictional preview copy and media with truthful rights-cleared project content, preserve accessibility and reduced-motion behavior, and test the delivered source with the final message hierarchy before shipping.

Browse heroes · Choose across creative visual directions · Check screenshot provenance and adoption facts · Review representative component jobs · Shader runtimes · Readiness metadata · Licensed source guide · Included Component License