Treating web animations as editable clips in a video timeline

Hacker News Ask2026-11-13 19:240 views

A web animation can play in a browser. But putting it in a video timeline requires more than a play button: you need to trim it, move it, duplicate it, and jump directly to a particular moment.

In Breatic, we represent each web-animation clip with a position on the timeline, an in-point in the original animation, and a duration. Trimming changes those values while leaving the animation’s source intact.

For example, take a 10-second animation and keep only seconds 3–6. Place that clip at second 20 of the timeline. When the playhead reaches second 21, the animation needs to show its original second 4.

At normal playback speed, the mapping is:

*Animation time = source in-point + timeline time − clip start*

The animation runtime must support rendering at a requested time. This works with animations prepared for our playback runtime; it doesn’t make an arbitrary web page seekable.

There is another detail: sending a seek request doesn’t mean the new frame is ready to display. Our preview runs the animation inside an iframe. After applying a seek, the page waits for fonts and two animation frames before acknowledging the request. Session and sequence identifiers prevent an outdated response from satisfying a newer seek.

The latest Timeline changes add layered preview playback and controls to move, resize, and rotate video and web-animation layers. Combined with the existing trimming support, this lets the same animation appear in several independently edited clips alongside video.

These changes are merged into the main branch but haven’t shipped in a new release yet. This currently covers editing and preview; video export is still future work.