Design reference

01Coverflow carousel

Sliders that show the system moving.

One carousel, three layers. Switch between the raw snap track, the controls, and the scroll-driven depth cue, then copy the same shape into a real page block.

Sibling of the section gallery, animations, and image gallery.

Layer switch

Choose carousel layer

Motion layer The same live carousel changes its visible layer without changing the component.

  1. Layer 1 Plain scroll snap. The track still moves, lands, and takes keyboard focus.
  2. Layer 2 Buttons, dots, and live status come online after the site script runs.
  3. Layer 3 Depth and progress are scrubbed by the track position, not autoplay.

The work, illustrated

Six offers, one track.

Drag it, flick it, or tab to it and use the arrow keys. The readout below stays tied to the slide nearest the centre.

  • Illustration of a marketing funnel inspected by a magnifying glass

    Funnel audit

    How a job starts. A lead path under a glass, with the leak found.

  • Illustration of a chart panel with an upward trend line

    Growth engagement

    The work that keeps going. A chart climbing left to right, with no made-up numbers.

  • Illustration of an open package with a lightning bolt and a $1 badge

    Caravan Launch Kit

    The $1 kit you get right away. A box, a bolt, and the one honest number on the page.

  • Illustration of a calendar with a highlighted slot beside a clock

    Book a call

    The booking path. A calendar with one set time and a clock.

  • Illustration of a video player window with a play button and progress bar

    On-demand training

    The class paths. A player window part way through.

  • Illustration of three input sliders beside a gauge dial

    Tools & estimators

    The free quizzes and tools. Sliders feeding a score dial.

Progressive enhancement

How it keeps working.

The reference notes sit after the live specimen now. On small screens this block collapses, so the carousel stays close to the top.

How it works Six rules
  • Layer 1 — it works with nothing. The track is a CSS scroll-snap container. No JavaScript, no animation support, no library: it still scrolls, still snaps, and is still a tab stop with native arrow-key scrolling. Specimen 03 is that carousel with the script taken away, live.
  • Layer 2. The buttons show up only once the script runs. app.js adds the back and next buttons, dot jumps, and a live “slide n of m” count. They stay hidden until it runs, because a dead button is worse than none.
  • Layer 3 — motion behind an @supports gate. The depth cue and the progress rail run on view() and scroll() timelines. Browsers without scroll-driven animations never match the gate and keep the plain snap track — which is a correct resting state, not a broken one.
  • Position is read, never counted. Which slide you are on comes from the scroll spot each frame. The slide whose centre is nearest the track centre wins. So a flick, a key, and a button can never disagree with the dots.
  • The snap element is never transformed. If you move the snapping item itself, you move its own snap spot too. That feeds back into the scroll, and every snap point drifts off centre. So the depth runs on a figure inside it, on a timeline the parent sets.
  • No autoplay, ever. Nothing moves unless you move it. Images carry set width/height so there is no layout shift, only transform and opacity animate, and prefers-reduced-motion stops every sample moving while leaving them all usable.
  1. 01 Coverflow carousel content-band media-carousel
  2. 02 Buyer path carousel content-band media-carousel
  3. 03 Peek strip media-carousel media-carousel--strip
  4. 04 Baseline track (unenhanced) media-carousel (no data-carousel)
02

Buyer path carousel

.content-band media-carousel · Production example

The same component shaped like a real Lead Caravan page block: a visitor path from first click to qualified next step. This is the version to copy when the carousel needs to sell the system, not document the engine.

On a real page

A buyer path, one card at a time.

This is the same carousel without lab language: one focused story arc, visible next steps, and no new CSS.

  • Illustration of a marketing funnel inspected by a magnifying glass

    Find the leak

    Open with the problem the visitor already feels: the lead path has a weak point.

  • Illustration of three input sliders beside a gauge dial

    Let them self-sort

    Quizzes and estimators turn vague interest into useful fit signals.

  • Illustration of a video player window with a play button and progress bar

    Warm the slow buyers

    Training gives people a next step before they are ready to talk.

  • Illustration of a calendar with a highlighted slot beside a clock

    Offer one clear slot

    The page stops scattering calls to action and points to one qualified move.

  • Illustration of a chart panel with an upward trend line

    Track the lift

    The follow-up page can reuse the same carousel shape for proof and reporting.

03

Peek strip

.media-carousel media-carousel--strip · All three layers, without the depth (the progress bar is still layer 3)

The browse-it-all one. Many small slides at once, snapped to the START of the track, not the middle. No depth cue — at this size a rotation reads as wobble, and the point of the variant is that every slide is equally legible. Thumbnails, logo rails, avatar sets.

Placeholder faces

Six marks, browsable at a glance.

The face marks the site uses when a quote needs a face and we have no cleared photo. They are shapes on purpose, not people.

  • Geometric avatar: routed path mark

    Route

  • Geometric avatar: layered dune lines under a sun dot

    Dunes

  • Geometric avatar: compass needle in a ring

    Compass

  • Geometric avatar: rising sun over a horizon line

    Sunrise

  • Geometric avatar: three waypoint dots on a dashed diagonal

    Waypoints

  • Geometric avatar: pennant flag on a pole

    Banner

04

Baseline track (unenhanced)

media-carousel (no data-carousel) · Layers 1 and 3. Everything the script was doing, gone

The same section with the data-carousel hook removed, so app.js never wires it. This is exactly what a visitor gets with JavaScript off or blocked: no buttons, no dots — and a carousel that still works. Note that the depth cue survives: it is CSS, so it never needed the script in the first place. Scroll it, or tab to it and use the arrow keys.

JavaScript off

No buttons. Still a carousel.

Nothing drives this one. No buttons, no status line, no script. Scroll it with a pad or your finger, or press Tab until the track has focus and use the arrow keys. It snaps either way. The depth is still there, because that layer is plain CSS.

  • Illustration of a marketing funnel inspected by a magnifying glass

    Funnel audit

    How a job starts. A lead path under a glass, with the leak found.

  • Illustration of a chart panel with an upward trend line

    Growth engagement

    The work that keeps going. A chart climbing left to right, with no made-up numbers.

  • Illustration of an open package with a lightning bolt and a $1 badge

    Caravan Launch Kit

    The $1 kit you get right away. A box, a bolt, and the one honest number on the page.

  • Illustration of a calendar with a highlighted slot beside a clock

    Book a call

    The booking path. A calendar with one set time and a clock.

  • Illustration of a video player window with a play button and progress bar

    On-demand training

    The class paths. A player window part way through.

  • Illustration of three input sliders beside a gauge dial

    Tools & estimators

    The free quizzes and tools. Sliders feeding a score dial.

—

Anatomy

Three files, nothing else needed. Every sample above uses the same shared code and styles. No page has its own slider CSS.

  1. public/styles.css

    .media-carousel and its parts — the snap track, slides, figures, control row, dots, and the progress rail — plus the @supports gate that adds the scroll-driven layer and the --strip variant.

  2. public/motion.css

    lc-coverflow and lc-scroll-progress — the two scroll-driven keyframe sets, built from the vendored --motion-* tokens and declared inside the reduced-motion no-preference query, so under reduced motion they don't exist at all.

  3. public/app.js

    The [data-carousel] controller — buttons, dot jumps, the live status line, and the rAF-coalesced scroll read that decides which slide is current. It adds .carousel-ready, which is what unhides the controls.

Lead Caravan

Want this shape on a real page?

The classes are shared, not page-scoped — dropping .media-carousel onto a marketing page is markup, not new CSS. The section gallery carries it in the catalogue of every reusable section shape.

Back to the section gallery