Dot globe

Three rounded-cube solids tiled with rounded squares, rocking together, a bright symbol painted on them and handed along the row.

npx skills add https://design.how/vault/dot-globe

Installs the template, the brief and a check script as one skill.

What it is

Three solids sit in a row on one quiet grey, each 0.3 of the card's height in radius and each tiled with an 11 by 11 grid of rounded squares. The unlit tiles carry each solid's colour, a muted aubergine, petrol teal or cobalt, and a symbol is painted on top in a bright near-complement, lime, coral or acid yellow. The symbols are 11 by 11 bitmaps (an arrow, a diamond, a cross, a chevron, a slash, a square), painted in grid space, so a lit tile stays lit as the surface turns.

The tiles are projected quads, not scaled and rotated squares. A patch spanning a range of longitude and latitude projects to a trapezoid whose two ends differ in width, and that is what the eye reads as the corner tiles leaning. Drawing each tile by projecting its four corners and joining them gives crowding toward the edges, foreshortening to about half size at the limb and the lean, all from the same trigonometry. The grid spans 68.2 degrees either side of centre, solved from the width of the corner tiles as a difference of two sines rather than a cosine.

The solids are superquadrics, not spheres, with exponents 0.42, 0.66 and 0.95, so one is nearly a cube, one clearly rounded and one almost spherical. They rock together by up to 14 degrees, slow enough that a there-and-back takes about nine seconds and never far enough to hide a column. The mark is what moves along the row: each symbol holds 4.2 seconds, then swaps as a 1.1-second wave crossing the surface, and each globe starts 0.35 of a swap after the one to its left, so the change passes from left to right with a brief trail of colour. About every 26 seconds one globe turns all the way round in 2.6 seconds and comes back carrying the next mark.

A fine pointer tilts the row vertically by up to 0.42 radians and turns each globe toward it by 2.5 degrees, both eased so the globes feel heavy. Tiles within 0.3 of the height swell a little and slide apart by 0.035 of a cell, lit and unlit alike, so the mesh gives under the cursor without the symbol peeling off.

How it works

  • For each globe, project the four corners of every grid patch through the superquadric and join them into a rounded quad; cull tiles past 90 degrees of longitude.
  • Rotate by the shared rock, the pointer tilt and the pointer lean before projecting; keep rock plus lean inside the 21.8 degrees the grid leaves.
  • Light a tile from the current symbol's bitmap at its (col, row), never from its screen position.
  • Swap symbols as a wave across the surface over SWAP_S, each globe offset by SWAP_S * HANDOFF, with a short trail on unlit tiles quantised to TRAIL_BANDS.
  • Every TURN_EVERY_S seconds, give one globe in turn a full rotation over TURN_S that lands on the next mark.
  • Swell and push tiles near the pointer by fractions of a cell, so the effect holds at any size.
  • Under reduced motion, draw the row at clock zero with no pointer, once.

What you can change

  • DUOS (lime on aubergine, coral on petrol, yellow on cobalt): Each globe's unlit tones, its mark and its hover tone.
  • GROUND (#f4f4f4): The shared ground.
  • EXPS (0.42, 0.66, 0.95): How boxy each solid is. Keep them above about 0.4.
  • WOBBLE (14 degrees): How far the row rocks.
  • HOLD_S, SWAP_S (4.2, 1.1): Seconds each symbol holds and each swap takes.
  • HANDOFF (0.35): How far behind its left neighbour each globe swaps, as a fraction of a swap.
  • TURN_EVERY_S (26): Seconds between full turns.
  • GAP, ROUND (0.26, 0.3): Gap between tiles and their corner radius, as fractions of a cell and a tile.