Skip to content
Owen P Kent

About This Site

The homepage is a tesseract. Here's how it works.

The object on the homepage is a tesseract: 16 vertices, 32 edges, 8 cubic cells. Eight cells, eight sections. That is the whole idea.

Color is structure

Every edge varies exactly one coordinate, so the 32 edges split four ways by axis. The payoff: the eight w-edges are precisely the ones joining the inner cube to the outer one. Watch those and you're watching the fourth dimension. The section colours are the same four hues, each in a bright and a muted tone, because the sections are the cells.

Motion

It turns by an isoclinic rotation: two orthogonal planes at one shared rate, so every point traces a great circle at the same speed and the figure returns to itself exactly, instead of wobbling.

Dragging doesn't grab it. It moves your viewpoint, and the stars move with you, because each star is a fixed direction put through the same rotation. You're orbiting a fixed point, not sliding a backdrop.

What it does not do

The eight labels are real links in fixed columns, and they never move. With JavaScript switched off they all still work. Clicking the object itself does nothing, because the cell under your cursor is always moving, and a rotating hit target is a strange thing to ask of anyone. You can turn it with the arrow keys as readily as by dragging, though neither is needed to get anywhere on the site. prefers-reduced-motion stops the turning outright.

It also has more than one form. Left and right, on the buttons under it or the arrow keys anywhere else on the page, step through eight of them: one unbroken stroke, curved edges, orthographic, tumbling, plain ink, a ghost the stars show through. Your last pick sticks.

Drawn as ink on a plain 2D canvas. No WebGL, no libraries, no dependencies.

Back to the object