Connect, create, collect
How a wall of torn posters became a series of forty collages.
Section · scroll
Parallax columns
A staggered two-column grid of cards whose columns travel at different speeds as the page scrolls.
From the journal
Every piece tells a story
Studio visits, first sales and the long road to a show. Our members write about the work as it happens.
Parallax columns
A staggered two-column grid of cards whose columns travel at different speeds as the page scrolls.
Use when: Four to eight stories, features or works of equal weight that read well as a magazine spread.
DOM and GSAP (ScrollTrigger, Flip), every browser · not pinned
npx shadcn@latest add @sharingan/parallax-columnsFirst 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 (≤ 220 chars) | — | One or two sentences beside the headline. |
| cards * | object[] (4–10) | — | The cards, alternating between the left and right columns. |
| src * | string (≥ 1 chars) | — | The card's image (4:3 works best). |
| alt * | string (4–160 chars) | — | What the image shows, for screen readers. |
| title * | string (2–48 chars) | — | |
| text | string (≤ 160 chars) | — | One or two sentences under the title. |
| href | string | — | Where the card leads. |
config how it moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| speed | number (0–1) | 0.5 | How far the columns drift apart as the page scrolls. |
| depth | boolean | true | Each photo also moves inside its card. |
The same section as a Web Component
Section · scroll
<sg-parallax-columns>
The same engine as a Web Component, driven by attributes, on the page’s own HTML.
<sg-parallax-columns>
The same engine on plain HTML: columns that drift further apart, photos that stay still in their cards.
Strawberry jam
Watch
Soda
