-
-
A 360-degree view reveals the connected gears, pistons, camshaft, flywheel, and belt drive.
-
The machine being refined in Blender, with distinct mechanisms for drums, bass, chords, and lead.
-
The live MACHINE DJ demo: four musical stems become one interactive mechanical system.
Inspiration
I work in manufacturing, where I often hear regular, almost musical rhythms coming from metal-processing equipment. I also work with parts and engineering drawings through material procurement. Although I do not fully understand how every mechanism works, I have always been fascinated by the moment when separate components fit together and begin transmitting motion as one system.
At the same time, I love the uplifting rhythms and layered structure of EDM. I wondered: what if a song could be understood not only through sound, but also as a visible mechanical system?
Traditional DJ equipment felt difficult for me to approach. With AI and a browser-based interface, however, I could explore the experience I had imagined: touching parts of a machine, stopping individual sounds, and recombining them while the music continues.
That idea became MACHINE DJ.
What it does
MACHINE DJ transforms one song into a transparent, interconnected machine.
Each musical stem controls a different mechanical system:
- Drums drive reciprocating pistons.
- Bass turns a heavy flywheel.
- Chords move a camshaft and its followers.
- Lead travels through a pulley and belt transmission.
The user can press and hold a mechanism to temporarily stop and mute its corresponding sound. A quick tap latches that layer off, and another tap brings it back into the song at the current playback position.
Instead of displaying four separate audio visualizers, MACHINE DJ presents the entire song as one connected machine with a shared frame, power train, and rhythm.
How we built it
The demo uses an original 128 BPM EDM track generated by the project creator with Mureka V9 and prepared as four synchronized stems.
The mechanical model was procedurally developed in Blender using Python and exported as a GLB file. Each musical mechanism has a named root inside the model so that the browser can identify and control it independently.
The interactive application was built with React, TypeScript, Three.js, React Three Fiber, and the Web Audio API. The four stems share the same playback timeline so that stopping one layer does not cause it to lose its place in the song. When it returns, it rejoins the other layers at the current position.
The machine’s mechanisms use different motion patterns and gear ratios while remaining part of one coordinated system. The scene can also be viewed from 360 degrees, allowing users to explore its internal structure.
Codex running on GPT-5.6 Sol helped research mechanical references, compare implementation approaches, generate and refine the Blender model, connect the GLB mechanisms to the audio system, diagnose synchronization and visual problems, and prepare the public GitHub Pages build.
The original concept, musical mapping, interaction design, visual direction, and final product decisions were made by the creator.
Challenges
One major challenge was making the result feel like one believable machine instead of four unrelated animations. Early versions contained flat-looking gears, intersecting shafts, identical motion speeds, and structures that did not appear mechanically connected.
Another challenge was synchronizing four audio stems while supporting two different gestures: holding for a temporary mute and tapping to latch a layer off. The audio needed to remain synchronized even when individual mechanisms were stopped.
The Blender-to-browser workflow also required repeated refinement. Model structure, object names, animation behavior, loading states, lighting, camera controls, and GitHub Pages asset paths all had to work together reliably.
Finally, I began this project without professional DJ, Blender, or mechanical-design experience. Translating a visual and emotional idea into precise implementation instructions was itself an important part of the challenge.
What I learned
I learned that visualization is not simply decoration. The relationship between sound and movement must be clear enough that users can feel which mechanism belongs to which musical layer.
I also learned that collaborating with AI works best as an iterative design process. Codex could rapidly produce and test implementations, but human judgment was still essential for noticing when a mechanism felt unnatural, when the rhythm did not match, or when the interaction lost its original meaning.
Most importantly, this project showed me that technical systems can become an approachable creative interface. A machine can explain music, and music can make a machine feel alive.
What's next
The next version could analyze an uploaded song, separate or identify its musical elements, and propose a mechanical arrangement that matches its tempo and structure.
I would also like to add more detailed clutch and braking behavior, drive motion more directly from audio analysis, and let users rearrange mechanisms to create their own musical machines.
The long-term vision is a space where anyone can see, touch, and remix the hidden machinery inside their favorite rhythm.
Log in or sign up for Devpost to join the conversation.