Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Spinning Vinyl Record

A vinyl record turning on a turntable at 33⅓ rpm, light running across its grooves, your title on the label. Loops perfectly.

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

In Music & sound, Craft & heritage

Next: Music BoxSurprise me

Spinning Vinyl Record preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Open in the title maker

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

Effect controls

Presets

3

Changes the wood grain, the dust on the record and the marbling.

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

View code Sample video (default settings, 2.5 MB)
Info

What it is

A long-player turning on a turntable in a studio: the grooves catch the light in a bright wedge as real records do, the label is printed with your title, the metal platter's rim is dotted for the strobe, and a chrome tonearm rests in the groove, rising a fraction with the record's warp while its shadow falls across the disc. Choose the vinyl (black, red, mustard, marbled or gold), the deck (walnut, black or brushed silver), the label colour and its two lines, the camera angle (three-quarter, from above or low) and the backdrop.

Reuse it in your own idea

  • Song release: the default with the song title on the label, and the artist name on the second line.
  • Podcast background: Red vinyl from above, camera drift off, behind your episode title.
  • Milestone: Gold record with your number on the second line.

Which part is reusable

src/vinyl-record.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

  • Plays at 33⅓ rpm only (45 rpm would not loop in a short clip).
  • The tonearm stays in one groove; it does not cue up or lift off.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/vinyl-record.js
Exports
  • createTurntable({ vinyl?, deck?, labelColor?, inkColor?, title?, subtitle?, seed?, anisotropy? }) => { group, turning, recordCentre, stylus, surfaceY, update(time), dispose() }
  • RPM = 33⅓
  • VINYLS: { black, red, yellow, marble, gold }
  • DECKS: { walnut, black, silver }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and physical materials (anisotropic grooves).
  • chrome-material@1.1.0 (demo) — Studio environment light, backdrop, floor and contact shadow.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: 1 unit = 10 cm. The deck is 4.5 wide and 3.55 deep; the record (radius 1.52) turns about recordCentre, left of the deck's centre.

Lighting: Physical materials: needs scene.environment for the groove sheen and the chrome; a shadow-casting key light lays the tonearm's shadow on the record.

Timing: update(time) is a pure function of time; frames render in any order.

Output
1080×1080, 30 fps, 9 s · procedural (computed from the frame number) · seamless loop — At 33⅓ rpm the record makes exactly five turns in 9 seconds; the arm's warp motion follows the turns and the camera drift is a sine of the loop, so the last frame meets the first.
Tested
Rendered 270 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
About forty meshes and a few textures made once; nothing is rebuilt per frame. Smooth at 1080p on laptop GPUs. The anisotropic sheen needs WebGL 2. Software WebGL (no GPU) renders slowly.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- vinyl-record/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:0ef58e862373c920…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
Provenance
Adapted from the owner's threejs-sketches/audio-musical/webgpu-vinyl-groove (MIT), rebuilt for AI Pixel Wizard in October 2026 in WebGL as a full turntable: anisotropic grooves, a printed label, a strobe-dotted platter, a modelled tonearm, studio light and shadows, a true 33⅓ rpm loop and the frame/time contract.
BinMore like this

More like this

Play these full screen

Music Box

3D object3DSeamless loop12 seconds

Cable Knit

3D object3DSeamless loop16 seconds

Astrolabe

3D object3DSeamless loop16 seconds

Hourglass

3D object3DSeamless loop16 seconds