Case study · Self-initiated tool, 2026

skixO · Music Video Visualiser

A browser-based studio that turns a skixO track and a set of mascot frames into an audio-reactive music video, plus every promo asset around it.

Role
Concept, art direction, design and build
Platform
Web (desktop, Chrome or Edge for rendering)
Status
In use for skixO releases (private tool)
The visualiser editor: a preview of the mascot badge over a dusk city skyline, a panel of looks, layout and scene controls on the right, and a full-width timeline below with Scene, Mood, Captions and Audio lanes.
The editor on a release. Preview, the panel for the step you are on, and the timeline lanes underneath.

The brief

Every skixO release needs a video, a vertical cut, a Spotify Canvas and a handful of stills, and each of those used to mean starting from scratch.

I wanted the opposite: a visual identity strong enough to repeat, and a tool that could apply it to any new track in minutes. The visualiser listens to the track, works out its structure, and animates a calm, closed-eyed mascot against shifting backgrounds, in the spirit of a classic static-artwork visualiser rather than a full music video.

01Reading the track

The audio is analysed in the browser: low and high bands for kicks and hats, a smoothed energy curve for structure, and a tempo and downbeat estimate from the kicks. From that, every track splits into quiet, lifted and peak sections, and the two biggest moments get the peak treatment. Because the scale is relative to each track, a gentle song and a loud one both get the full range of looks.

A quiet section: the mascot in flat light inside a round badge, over a starry night sky with a crescent moon and low clouds.
Quiet: flat light.
A lifted section of the same track: the same night scene, with a faint ring of beat ticks around the badge.
Lifted: the same scene, with the beat starting to show around the badge.

02A character that stays in character

The mascot's identity is a closed-eye smile, so the animation is restrained: light shifts from flat to side light as the track lifts, the smile widens slightly at the peaks, and the head nods on the beat. Eye-open frames were tried and dropped because they broke the character.

The frames were produced with image generation under tight consistency rules (same canvas, same body, only the head changes), then aligned automatically so the body never jitters. Changes are clean cuts timed to a kick, like drawn animation, rather than crossfades that would ghost two drawings together.

A three by three grid of mascot frames. Rows show flat light, side light and the peak pose; columns show the head upright and at two points in the nod.
Flat, side light and peak, each with its nods. Only the head changes from frame to frame.

03Backgrounds that carry the story

The mascot stays calm while the world behind it changes. Each section can have its own scene, with its own opacity, blur and drift, and scene changes follow the same timing as the mascot.

A library of 67 backgrounds in three sets (wistful, surreal, glitch) and four palettes sits behind a picker, and a "match look" step samples a background to recolour the badge so it always belongs to the scene.

A peak section: the mascot in side light with a wider smile, over a glitched sky with light rays, red and cyan channel splits and scan lines.
A peak. The scene and the glitch change with the section, and the mascot stays calm.

04Consistency across a body of work

Looks bundle paper, ink and accent colours and recolour the artwork to match. Release groups (an album, a series, a playlist) share a look and motion, while each release keeps its own track, titles, sections and captions. Groups export to a file for backup.

The same frame in five looks: paper blue, dusk in purple, sage in green, riso red, and night on a dark background.
The five looks: Paper blue, Dusk, Sage, Riso red and Night.

05One render, a full set of assets

Rendering is frame-accurate and runs entirely in the browser: 16:9 and 9:16 in one pass, an 8-second seamless Spotify Canvas loop, and still presets for YouTube thumbnails, Instagram posts and Story covers with a headline type style. Lyrics are timed by tapping along as the track plays, then styled with entrances, finishes and fade timings.

The vertical cut: the badge over a dusk skyline, with the title and a two-line lyric caption below it.
The 9:16 cut, rendered in the same pass as 16:9.
An Instagram post still: the badge with a light glitch over the dusk skyline and the headline OUT NOW in large outlined type.
An Instagram post with the headline type style.

06Designing the tool itself

The interface went through a research-led pass against established video editors. That brought a top bar with the essentials, a full-width timeline with Scene, Mood, Captions and Audio lanes (click a block to edit it), and a panel reorganised around the order you actually work through a release: release details, audio and sections, look, motion, export.

Highlights