← Blog

Inside the playground

The demo on the home page is a simplified browser sketch that explains how Grit works. It is not the app. Here is what it does and what it leaves out.

Bijan Rahnema 4 min read

The first thing on the Grit home page is a playground: a simplified sketch of the app window with four decks, section pads, stem switches, a mixer and a crossfader. Press play and it makes sound, and every control you touch changes what you hear.

It is there to explain the idea, not to stand in for the app. This post explains what is running there, and what it leaves out.

A sketch, not the app

Grit itself is a native application written in Rust around a hard real-time audio engine. None of that runs in your browser.

The playground is built from Grit's first prototype, a web app made with Electron and Tone.js before the native rewrite. It plays through your browser's Web Audio, which shares its time with everything else the page is doing. That is fine for showing how sections, stems and scenes fit together. It is not how Grit sounds or keeps time on stage, and most of the app is missing: preparing your own tracks, eight decks, Key Sync, scratching, MIDI and more.

Four real tracks

The playground plays four house tracks that their artists released under the Creative Commons Attribution licence:

  • Art Now, AlexBeroza feat. Snowflake, electro house
  • All I Need, Malk & Starjam feat. DaKooka, house
  • Runnin', Square a Saw, dance
  • Preoccupied in Thoughts (Craig Ferrier Remix), DJ DeadSheakerz feat. HunterSynth, house

Grit prepared them the way it prepares your tracks: it split each one into drums, bass, vocals and other stems and found its beat grid, key and sections. The demo plays four four-bar sections of each track, an intro, a groove, a break and a drop, cut on Grit's downbeats. All four are stretched to 125 BPM and sit in C minor, so anything you combine will fit. The credits and licences are listed under the playground.

What you can do

  • Launch sections. Each deck's pads fire its sections. Launches wait for the next boundary of the selected quantize setting, so they land in time. The default is one bar.
  • Switch stems. Full, a cappella and instrumental presets, or each of the four stems on its own. Stem changes fade in and out without clicks and survive section changes.
  • Mix. Each channel has volume, three-band EQ and a filter that sweeps from low-pass to high-pass. The crossfader splits the decks into two groups.
  • Change the tempo. The session moves between 105 and 135 BPM. Pitch follows tempo, like a record played faster or slower. Tap tempo works too.
  • Launch scenes. Each of the four scenes launches the same section on every deck at once.

The meters show measured output on a −60 to 0 dB scale, and the waveforms are drawn from minimum, maximum and RMS data of the actual audio files, not from decoration.

Keyboard

The playground listens to the same kind of keys as the app:

Key Action
Space Play / stop
1–4 Focus a deck
Q, W, E, R Launch a section
Z, X, C Full / Acap / Inst
⌥1–⌥4 Launch a scene

The Mac app has many more. They are listed in Support.

The stem field

Below the playground, the "One track in, four stems out" section draws a field of points with three.js. It is built from the same waveform data as the demo. Scrolled to the top, it shows one merged track in the app's grey waveform ink. As you scroll, it separates into four layers in the stem colours.

While the demo is playing, the field follows it: the session clock, each deck's meter and a frequency analysis of the master output drive what you see. If your browser struggles to keep up, it lowers its own resolution.

What stays in your browser

The playground plays its own included audio. It does not ask for microphone access, and it does not upload anything. The audio code and the visualisation are only loaded when they are needed, and the audio starts after you press play. Leaving the page shuts it down.

On a phone, the playground shows one deck at a time. The other three keep playing in the background, so the mix you hear does not change when you switch.

What the Mac app adds

The playground sketches the idea. The app is what you perform with:

  • Your own music. Import tracks and folders. Grit detects tempo, beat grid, key and phrase-aligned sections.
  • Stem separation. Every track is split into drums, bass, vocals and other parts on your Mac.
  • Eight decks instead of four, each with as many sections as the track has.
  • Scenes you capture yourself, with tempo, sections, stems and the full mix.
  • Key Sync, loops, rolls and keyboard scratching.
  • MIDI Learn and a preset for the Akai APC40 MK1.

Grit needs an Apple Silicon Mac with macOS 14 or later. It is not on sale yet; the download page and the changelog show where things stand.

esc

120 BPM ↑↓ Select ↵ Launch