Standing letters with a long shadow
Text, Scroll, 3D
NewFree
Back to the library
The globe of covers
As you scroll, the two words of the title open towards the edges and a spinning globe of covers grows between them, made with CSS 3D only.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.
The code for this animation is part of lifetime access.
The preview stays open: watch it, slow it down, try it on your phone.
Lifetime accessWhat it does
The title is two words close to the centre of the screen. As you scroll, the words move apart to the edges and a sphere made of covers grows in the space they leave: every cover faces outwards, the sphere spins on its own and scrolling spins it further. Covers sliding towards the edge fade out, so the globe has depth. At the end of the run the words close again, the globe recedes and the link to all the work appears.
How it works
Points on a sphere
The Fibonacci spiral spreads N points evenly: y goes from 1 to -1, the radius of the circle at that height is the square root of 1 - y², and the angle grows by the golden angle each time. No rows and no crowded poles.
Every cover faces out
One transform per cover is enough: rotateY(atan2(x, z)) rotateX(asin(y)) translateZ(R). First it turns towards its point, then it moves out along the normal. With backface-visibility hidden the ones at the back disappear.
Depth by hand
CSS has no fog: on every frame the z of each cover after rotation is computed (two sines and two cosines) and used for opacity. The ones in front are solid, the ones edge-on fade out.
Words that open
The words move with x, not with the title's width: the distance to the edge is measured with offsetLeft and offsetWidth, which ignore transforms. With invalidateOnRefresh the measure is redone on every resize.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
QUANTE | script.js | 44 (28 sul telefono) | How many covers on the sphere. Above sixty CSS 3D starts to get heavy: switch to WebGL. |
GIRI | script.js | 1.4 | How many turns the globe makes over the whole run, on top of the ones it makes by itself. |
INCLINAZIONE | script.js | 14 | Degrees of tilt: the globe is seen slightly from above. |
RAGGIO | script.js | 0.3 | The radius as a fraction of the screen's short side. |
When to use it
For the entrance of a work archive or a catalogue with many covers. The globe shows quantity and variety at a glance, not the single piece: a real list is needed next to it.
On phones
It works: fewer covers (28) and a slightly larger radius in proportion. The words still reach the edges on a narrow screen.
With reduced motion
No rotation and no run: words at the sides and a still globe, already visible.
Pitfalls
- transform-style: preserve-3d must be set on every level between the perspective and the covers, otherwise the 3D flattens with no error.
- Any overflow other than visible on a parent inside the 3D scene flattens everything: put the clipping on the stage, outside the globe.
- Do not animate the title's width to open the words: move the words with x and measure with offsetLeft, which does not change while you transform them.
- Compute opacity from a rotation you keep in JavaScript: reading transforms back from the DOM on every frame forces the browser to recalculate everything.
Libraries
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.
Weight: 9.1 KB of our own files.
Testing
Tested on 26 September 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
