Motion Graphics within AET's Creative Studio
Before Creative Studio Pro, I built Creative Studio, a fully DOM-based design editor. Every element — text, images, even video layers — was live HTML styled with CSS and orchestrated with JavaScript. At the time, almost no one in the design world was attempting this. While others leaned on <canvas> or native runtimes, we went all-in on the DOM.
What made this approach exciting was animation. With CSS transitions and transforms running on the compositor thread, we could deliver buttery-smooth, GPU-accelerated motion right in the browser. If you’ve ever tried animating a DOM-heavy app, you know it’s easy to do it wrong — layout thrash, jank, main-thread stalls. But with careful engineering, we layered together text, MP4s, WebMs, and static imagery into single compositions that could be sequenced like motion graphics. It was an editor that felt deceptively simple to use, but under the hood, it was threading the needle between DOM APIs and browser rendering pipelines.
To make this possible, I even built a server-side rendering pipeline that captured these HTML compositions frame by frame and recompiled them into export-ready video with FFmpeg. It was scrappy, ambitious, and at times held together with duct tape — but it worked. We had essentially created a motion graphics editor powered entirely by HTML, CSS, and JavaScript.
Users loved it, and for me as a developer it was a blast to prove what the DOM could do when pushed to its limits. But as our ambitions grew, so did the cracks: layer manipulation became increasingly difficult, performance overhead ballooned on complex projects, and certain features simply couldn’t be expressed cleanly in a DOM-only world.
That’s when we made the call to move to a canvas-based architecture. While canvas sacrifices some of the fluidity and ease of CSS animations, it opened the door to far greater control over layers, blending, and compositing — ultimately giving us the flexibility we needed to keep evolving.
Creative Studio was a first-of-its-kind experiment, and it proved one thing beyond doubt: with the right approach, HTML and CSS can power motion graphics at a level few thought possible.
But time changes everything, check out my post on Creative Studio Pro