Section · scroll

Pinned reveal

A headline stays pinned and darkens while a rounded image rises under it and grows to the full width.

Plein-air week · June

Paint where the light is

A headline stays pinned and darkens while a rounded image rises under it and grows to the full width.

Use when: One strong wide image that deserves the whole screen: a place, a product in use, an event.

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

npx shadcn@latest add @sharingan/pinned-reveal

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.

Pinned reveal content
Name	Type	Default	Description
eyebrow	string (≤ 48 chars)	—	A short kicker above the headline.
headline *	string (8–60 chars)	—	Darkens as the image grows, 3–8 words.
image *	object	—
src *	string (≥ 1 chars)	—	A wide image (16:10 or wider).
alt *	string (4–160 chars)	—	What the image shows, for screen readers.
caption	object	—	A card over the image's corner once it is full width.
title *	string (2–40 chars)	—
text	string (≤ 120 chars)	—
cta	object	—
label *	string (2–28 chars)	—
href *	string (≥ 1 chars)	—

Pinned reveal config
Name	Type	Default	Description
length	number (0.5–3)	1.2	How long the section stays pinned, in screen heights.
start	number (0.3–0.9)	0.55	The image's starting size, as a share of its full width.
radius	number (0–48)	28	The image's corner radius, in pixels.
parallax	boolean	true	The photo also settles inside its frame as it grows.

Section · scroll

<sg-pinned-reveal>

The same engine as a Web Component, driven by attributes, on the page’s own HTML.