Section · scroll
Image marquee
A coloured band of oversized words with images set between them, its rows pushed sideways by the scroll.
- Inspired by people
- New art every week
- Prints and originals
- Made by hand
Image marquee
A coloured band of oversized words with images set between them, its rows pushed sideways by the scroll.
Use when: A loud break between calmer sections: a slogan, a list of disciplines, the names of what you sell.
DOM and GSAP (ScrollTrigger, Flip), every browser · not pinned
npx shadcn@latest add @sharingan/image-marqueeFirst 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 |
|---|---|---|---|
| label | string (2–60 chars) | — | What the band is, for screen readers (it is a list). |
| phrases * | string[] (2–8) | — | Short phrases, 1–4 words each, shown in order. |
| images * | object[] (1–8) | — | Images set after each phrase, in turn. |
| src * | string (≥ 1 chars) | — | |
| alt * | string (≤ 120 chars) | — | Empty when the image only decorates. |
config how it moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| background | string (≥ 1 chars) | "oklch(0.93 0.19 122)" | The band's colour. |
| ink | string (≥ 1 chars) | "#111114" | The words' colour; keep 4.5:1 contrast with the band. |
| rows | integer (1–2) | 2 | One row, or two moving in opposite directions. |
| distance | number (5–60) | 25 | How far the rows travel while the band crosses the screen, in % of its width. |
The same section as a Web Component
Section · scroll
<sg-image-marquee>
The same engine as a Web Component, driven by attributes, on the page’s own HTML.
- sg-image-marquee
- One row, further
