The globe of covers
Scroll, 3D, Images
NewLifetime
Back to the library
The card room
Sixteen cards and three views: a dome that turns around you, a list where each card becomes the thumbnail of its name, a diagonal row that crumbles the far cards. Switching view, the cards set off one after the other.
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 cards arrive from the back and arrange themselves on a dome: you are at the centre, the ones in front are large and upright, the side ones turn their faces towards you. Drag and the dome turns; let go and the card nearest the centre comes to the front. Press «Elenco» (the list) and the cards leave one at a time and move to the left of their names, shrinking into thumbnails, while the letters of the names rise. Press «Fila» (the row) and they line up diagonally: the middle one is large and forward, the far ones crumble into a dither. In the row you move with the arrows, by dragging or with the trackpad.
How it works
The dome
The cards sit on a sphere along the Fibonacci spiral (y = 1 − 2i/(n−1), longitude i × π(3 − √5)). A rotation matrix turns them; for each one we take the angle from the view axis, squeeze it to 0.62 and derive position and tilt: the cards in front are large, the side ones turned towards the centre, the ones behind fade away.
Turning softly
Dragging does not turn the dome: it moves a target. Two gsap.quickTo follow it over one second with power2, and every frame the difference becomes a small rotation around the screen axes. After a quarter of a second at rest, we compute the angle that brings the nearest card to the front.
Switching view
On a switch we photograph each card’s pose (position, turn, scale, opacity, dither) and a number goes from 0 to 1 in 1.6 seconds, linearly. Each card uses half of the time, starting later the further down it comes: p = smoothstep((t − i/(n−1) × 0.5) / 0.5). The target pose is live: the row or the dome keep moving while the cards arrive.
The row’s dither
In the row each card sits e places from the middle one: x = e × 0.62 widths, y = −e × 0.3, further back the further away. Beyond the first place a Bayer mask covers it at 80, 60, 40 and 20%: the card crumbles instead of fading.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
CARTE | script.js | 16 carte | Name, two colours and cover shape of each card: the covers draw themselves with a dither. |
CAMBIO | script.js | 1.6 | Seconds of a view switch; each card uses half of it. |
COMPRESSO | script.js | 0.62 | How much the dome gathers the cards towards the centre: lower, a tighter dome. |
--lato | style.css | clamp(104px, 11.5vw, 168px) | Width of a card; the height is 1.12 times that. |
When to use it
For a studio’s work archive, a product collection or a gallery: three ways of looking at the same thing, and moving between them is already a show.
On phones
It starts from the row, which reads better on phones. A sideways finger scrolls the row or turns the dome; inside an iframe a vertical finger stays with the page.
With reduced motion
The view switch is immediate with a two-tenths fade; no entrance from the back, no soft follow and no automatic return to the front.
Pitfalls
- With perspective on the container and cards transformed in 3D, front-to-back order does not follow depth: z-index decides it, to be updated every frame.
- Rotations must be accumulated in a matrix (or a quaternion) by multiplying on the left: adding up the X and Y angles gives wrong rotations as soon as the dome has turned.
- A drag that starts on a card ends with a click on that card: ignore it if the pointer moved more than a few pixels.
- Invisible cards must leave the Tab order and ignore clicks: tabIndex = −1 and pointer-events: none while their opacity is low.
Libraries
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Weight: 24 KB of our own files.
Testing
Tested on 27 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.
