The wire cube

3D, Physics, TextGSAP, CSS only, CanvasAdvancedCompressed weight: Demo 11 KBGSAP 28 KBFreeDownload the zip

A cube made only of thin edges, in the minimal style, with a word on every face. You take it and turn it: let go, it keeps spinning with the speed of your hand, slows down, and near a face a magnet takes it and clicks it square with a small settle. The word facing you takes on weight and the accent colour; through the wire you see the others, thin and mirrored.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The wire cube</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage tabindex="0" aria-label="A wire cube with a word on every face. Drag it, or use the arrow keys, to turn it.">
    <!-- the wire: twelve hairline edges drawn on a canvas with the same perspective as the faces. Edges you could
         not see on a real cube are dashed, like hidden lines in a technical drawing -->
    <canvas class="wire" data-wire aria-hidden="true"></canvas>

    <!-- the cube: six empty faces in CSS 3D, one word on each. The script turns the cube and gives weight to the
         word that faces you -->
    <div class="scene" data-scene aria-hidden="true">
      <div class="cube" data-cube></div>
    </div>

    <p class="hint" data-hint>Drag to turn</p>
    <p class="sr" data-live aria-live="polite"></p>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

17 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The wire cube” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On warm white paper an invisible pen draws a cube of thin edges, starting from one corner, three lines at a time, while the cube turns slowly on itself; the words rise into their faces one after the other. Then the cube pulls back by a whisker, sets off with a knock, makes a whole turn and a bit more, slows down, and the magnet takes it on the first face: it passes the mark by a hair and comes back, and «Think» turns full black and then vermilion. The edges a real cube would hide are dashed, as in a technical drawing, and switch from solid to dashed as it turns. The words on the side faces are hairline thin, the ones behind show mirrored through the wire, and while the cube runs they all narrow on the width axis of the typeface. Left alone, the cube turns by itself from face to face (once with a turn and a quarter, once flipping over) and comes back to the first. You take it with the mouse or a finger and throw it: the speed of your hand becomes inertia, and when the cube stops askew the word straightens itself in its face with a small bounce. The mouse, hovering, makes it lean towards you just a little; the arrow keys turn it by a quarter.

How it works

A cube, six empty faces and a wire drawn on its own

The six faces are square divs in CSS 3D (preserve-3d, with the perspective on the container), each with its word: their transform is a matrix3d built from the three directions of the face (right, down, out) and a push of half a side. The edges live on a canvas instead: the eight corners turn with the same matrix and are projected with the same perspective as CSS (x times P over P minus z), so the wire and the words line up. An edge is solid if at least one of its two faces can be seen from the eye (the dot product of the normal and the direction to the eye, perspective included), otherwise it is dashed, with a narrow fade to go from one to the other without a jump.

The rotations are quaternions

The orientation of the cube is a quaternion q and its speed a vector w (axis and radians per second). On every physics step, 1/240 of a second, q becomes exp(w·dt)·q and friction multiplies w by e to the minus friction times dt. Dragging turns the movement of the pointer into a rotation about an axis of the screen (to the right turns about y, downwards about x), brought into the cube's space by taking away the tilt of the eye; the speed on release is the sum of the rotations of the last 90 milliseconds divided by the time.

The magnet is a spring towards the nearest rest

A cube can rest in 24 ways (every face in front, turned four ways): they are built once as quaternions. When the speed falls below 2.2 rad/s the rest with the largest dot product with q is chosen, and from there a damped spring pulls: the offset is the logarithm of q times the inverse of the rest, the acceleration is minus K times the offset minus C times w, with the damping set by SNAP. The spring takes the speed the cube had, so it carries it past by a hair and brings it back. When offset and speed are tiny, q becomes exactly the rest and the physics stops.

The word facing you takes on weight

On every frame the script checks how much each face turns towards the viewer (the z component of its normal): from that come the weight (wght from 170 to WEIGHT, squared so that it grows at the end), the opacity (thin on the sides, mirrored and almost gone behind) and the width, which narrows with the speed. When the magnet clicks, a tween with elastic.out adds the last third of the weight, a little past and back, and another brings the colour to the accent. If the chosen rest leaves the word askew, before the magnet is done the word turns in its face by the right multiple of 90 degrees, with back.out.

The direction is a GSAP timeline

The opening is a timeline: the edges grow from the top left corner in groups (the stagger follows the distance from the corner), the words rise into their faces, then a push. Every push is the same: a tween of a twentieth of a radian backwards, then a speed worked out so that friction stops the cube a fifth of a radian before the wanted face (v0 = friction times the way + 2.2), where the magnet takes it. The tour on its own is a repeating timeline: four faces round, once with a turn and a quarter, then the top, the bottom and the first one again; it stops at the first touch and starts again after six quiet seconds.

Values to change

Name	File	Default	What it changes
`WORDS`	script.js	`['Think', 'Draw', 'Build', 'Test', 'Ship', 'Rest']`	The six words, one per face: front, right, back, left, top, bottom. Each one widens or narrows on the axis of the typeface to fill its face.
`WEIGHT`	script.js	`780`	The weight the word facing you takes, from 300 to 900. The others stay hairline thin.
`GLIDE`	script.js	`1`	How long the cube keeps spinning after you let go: 2 twice as long, 0.5 half.
`SNAP`	script.js	`0.5`	The magnet's click: 0 it lands softly, 1 it passes the face and comes back.
`TILT`	script.js	`14`	The degrees the eye looks at the cube from, above and to the side: 0 one face straight on.
`HOLD`	script.js	`1.5`	How many seconds every face stays when the cube turns by itself.
`SIZE`	script.js	`0.42`	The side of the cube, as a share of the page.
`AUTOPLAY`	script.js	`true`	Whether the cube turns by itself until someone takes it (and again after six seconds). With false it waits for a hand.

Try them in the Playground

When to use it

For the opening of a studio or a portfolio that tells its method in a few words (think, draw, build…), for the values of a brand or the parts of an offer on a landing page; also as an object to play with on an about page. It works with short words, four to six letters, and a single accent colour.

On phones

The same animation: the cube is sized on the short side of the screen, small enough that not even the corner nearest the eye ever leaves it while spinning, you drag it with a finger with the same inertia and the same magnet, and the page does not scroll while you turn it.

With reduced motion

Nothing turns and nothing moves: the cube fades in already resting on the first face, and every turn (by itself, by dragging or with the arrow keys) is a fade to the next face, already in place with its word full and coloured.

Pitfalls

The word that took on weight only once the spring had fully stopped arrived half a second after the click and looked detached: now it lights up when the offset falls below a fiftieth of a radian, the moment the magnet clicks.
Lighting again a word that was already chosen but still halfway through its fade made it blink: it lights up only when the face changes.
Faces in 3D are painted at their own size and then enlarged by the perspective: the word in front, the closest to the eye, came out soft. It is set at twice the size and scaled by half in the transform.
A quarter turn with only friction and the spring started abruptly from rest, as if hit: a small pull back before the push (a twentieth of a radian, sine.inOut) shows where the movement comes from.
With the magnet pulling to all 24 rests, the cube could stop with the right face turned sideways, and the word read vertically: the word straightens itself in its face, turning the shorter way.

Libraries

GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.

Compressed with gzip, the three demo files weigh 11 KB; the libraries: GSAP 28 KB.

Testing

Tested on 15 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

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.