# Stacking Cards 3D (CSS) > Scroll-stacked 3D cards powered by CSS view timelines and smooth Lenis scroll — pure-CSS narrative sections. **Definition:** Stacking Cards 3D (CSS) is a scroll UI animation from collections.html. It is built with HTML, CSS, and JavaScript, ships with a live preview, and is free to copy into personal and commercial projects. ## Facts - Category: Scroll - Stack: HTML, CSS, and JavaScript - Added: 2026-08-06 - Canonical page: https://html.bosconvertpro.com/collection/stacking-cards-3d-css - Full-page preview: https://html.bosconvertpro.com/collection/stacking-cards-3d-css/full - Live demo: https://html.bosconvertpro.com/demos/stacking-cards-3d-css/index.html - Markdown mirror: https://html.bosconvertpro.com/collection/stacking-cards-3d-css/index.md - License: https://html.bosconvertpro.com/terms ## How to use 1. Open https://html.bosconvertpro.com/collection/stacking-cards-3d-css/full to preview the animation in full screen. 2. Copy index.html, styles.css, and script.js from the code tabs on https://html.bosconvertpro.com/collection/stacking-cards-3d-css. 3. Paste the files into your project and adjust timing, easing, and content as needed. ## FAQ ### What is Stacking Cards 3D (CSS)? Stacking Cards 3D (CSS) is a scroll UI animation from collections.html. Scroll-stacked 3D cards powered by CSS view timelines and smooth Lenis scroll — pure-CSS narrative sections. ### What is Stacking Cards 3D (CSS) built with? Stacking Cards 3D (CSS) is built with HTML, CSS, and JavaScript. The source for every file is shown on the animation page and can be copied straight into your project. ### How do I use Stacking Cards 3D (CSS) in my project? Open the animation page (https://html.bosconvertpro.com/collection/stacking-cards-3d-css), preview it live, then copy index.html, styles.css, and script.js from the code tabs. Paste the files into your project and adjust timing, easing, and content as needed. A standalone demo runs at https://html.bosconvertpro.com/demos/stacking-cards-3d-css/index.html. ### Is Stacking Cards 3D (CSS) free to use? Yes. The Stacking Cards 3D (CSS) demo code may be used in personal and commercial projects. You may not resell or redistribute the collection itself as a competing template pack. Full terms: https://html.bosconvertpro.com/terms. ## Source — index.html ````html Stacking Cards 3D (CSS)
01 Living 01 / 05

Quiet living

Soft light, raw linen, and low silhouettes — a room designed for stillness and unhurried mornings.

Minimal living room with soft natural light
02 Kitchen 02 / 05

Calm kitchen

Warm stone, open shelves, and clean lines — craft and function in perfect balance.

Modern minimal kitchen interior
03 Work 03 / 05

Focused study

A pared-back desk, muted tones, and soft daylight for deep work without distraction.

Bright modern workspace with large windows
04 Rest 04 / 05

Soft bedroom

Layered textiles, warm neutrals, and quiet corners that invite rest the moment you enter.

Serene bedroom with neutral bedding
05 Outdoors 05 / 05

Open terrace

Timber, greenery, and open air — an outdoor room that blurs the edge between home and landscape.

Modern home terrace with outdoor seating
```` ## Source — styles.css ````css /* ============================================ Stacking Cards 3D (CSS) Professional light UI + Lenis smooth scroll ============================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: initial; -webkit-text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::-webkit-scrollbar, body *::-webkit-scrollbar { display: none; } body { -ms-overflow-style: none; } html { scrollbar-width: none; } img { max-width: 100%; display: block; border: 0; user-select: none; -webkit-user-drag: none; } /* ---------- Tokens ---------- */ :root { --size-unit: 16; --size-container-ideal: 1440; --size-container-min: 992px; --size-container-max: 1920px; --size-container: clamp( var(--size-container-min), 100vw, var(--size-container-max) ); --size-font: calc( var(--size-container) / (var(--size-container-ideal) / var(--size-unit)) ); --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --bg: #f0ede6; --card: #ffffff; --card-2: #fbfaf7; --card-3: #f8f7f4; --card-4: #faf8f4; --card-5: #f7f6f3; --ink: #141210; --ink-soft: rgba(20, 18, 16, 0.62); --ink-mute: rgba(20, 18, 16, 0.4); --line: rgba(20, 18, 16, 0.1); --line-strong: rgba(20, 18, 16, 0.16); } @media screen and (max-width: 991px) { :root { --size-container-ideal: 834; --size-container-min: 768px; --size-container-max: 991px; } } @media screen and (max-width: 767px) { :root { --size-container-ideal: 390; --size-container-min: 480px; --size-container-max: 767px; } } @media screen and (max-width: 479px) { :root { --size-container-ideal: 390; --size-container-min: 320px; --size-container-max: 479px; } } /* ---------- Base ---------- */ body { margin: 0; color: var(--ink); background-color: var(--bg); font-family: var(--font-sans); font-size: var(--size-font); font-weight: 400; line-height: 1.45; } /* ---------- Section ---------- */ .demo-section { justify-content: center; padding: 10svh 1.5em; display: flex; } /* ---------- Card stack ---------- */ .card-stack { --stack-row: 100svh; --stack-top: 10svh; --stack-card-height: calc(var(--stack-row) - 2 * var(--stack-top)); view-timeline-name: --card-stack; grid-auto-rows: var(--stack-row); width: 100%; max-width: 58em; display: grid; position: relative; } /* ---------- Cards — square, editorial ---------- */ .card-stack__item { transform-origin: 50% 100%; color: var(--ink); top: var(--stack-top); height: var(--stack-card-height); background-color: var(--card); border-radius: 0; padding: 2em 2.25em; position: sticky; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 28px 56px -36px rgba(20, 18, 16, 0.22); } .card-stack__item.is--2 { background-color: var(--card-2); } .card-stack__item.is--3 { background-color: var(--card-3); } .card-stack__item.is--4 { background-color: var(--card-4); } .card-stack__item.is--5 { background-color: var(--card-5); } /* ---------- Layout ---------- */ .card-stack__item-inner { display: flex; flex-direction: column; height: 100%; gap: 1.5em; min-height: 0; } /* Header: index — rule — tag ............. count */ .card-stack__header { display: flex; align-items: center; gap: 0.85em; flex-shrink: 0; min-height: 1.25em; } .card-stack__index { font-size: 0.72em; font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--ink); } .card-stack__rule { flex: 1; height: 1px; background: var(--line-strong); min-width: 2em; } .card-stack__tag { font-size: 0.68em; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } .card-stack__count { font-size: 0.68em; font-weight: 400; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--ink-mute); margin-left: 0.25em; } /* Title + description */ .card-stack__item-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5em 3em; align-items: end; flex-shrink: 0; padding-bottom: 0.25em; border-bottom: 1px solid var(--line); } .card-stack__item-h { margin: 0; max-width: 9em; font-family: var(--font-serif); font-size: clamp(2.35em, 4.4vw, 3.5em); font-weight: 400; line-height: 0.96; letter-spacing: -0.025em; color: var(--ink); } .card-stack__item-p { margin: 0; max-width: 28em; font-size: 0.92em; font-weight: 400; line-height: 1.6; letter-spacing: -0.01em; color: var(--ink-soft); padding-bottom: 0.2em; } /* Image panel */ .card-stack__item-bottom { position: relative; flex: 1; min-height: 0; width: 100%; border-radius: 0; overflow: hidden; background: #ebe7df; border: 1px solid var(--line); } .card-stack__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .card-stack__item-bottom::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); background: linear-gradient( 180deg, rgba(20, 18, 16, 0.02) 0%, transparent 30%, rgba(20, 18, 16, 0.06) 100% ); } /* ---------- Animation index ---------- */ .card-stack__item:nth-child(1) { --stack-i: 1; } .card-stack__item:nth-child(2) { --stack-i: 2; } .card-stack__item:nth-child(3) { --stack-i: 3; } .card-stack__item:nth-child(4) { --stack-i: 4; } .card-stack__item:nth-child(5) { --stack-i: 5; } @supports (width: calc(sibling-index() * 1px)) { .card-stack__item { --stack-i: sibling-index(); } } /* ---------- 3D stack-away ---------- */ @supports (animation-timeline: view()) { .card-stack__item { animation: card-stack-away linear forwards; animation-timeline: --card-stack; animation-range: exit-crossing calc(var(--stack-i, 1) * var(--stack-row) - 100svh) exit-crossing calc(var(--stack-i, 1) * var(--stack-row) - var(--stack-top)); } .card-stack__item:last-of-type { animation: none; } } @keyframes card-stack-away { to { transform: perspective(60em) rotateX(25deg) scale(0.85); filter: brightness(0.45); } } @media (prefers-reduced-motion: reduce) { .card-stack__item { animation: none; } } /* ---------- Mobile ---------- */ @media screen and (max-width: 767px) { .demo-section { padding-left: 1em; padding-right: 1em; } .card-stack__item { padding: 1.35em 1.25em; } .card-stack__item-inner { gap: 1.15em; } .card-stack__item-top { grid-template-columns: 1fr; gap: 0.85em; align-items: start; } .card-stack__item-h { font-size: 2.2em; } .card-stack__item-p { max-width: none; } .card-stack__header { gap: 0.6em; } .card-stack__count { display: none; } } ```` ## Source — script.js ````javascript /** * Lenis smooth scroll for Stacking Cards 3D (CSS) * Native scroll position is preserved so CSS view-timeline animations stay in sync. */ function initSmoothScroll() { if (typeof Lenis === "undefined") return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const lenis = new Lenis({ duration: 1.15, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), smoothWheel: true, touchMultiplier: 1.2, }); function raf(time) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf); } document.addEventListener("DOMContentLoaded", initSmoothScroll); ````