open player open editor open editor route

wildlife editor tutorial

practical workflow for building reactive edits with keyframes + hz triggers.

your workflow anchor: while editing, focus on top peaks, presence band energy (hi-hats), and dominant frequency. those three tell you most of what you need for reliable trigger timing.

quick start

  1. open /editor.html.
  2. click upload song or keep the default track.
  3. click play from start once to reset state + colors.
  4. use start recording and perform key actions in time.
  5. add hz triggers for repeated moments you want automated.
  6. save/export, then load that json on the player page.

reading the visualizer (the 3 metrics you care about)

dominant frequency
best for strong tonal events (lead notes, vocal formants, bass roots). use this for direction flips or camera/shape moves that should track obvious tonal hits.
top peaks
best for multi-layer moments where one frequency is not enough. if top peaks are stable around repeated zones, use middle peak hz trigger source for consistency.
presence band energy (hi-hats / brightness)
use this when hats and bright percussion define rhythm more than pitch. great for line toggles, color changes, or subtle rotation pulses.

trigger recipes you can start with

goal source + mode starting values action
flip direction on strong tonal stab dominant hz + enter hz 1336, tol 7, cooldown 120ms toggle direction
react to hats/build-up texture presence band energy + enter_up threshold 0.0200, tol 0.0100, cooldown 80-140ms toggle lines + reroute or color change
trigger on downward spectral sweep middle peak hz + cross_down hz 270, tol 3, cooldown 120ms y-rotation pulse
camera transitions on chorus entrance dominant hz + cross_up pick repeated crossing point from chorus, cooldown 300-600ms cycle camera

trigger mode guide

  • enter window: fires once when value enters target ± tolerance, any direction.
  • enter window going up: same, but only while rising.
  • enter window going down: same, but only while falling.
  • cross up over hz: fires when value crosses up through threshold.
  • cross down under hz: fires when value crosses down through threshold.

editing rhythm that stays stable

  1. record manual keys first for the important scene beats.
  2. add triggers only for repeated motifs (hats, recurring tonal notes, drops).
  3. start with wider tolerance, then tighten until false-fires disappear.
  4. increase cooldown if a trigger chatters too much.
  5. replay from start after every 2-3 new triggers and inspect trigger fire counts.

key action map

these can be recorded manually and also called by triggers:

  • Space: toggle lines + randomize connections
  • H: cycle color mode
  • J: toggle trees/grass
  • B: toggle scatter flight
  • V: cycle cinematic camera
  • K: cycle shape routes
  • T: rerun center text animation
  • D: manual direction flip (editor only)

export + playback workflow

  • save local stores edits + triggers in local storage.
  • export json writes your timeline + trigger config to file.
  • on the player page, import json and press start.
  • if no import is loaded, player uses default timeline after countdown.

export filename uses your active song label, so you can keep multiple versions cleanly.

troubleshooting quick hits

  • trigger not firing: lower cooldown, increase tolerance, confirm source (hz vs energy).
  • trigger firing too often: increase cooldown and switch from enter to directional mode.
  • no audio: click play/start button once to satisfy browser audio gesture rules.
  • editor 404 on deploy: ensure build emits dist/editor.html and Vercel output is dist.