Dither Hero
A bold product hero on a panel of pixel-dithered plasma in your brand colour that lights up around the cursor, with a screenshot overlapping its edge.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/dither-heroProps
| Prop | Type | Default | Description |
|---|---|---|---|
title* | React.ReactNode | - | The main headline, shown in white on the panel. |
eyebrow | string | - | Small label above the title. |
description | string | - | Supporting text under the title. |
children | React.ReactNode | - | Calls to action, under the description. |
image | { src: string; alt: string } | - | Screenshot that overlaps the bottom of the panel. |
colors | [string, string] | ["#1235e8", "#6d9bff"] | Panel and dot colours of the dither, as hex. |
pixelSize | number | 4 | Size of one dither pixel, in CSS pixels. |
speed | number | 1 | Animation speed; 0 holds the pattern still. |
interactive | boolean | true | Light the pattern up around the cursor. |
className | string | - | Extra classes for the section. |
