Section · scroll
Portrait burst
A stack of portraits rises behind a centred headline, then bursts out into a constellation around it, with short facts set between the faces.
The team
Meet the growth team
Fourteen specialists who have scaled products from the first hundred users to the first million.
- 15+ years of growth
- 120+ startups
- 3 exits
- Remote · 9 countries
Portrait burst
A stack of portraits rises behind a centred headline, then bursts out into a constellation around it, with short facts set between the faces.
Use when: Introducing a team, speakers or a community: six to twelve people who matter more than any one of them.
DOM and GSAP (ScrollTrigger, Flip), every browser · pinned for about 1.6 screens
npx shadcn@latest add @sharingan/portrait-burstFirst 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–40 chars) | — | A short headline, 2–5 words: the portraits gather around it. |
| text | string (≤ 160 chars) | — | One sentence under the headline. |
| primaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| secondaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| people * | object[] (6–12) | — | The portraits, placed in this order on twelve set slots around the headline. |
| src * | string (≥ 1 chars) | — | A portrait, 4:5, the face near the top third. |
| alt * | string (4–160 chars) | — | Who it is, for screen readers. |
| name | string (≤ 40 chars) | — | |
| role | string (≤ 40 chars) | — | |
| pills | string[] (≤ 4) | — | Short facts set between the portraits: 15+ years, 100+ clients. |
config how it moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| length | number (0.8–3) | 1.6 | How long the section stays pinned, in screen heights. |
| drift | number (0–1) | 0.5 | How far the portraits drift up, each at its own speed, as the section leaves. |
| tilt | number (0–20) | 8 | How much the stacked portraits lean, in degrees. |
| accent | string (≥ 1 chars) | "#ee8a7b" | The pills. |
The same section as a Web Component
Section · scroll
<sg-portrait-burst>
The same engine as a Web Component, driven by attributes, on the page’s own HTML.
<sg-portrait-burst>
Eight portraits in plain HTML, a steeper lean in the stack, a longer drift and mint pills.
- No framework
- Attributes only