Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageGlass Distortion Scroll Carousel
Plain editable section (eyebrow, heading, intro) over a soft aria-hidden aurora backdrop, holding a small GSAP-driven glass rail — no Swiper, since the rail is a bounded free drag with liquid rubber-band edges rather tha…
50 sites for €79 only, Compare all plans
The system behind it
One pattern, your whole brand.
Glass Distortion Scroll Carousel 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 8
Set on the section, in Etch’s attributes panel. No code needed.
data-distortion0-100 · how far the glass stretches — skew + scale-x — while dragging or flinging, proportional to pointer speed
data-smoothness0-100 · how much the rail lags behind the pointer/settle tween — low is snappy and direct, high is a slow liquid drift
data-entry-timingms · duration of each card's blur-and-rise entrance as the carousel scrolls into view (staggered 90ms per card)
data-autoplayand
data-speedidle drift px/s · a slow continuous drift that pauses on hover, drag, wheel and keyboard focus
data-dragdata-arrowsdata-paginationComponent 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-1502136969935-8d8eef54d77b?w=640
imageAltRefraction Study No. 4 — panel 1
tagGlasswork
titleRefraction Study No. 4
linkUrl#work
Included in Pro From €39 a year, with all 469 patterns.
Get Pro
