Component

Depth Carousel

A rail of cards that drifts on its own, is dragged with the mouse, carries on with inertia when you let go, and turns endlessly. It is an ordinary scrolling container: it works with the wheel, the finger and the keyboard before the script even arrives. HTML, CSS and JavaScript — no framework, no build step, not a single external request.

The original design

A 270 × 431 card, a 16 gutter, an 8 radius, a drop shadow with 24 of blur: everything is measured on the reference and then converted into em, so that one single variable — --dc-font-size — rescales the whole thing. Drag the strip with the mouse, or give it focus and use the arrow keys.

  • Ship early

    A page live today teaches you more than three perfect mock-ups next week.

  • A stylised rising sun, ochre rays on an orange sky.
  • An arrow drawn in large blue pixels on a dark grid.

  • READY

    There is no right moment. There is a first commit.

  • A field of blurred colours crossed by a circle and fine rules.

  • Small steps

    Consistency beats intensity: show up every day, even for ten minutes.

  • A typographic poster: « 100 % » in green pixel type on a black background.

Depth, switched on

The reference sets a perspective of 2000, a preserve-3d and a transform-origin on every card — then never writes a transform. Here is that machinery fed: the depth-carousel--depth class sets --dc-rotation and --dc-depth, the script only publishes the distance to the centre. Set both to zero and you land back exactly on the strip above.

    Driving it from code

    The component starts itself on [data-depth-carousel], but it also exposes an instance: DepthCarousel.get(element) hands back the one already attached, and it carries next(), prev(), goTo(i), refresh() and destroy(). Every change of card fires depth-carousel:change, which bubbles up the tree — enough to wire a counter, a caption or an analytics call.

    Card at the centre: 1 / 9

    Two scales, one variable

    depth-carousel--compact only brings --dc-font-size down from 20 to 14 px. Everything follows: card, gutter, radius, shadow, inner padding and body copy, since everything is expressed in em.