Components

Crossfade Stack Hero

Two-column split hero: oversized tight-leading headline, dual pill CTAs with hover lift, and a framed media surface housing four crossfading image-stack slots.

VKB Hero 01 — Split hero with crossfading image stacks

Two-column split hero: oversized tight-leading headline, dual pill CTAs with hover lift, and a framed media surface housing four crossfading image-stack slots.

Preview
Open in
Loading preview...

Installation

Terminal
$npx shadcn@latest add @vandoko/vkb-hero-01

Synthesis

Design synthesis (not a recolor): shadcnblocks structure + Mobbin form (v0 / Coda / Linear landing language) + Vandoko color & content (oklch tokens, cyan as signal, brand-true copy).

Lineage

PropertyValue
Source@shadcnblocks/hero166
Version1.0.0
Curated2026-05-25
LicenseCommercial

Sources

  • shadcnblocks — Hero 166 - Split hero with crossfading image stacks and demo button (payload)
  • Mobbin (page-coherent form spec): v0 · Coda · Linear

Modifications

  • oklch semantic tokens (no hex/hsl/rgb)
  • keyframes injected via useEffect (de-duped by id)
  • framed surface rounded-2xl + soft cyan glow (signal)
  • oversized font-semibold tracking-tight leading-[1.05] headline
  • dual pill CTAs
  • Vandoko voice copy

Ported by shadcnblocks-pages-importer v1.2.0 → component-creator (page-decompose pilot).

On this page