I built a motion design studio in the browser. Here's what it took.
AtomCut started as a tool that was supposed to animate text. Today it's an infinite canvas above a multi-track timeline, in the browser, where you can keyframe anything, paint with a wet watercolour brush, track motion, add captions that follow a voice, and export to MP4, GIF, SVG or Lottie. It's free, there's no account, and it works offline. This is the honest version of how it got there,…
AtomCut began as a tool designed to animate text, but evolved into a versatile, browser-based motion design platform. Today, it offers an infinite canvas with a multi-track timeline, where users can keyframe elements, paint with watercolor brushes, add captions, and export projects in various formats. The platform is free, does not require an account, and functions offline.
The development process was far from straightforward. Initially, AtomCut was a simple text typing animation, but soon expanded to include background clips, sound effects, and moving text along paths. This led to the creation of a timeline that could accommodate any type of content, prompting a reevaluation of what the core features should be. The philosophy was simple: the smallest set of ideas that made everything else a special case.
The architecture of AtomCut is built around two key components: a pure function for rendering frames and a centralized store for managing undo operations. The rendering function takes the document and time as inputs and returns what the user sees, ensuring consistency across different export formats like MP4, GIF, SVG, or Lottie.
Undo actions are represented as patches, allowing for efficient and reversible changes without requiring full project snapshots. This approach simplifies the codebase and facilitates the addition of new features.
One of the major challenges faced during the development was handling the interaction between cropped videos and frame interpolation. To address this issue, the data model was adjusted to use two separate transforms—one for the window and another for the content—ensuring that the content transform was isolated from the crop. This change required a significant amount of time to identify and resolve, demonstrating the iterative nature of the development process.
The studio's structure is straightforward: a canvas above the timeline, allowing for intuitive editing and previewing. While complex effects can be challenging, the core foundation of AtomCut remains robust and adaptable. The platform continues to evolve with a focus on free access, occasional premium exports, and future enhancements such as live collaboration and an assistant for timeline management.
Developers and users are encouraged to share their creations using AtomCut, fostering a community around this innovative motion design tool.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
