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
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 469 patterns.
Get ProMore patterns
