Rebuilding the broadcast squeezeback with CSS Grid and WebVTT
The broadcast squeezeback, rebuilt with CSS Grid and WebVTT
A developer explores how to recreate the classic TV 'squeezeback' effect on the web using CSS Grid and WebVTT. By animating grid track sizes, the video shrinks and reveals panels for CTAs, forms, or other content, all without JavaScript animation loops. WebVTT cues act as a timeline, triggering layout changes via the cuechange event. The post also covers ambient lighting effects using canvas, color sampling for dynamic accents, and two CSS gotchas: matching grid totals for smooth interpolation and registering custom properties correctly.
The reveal and the shrink are the same event.
- jareklupinski
> I'd seen that effect a bajillion times without really looking too hard at it. It's just what television does. But during one of my infamous 2am can’t-sleep iPhone research sessions, I learned it actually has a name: a squeezeback.
reminded me why i love hanging out with media folks: TouchDesigner helped me bridge tech and interactives in the best way, letting them tell me exactly whats going on in their head using their flows and lingo, and i can fast-feedback their designs iteratively while theyre in the room
- kmoser
Are these transitions supposed to be animated, i.e. the video changes size over a few seconds? Because it just jumps instantly to the new size for me on both Firefox and Chrome.
- davekiss
author here! this was a fun one. the idea had been noodling around my head for a while- still would love to figure out a workflow for live streams for this, I'm sure it's doable but maybe not with native-only tech like it is right now