Contained Media Slide Hero
Brand-promise hero whose contained framed image cross-fades as you hover the three Vandoko discipline slides.
Hero — Contained Media With Hover Discipline Slides
Brand-promise hero whose contained framed image cross-fades as you hover the three Vandoko discipline slides.
Installation
$npx shadcn@latest add @vandoko/vkb-hero-08Synthesis
Design synthesis (not a recolor): shadcnblocks structure + Mobbin form (SeatGeek / Better Stack / Kickstarter premium dark-editorial stats language) + Vandoko color & content (oklch tokens, cyan as signal, brand-true copy).
Lineage
| Property | Value |
|---|---|
| Source | @shadcnblocks/hero274 |
| Version | 1.0.0 |
| Curated | 2026-05-27 |
| License | Commercial |
Sources
- shadcnblocks — Hero 274 - Hero with contained image and hover feature slides (payload)
- Mobbin (page-coherent form spec): SeatGeek · Better Stack · Kickstarter
Modifications
- renamed Hero274 → VkbHero08; registry-alias imports + oklch semantic tokens only
- contained aspect-video media frame whose stacked images opacity-swap on hover of the three discipline slides
- cyan reserved as signal on the active discipline indicator dot, the focused media glow, and the media ring
- headline uses the Vandoko tagline verbatim; hover slides are the three disciplines with outcome blurbs
Ported by shadcnblocks-pages-importer v1.2.0 → component-creator (landing-page16, two-front campaign).
Related Components
Carousel Feature-Grid Hero
Lead hero with a bold accent-keyword headline, a three-up feature grid, paired CTAs, and a framed product carousel (embla autoplay) with a slide label + dot pager over a single soft cyan glow.
Integrations Orbit Hero
Integrations-angled brand hero with app/tool tiles orbiting a square product preview on counter-rotating concentric rings.