Section · scroll
Mosaic zoom
One image fills the screen, then shrinks back into its place at the heart of a mosaic while the other tiles gather around it.
Members
You will find yourself among us
Painters, printmakers, photographers and makers: four thousand members, and room for one more.
Become a member
Artist of the monthCollage and print
Mosaic zoom
One image fills the screen, then shrinks back into its place at the heart of a mosaic while the other tiles gather around it.
Use when: A featured person or work among many: an artist of the month, a community, a catalogue with a hero piece.
DOM and GSAP (ScrollTrigger, Flip), every browser · pinned for about 1.6 screens
npx shadcn@latest add @sharingan/mosaic-zoomFirst 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 (8–60 chars) | — | The section's headline, 3–8 words. |
| text | string (≤ 200 chars) | — | One or two sentences under the headline. |
| cta | object | — | |
| label * | string (2–28 chars) | — | |
| href * | string (≥ 1 chars) | — | |
| feature * | object | — | The image that fills the screen first, then takes the mosaic's centre. |
| src * | string (≥ 1 chars) | — | Portrait images (4:5) fit the tiles best. |
| alt * | string (4–160 chars) | — | What the image shows, for screen readers. |
| title * | string (2–40 chars) | — | |
| meta | string (≤ 40 chars) | — | A second line: a role, a place. |
| tiles * | object[] (8–16) | — | The tiles around it, four per row beside the feature (twelve fill three rows). |
| src * | string (≥ 1 chars) | — | Portrait images (4:5) fit the tiles best. |
| 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.6 | How long the section stays pinned, in screen heights. |
| spread | number (0–1.5) | 0.7 | How far out the tiles start, as a share of their distance from the centre. |
The same section as a Web Component
Section · scroll
<sg-mosaic-zoom>
The same engine as a Web Component, driven by attributes, on the page’s own HTML.
<sg-mosaic-zoom>
Plain HTML, tiles that start further out, a shorter pin.
