WEB BUILDER / HEROES
Hero variants — same kit, different first impression.
The Hero block ships four variants and three motion options. Each one is rendered below on real copy. Each is keyboard accessible, respects prefers-reduced-motion, and inherits brand tokens.
Variant 1 — centered (default)
DEFAULT
Centered hero. Readable text column.
The default variant. Text-first, controlled width, optional CTAs. Used when the page does not need imagery in the hero — and most pages don't. Compose ImageBand below for cover imagery.
Variant 2 — full (centered, wider)
FULL VARIANT
Full-width centered hero.
When the page deserves wider visual breath — landing hero, marketing flagship — full variant uses the section_container width with centered alignment for both the heading and the CTAs.
Variant 3 — cinematic with ken-burns motion
CINEMATIC + KEN-BURNS
Full-bleed background with a slow zoom + pan loop.
The cinematic variant takes a backgroundImage and an overlay opacity. Add motion='ken-burns' for a slow infinite loop (30s, ease-in-out, alternates). Respect prefers-reduced-motion: motion stops, image stays.
Variant 4 — cinematic with parallax motion (scroll-driven)
CINEMATIC + PARALLAX
Background translates slightly as the section scrolls.
Same cinematic variant with motion='parallax'. Uses CSS animation-timeline: view() where supported. Older browsers receive no motion — the static image displays normally. Zero JS overhead.
Variant 5 — cinematic with gradient-overlay motion
CINEMATIC + GRADIENT OVERLAY
Slow hue and position shift on the overlay.
Same cinematic variant with motion='gradient-overlay'. The overlay blends the brand secondary and primary tokens in a 24-second loop. Subtle by default; the headline stays the focal point.
Variant 6 — centered with GradientBlob ambient
EXPLORE MORE
These are the heroes. Five more showcase surfaces.
The full Web Builder showcase is divided into six categories: templates, heroes, proof blocks, marketing flagship, article UX, motion patterns. Open any to see the kit on real sections.