3D Orbit Carousel
What it does
Ten photo panels placed with rotateY and translateZ around a pivot: the wheel (or a touch drag) turns the orbit through a lerped rAF loop while a glass preview at the centre counter-rotates to keep facing the camera and crossfades to the active photo. The pointer tilts the whole stage on both axes, panels fade and darken with their angle to the camera (depth fog), and a title chip updates with the active slide.
How it's built
| Category | slider |
|---|---|
| Tech | gsap |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# 3D Orbit Carousel — Wheel-Driven Orbit, Counter-Rotating Glass Preview & Pointer Tilt
## Goal
Build a fullscreen carousel where **ten portrait panels stand in a circle** around a pivot (`rotateY(i·36°) translateZ(400px)`). **Scrolling the wheel** (or dragging on touch) **turns the orbit** through a lerped loop; a larger **glass preview in the centre counter-rotates** so it always faces the camera and **crossfades** to whichever panel is in front; the **pointer tilts the whole stage** on both axes; panels **fade and darken with their angle** to the camera (depth fog); and a small **title chip** at the bottom slides to the active slide's index and name. Pure rAF + a couple of GSAP tweens.
## Tech
Vanilla HTML/CSS/JS with ES module imports. `gsap` (npm), no plugins. Font: **JetBrains Mono** (400–500).
## Layout / HTML
```html
<div class="oc">
<section class="oc-slider" aria-label="Carousel">
<div class="oc-stage">
<div class="oc-orbit"><div class="oc-preview"></div></div>
</div>
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in