✳flâneur — a map of the web's best reading

A new standard for image sequences on the web | Daybreak Studio

daybreak.studio · 153 words · saved by 1 readers

Our approach came to reflect a core belief: that engineering can be as much a creative practice as it is a technical one. Creating animations on the web often means choosing between visual fidelity and performance. Superpower was our first experiment in scroll-driven animation. Using MP4s got us partway there but revealed key limitations: full loading upfront, compression artifacts, and browser-specific issues like Safari pausing playback on devices in low-power mode. When we began work on Adaline's site, we saw an opportunity to push the interaction further. Studying image sequences, we found the detail and cross-browser consistency we'd been missing, but also new performance challenges to solve. This time, we weren't interested in compromise. By rethinking each part of the interaction, we made a series of targeted design and engineering choices to shape an experience that delivers both quality and speed. We began by prototyping a CLI-based compression pipeline: extracting PNG frames

mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseU

Explore this link on the map →

related reading