Depth Carousel: Wide Panels on a Curved 3D Arc You Drag Through

Build a full-screen hero carousel where wide picture panels stand on a curved 3D arc in front of a full-bleed backdrop: the current panel faces you, its neighbours turn away into depth, and drag, swipe, trackpad, arrow keys, buttons or thumbnails move it with momentum while a big title block changes with each panel. SandBase draws six wide pictures as one contact sheet that the Skill cuts apart, or you bring your own folder. CSS 3D only. The hero is followed by a full landing page: chapter titles, an intro, a product console drawn in HTML, feature cards, specs, stats, a quote, a call to action and a footer, with a moving glow and a floating section pill.

Depth Carousel: Wide Panels on a Curved 3D Arc You Drag Through

Bring what the panels show (or your own folder of wide pictures), a tag, kicker, title and line per panel, your brand, links, palette and language. The Skill returns a full landing page (index.html), a section to paste into an existing site, the runtime script and stylesheet, the cut-apart pictures and the bundled open fonts.

How it works

  1. SandBase draws six wide pictures as one 2 × 3 contact sheet at 4k; the Skill finds the white gutters and cuts it apart.

  2. The builder writes the page with each picture as a backdrop, a panel and a thumbnail, and the titles as real text.

  3. In the browser every panel is placed by its distance from the current one: moved sideways, pushed back, turned away and faded; drags, keys, buttons and thumbnails move that position.

Frequently asked questions

What does a new set cost?

One 4k contact sheet through SandBase: listed at $0.18, and $0.135 was charged for each example. With your own pictures it costs nothing.

Can I use my own pictures?

Yes. Point the builder at a folder of 3 to 12 wide JPEG or PNG files and it skips generation.

Does it need WebGL?

No. It is CSS 3D only. With reduced motion turned on the arc jumps to the chosen panel and does not advance on its own.

Why do the links do nothing here?

The example runs in a sandboxed frame with its links disabled. In your own page they go wherever you set them in site.json.

Does it work on phones?

Yes. A swipe changes the panel. Checked in a 390 px phone viewport.

Why is there no online generation?

Building a new scene needs a model key inside the sandbox, which the backend doesn’t support yet. Run the Skill with your own agent for now.