Triangle Fill Scroll
A pinned scene where a lattice of alternating triangles floods with color in a random order. Every cell is assigned a shuffled position in the sequence at build time, then fills once scroll passes its slot, each easing toward its target scale on its own, so the fill spreads as scattered noise rather than a wipe. Two canvases stack around the cards: hollow outlines behind and filled triangles in front, so the cards are swallowed as the grid closes over them.
npx shadcn@latest add https://ui.aryank.space/r/triangle-fill-scroll.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 |
|---|---|---|---|
| cards | TriangleCard[] | Three BLANK products | Title, code, and image for each card in the strip. |
| accent / triangleSize | string / number | #ff6b00 / 150 | Fill color and cell size, which drives grid density. |
| backgroundImage | string | Blob-hosted scene | The photograph behind the grid. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
accentcolorFill color of the triangles and the accent type.
triangleSizetextCell size in pixels, which sets the grid density.
gsaplenis