Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageScroll Depth Deck
Plain editable Etch tree: section > container > header (eyebrow, h2, intro) > a tall scroll rail holding a sticky 3D stage of "Depth Card" component instances (image, imageAlt, index label, title, category). Only the car…
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 Depth Deck 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
- Layout
- Category
- Sliders and carousels
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 9
Set on the section, in Etch’s attributes panel. No code needed.
data-themere-themes the whole section
data-densitypx of page scroll per card step
data-depthpx the receding cards travel back in Z
data-rotationdeg max Y-rotation on off-centre cards
data-scale-minsmallest scale a fully receded card reaches
data-blurreceded cards soften as they travel back
data-sticky-heightvh of the pinned viewport while the deck scrolls through it
data-arrowsnudge one card step per click
data-counter"03 / 08" readout over the stage
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
imagehttps://images.unsplash.com/photo-1487958449943-2429e8be8625?w=900
imageAltEmber Courtyard — Cultural
index01
categoryCultural
titleEmber Courtyard
Included in Pro From €39 a year, with all 753 patterns.
Get ProMore patterns
