work_experience
livebootstrap startupPostara.io
Draw a shape once, the animation writes itself across every frame.
// what problem this solves
Technical systems are dynamic, but the tools used to explain them are usually static. Showing how a request moves through a load balancer, how a queue fans out, or how a shard splits often means building ten separate slides or wrestling with a timeline editor that was never designed for developers. That makes communicating architecture slower than thinking through it.
// what I built
I built a keyless animation engine on top of Excalidraw that turns two static frames into a polished motion sequence. Instead of manually keyframing every object, users draw Frame A and Frame B, and the engine computes the in-between states, transitions, and timing automatically. The result is a Magic Move-style workflow for technical storytelling, directly in the browser.
// how it works
Under the hood, I built a custom state-diffing layer that tracks elements through stable IDs and classifies them as stable, morphed, entering, or exiting between frames. The interpolation engine handles the hard parts that make motion feel clean: color blending from hex to RGBA, shortest-path rotation math so objects do not spin the long way around, and phased transitions that overlap exit, morph, and enter states. A requestAnimationFrame render loop with quartic ease-out timing gives the animation a sense of weight, so even abstract architecture blocks feel deliberate and physical.
// result
- Zero manual keyframing with the engine handling the full transition workflow automatically
- High-end presentation feel through overlapped exit, morph, and enter phases
- 10x faster iteration from concept to polished motion inside a developer-native workflow
- Portable TypeScript animation logic that can be reused in other canvas-based rendering systems
the stack