Icon Cloud

Watch one chip for a full lap: it travels round the sphere but never turns, because the sphere's rotation and the chip's are two animations sharing one duration. Then watch the far side — those chips are smaller because perspective divides by their depth, and fainter because each one carries its own fade, phased to its own azimuth. Nothing measures anything; there is no JavaScript in the loop.

Seven and sixty, same rule. The golden-angle spiral steps equal slices of area rather than equal slices of latitude, so no count produces a bald patch at the poles or a crowd at the equator — nearest-neighbour spacing varies by 1.11x at sixty. The version everyone writes first puts a point on each pole and varies by 1.70x, which reads as a wireframe globe.

The same sphere through a 420px camera and a 2000px one. Short is a wide lens: the near side is magnified hard and the far side collapses, so the sphere reads as deep. Long flattens it toward a disc of icons. The field re-sizes itself for each — a wide lens needs a bigger box, not a smaller one, which is the direction hand-built versions guess wrong and then clip the near side in motion.

At tilt 0 you look at the equator. At 34 you look down over the top pole. Every glyph stays square-on in both, because the counter-rotation undoes the tilt as well as the spin — undo only the spin and each glyph is foreshortened by cos(tilt) forever, a squash rather than a crash, which is why that bug survives review. The field size does not change: rotations map the sphere onto itself, so the box is a bound at every tilt.

The sphere is aria-hidden and inert by default, because thirty unlabelled glyphs read out in lattice order is noise landing between the heading and the copy that explains it. Passing label takes it out of that default in one prop: it becomes a named group, its items regain pointer events and the tab order, and each link carries its own name. Tab into the preview to reach them — and note the focus ring lands on a glyph that is still turning.

A single icon is placed dead in front of the viewer rather than wherever the formula lands it, so standing still it is centred and full size instead of parked off to one side looking like a bug. Beside it, a sphere passed no children: it renders nothing at all, not an empty 350px box, so a roster that empties out leaves no hole in the page. Neither case needs a guard at the call site.

Turn on Reduce Motion in your OS and reload: the sphere stops fully composed — every icon at its lattice point, facing front, scaled and shaded by its real depth, because the projection is inline and only the rotation lives in the stylesheet. That is also what an install renders with the stylesheet import forgotten, which is why forgetting it is safe. Nothing is hidden, flattened into a pile, or waiting for a trigger.