`, a child `
`, and a child ``.
2. `p.textContent = names[i]` (see Content), then `count.textContent = "(" + (Math.floor(Math.random()*50)+1) + ")"` → a random integer **1–50**. Append order: `item.appendChild(p); gallery.appendChild(item); p.appendChild(count);` so the markup is `NAME(N)
`.
3. Compute the item's slot on the ring:
```js
const angle = i * angleIncrement;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
const rotation = (angle * 180) / Math.PI; // radians → degrees
```
4. Place it instantly: `gsap.set(item, { x: x + "px", y: y + "px", rotation: rotation });`
→ labels fan out evenly around the full circle, each rotated to lie **tangent** to the ring (item 0 at 3-o'clock horizontal, rotation growing clockwise).
5. In the same loop, wire this item's `mouseover` / `mouseout` (see Hover reveal), capturing `i` for its image src.
### Scroll rotation — `updatePosition()` (the signature effect)
A single function, called **once on load** and on **every** `document` `scroll` event:
```js
function updatePosition() {
const scrollAmount = window.scrollY * 0.0001; // tiny multiplier
document.querySelectorAll(".item").forEach((item, index) => {
const angle = index * angleIncrement + scrollAmount; // scroll offsets EVERY item's angle
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
const rotation = (angle * 180) / Math.PI;
gsap.to(item, {
duration: 0.05,
x: x + "px",
y: y + "px",
rotation: rotation,
ease: "elastic.out(1, 0.3)",
});
});
}
updatePosition();
document.addEventListener("scroll", updatePosition);
```
- The **`0.0001` multiplier** is intentionally minuscule: because the page is 30 viewports tall, scrolling top→bottom adds only a couple of radians, so the whole ring rotates **slowly** as you scroll. Every label's angle gets the same offset, so the entire ring turns as one rigid wheel.
- Each per-item tween is **`duration: 0.05` with `ease: "elastic.out(1, 0.3)"`** — a short springy settle. Rapid scroll events fire many overlapping tweens that GSAP overwrites, giving a slightly elastic, jittery-alive follow rather than a rigid lock.
### Custom cursor follow — `mousemove` on `document`
```js
document.addEventListener("mousemove", (e) => {
gsap.to(cursor, {
x: e.clientX - 150, // 150 = half of 300 width
y: e.clientY - 200, // 200 = half of 400 height
duration: 1,
ease: "power3.out",
});
});
```
- The `-150 / -200` offsets center the 300×400 box on the pointer.
- **`duration: 1`, `ease: "power3.out"`** → the box **lags and trails** the real cursor, easing into place over ~1s. This lag is what makes it read as a floating preview panel chasing the mouse.
### Hover reveal — `mouseover` on each item (bottom-to-top clip-path wipe)
```js
item.addEventListener("mouseover", () => {
const img = document.createElement("img");
img.src = `/…/img${i + 1}.jpg`; // per-item preview (i is 0-based → img1…img60)
img.style.clipPath = "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"; // all 4 corners at the BOTTOM → zero-height sliver → invisible
cursor.appendChild(img);
gsap.to(img, {
clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)", // full rectangle → top edge rises up
duration: 1,
ease: "power3.out",
});
});
```
- Start state = a degenerate polygon with **all points on the bottom edge (y=100%)**, so the image is clipped to nothing. The tween drives the two top points up to `y=0%`, so the image **wipes into view from the bottom edge upward** over 1s (`power3.out`).
- The image is appended into `.cursor`, so it appears inside the trailing box and, because `.cursor` is `z-index:0`, it renders **behind** the rotating text.
### Hover out — `mouseout` on each item (wipe up and out)
```js
item.addEventListener("mouseout", () => {
const imgs = cursor.getElementsByTagName("img");
if (imgs.length) {
const lastImg = imgs[imgs.length - 1];
Array.from(imgs).forEach((img) => {
if (img !== lastImg) {
gsap.to(img, {
clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)", // all corners at the TOP → collapse upward
duration: 1,
delay: 0.5,
ease: "power3.out",
onComplete: () => setTimeout(() => img.remove(), 1000), // DOM cleanup 1s after the tween ends
});
}
});
gsap.to(lastImg, {
clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
duration: 1,
ease: "power3.out",
delay: 0.25,
});
}
});
```
- Exit target = all points on the **top edge (y=0%)**, so from the full rectangle the **bottom edge rises to meet the top** → the image **continues wiping upward off the top**. Same `power3.out`, `duration: 1`.
- Cleanup quirk to reproduce faithfully: on each `mouseout`, **every** `![]()
` currently in the cursor wipes out. The **most recently added** image (`lastImg`) gets `delay: 0.25` and is **not** removed from the DOM (it lingers, fully clipped/invisible). All **other** images get `delay: 0.5` and are removed 1s after their tween completes. So rapidly sweeping across many labels stacks several clipped-away images in the cursor that get progressively cleaned up on subsequent mouseouts.
## Content
60 short (2–4 word) **fictional space-interior names**, rendered uppercase. They are neutral invented copy — do not use real brands. Reproduce this list in order (item 0 → "Lunar Horizon Lounge", …):
```
Lunar Horizon Lounge, Martian Red Quarters, Orbit Oasis Chamber, Neon Nexus Home,
Quantum Quiet Quarters, Galactic Gateway Studio, Starlight Sky Suite, Void Vector Villa,
Cosmic Cove Nook, Satellite Space Site, Plasma Peak Penthouse, Asteroid Alley Loft,
Celestial City Condo, Pulsar Point Pavilion, Gravity Garden Suite, Interstellar Ivy Inn,
Nebula Nest Nook, Exoplanet Escape Estate, Meteorite Mansion Den, Black Hole Bungalow,
Warp World Workshop, Photon Particle Pod, Dark Matter Den, Event Horizon Home,
Solar Flare Studio, Quantum Leap Lounge, Supernova Sun Suite, Eclipse Edge Enclave,
Galaxy Garden Gazebo, Time Traveler Terrace, Orbital Observatory Outpost, Gravity Grove Grotto,
Cosmos Cottage Core, Space-Time Spiral Studio, Alien Array Atrium, Dimensional Dome Dwelling,
Vortex Valley Villa, Starship Station Studio, Quantum Quasar Quarters, Planetary Plaza Penthouse,
Rocket Range Room, Spectrum Spire Space, Terraforming Tower Terrace, Universe Utopia Unit,
Void Vista View, Wormhole Wall Window, Xenon Xeriscape Xanadu, Yield Yacht Yard,
Zenith Zone Zephyr, Alpha Aurora Atrium, Beta Bridge Bastion, Gamma Garden Gateway,
Delta Dome Den, Epsilon Echo Estate, Zeta Zenith Zone, Eta Echo Enclave,
Theta Theater Thicket, Iota Island Inn, Kappa Keep Kiosk, Lambda Loft Lounge
```
Any set of 60 short uppercase labels works; the sci-fi naming just sets the editorial tone.
## Assets / images
**60 preview files `img1.jpg … img60.jpg`, one per label**, each shown inside the 300×400 (**3:4 portrait**) cursor frame and cropped with `object-fit:cover`. There are only **15 unique images cycled every 15** (file N and file N+15 share content), so you really only need 15 source images repeated. The set is a cohesive **experimental / futuristic / editorial** collection of moody abstract 3D renders and graphic frames on a mostly dark or soft-neutral palette — e.g.:
- greyscale figures whose skin is a swirling topographic contour texture, on a soft grey gradient;
- a caped silhouette against saturated red;
- a molten-lava mountain half-submerged in water (glowing orange peak, dark base);
- a glossy orange sphere orbited by clusters of matte grey spheres on black;
- a scan-line-glitched blue/violet orb on a cyan field;
- an extreme close-up of a large smooth orange sphere fading into black;
- a bulbous metaball form studded with glossy black chrome bubbles on light grey;
- a minimal poster of a red semicircle sun over a blue horizon with vertical motion-blur streaks;
- a warm-orange long-exposure of dancers in heavy motion blur;
- a smeared, melting monochrome 3D head;
- stacked glossy copper fins arcing around a glowing amber core;
- an iridescent liquid-glass swirl with orange/cyan chromatic aberration on a pale ground;
- a monochrome bust covered in topographic line texture, hand on chin;
- a grainy monochrome gradient sphere on a pale ground;
- two dark glossy stone spheres nearly touching on white.
Any ~15 abstract, high-contrast experimental images at ~3:4 work. Do not use real brand imagery.
## Behavior notes
- **Desktop / pointer experience.** The custom cursor and hover reveal require a mouse; there is no touch fallback and no reduced-motion branch in the original. Treat as desktop-only.
- The whole page is one giant fixed stage; there is **no visible scrollbar content** — the 3000vh height exists purely to give `window.scrollY` a long range to rotate the ring. Scroll up/down = spin the wheel of text.
- `updatePosition` runs once immediately (at `scrollY ≈ 0`) so the ring is placed even before any scroll; it re-runs on every scroll event.
- No console errors on load. The fixed `nav`/`footer` sit above everything (`z-index:2`, `mix-blend-mode:difference`); the trailing preview sits below the text (`z-index:0`), giving the layered look where labels overlay their own revealed image.