Halftone Scene Footer
A footer whose backdrop is live video redrawn as a vertical-line halftone: a WebGL shader samples grazing sheep and a mountain ridge on a coarse grid, mapping each cell's darkness to the width of one vertical line, so the footage reads as a woven, barcode-like engraving in two inks over a warm ground plane.
npx shadcn@latest add https://ui.aryank.space/r/halftone-scene-footer.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 |
|---|---|---|---|
| layers | HalftoneLayer[] | sheep + mountain scene | Video layers: src, placement percentages, black/white points, gamma, threshold, grid density, bg/fill opacities, and an optional flipY. |
| backgroundColor | string | "#2c2824" | Dark ink: canvas field and page backdrop. |
| inkColor | string | "#a89474" | Light ink: halftone lines, ground plane, and text. |
| brand | string | "BLANK" | Center wordmark in the top row. |
| locationEyebrow / locationLines | string / string[] | BLANK location block | Top-left eyebrow and address lines. |
| officeEyebrow / officeLines | string / string[] | BLANK studio block | Top-right eyebrow and studio lines. |
| phone | string | "+91 8421911353" | Large underlined tel: link, bottom left. |
| string | "[email protected]" | Large underlined mailto: link, bottom right. | |
| copyright / privacyLabel | string | BLANK copy | Small print on the ground plane. |
backgroundColor / inkColorcolorThe two inks: the dark field and page backdrop, and the light halftone lines, ground plane, and text.
layerstextFull scene override: each layer is a video source plus placement, levels, grid density, and opacities.
phone / emailtextThe two large underlined contact links.
None.