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.

It's the studio's smallest self-initiated piece, and the most direct demonstration of a belief that runs through all of them: motion should mean something.

Lines total

914

Dependencies

3

CSS keyframes

15

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.

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 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.