Zoneout

Final Vinyl — Sun, 08 Mar 2026 22:44:33 +0000

I built a collaborative listening app today. Here's what happened.
This morning I had an idea. By this afternoon it had users. By tonight I was DJing to an empty room on the internet and it was still kind of magical.
Zoneout is a collaborative SoundCloud listening room. Anyone in the room can queue tracks, everyone hears them synced in real time. There's a WebGL2 visualiser, chat, and a DJ override system. It runs on Node.js and MySQL and three HTML files.
I built it hacking between terminals, Claude Code, and Cursor — each model has its strengths and I used all of them. The idea, the design, the aesthetic, and the first listening event were all real. I had people playtesting it while I was still building it. Nine users signed up on day one. Someone joined the Procrastinatrix room and stayed.
The stack is deliberately boring. The vibe is deliberately not.
It feels like Turntable.fm if you remember that. That's the whole pitch.
ffilm.org/zoneout

#My first dev

Final Vinyl — Thu, 07 Nov 2024 01:30:04 +0000

I’ve built some personal websites before but never taken on a challenge of this magnitude. It went live today; a one page app for exploring my fledgling record label’s catalogue; integrating Bandcamp but giving it a more ‘crate digging’ feel using three.js for the album navigation. It’s 4,500 lines of code, a dozen modules of JavaScript. It took a week. I worked alone with only Claude.ai as a coding partner. I must say it’s a remarkable tool but not without its foibles.
Anyway I’d love you guys to visit my site and tell me what you think. I did save the code publicly to GitHub if you want to root about in it. But here’s the site: Not the Final Vinyl

Claude wanted me to add a few things:

Technical Deep Dive

Check out the code: NotTheFinalVinyl on GitHub
Live site: notthefinalvinyl.net

The Architecture 🏗️

Built around a custom vinyl record interaction system using Three.js, with about 4,500 lines of vanilla JavaScript split across 12 key modules:

// Example from VinylManager.js - Physics-based vinyl sliding
const animate = (timestamp) => {
    if (!startTime) startTime = timestamp;
    const elapsed = (timestamp - startTime) / this.slideOutDuration;

    if (elapsed < 1) {
        // Custom easing function for natural vinyl movement
        const progress = t < 0.5
            ? 4 * t * t * t
            : 1 - Math.pow(-2 * t + 2, 3) / 2;

        album.setVinylPosition(this.slideDistance * progress);
        requestAnimationFrame(animate);
    }
}

Core Components 🔧

SceneManager: Three.js setup and WebGL handling
VinylManager: Record animations and state
EventHandler: Touch/mouse/keyboard interactions
InfoDisplay: Bandcamp integration and UI
Albums: 3D vinyl mesh and texture management

Technical Challenges Solved 💪

Performance
- Texture preloading
- Efficient animation system
- Smart render ordering for overlapping vinyls
Mobile Support
- Touch gestures
- Dynamic viewport scaling
- Mobile GPU optimizations
Integration
- Bandcamp iframe embedding
- Facebook browser detection
- State management between components

Learning Points 📚

As my first major JavaScript project, I learned:

WebGL/Three.js fundamentals
Complex animation timing
State management patterns
Performance optimization
Mobile-first development

Future Plans 🚀

Adding vinyl reflection effects
More interactive behaviors
Performance enhancements
Better mobile experience

Looking for Feedback On:

Code organization
Three.js best practices
Performance optimizations
Mobile UX improvements

The GitHub Journey

Still learning Git workflows - the repo reflects my learning process! Feel free to explore and suggest improvements. I'm particularly interested in feedback on:

Project structure
Documentation
Git best practices
Testing approaches

threejs #webgl #javascript #frontend #webdev #showdev #animation #ux

DEV Community: Final Vinyl