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

Other Projects

Inventory Studio
Learn about the inventory ad product I engineered for AET Automotive's Marketing Suite of products
Prototyping Motion with FramerJS
A collection of interactive prototypes I created for the Microsoft Team's mobile app.
Humanizing Messaging Experiences
In this post I dive deep into the creation of the typing indicator and 'like' animation for Microsoft Teams.
Mercury
After Effects script for creating free-form liquid deformations for shapes, solids, text, and masks. Mercury allows you to turn any object into a liquid object with customizable liquid thickness and evolution settings
Creative Studio Pro
Creative Studio Pro is AET Automotive’s ad builder for fast, beautiful, automated, OEM-compliant creative.
Trigger
Trigger is a After Effects script that automates a time remapping process used for layer marker based animation. Trigger allows users to quickly setup and retime complex user flows by triggering animation events called via layer markers.
UXdefined.com
A Unified Dictionary for UX Designers
Smart Selector
Smart Selector is the world's most advanced layer selection algorithm for After Effects. Smart Selector's proprietary technology allows users to pinpoint and select layers densely nested within After Effects compositions
Halodrox - Drone Apocalypse
Halodrox is a indie mobile game I created in 2011 as a personal project. The game is a 9 level, accelerometer enabled, top-down shooter packed with Mario Kart style power ups and rapid fire action.
Threaded Messaging Animations