DEV Community

Cover image for The groove is the 40 milliseconds a grid throws away, so we built a beat studio that gives them back, in a browser tab

The groove is the 40 milliseconds a grid throws away, so we built a beat studio that gives them back, in a browser tab

Subarna Maity on October 04, 2026

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend At 90 BPM a sixteenth note lasts 166.7 ms. Swing at 50% pushes ev...
Collapse
 
launchgatecheck profile image
Launch Gate •

Sharing the playback and export engine removes a useful source of disagreement. I'd add a loop-boundary fixture with an early humanized hit on the first step and a late hit on the last step, then compare live playback, WAV and MIDI over several repetitions. Those offsets can cross the wrap boundary even when the ordinary swing case passes. Does MIDI preserve the same effective offsets and clipping rule as hitTime, and what happens to an early first hit when export starts at time zero?

Collapse
 
dronzer2code profile image
Subarna Maity •

That’s a good edge case to test. I’d specifically want to verify the loop-boundary behavior rather than assume WAV/MIDI and live playback handle a negative first-hit offset identically. An early hit at the first step is especially interesting because export starts at t=0, so it may need clipping or boundary handling rather than simply preserving the negative timestamp.

The playback/export comparison you suggested would be a useful fixture for catching exactly that kind of discrepancy. And Thanks For Engageing Pls Leave the post Likes 🤗

Collapse
 
c0demafia profile image
BlackDronzer •

Building something tailored like this for a friend who actually makes beats shows in every detail, especially the visual color coded idea cards and keeping the agent’s reasoning tied to the commits. Huge kudos to you and Sourish on shipping such an out of the box, deeply thoughtful project for the challenge! 🥁✨

Collapse
 
dronzer2code profile image
Subarna Maity •

Thank you! That was a big part of the goal — building around an actual producer workflow rather than just adding AI for the sake of it. The color-coded idea cards and commit-linked agent reasoning were meant to make the whole process more transparent and usable. Really appreciate you noticing those details! 🥁And Thanks For Engageing Pls Leave the post Likes 🤗

Collapse
 
ssapable profile image
ssapable •

The opening numbers (166.7 ms per sixteenth at 90 BPM, swing pushing every second one 41.7 ms late, shorter than a phone-video frame) are the best explanation of swing I've read on this site, so I turned them into a 50-second hand-drawn cartoon: the ticks on a belt nudging late, a robot that marches and then bounces, the grid throwing the 40 ms away and Krisp keeping them, then "warm, dusty kick" found by vibe and the WAV or MIDI export. No strings, yours to use or ignore, on a plain page with no sign-up:

ssap-pa.github.io/scripttoon-samples/

If a number or wording is off, name the shot and I'll re-render it. One question: when GrooVAE humanizes a pattern, does it ever push a hit earlier than the grid, or only late?

Collapse
 
dronzer2code profile image
Subarna Maity • • Edited

Demm this is really cool — thanks for turning the post into a 50 second animation. The belt/robot analogy is a great way to visualize what we mean by preserving microtiming,

On your question: GrooVAE can move hits both earlier and later than the grid. The 40 ms example is specifically illustrating swing, not a rule that humanization only pushes notes late. The actual humanization is about preserving natural microtiming rather than forcing everything onto one side of the grid. And Thanks For Engageing Pls Leave the post Likes 🤗

Collapse
 
ssapable profile image
ssapable •

Thanks, that's the correction I needed: swing is the illustration, humanization moves hits both ways to keep the natural microtiming. I've re-rendered the hook shot so the ticks drift early as well as late, since the first cut only bounced late and quietly repeated the wrong idea; the samples page has the fixed version. The cartoon is yours to use anywhere, no credit needed, and if you ever want a longer cut that shows the four variations side by side, say so.

Thread Thread
 
dronzer2code profile image
Subarna Maity •

Absolutely 🤗

Collapse
 
soumen_kundu_cf61797cb29d profile image
Soumen Kundu •

Really impressive project! I especially liked the idea of preserving those tiny timing variations instead of forcing everything onto a rigid grid. The combination of Tone.js, browser-based AI, ElevenLabs, and Tiger Data makes this much more than just another beat maker.

Collapse
 
dronzer2code profile image
Subarna Maity •

Thank you! That was exactly the idea behind Krisp — keeping those small human timing variations instead of quantizing the life out of a performance. We wanted the AI and infrastructure to support that idea without getting in the way of actually making music. And Thanks For Engageing Pls Leave the post Likes 🤗

Collapse
 
dronzer2code profile image
Subarna Maity •

@jess @peter @ben hope guys will like this one!