Section · scroll
Bento assemble
Bento tiles fly in from around the grid and lock into place as the page scrolls; their figures count up as they land, and a play badge turns with the scroll.
Why Upwind
Why founders pick us
40
growth specialists
Paid, lifecycle, product and SEO, all in one room.
Weekly calls1,001
experiments run
82%
of clients grow within a quarter
One plan, every channel
Ads, emails and onboarding pull the same way, with one owner for each number.
- Live
A dashboard you can read
Every test, its cost and what it brought in, updated each morning.
$4.2M
raised by clients last year
Bento assemble
Bento tiles fly in from around the grid and lock into place as the page scrolls; their figures count up as they land, and a play badge turns with the scroll.
Use when: A "why us" block with a few strong figures, faces and short claims: agencies, studios, SaaS.
DOM and GSAP (ScrollTrigger, Flip), every browser · pinned for about 1.8 screens
npx shadcn@latest add @sharingan/bento-assembleFirst time? Add the @sharingan registry to your project: getting started. The CLI also installs gsap, used under GSAP’s own no-charge licence.
Add ?motion=final or ?motion=off to the address for the version without scroll motion; phones below 768 px get it too, with short reveals.
Props
content what the section says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short kicker above the headline. |
| headline * | string (4–60 chars) | — | The section's headline, 2–8 words. |
| text | string (≤ 200 chars) | — | One or two sentences beside the headline. |
| badge | object | — | A round play button, ringed by its label, that turns with the scroll. |
| label * | string (4–40 chars) | — | Set in a circle around the play button. |
| href * | string (≥ 1 chars) | — | |
| tiles * | object[] (3–10) | — | The tiles, in reading order. Seven fill a 4 × 3 grid with one large, one tall and two wide tiles. |
| size | "small" | "wide" | "tall" | "large" | "small" | small 1×1, wide 2×1, tall 1×2, large 2×2, on a four-column grid. |
| tone | "paper" | "accent" | "accent-2" | "photo" | "paper" | The tile's colour; `photo` fills it with its image. |
| figure | string (≤ 12 chars) | — | A figure that counts up as the tile lands: 40, 82%, $1.2M, 1,001. |
| title | string (≤ 60 chars) | — | |
| text | string (≤ 140 chars) | — | |
| label | string (≤ 32 chars) | — | A small pill over the tile's corner. |
| image | object | — | The tile's photo (tone `photo`), or a small picture beside its text. |
| src * | string (≥ 1 chars) | — | |
| alt * | string (4–160 chars) | — | What the image shows, for screen readers. |
| avatars | object[] (≤ 6) | — | Faces set in a row of overlapping circles. |
| src * | string (≥ 1 chars) | — | |
| alt * | string (4–160 chars) | — | What the image shows, for screen readers. |
config how it moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| length | number (0.8–3) | 1.8 | How long the section stays pinned, in screen heights. |
| spread | number (0–1.2) | 0.55 | How far out the tiles start, as a share of their distance from the grid's centre. |
| count | boolean | true | Figures count up as their tile lands. |
| accent | string (≥ 1 chars) | "#ee8a7b" | The `accent` tiles, the pills and the badge. |
| accentAlt | string (≥ 1 chars) | "#b9ccb1" | The `accent-2` tiles. |
The same section as a Web Component
Section · scroll
<sg-bento-assemble>
The same engine as a Web Component, driven by attributes, on the page’s own HTML.
