Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageScroll Reel Gallery
A scroll-driven gallery, not a carousel: section > container > stage (a CSS grid overlay of a tall panel stack and a pinned rail). Panels are six "Scroll Panel" component instances stacked with position: sticky, so plain…
50 sites for €79 only, Compare all plans
All photos and visual assets used in this preview are sourced from Unsplash.
The system behind it
One pattern, your whole brand.
Scroll Reel Gallery reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Component
- Category
- Sliders and carousels
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 6
Set on the section, in Etch’s attributes panel. No code needed.
data-rail-positionwhich side the thumbnail rail is pinned to
data-revealrise = each panel slides up and covers the last (pure CSS, works without JS)
data-rail-dragdrag the rail itself up/down to scrub through panels
data-arrowsprev/next chevrons above and below the rail
data-progressa thin fill line beside the rail showing scroll depth
data-counterthe "01 / 06" chip on the active panel
Component props 2
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
photohttps://images.unsplash.com/photo-1487014679447-9f8336841d58?w=1600
photoAltNorthwind project cover photo
eyebrowCase study 01
titleNorthwind
frameIdframe-1
thumbhttps://images.unsplash.com/photo-1487014679447-9f8336841d58?w=160
altNorthwind
frameIdframe-1
Included in Pro From €39 a year, with all 753 patterns.
Get Pro
