Radial Rotating Text Layout
What it does
Sixty uppercase text labels are laid out in a huge ring using gsap.set with cosine/sine positioning and a per-item rotation. Scrolling the very tall page feeds window.scrollY into an angle offset so gsap.to spins the whole ring with an elastic.out ease, while a gsap-driven custom cursor trails the mouse (power3.out) and hovering any label reveals a preview image inside the cursor via an animated clip-path polygon wipe.
How it's built
| Category | gallery |
|---|---|
| Tech | gsap |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | desktop-first |
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.
# Radial Rotating Text Layout
## Goal
Build a full-screen black editorial page where **60 uppercase text labels are arranged around one enormous circle** (a ring far bigger than the viewport, so only a curved slice of it is ever visible). Each label is rotated to sit tangent to the circle. **Scrolling an extremely tall page slowly rotates the entire ring** with a springy elastic follow. A **custom trailing cursor box** (a 3:4 portrait frame) eases behind the real pointer, and **hovering any label reveals that label's preview image inside the cursor box via a bottom-to-top `clip-path` polygon wipe**; moving off wipes it back out through the top. The star effect is the scroll-driven radial rotation combined with the clip-path image reveal that lives inside the trailing cursor.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use **`gsap`** (npm) — **core only, no plugins**. There is **no ScrollTrigger, no SplitText, no CustomEase, no Lenis, no Three.js**. The scroll rotation is driven by a **plain native `document` `scroll` listener** that feeds `window.scrollY` into a `gsap.to`. All logic runs inside a `DOMContentLoaded` handler. Import as `import gsap from "gsap";`.
## Layout / HTML
```html
<body>
<div class="cursor"></div>
<nav>
<a href="#">Motionprompts <span>/</span> 16 06 2024</a>
<p>Unlock Source Code with PRO</p>
…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
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.