Section · scroll
Scroll read
A large paragraph that darkens word by word as it is scrolled, with small images that grow inside the text.
Every piece tells a story
We started Atelier Nine for the painter 
who never showed her work, the printmaker 
who sold only to friends, and the collector 
who wanted to know the hand behind the piece on her wall.
Scroll read
A large paragraph that darkens word by word as it is scrolled, with small images that grow inside the text.
Use when: A manifesto, a mission or a long promise that deserves to be read slowly, between two visual sections.
DOM and GSAP (ScrollTrigger, Flip), every browser · not pinned
npx shadcn@latest add @sharingan/scroll-readFirst 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
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short kicker above the paragraph. |
| text * | string (20–400 chars) | — | The paragraph, 20–60 words. `{0}`, `{1}`… place the images inside it, between words. |
| images | object[] (≤ 6) | — | The images the text places with `{0}`, `{1}`… |
| src * | string (≥ 1 chars) | — | A small image, shown about two letters wide inside the text. |
| alt * | string (2–120 chars) | — | What it shows; leave it empty in markup when it only decorates. |
| cta | object | — | |
| label * | string (2–28 chars) | — | |
| href * | string (≥ 1 chars) | — |
config how it moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| from | number (0.4–0.9) | 0.45 | How dark unread words are (their opacity); 0.4 keeps 3:1 contrast. |
| pop | boolean | true | Images inside the text grow in when they are reached. |
The same section as a Web Component
Section · scroll
<sg-scroll-read>
The same engine as a Web Component, driven by attributes, on the page’s own HTML.
Web Component · no framework
This paragraph is plain text in the page. <sg-scroll-read> splits it into words itself, keeps the image 
where it was set, and reads it with lighter grey words.