Light Hero

A composite block: imports button-016, heading-001 from @/components/vibeui/ — the install command brings them along with the block. The block owns the layout and its own text, passes the parts props only and leaves their --vibeui-<name>-* palettes alone. A server component, one file, zero npm dependencies. The --vibeui-hero-018-* palette is written out in explicit oklch values rather than light-dark(): lightness is the point of the block, so on a dark page it stays a sheet of cream paper. For the same reason color-scheme:light is declared on the root — otherwise the browser would paint focus rings and text selection from the dark branch on top of a light background. The background is decorated by a single [data-part="canvas"] layer: two repeating linear gradients draw a 4rem grid, a radial-gradient in mask-image fades it towards the edges, and ::after lays a warm accent glow under the headline. The text colour on the accent button is derived from the lightness of the accent itself through oklch(from …), so a light custom accent never produces white on yellow. The headline is set in clamp(2rem,7cqi,4.25rem) against the block width, and the titleAccent tail is underlined by a soft linear-gradient. The buttons carry min-height rather than height: a long translation wraps to a second line instead of spilling out. Frame padding grows through container queries at 40rem and 64rem.