Aisol Depth Cards

Aisol Depth Cards is a horizontal rail where each card turns away as it leaves the centre — a little rotation, a little scale, a little fade — so the row reads as depth instead of a flat strip.

The depth comes from each card's own intersection ratio, not from geometry. There is no scrollLeft read and no rect measurement anywhere in the component; the browser keeps doing the scrolling and snapping it is already good at.

Reduced motion is respected properly: when the visitor has motion turned off, the animation does not run and the observer is never attached. Nothing is measured — no getBoundingClientRect, no scroll listeners, no layout reads — so the Framer canvas stays still while you work. The static renderer is a separate, pure branch: no observers, no timers, no transitions. What you see on the canvas is the finished state.

What you control: turn angle, shrink and fade (set any to zero for a flatter rail) · card width, gap, corner radius · arrows on or off (they scroll the rail, they do not rebuild it) · heading level for card titles, text size, four colours · cards as a plain array, or bind a CMS collection through the card slots · rail name for screen readers, and the empty-state text.

Cards without an image draw a soft tinted block from the title rather than an empty grey box, so a half-filled collection still looks finished. Card width steps down at tablet width and becomes screen-relative on phones — the page itself never scrolls sideways, only the rail does.

Part of the Aisol component library — 19+ production-ready components. Full paid set: framer.com/@ulz-song · store: payhip.com/AisolStudio