Skip to content

Clifford Torus

A four-dimensional torus turned and projected into our space: a glowing net of lines that swells, pinches and turns inside out. Loops perfectly.

3D object, V2 Objects3DSeamless loop, verified238 lines of codev1.0.0

In Science & maths, Light, glass & shine, Patterns & illusions

Next: Torus Wave LoopSurprise me

Clifford Torus preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

36
72
1
0

0 turns it in one plane, 1 also in a second plane at twice the speed.

The preview runs the same code your AI receives. These settings travel with the hand-off.

Info

What it is

The Clifford torus lives in four dimensions, so it is shown the way mathematicians show it: turned in four-dimensional space and projected down into ours by stereographic projection. The net of its circles swells into a huge ring, pinches to a point and turns itself inside out, glowing in colours that follow the hidden fourth coordinate. Choose the colours (spectrum, fire, ocean or mono), the number of rings and lines, how solid the skin between them looks, whether it also turns in a second plane, and whether the camera sways.

Reuse it in your own idea

  • Maths explainer: Spectrum, one turn.
  • Futuristic title: Fire, two turns.
  • Calm science loop: Ocean, fine net.

Which part is reusable

src/clifford-torus.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • A projection of a 4D object is inevitably distorted: sizes near the pinch point are exaggerated and clamped.
  • Lines and skin are additive, so overlapping parts blow out to white.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/clifford-torus.js
Exports
  • createCliffordTorus({ palette?, rings?, lines?, skin?, plane? }) => { group, setProgress(progress), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • PALETTES: { spectrum, fire, ocean, mono }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and shader materials.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The torus x = cos a, y = sin a, z = cos b, w = sin b (all over √2) is turned in 4D, then projected by (x, y, z) / (1.02 − w) and scaled by 1.6; the camera sits 15 away.

Lighting: Self-lit lines and an additive skin; the bloom gives the glow.

Timing: setProgress(progress) rewrites every vertex; frames render in any order.

Output
1080×1080, 30 fps, 16 s · procedural (computed from the frame number) · seamless loop — The torus is turned by a whole circle in the x–w plane (and two circles in the y–w plane if chosen) per loop, so the last frame meets the first; the camera sway is a sine of the loop.
Tested
Rendered 480 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
Up to 7 000 vertices rewritten each frame on the CPU, a few thousand line segments and a bloom. A couple of milliseconds a frame on an integrated Intel GPU. Software WebGL renders in about a second a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- clifford-torus/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:c777122343fe7019…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Adapted from the owner's threejs-sketches/geometry-math/clifford-torus (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original object: a 4D rotation of the flat torus with stereographic projection, colour by the hidden coordinate and an exact loop.
BinMore like this

String Art

Background3DSeamless loop12 seconds

Lava Lamp

3D object3DSeamless loop15 seconds