Behind the work
Curious what else we've made?
Brand identities, packaging and product shoots from the studio, for small makers and the shelves they want to win.
See all projects
- #01Strategy & planning
- #02Design & development
- #03Launch & growth
- #04Ongoing support
Curve reel
Project cards on the inside of a curved wall: the middle sinks back, the edges come forward, and the reel turns slowly while numbered steps light up as the cards pass.
Use when: Studios, agencies and portfolios with eight or more strong images, and a process worth naming in three to five steps.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/curve-reelFirst 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 (≤ 40 chars) | — | A short kicker in the accent colour. |
| headline * | string (8–60 chars) | — | The promise in one or two lines, 3–8 words. |
| subheadline | string (≤ 160 chars) | — | One sentence under the headline. |
| cta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| projects * | object[] (4–16) | — | The cards of the reel, in the order they pass. When they are too few to close the loop, the reel repeats them. |
| src * | string (≥ 1 chars) | — | The image, portrait (10:13 or 4:5 work best). |
| alt * | string (4–160 chars) | — | What the image shows, for screen readers. |
| title * | string (1–40 chars) | — | The project's name, read with the card. |
| href | string | — | Where the card leads: the case study. |
| steps | object[] (≤ 5) | — | Numbered steps under the reel (#01, #02…); each lights up while its cards pass the middle. |
| label * | string (2–32 chars) | — | |
| card | integer (0–9007199254740991) | — | The card (by index) that lights this step when it passes the middle. Spread evenly when left out. |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| curvature | number (0–1) | 0.7 | 0 is a flat strip, 1 a deep curved wall: the middle sinks back, the edges come forward. |
| speed | number (0–120) | 24 | How fast the reel turns, in cards per minute; 0 holds it still. |
| visible | integer (5–11) | 7 | How many cards fit on the arc; more are cut at the edges. |
| drag | boolean | true | Drag or swipe the reel to turn it; it keeps its momentum. |
| tilt | number (0–8) | 3 | How far the view leans toward the pointer, in degrees. |
| accent | string | "oklch(0.68 0.2 45)" | The eyebrow, the step numbers, the button's arrow and the step progress. |
| steps | boolean | true | Show the numbered steps and light them as the reel turns. |
| intro | boolean | true | The cards start stacked in the middle and open onto the curve. |
The same hero as a Web Component
Web Component · no framework
<sg-curve-reel>
The same engine, driven by attributes: a deeper curve, nine cards on the arc, a faster turn, a blue accent. Five photos, repeated to close the loop.
- #01Brief
- #02Shoot
- #03Ship