Textured Instrument Hero

The page headline hero for vkb-landing-14. Built on a dark dot-matrix and film-grain control surface (layered CSS radial-gradient dots plus an inline SVG feTurbulence grain — no raster, no color literals), with cyan as the lone signal on one headline word. To the right sits a gradient-border framed instrument that demonstrates the product live: a horizontal inline-SVG waveform above a short transcript where one phrase is highlighted in an in-place cyan mark. Depth comes from the gradient border and edge-light, never a glowing background halo.

npx shadcn@latest add @vandoko/vkb-hero-14

Usage

import { VkbHero14 } from "@/registry/new-york/blocks/vkb-hero-14/vkb-hero-14";

export default function Page() {
  return <VkbHero14 />;
}

All copy and the readout data (waveform, transcript, readoutLabel) are overridable via props. The single cyan signal word is set with headlineAccent, split from headlineLead and headlineTrail.