Halftone Interface Hero
A full-screen dark hero whose two-line wordmark is sampled into rounded halftone pixels, relit around the pointer with chromatic channel separation, and overlaid with a short RGB square-particle trail, complete with balanced navigation and a live location clock.
blank interfaces
npx shadcn@latest add https://ui.aryank.space/r/halftone-interface-hero.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| headline | [string, string] | ["blank", "interfaces"] | The two lines sampled into the halftone field. |
| navigation | { label: string; href: string }[] | Four section links | Centered primary navigation links. |
| utilityLinks | { label: string; href: string }[] | Follow and subscribe links | Right-aligned utility navigation links. |
| brand | [string, string] | ["blank", "interfaces"] | Compact two-line identity at the top left. |
| timeZone | string | "America/New_York" | IANA time zone used by the live footer clock. |
| accentColors | [string, string, string] | Pink, green, and blue | Three colors used for cursor splitting and particles. |
headline / brand / footerLabeltextareaThe canvas wordmark and the surrounding identity copy. No source image is required.
background / foreground / accentColorscolorThe dark frame, halftone ink, and three-channel pointer palette.
navigation / utilityLinkslinksThe centered and right-aligned header destinations.
None.