Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Piano Keys

A two-octave piano playing a repeating tune: keys press down and glowing notes and colour rings rise from them. Loops perfectly.

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

In Science & maths, Music & sound, Light, glass & shine

Next: Bass PulseSurprise me

Piano Keys 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

1

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

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

What it is

A keyboard playing itself. A two-octave piano of ivory and ebony keys plays a little tune that repeats every loop: each note presses its key down on its hinge, and as it sounds a glowing note rises from the key on a lazy sway, followed by rings of colour that spread as they climb and fade, hue by pitch. Choose the tune (arpeggio, scale or chords), the colours of the rising sound (rainbow, aurora, ember or mono), how high the sound climbs, the finish of the piano (ivory, rose or midnight), the backdrop colour and whether the camera sways.

Reuse it in your own idea

  • Music lesson: Arpeggio, rainbow.
  • Calm: Chords, aurora.
  • Warm: Scale, ember.

Which part is reusable

src/piano-keys.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

  • There is no audio: the notes are visual only.
  • The built-in tunes strike white keys only.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/piano-keys.js
Exports
  • createPiano({ tune?, palette?, rise?, body? }) => { group, setProgress(progress), dispose() }
  • TUNES: { arpeggio, scale, chords }
  • PALETTES: { rainbow, aurora, ember, mono }
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: Fourteen white keys 1 wide and 5 long run along x from −6.5 to 6.5, hinged at z = −2.5; the casing stands behind them; sound rises from y ≈ 1 to y ≈ 8.

Lighting: A warm key light with a shadow map, a shadow-catching floor and the studio environment; the rising sound is self-lit and additive.

Timing: setProgress(progress) presses each struck key and places each note and ring; frames render in any order.

Output
1080×1080, 30 fps, 16 s · procedural (computed from the frame number) · seamless loop — The tune is a fixed list of notes on 32 steps per loop; each key's press and each rising note and ring is a function of the time since its note was struck, wrapping round the loop, and the camera sway is a sine of the loop, so the last frame meets the first.
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
14 white and 10 black keys, a casing and up to about 130 additive instanced rings and notes with a shadow map: about a millisecond 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 -- piano-keys/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:c69fb8a50445390a…
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/piano-keys (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original studio object: a hinged two-octave keyboard playing a fixed note list with glowing notes and expanding rings by the time since each strike, on an exact loop.
BinMore like this

More like this

Play these full screen

Bass Pulse

Background3DSeamless loop8 seconds

Ferrofluid

3D object3DSeamless loop16 seconds