Isometric Carousel

Isometric Carousel lays your images and videos on a tilted floor and lets them ride past in lanes, like a conveyor seen from above.

Slides come from a Collection List or the panel with a title, subtitle and link each, and visitors can pause it, step with the arrow buttons or keys, or drag the cards.

It is drawn with CSS only (no WebGL), plays only the videos on screen, leaves vertical scrolling to the page, and stops its motion and videos while paused, off screen, in a hidden tab or set to reduced motion.

- One CSS animation per lane, so no script runs per frame while it flows (our test in Chrome at 1440px: 0 requestAnimationFrame calls and 0 DOM changes in 2 seconds).

- Muted videos load nothing until they are on screen, and at most 1 to 4 play at a time (default 2).

- A visible Pause button, hover pause for mouse users, and keyboard focus that stops the flow and brings the focused card to the centre.

What you control

• Slides from the panel (image or video, title, subtitle, link) or a Collection List read by layer names

• Lanes, card width, aspect, gap, radius, tilt, turn and edge thickness

• Autoplay, speed, direction, alternating lanes, hover pause

• Video autoplay, how many videos play at once, captions on hover, always or off

• Floor, edge, shadow, text and button colours, font, text size, button position

• Screen-reader and button labels, empty-state text

Limits: cards repeat to cover the floor (8 slides × 3 lanes = 192 cards); only the middle lane is the real, focusable list; one video file may be requested by up to Max Playing copies; captions sit on the tilted cards; no mouse-wheel control and no drag momentum; with a Collection List the canvas shows the list and the floor appears in Preview and on the live site.