Ink Flight: building a place around my head spins

an interactive study, no. 01

i wanted my head spins to become a place you could spend time in. my friend tanner royster has a new song out, and instead of cutting a fixed music video i built a small browser study around it: a flock gathers over moving ink, scatters when your cursor gets close, then regroups. you can follow one bird, or call up a country road or a western sunset that draws itself stroke by stroke and then loosens into dust. the song keeps playing underneath all of it.

this is a field note on how it came together. i built it at raidguild, with codex helping on code, asset prep, and a lot of iteration.

three layers

the study is basically three things stacked on top of each other.

the wash. the background is an ink/pigment fluid sim adapted from inkwash by jonathan whitaker (mit, notice preserved). i didn't write the fluid engine from scratch. what i changed: music-controlled emitters, moving currents, bounded sim resolution, and pigment decay. web audio frequency analysis splits the song into low, mid, and high bands, and those push pigment deposition and movement. there's a black-and-white/color toggle that swaps the look without restarting the sim, and a canvas fallback for when webgl isn't available.

the flock. 280 small leaf-shaped marks on desktop, 180 on narrow screens. it's an art-directed boids-style system — local separation, alignment, and cohesion plus some moving group guides that cause gathering, splitting, and direction changes. it's not a scientific starling model and i'm not pretending it is. the first version felt like a clump bouncing around the screen. it got better with local rules, more birds, oblong marks, moving guides, and sharper turns.

the pointer ended up being the most fun part. from a distance it attracts the flock; when birds get close they scatter, then drift back together. invitation, disruption, regroup. that little loop turned into the emotional core of the thing.

the scenes. three buttons, and you trigger them whenever you want. they're not tied to song position — this is listener-led, not a timeline. only one scene runs at a time, and the wash, audio, and lyrics keep going through all of them. reduced-motion mode swaps the long movement for short fades or a finished drawing.

the scenes, and what changed

follow a bird. pick a bird and the detailed two-bird animation fades and scales up from that spot while the flock fades out. it's 384 transparent webp frames, 16 seconds, then the foreground ink scatters into dust over six seconds. the first version just enlarged the tiny flock mark before revealing the animation. it looked wrong. having the actual artwork emerge from the bird's location fixed it.

the bird frames came from a supplied 720 × 974, 24 fps video with a white background. i converted the white to soft alpha and kept the line color black to cut down on pale halos. the browser doesn't decode all 384 frames at once — there's a bounded decoded-frame cache with lookahead loading.

country road. this started as a centered, symmetrical sketch. a photo reference pushed me to an angled road running toward the right horizon, one prominent row of telephone poles shrinking into the distance, bowed wires, sparse verge marks. seven birds perch on the wires at the end, which ties it back to the flock. it reveals over roughly ten seconds, holds, then goes to dust.

sunset. a cowboy on horseback in front of a big sun and western mountains. thin lines draw in over about 16 seconds, then the rider erases, leaving the horse and saddle, then the rest drifts off.

this one taught me the most. i started from a rider silhouette reference, and tracing a textured dark silhouette directly gave heavy, noisy boundaries — wrong input for line animation. so i used image generation to make a western silhouette scene with a large sun, then had it redrawn as thin ink line art. a python pipeline (pillow, numpy, scikit-image) thresholded and skeletonized that, pulled out centerline graphs, and simplified them into svg paths: 2,529 strokes, ordered spatially into a drawing sequence and ported to canvas.

to be clear about what it is: generated line art plus automatic tracing, not one hand-drawn line. it's a first pass. the rider removal uses a spatial mask, and a better version would have fewer strokes and hand-grouped rider paths.

dust ended up being the shared ending across scenes, which made the whole thing feel like one world instead of three demos.

the song and the lyrics

the full master came in as a 48 khz stereo wav, about 249 seconds and ~72 mb. i encoded it to 192 kbps aac with fast-start, which got it to about 6 mb, and kept the three-second fades in and out.

the lyric wording is tanner's. i used local faster-whisper word timestamps only as timing anchors — the model's transcription didn't replace his words. there are 41 phrase cues, and they're still draft timing. they're editable in the lyrics panel, and i'm not claiming frame-perfect sync.

recording it

recording surfaced a layout thing i hadn't thought about: a 1080-pixel-wide browser still gets the desktop layout, even inside a vertical video. so obs renders a 540 × 960 browser viewport at 2× into a 1080 × 1920 output. there's also a separate record view (`?record=1`) that drops the big control dock and study title, shows song and artist instead, and keeps the controls faint. the clips i'm posting are screen recordings of the actual app, not a separate render.

stack, quickly

plain html, css, and js modules. canvas 2d, webgl2, web audio. no react, no build step. scene icons are inline svgs. it's served as static assets out of raidguild's portal-artifacts repo.

what's next

more precise rider path grouping, fewer sunset strokes, an actual listening pass on the lyric timing, and maybe a clean scene schedule if i ever want a deterministic full-song film. if that happens it'll live separately from this — the point of this one is that you drive it.

go play with it: ink flight. and go listen to tanner — my little versailles on bandcamp or my head spins on youtube.

song: my head spins — tanner royster. study: dekan at raidguild.