Image Ribbons
Three horizontal image strips drifting in alternating directions as you scroll — rows counter-move to create depth and motion.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#10b981" | Accent color for the eyebrow label and section header line |
| rows | string[][] | DEFAULT_ROWS | Array of 3 image URL arrays — one per ribbon row |
When to Use
Ideal for portfolio showcases, editorial headers, and agency-style galleries. The counter-drifting rows communicate motion even before the user scrolls.
Best Practices
Provide 8+ images per row so there's no gap during drift. Rows 1 and 3 drift left, row 2 drifts right. Works best with consistently-colored images (dark-filtered or monochromatic).
Why This Component Matters
Opposing directional scroll on adjacent rows creates the illusion of depth without a single line of 3D CSS. It's a composition trick borrowed from cinema — and it works.
FAQ
QWhy do rows move in opposite directions?
Rows 0 and 2 translate left as you scroll down, row 1 translates right. The opposition creates a visual tension that reads as depth.
QCan I have more or fewer rows?
The component renders rows.slice(0, 3), so you always get exactly 3 rows. Each row's images come from the corresponding sub-array.
QHow much do the ribbons move?
Each row drifts 320px across the full scroll range of the container. Adjust the useTransform range to change the speed.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.