irresponsible: typography that acts out the lyrics

Sammy Cahn and Jimmy Van Heusen's 1962 standard is a love song built on self-accusation — a list of character flaws, followed by the only line that matters. This piece stages it like a record: a title card promising “side A · 33⅓ rpm · played with feeling,” a play button that warns it'll probably start late, and eleven lines that arrive one at a time, each behaving according to its own word. The irresponsible letters tumble in whenever they feel like it. The unreliable ones flicker, and a few simply show up late. The unpredictable ones never stop moving. And the one sincere word in the song gets no tricks at all — it just glows.

Since October it also has a band: press play and an original orchestral score, synthesized live with the Web Audio API, plays along — timed not to a metronome but to the letters themselves. It's the most direct demonstration of a belief that runs through all of the studio's self-initiated pieces: motion should mean something, and so should sound.

Lines of app code

1,856

Dependencies

3

Audio files

0

Staged lines

11

The words direct the type

The architecture is a division of labor: JavaScript casts, CSS performs. Each lyric line carries an effect name and a hold duration — comic timing, tuned per line — and a single function assigns every letter CSS custom properties suited to its line's misbehavior — randomized delays, rotations, and jitter amplitudes for the chaotic lines, precise staggers for the sincere ones. Fifteen CSS keyframe animations then do all the typographic motion. No animation library, no timeline engine — the choreography is data.

The best gags are word-level, not letter-level. In one line, a single word is hurled in from off-stage while the words before it arrive politely — and the word after it waits for the dust to settle. In another, roughly one letter in eight lands fully upside down, because some letters are just impractical. Randomness everywhere is bounded: every range is art-directed so the chaos stays legible.

Rainbows, pursued

One line promises rainbows, so the piece delivers three: the line itself runs with animated color, an SVG arc draws itself overhead via the pathLength trick, and a canvas ribbon chases the cursor for the whole performance — a 200-point pointer trail with time-based fade, hue cycling, and additive compositing, so overlapping strokes glow instead of muddying.

The type conducts the band

The score lives in one 858-line module and is built entirely from oscillators and noise — a detuned string section with delayed vibrato, harp glissandi, pizzicato, celeste, muted brass, timpani, brushes, a convolution-reverb room, even the dust on the record. No samples, no audio files, no audio library. Per the source, the changes, voicings, and tune are all written for this piece, styled after an early-'60s orchestral ballad; the page credits it as an original tribute, and the only thing taken from the 1962 standard is the words.

The interesting part is the sync. The first version cued lines on a fixed 200ms grid, and the git history is candid that the music “ran alongside the animation rather than with it.” So the relationship was inverted: the page now casts every line's randomized letter timings up front and hands the score a list of exactly when each letter visibly lands — derived from the CSS keyframes themselves. Each syllable gets a melody note as it lands, falling letters pluck the harp one by one, each flicker gets a pizzicato, the hurled word hits the timpani at its real impact rather than its launch, upside-down letters get a sour muted trumpet, and the sincere word gets a celeste each time it glows.

Timekeeping is split deliberately. Notes are scheduled on the audio clock with a short look-ahead, every line is its own bar with the tempo stretched so its hold comes out even, and the next line is called when its downbeat will actually be heard— the scheduler compensates for the device's output latency. The finale's heartbeat, which has to stay locked to a looping CSS animation indefinitely, is aimed in page time instead, so the two clocks can't drift apart. Rushing a line scratches the record and stops its melody mid-phrase.

Jokes with manners

• ▸Every animated line exposes its clean text to screen readers via aria-label while the animated word spans stay aria-hidden — assistive tech reads the lyric, not the letter soup.
• ▸Reduced-motion collapses all animation and force-reveals every letter, and the cursor-trail canvas never even starts.
• ▸The background layers — drifting accusations, confetti, the trail — are all decorative and marked as such.
• ▸Clicking mid-performance skips ahead; the hint calls you rude for it, but it works.
• ▸The music has a labeled on/off toggle that remembers your choice, the audio pauses when the tab is hidden, and without Web Audio the piece falls back to plain timers and plays silently.

The lyric belongs to Cahn & Van Heusen — the piece credits them on the record sleeve, and this write-up quotes only the single words the typography acts on.

What we'd tell a client

• ▸Comic timing is a tunable parameter: per-line hold durations carry the humor as much as the animations do.
• ▸Randomness needs art direction — bound every range, or chaos reads as bugs.
• ▸Compute the variation in JS, perform it in CSS: you get per-element uniqueness with the browser's cheapest animation path.
• ▸Accessibility on an art piece is what separates a joke from a wall — the screen-reader experience deserves its own design pass.
• ▸When sound and motion have to agree, pick one source of truth. Here the type leads and the music follows — on the audio clock, with latency accounted for.