Section · scroll

Card journey

A paragraph darkens word by word while a deck of cards shuffles beside it; the deck deals out into a staircase, then lands in a tabbed grid.

Whether you're an artist looking for a home for your work, or a collector looking for the piece that stops you, Atelier Nine connects you to the people who make it.

Where art meets its people

Every work is shown by the artist who made it, with the story behind it.

Collections

Our vision for any kind of art

Painters, printmakers, collagists: each shows the work as they see it, and collectors find it without an algorithm in the way.

Geometric studyNYPL
FacesNYPL
Rooster on goldEuropeana
Torn postersJazmin Quaynor
Red, blue, blackFons Heijnsbroek
Blue squareFons Heijnsbroek

Card journey

A paragraph darkens word by word while a deck of cards shuffles beside it; the deck deals out into a staircase, then lands in a tabbed grid.

Use when: Right under a visual hero, to bridge a statement and a collection: marketplaces, portfolios, catalogues with six strong images.

DOM and GSAP (ScrollTrigger, Flip), every browser · pinned for about 3 screens

npx shadcn@latest add @sharingan/card-journey

First 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

Card journey content
Name	Type	Default	Description
statement *	string (20–240 chars)	—	The paragraph that darkens as it is read, 20–40 words.
aside	object	—	A note that sits beside the staircase of cards.
title *	string (2–40 chars)	—
text	string (≤ 140 chars)	—
eyebrow	string (≤ 48 chars)	—	A short kicker above the grid's headline.
headline *	string (8–60 chars)	—	The grid's headline, 4–9 words.
text	string (≤ 220 chars)	—	One or two sentences under the headline.
cta	object	—
label *	string (2–28 chars)	—	Action verb first, 1–4 words.
href *	string (≥ 1 chars)	—
tabs	object[] (2–4)	—	Tabs over the grid, each showing some of the cards.
label *	string (1–20 chars)	—
cards	integer[]	—	The cards (by index) this tab shows; every card when left out.
cards *	object[] (3–9)	—	The cards: the deck, the staircase, then the grid (three per row).
src *	string (≥ 1 chars)	—	The image, portrait (4:5 works best).
alt *	string (4–160 chars)	—	What the image shows, for screen readers.
title *	string (1–40 chars)	—
meta	string (≤ 40 chars)	—	A second line under the title: the artist, a price.
href	string	—	Where the card leads.

`config` how it moves; attributes on the Web Component

Card journey config
Name	Type	Default	Description
length	number (1.5–5)	3	How long the section stays pinned, in screen heights.
tilt	number (0–14)	6	How far the deck's outer cards turn, in degrees.
shuffle	boolean	true	The deck shuffles while the paragraph is read.
accent	string (≥ 1 chars)	"var(--foreground, #111114)"	The selected tab's colour.