Tilted Ring Gallery
What it does
Twelve glass-framed photos orbit on a tilted oval: a rAF loop advances the ring at an idle speed, each wheel event adds to the speed (capped) and sets the direction, and the speed eases back to idle. The photo under the pointer, found with elementFromPoint because the items move under a still cursor, scales up while the others desaturate, darken and blur.
How it's built
| Category | gallery |
|---|---|
| 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.
# Tilted Ring Gallery — Wheel-Accelerated Oval Orbit with Hover Spotlight
## Goal
Build a fullscreen dark gallery where **twelve glass-framed photos orbit on a tilted oval**. The ring **turns by itself** at a slow idle speed; every **wheel tick adds speed** (capped) and sets the direction, and the speed **eases back** to idle. Because the items move under a still cursor, the hovered item is found with `elementFromPoint` on every frame: the hovered photo **scales up** (its inner image relaxes from a 1.1 idle zoom to 1) while every other item **desaturates, darkens and blurs**. A small dot and "Scroll to spin" sit at the centre. rAF loop + GSAP tweens.
## Tech
Vanilla HTML/CSS/JS with ES module imports. `gsap` (npm), no plugins. Font: **Space Mono** for the centre label.
## Layout / HTML
```html
<div class="tr">
<section class="tr-gallery" aria-label="Gallery">
<div class="tr-center" aria-hidden="true">
<span class="tr-center__mark"></span>
<span class="tr-center__label">Scroll to spin</span>
…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