Section · scroll

Case track

A row of case cards, the first wider with its story, moves sideways as the page scrolls, with a progress bar and arrows; on phones it is a row you swipe.

Case studies

Explore our case studies

From a two-person app to a public company: what we tried, what failed, and what moved the number.

All case studies

Health
Clinic booking for the over-sixties
Calmly built a booking app for older patients. We rewrote onboarding around a phone call instead of a form, and sign-ups tripled in a quarter.
+212% sign-ups
From dorm room to boardroom
Fintech
Refills that sell themselves
Retail
A newsletter that pays rent
Media
Headphones for the commute
Hardware
Hiring without job boards
HR

Case track

A row of case cards, the first wider with its story, moves sideways as the page scrolls, with a progress bar and arrows; on phones it is a row you swipe.

Use when: Four to eight case studies, articles or products that read as a series: agencies, studios, editorial pages.

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

npx shadcn@latest add @sharingan/case-track

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

Case track content
Name	Type	Default	Description
eyebrow	string (≤ 48 chars)	—	A short kicker above the headline.
headline *	string (4–60 chars)	—	The section's headline, 2–8 words.
text	string (≤ 200 chars)	—	One or two sentences beside the headline.
cta	object	—
label *	string (2–28 chars)	—
href *	string (≥ 1 chars)	—
cases *	object[] (3–8)	—	The cases, in order. The first is the wider one, with its story.
title *	string (4–70 chars)	—
text	string (≤ 220 chars)	—	Shown on the first, wider card; the others show their title only.
tag	string (≤ 24 chars)	—	A small pill: the sector, the year.
figure	string (≤ 24 chars)	—	One result, set large on the first card: +212% sign-ups.
image *	object	—
src *	string (≥ 1 chars)	—	Portrait or square images fit the cards best.
alt *	string (4–160 chars)	—	What the image shows, for screen readers.
href *	string (≥ 1 chars)	—

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

Case track config
Name	Type	Default	Description
speed	number (0.5–2)	1	How far the page scrolls for each pixel the row moves: higher holds the row longer.
accent	string (≥ 1 chars)	"#ee8a7b"	Every third card, the arrows and the progress bar.
accentAlt	string (≥ 1 chars)	"#b9ccb1"	The first card and every third card after the second.