Orbit Tiles
A Fibonacci lattice for the placement and a screen-space axis for the drag, so there is no ring to close and no orientation the gesture behaves differently in.
The scene in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
"use client";
import * as React from "react";
import * as THREE from "three";
/**
* Orbit Tiles — no pole, in the placement or in the drag.
*About this effect
A shelf of covers you can push forever, for a gallery entry point, a showcase or a menu that wants to be an object. A sphere is the obvious shape and it is where both of the usual faults live. Lay tiles out in rings of latitude and they crowd into a rosette at each pole and leave a seam where every ring closes; the answer is not better spacing but no rings — each tile sits one golden angle round from the last while its height steps uniformly down the axis, which is a Fibonacci lattice, distributes at equal area, and takes three lines of arithmetic with no special case in them. The drag has the same fault and takes the same answer: mapped onto yaw and pitch a sphere binds near its poles and rolls the horizon, because those are Euler angles doing what Euler angles do, so instead the shell turns about the screen-space perpendicular of the drag itself. Push right and the axis is vertical; push down and left and it tilts to match. There is no orientation the gesture behaves differently in, and the flick that follows keeps that same axis while only its speed decays. Depth comes from facing rather than from a light: a tile turned away sinks toward the ground colour, and the far side culls itself. The names stay in the DOM as real elements over the canvas — crisp at any size, translatable, selectable, announced when the front tile changes, and no font atlas to ship.
Related effects
- Thread KinkThe deflection is a tent rather than a bell, because a string under constant tension has nowhere to put the load and meets itself in a corner.
- Molten MirrorA four-number room sampled through a bent view direction, so every highlight is a reflection rather than a painted one.
- Plasma BloomThree fields multiplied rather than added, so light appears only where all three agree and most of the frame stays dark.