Dither Studio Page
A full-bleed agency homepage built on dither. The whole page sits on a fixed WebGL fbm field quantised through a Bayer matrix that drifts and warps toward the cursor. A floating pill nav carries a morphing pixel mark and a per-section message, and unfolds into a full menu behind a page-wide blur. A right rail stacks a contact card and collapsible panels that follow the section in view, case rows expand in place with seeded procedural dither plates, every image slot smears into coarse pixels under the cursor, a label chases the pointer across hoverables, and a status rail pins to the bottom with a live clock. On load a counter runs to 100% before the plate dissolves from its thinnest areas outward. No media bundled, no runtime dependencies; pass footage through props.
npx shadcn@latest add https://ui.aryank.space/r/dither-studio-page.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 |
|---|---|---|---|
| heroVideoSrc | string | undefined | Looping footage for the hero plate, requantised to duotone dither per frame; the field shows through when absent. |
| heroPoster | string | undefined | Still image used as the hero plate when no video is passed. |
| reelVideoSrc | string | undefined | Footage for the This is us rail panel, rendered as dither. |
| reelPoster | string | undefined | Still fallback for the rail panel. |
| avatarSrc | string | undefined | Avatar shown inside the contact cards. |
| className / style | string / CSSProperties | undefined | Passed to the root wrapper for sizing and layout. |
heroVideoSrctextLooping footage dithered into the hero plate. Omit it to let the field show through.