Skip to content

Cable Knit

Chunky wool knits itself row by row, with a braided cable down the middle, then draws back into the needles. Loops perfectly.

3D object, V2 Objects3DSeamless loop, verified148 lines of codev1.0.1

In Craft & heritage

Next: Bookshelf CascadeSurprise me

Cable Knit 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

26
1

Braided cables in the middle (0 for plain knitting).

1
4

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

Info

What it is

Chunky wool knitting itself: two bright needles click along the top of a growing piece of fabric while, row after row, stitches appear behind them, each a V of plump yarn with a twist of its own, the edges in rib and the middle braided into a rope of cables that cross every twelve rows. When the piece is finished the yarn relaxes and draws back into the needles to begin again. Choose the yarn (cream, crimson, teal, mustard or charcoal), the number of rows, how many cables, how fuzzy the wool looks, the seed, the backdrop and whether the camera drifts.

Reuse it in your own idea

  • Winter-collection title: Cream, one cable.
  • Warm brand scene: Crimson, two cables.
  • Calm craft loop: Teal, plain knit.

Which part is reusable

src/cable-knit.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • The stitches grow in place rather than being pulled through by the needles; the needles do not touch the yarn.
  • The cables are a smooth column swap, not real crossing yarn.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/cable-knit.js
Exports
  • createCableKnit({ yarn?, rows?, cables?, fuzz?, seed? }) => { group, setProgress(progress), dispose() }
  • YARNS: { cream, crimson, teal, mustard, charcoal }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and shader materials.
  • chrome-material@1.1.0 (demo) — Studio environment light, backdrop and contact shadow.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The fabric hangs from the needles at y = 0 down to about -9, 16 stitches (7 wide); the demo lifts it 8.6 above the floor.

Lighting: A warm key light with a shadow map, the studio environment and sheen on the wool.

Timing: setProgress(progress) sets every stitch's growth and the needles; frames render in any order.

Output
1080×1080, 30 fps, 16 s · procedural (computed from the frame number) · seamless loop — Each stitch appears at a fixed share of the loop (row by row, left to right) and the whole piece relaxes back into the needles before the end, so the first and last frames are identical; the needles' clicking is a sine of a whole number of cycles.
Tested
Rendered 480 frames on 2026-10-08 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
One instanced mesh of up to 640 tube stitches (about 800 triangles each) and two needles, one shadow map. A few milliseconds a frame on an integrated Intel GPU. Software WebGL renders in a second or two a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- cable-knit/1.0.1 --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.1 · sha256:a097ac31fe11403e… · other versions: 1.0.0
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/objects-scenes/cable-knit (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original object: V-shaped tube stitches on an instanced grid, a column-swapping cable, a row-by-row growth schedule and relaxing return for an exact loop.
BinMore like this

Hourglass

3D object3DSeamless loop16 seconds

Book Flip

3D object3DSeamless loop16 seconds

Music Box

3D object3DSeamless loop12 seconds