A 3D diagram animation editor for creating animated architecture diagrams with keyframe timelines, presentation mode, and 17+ built-in templates.
This is probably my most ambitious frontend project — a full creative tool for building animated architecture diagrams. Think Cloudcraft meets After Effects, but in the browser.
You get a 2D/3D isometric canvas (React Three Fiber + Drei) where you can lay out nodes and edges representing system architectures. Then there's a timeline editor with keyframe-based animations — you can animate position, opacity, scale, rotation, fill color, and flow progress along edges. There are animation presets too: Fade In, Scale In, Pulse, Shake, Glow, Cascade Reveal.
The real power is the 17+ built-in templates covering common distributed systems patterns — Saga Pattern, CI/CD Pipeline, Kubernetes Cluster, Microservices, Event Sourcing, Circuit Breaker, Data Pipeline, and more. You can load any template, customise it, add animations, and present it in presentation mode with step-by-step or continuous playback.
There's a command palette (Cmd+K) for power users and full keyboard shortcut support. The whole thing is built with Zustand for state management and Tailwind for styling. It's the kind of tool I wished existed when preparing architecture talks.