---
title: "Aisol Depth Cards — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Aisol Studio · 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 —…"
canonical: "https://framer.elliotli.dev/component/aisol-depth-cards"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Aisol Depth Cards

# Aisol Depth Cards

Cards that turn as they pass

[View on Framer](https://framer.com/marketplace/components/aisol-depth-cards/?via=elliot-li)

![Aisol Depth Cards preview image 1](https://framer.elliotli.dev/og/component/aisol-depth-cards/55a73c55be529944/1600x1200.jpg)

## Summary

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…

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #9910

## Details

- **Author**: Aisol Studio
- **Price**: $7.00
- **Published**: 2026-09-02
- **Updated**: 2026-10-02
- **Added**: 2026-09-02
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator