Méridien Arc Card Scroll

Scroll-Driven Arc Card Carousel with Synced Step Counter

Goal

Build a single full-screen pinned section where a row of image cards is laid out along a circular arc (like cards resting on the rim of a giant wheel below the viewport) and rotates through the top of the screen as you scroll — each card swings up from the right, passes upright through the center, and swings off to the left, staying tangent to the arc the whole way. A large step counter (01–05) in the corner slides vertically to stay in sync with whichever card is currently centered. Smooth scroll via Lenis. The card positions are recomputed every frame with trigonometry (cos/sin) and applied through gsap.set — there is no tween/timeline on the cards themselves; only the counter uses a tween.

Tech

Vanilla HTML/CSS/JS with ES module imports. Use gsap (npm) plus the GSAP plugin ScrollTrigger, and lenis (npm) for smooth scroll. No other plugins, no framework:

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";

Register once: gsap.registerPlugin(ScrollTrigger);. Wrap all setup in a DOMContentLoaded listener. Card positioning is done with a native IntersectionObserver (for the counter) plus GSAP.

Layout / HTML

Everything lives inside a <div class="container">. Structure top to bottom:

1. <nav> — a <p id="logo"> reading Voxel (fictional brand) and a <button> reading Download Now. Absolutely positioned, spans the top of the viewport, z-index: 2.
2. <section class="intro"> — empty; it is just a full-viewport panel with a full-bleed background image.
3. <section class="steps"> — the pinned stage. Contains two blocks:
4. <div class="step-counter"> → <div class="counter-title"><h1>steps</h1></div> and <div class="count"><div class="count-container"> <h1>01</h1> <h1>02</h1> <h1>03</h1> <h1>04</h1> <h1>05</h1> </div></div>. The five number <h1>s are stacked vertically inside .count-container; only one shows at a time through the clipped .count window.
5. <div class="cards"> → seven <div class="card"> elements. The first five each contain <div class="card-img"><img src="…" alt="" /></div> and <div class="card-content"><p>…</p></div>. The last two are <div class="card empty"><p>EMPTY</p></div> (invisible spacers — see note). All seven must exist; the arc math depends on the count being 7.
6. <section class="outro"> — a single centered <p> with one highlighted <span>, e.g. Our 3D design tool is built to enhance your creative workflow, <span>providing an all-in-one solution</span> for crafting stunning visuals and prototypes.

Card paragraph copy (steps 1→5, neutral product copy):

1. "Effortlessly import your 3D models and assets into our intuitive design tool, ensuring that projects are set up quickly."
2. "Take full control of your designs with our advanced customization tools. Adjust lighting and geometry with precision."
3. "Bring your designs to life with our seamless animation presets and tools, allowing you to create dynamic interactions."
4. "Collaborate in real time with your team, sharing ideas and updates instantly to streamline the creative process."
5. "When your design is complete, export it in various formats optimized for production or further editing."

Styling

Palette & type:

• Page: background: #000; color: #fff;. Body font-family: "Helvetica Now Display" (a neutral grotesque sans; system sans fallback is fine).
• Logo and all big display type: font-family: "PP Monument Extended"; font-weight: 900; text-transform: uppercase; (a heavy, extra-wide extended display face).
• button: color: #000; background: #fff; border: none; padding: 0.75em 1em; border-radius: 0.25em; font-weight: 500;.
• .outro: display:flex; justify-content:center; align-items:center; background: linear-gradient(180deg, #000000, #364549);. .outro p: width:75%; text-align:center; font-size:52px; font-weight:400; line-height:1.125;. .outro p span { color:#75e1ff; } (cyan highlight).
• img { width:100%; height:100%; object-fit:cover; }. Global reset * { margin:0; padding:0; box-sizing:border-box; }.

Critical structural CSS (the effect hangs on these exact values):

• section { position:relative; width:100vw; height:100vh; overflow:hidden; }
• html, body { width:100vw; height:900vh; } (tall page; the real scroll distance is actually created by the pin spacer, below).
• .intro { background: url("…hero…") no-repeat 50% 50%; background-size:cover; }
• .cards { position:absolute; top:25%; left:50%; transform:translate(-50%,-50%); width:150vw; height:600px; will-change:transform; } — the card layer is centered horizontally and sits with its center at 25% of viewport height (high up, so the arc's top passes through the upper third).
• .card { position:absolute; width:500px; height:550px; left:50%; top:50%; margin-left:-250px; transform-origin:center center; display:flex; flex-direction:column; gap:1em; will-change:transform; } — every card is stacked at the same origin point; GSAP then moves each one out onto the arc.
• .card-img { flex:1; background:#fff; border-radius:0.5em; overflow:hidden; }
• .card-content { width:100%; height:60px; } with .card-content p { font-size:16px; font-weight:500; line-height:1.25; text-align:left; }
• .empty { opacity:0; } — the two spacer cards are laid out on the arc but invisible.
• Step counter:
• .step-counter { position:absolute; display:flex; flex-direction:column; margin:2em; }
• .counter-title, .count { position:relative; width:1200px; height:150px; overflow:hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } (a clipped 150px-tall window).
• .count { top:-10px; }
• .count-container { position:relative; transform:translateY(150px); will-change:transform; } — starts translated down 150px (initial rest state = blank window above "01").
• .step-counter h1 { font-size:150px; line-height:1; letter-spacing:-0.04em; font-weight:900; text-transform:uppercase; } — so each number is exactly 150px tall = one window height. Stacking five of them makes a 750px column that slides through the 150px window.

GSAP effect (be exhaustive — this is the whole component)

Smooth-scroll wiring (Lenis + GSAP ticker)

const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => { lenis.raf(time * 1000); });
gsap.ticker.lagSmoothing(0);

Default Lenis options. Lenis scroll events feed ScrollTrigger.update; the GSAP ticker drives lenis.raf; lag smoothing is disabled so the scrub stays glued to scroll position.

Constants

const stickySection = document.querySelector(".steps");
const stickyHeight  = window.innerHeight * 7;   // 7 viewport heights of scroll while pinned
const cards         = document.querySelectorAll(".card"); // 7 (5 real + 2 empty)
const countContainer= document.querySelector(".count-container");
const totalCards    = cards.length;             // 7

const arcAngle   = Math.PI * 0.4;               // 72° arc span
const startAngle = Math.PI / 2 - arcAngle / 2;  // 54° (arc runs 54°→126°, centered on the vertical 90°)

getRadius() is responsive:

const getRadius = () =>
  window.innerWidth < 900 ? window.innerWidth * 7.5 : window.innerWidth * 2.5;

So on desktop the arc radius is 2.5 × viewport width (a very shallow, wide arc — the wheel is huge and mostly below the screen).

The ScrollTrigger (single pinned, no scrub — driven by onUpdate)

ScrollTrigger.create({
  trigger: stickySection,
  start: "top top",
  end: `+=${stickyHeight}px`,   // pin lasts innerHeight*7
  pin: true,
  pinSpacing: true,
  onUpdate: (self) => { positionCards(self.progress); },
});

• The .steps section pins at top top and stays pinned for 7× the viewport height of scroll. pinSpacing:true inserts a real spacer so the outro appears only after the whole arc sequence finishes.
• No scrub and no tween — every frame, onUpdate recomputes card transforms from self.progress (0→1) via positionCards. Smoothness comes entirely from Lenis. Call positionCards(0) once at startup so the initial pose is correct before any scroll.

positionCards(progress) — the trigonometric layout (the star effect)

function positionCards(progress = 0) {
  const radius = getRadius();
  const totalTravel = 1 + totalCards / 7.5;              // 1 + 7/7.5 = 1.9333…
  const adjustedProgress = (progress * totalTravel - 1) * 0.75; // ranges −0.75 → +0.70

  cards.forEach((card, i) => {
    const normalizedProgress = (totalCards - 1 - i) / totalCards; // i=0 → 6/7 … i=6 → 0
    const cardProgress = normalizedProgress + adjustedProgress;
    const angle = startAngle + arcAngle * cardProgress;

    const x = Math.cos(angle) * radius;
    const y = Math.sin(angle) * radius;
    const rotation = (angle - Math.PI / 2) * (180 / Math.PI); // degrees off vertical

    gsap.set(card, {
      x: x,
      y: -y + radius,            // radius*(1 − sin θ): 0 at the top (θ=90°), grows downward off-axis
      rotation: -rotation,       // keep the card tangent to the arc (upright at the top)
      transformOrigin: "center center",
    });
  });
}

Exact mechanics to reproduce:

• Each card i is given a fixed phase offset normalizedProgress = (totalCards−1−i)/totalCards, so the seven cards are evenly spread along the arc, 1/7 apart, with the first DOM card (i=0) furthest along (largest angle) and the last (i=6) furthest behind.
• adjustedProgress shifts every card's phase together as you scroll: at progress=0 it is (0·1.9333−1)·0.75 = −0.75; at progress=1 it is (1.9333−1)·0.75 = +0.70. That's the conveyor that walks all cards along the arc.
• angle = startAngle + arcAngle·cardProgress. A card is centered/upright when angle = 90° (π/2), i.e. cardProgress = 0.5. As the shared adjustedProgress climbs from −0.75→+0.70, cards reach cardProgress=0.5 one after another in DOM order (i=0 first, i=6 last) — so card-1 swings through center first, then card-2, and so on.
• Position: x = cos(angle)·radius (right of center when angle<90°, left when >90°); y = −sin(angle)·radius + radius = radius·(1 − sin angle) — 0 at the top of the arc, increasing (pushing the card down and off-screen) as it moves away from center. The circle's center is effectively radius below the card layer's center, so cards ride the top edge of a huge wheel.
• Rotation: rotation: -(angle − 90°) in degrees — the card is rotated to stay tangent to the arc (perfectly upright at the top, tilting clockwise as it moves right, counter-clockwise to the left).
• Everything is applied with gsap.set (instantaneous per frame), never a tween. will-change: transform is on .cards and .card.

Synced step counter (IntersectionObserver + one tween)

A native IntersectionObserver watches each card and slides the number column so the centered card's number shows:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const cardIndex = Array.from(cards).indexOf(entry.target);
      const targetY = 150 - cardIndex * 150;      // 150, 0, −150, −300, −450, −600, −750
      gsap.to(countContainer, {
        y: targetY,
        duration: 0.3,
        ease: "power1.out",
        overwrite: true,
      });
    }
  });
}, { root: null, rootMargin: "0% 0%", threshold: 0.5 });

cards.forEach((card) => observer.observe(card));

• threshold: 0.5 → the callback fires when a card is at least 50% visible (i.e. as it reaches the center of the screen). The centered card's DOM index sets targetY = 150 − index·150.
• The .count-container starts at translateY(150px) (blank window). Because each number <h1> is exactly 150px tall, y=0 reveals "01", y=−150 reveals "02", … y=−600 reveals "05". The tween (power1.out, 0.3s, overwrite:true) slides the correct number into the clipped window as each successive card passes center — the counter reads 01 → 05 in lockstep with the arc. (The two empty spacer cards also trigger the observer at the tail, which is why five numbers plus padding cover seven cards.)

Resize

window.addEventListener("resize", () => positionCards(0));

On resize just re-run positionCards(0) (recomputes radius from the new width). No ScrollTrigger.refresh call in the original.

Assets / images

• 1 full-bleed hero background for the .intro panel (set as a CSS background, cover, centered) — a moody, dark, atmospheric editorial/technical image; any aspect ratio (it's cover).
• 5 card images, one per content card, each filling a rounded (0.5em) white-matted frame roughly 500×490px (portrait-ish, object-fit:cover). They are a cohesive set of abstract 3D / product-design visuals matching the five step captions: (1) importing 3D models/assets, (2) customization — lighting & geometry controls, (3) animation presets, (4) real-time collaboration, (5) export/production. Clean, rendered, tech-forward look; cohesive dark or neutral palette. Provide 5 files in step order; if fewer are available, repeat in order.

No client logos or real brand marks — the demo brand is the fictional "Voxel".

Behavior notes

• Page-level component: Lenis takes over the whole page; the .steps section pins for 7 viewport heights while the cards rotate through, then releases into the outro.
• The two .empty cards (opacity:0) are not decoration to drop — they are real arc slots that keep the spacing and the counter timing correct; keep totalCards = 7.
• Responsive: at max-width:900px the radius switches to innerWidth·7.5 (even shallower arc), .cards top moves to 27.5%, cards shrink to 375×500, and the counter title/number shrink to 30px (with .count { top:0; left:-10px; }).
• No reduced-motion handling and no autoplay — nothing moves except in response to scroll (cards) or a card crossing center (counter), so the motion is entirely user-driven.