Can a glowing tree that grows in time with music make sound visible, and can the same tree make a project plan legible as it plays?

Hypothesis

Most music visualizers react to loudness, so the picture pulses roughly with the track but rarely lands on the actual sound. If the audio is analysed first (onsets, tempo, sections) and every visual event is tied to an onset time, the light should land exactly on the hit. And if the shape of each event is chosen by the character of the sound, not at random, the picture should read as the music. A second question followed once that worked: a project plan is also a sequence of events over time. Played as music, could a plan become something you watch rather than scroll?

What we built

• A single-file visualizer. One HTML file, Canvas 2D and Web Audio, no libraries. A glowing tree grows left to right in time with the music.
• Offline analysis first. The audio is split into three bands (bass, mid, high) and analysed for onsets, tempo and sections before playback. Every flash on screen is an onset time, so light lands on the sound.
• A shape grammar. For each hit it picks one of about 11 shapes from the sound itself (sustain, brightness, density, downbeat, strength): needles, fan, roots, tendril, fern, willow, lightning, comb, dandelion, firework and crown. One rule holds for all of them: every stroke grows forward and away from the trunk.
• Seven themes.
  • Bloom: organic growth.
  • Ares: a red circuit board.
  • Quanta: a chaotic fractal.
  • Multiverse: timelines that split on later hits. Each lineage rolls a "vigour", so some keep branching and others die out.
  • Overdrive: a cyberpunk city with lasers.
  • Mycelium: wandering hyphae networks.
  • Collider: bubble-chamber particle tracks.
• Music. Four real tracks by Kevin MacLeod (incompetech.com, licensed under CC BY 4.0), four synthesized demos, or drop in your own file.
• Mic mode. Sing or beatbox and the tree grows live. The browser only allows the mic over https or localhost, and it is blocked inside embeds.
• Tasks mode. A Notion project plan played as music. Each task is a branch, born on a beat: the date of the meeting where it came up, or seven days before its deadline. Open tasks keep growing. Completed tasks explode, or show a green checkmark with a ping (selectable). Archived tasks wilt and die out. Sub-tasks grow out of their parent, and each workstream is a named river. Soundscape layers (Pulse, Ambient, Glass, Drums) can be switched in live, separate from the background music. We tested it on a real 873-task festival project plan with 13 workstreams.
• Privacy split. The full task data never leaves the Mac it runs on: it is not in git. The public demo carries one project as a stripped copy: dates, statuses and workstream names only, with no task names and no Notion ids (each task is just a number).
• Share links. Every song, theme, palette, done effect, music bed, soundscape layer and start time lives in the URL, so a link opens exactly that view.

Learnings

• Analyse first, then draw. Tying every flash to a precomputed onset is what makes the picture feel locked to the music. Reacting to loudness in real time cannot do that, because by the time the level rises the hit has passed.
• Live input needs a different detector. The offline onset picker looks ahead in the audio, which is fine for a file but cost 0.55 seconds of delay on the mic. A causal detector, which decides from past sound plus one frame of look-ahead, cut that to 0.15 seconds, and having the glow follow the newest mic frame brought it to 0.09 seconds.
• Let the sound pick the shape. Choosing the branch shape from sustain, brightness and strength reads as intentional in a way random variation did not. The single "forward and away from the trunk" rule kept 11 shapes from turning into noise.
• Notion has no status history. The API tells you a task is done, not when it became done. So "done" lands on the deadline, or on the last edit when there is no deadline. That is an approximation, not a record.
• Creation dates can be useless. The plan we tested had been imported in a single day, so every task shared the same creation date. Meeting dates and deadlines were the only usable signal for when a task was born.
• Some structure had to be inferred. 376 top-level tasks had no workstream, so an AI agent classified them from their titles. The rivers are only as good as that classification.

Log

• 2026-10-02: Built in one day. Started with four themes (Bloom, Ares, Quanta, Collider) and synth demo songs, then added Multiverse, Overdrive and Mycelium, mic mode, and four real tracks by Kevin MacLeod under CC BY 4.0. Cut mic latency from 0.55 to 0.15 to 0.09 seconds. Added tasks mode and played it over a real 873-task festival project plan with 13 workstreams, with timeline months, a playhead date, soundscape layers and a choice of explosion or checkmark for completed tasks. Kept the full task data off git, published one stripped project (no task names, no Notion ids) with the demo at beatbranch.vercel.app, and added share links that carry the whole configuration.