VKB Hero 15

An interactive landing hero recreated from the Particulate CodePen. An on-brand image (Gemini-generated, dark/cyan) auto-shatters on load into thousands of physics particles — each carrying its original pixel color — that spring toward home with a gentle drift and blow outward from the pointer on hover. Behind the spectacle a median-cut algorithm extracts the image's dominant palette and renders it live as a swatch dock with luminance-sorted percentages: the hero literally demonstrates a palette being harvested from the artwork. Canvas 2D draws particle colors from image pixel data (the documented Canvas exception to the oklch-token rule); all chrome uses Vandoko oklch tokens with cyan as the lone signal. Respects prefers-reduced-motion and tears down cleanly on unmount.

Installation

Usage

The hero ships with an on-brand source image at /vkb/particulate-source.jpg. Pass imageSrc to shatter your own artwork — use a same-origin image so the canvas can read pixel data for the palette harvest.

<VkbHero15
  imageSrc="/vkb/particulate-source.jpg"
  headlineLead="Break any image open and"
  headlineAccent="harvest"
  headlineTrail="the palette inside."
/>

Lineage

• Source: Particulate — Shatter an Image, Harvest a Palette by Fatih Yıldız (CodePen, MIT)
• Adaptation: reframed as an ambient + hover hero (no upload/freeze tooling); median-cut palette extraction preserved as the demonstrative product element; on-brand imagery generated via gemini-cli nano-banana.