Atelier Nine · art marketplace
A place to show the work you're proud of
Geometric studyThe New York Public Library
FacesThe New York Public Library
Rooster on goldEuropeana
Torn postersJazmin Quaynor
Red, blue, blackFons Heijnsbroek
Blue squareFons Heijnsbroek
Bird in colourFons HeijnsbroekArtists display their pieces, collectors discover and buy the ones that move them. No algorithm, no auction: the work, and the people behind it.
Gallery fan
A fan of artwork cards opens under the headline; the card nearest the pointer rises while its neighbours make room, and collaborator cursors drift between them.
Use when: Marketplaces, portfolios, collectives and galleries: when the work itself is the promise and you have six or seven strong images.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/gallery-fanFirst time? Add the @sharingan registry to your project: getting started.
Add ?motion=final to the address for the repeatable still frame, or ?motion=off for the reduced-motion version.
Props
content what the hero 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 promise in one or two lines, 4–9 words. |
| subheadline | string (≤ 180 chars) | — | One or two sentences under the fan. |
| 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) | — | |
| artworks * | object[] (3–9) | — | The cards of the fan, left to right. |
| src * | string (≥ 1 chars) | — | The image, portrait (4:5 works best). |
| alt * | string (4–160 chars) | — | What the work shows, for screen readers. |
| title * | string (1–40 chars) | — | |
| artist * | string (1–40 chars) | — | Shown under the title when the card is raised. Credit people here. |
| href | string | — | Where the card leads: the work's page, its source. |
| collaborators | object[] (≤ 2) | — | Live cursors resting over a card (by index), as in a shared canvas. |
| name * | string (1–16 chars) | — | |
| card | integer (0–9007199254740991) | — |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| spread | number (0.3–1) | 0.86 | How wide the fan opens, as a share of the hero's width. |
| angle | number (0–40) | 22 | How far the outer cards turn, in degrees. |
| depth | number (0–500) | 240 | How far the outer cards sink back, in pixels. |
| colors | string[] (≤ 2) | ["oklch(0.6 0.2 262)","oklch(0.62 0.14 160)"] | The collaborators' cursor colours. |
| intro | boolean | true | The cards start stacked and open into the fan. |
| pointer | boolean | true | The card nearest the pointer rises and its neighbours make room. |
| cursors | boolean | true | Collaborator cursors float over the cards and move from one to another. |
The same hero as a Web Component
Web Component · no framework
<sg-gallery-fan>
Blue squareFons HeijnsbroekRooster on goldEuropeanaBird in colourFons HeijnsbroekRed, blue, blackFons HeijnsbroekGeometric studyThe New York Public LibraryThe same engine, driven by attributes: five cards, a narrower and deeper fan, one collaborator.