I love Excalidraw for sketching system architectures. But sketches are static. When I want to show how a packet moves through a load balancer, or how a database shard splits, I have to wave my hands frantically or create 10 different slides. sketching system architectures I wanted the ability to "Sketch Logic, Export Motion". "Sketch Logic, Export Motion" The Goal I didn't want a timeline editor (like After Effects). That's too much work for a simple diagram.I wanted"Keyless Animation": "Keyless Animation" Draw Frame 1 (The start state). Clone it to Frame 2. Move elements to their new positions. The engine automatically figures out the transition. Draw Frame 1 (The start state). Frame 1 Clone it to Frame 2. Frame 2 Move elements to their new positions. The engine automatically figures out the transition. I built this engine using Next.js, Excalidraw, and Framer Motion. Here is a technical deep dive into how I implemented the logic. Next.js Excalidraw Framer Motion 1. The Core Logic: Diffing States The hardest part isn't the animation loop; it's the diffing. When we move from Frame A to Frame B, we identify elements by their stable IDs and categorize them into one of three buckets: diffing Frame A Frame B Stable: The element exists in both frames (needs to morph/move). Entering: Exists in B but not A (needs to fade in). Exiting: Exists in A but not B (needs to fade out). Stable: The element exists in both frames (needs to morph/move). Stable: Entering: Exists in B but not A (needs to fade in). Entering: Exiting: Exists in A but not B (needs to fade out). Exiting: I wrote a categorizeTransitionutility that maps elements efficiently: categorizeTransition // Simplified logic from src/utils/editor/transition-logic.ts export function categorizeTransition(prevElements, currElements) { const stable = []; const morphed = []; const entering = []; const exiting = []; const prevMap = new Map(prevElements.map(e => [e.id, e])); const currMap = new Map(currElements.map(e => [e.id, e])); // 1. Find Morphs (Stable) & Entering currElements.forEach(curr => { if (prevMap.has(curr.id)) { const prev = prevMap.get(curr.id); // We separate "Stable" (identical) from "Morphed" (changed) // to optimize the render loop if (areVisuallyIdentical(prev, curr)) { stable.push({ key: curr.id, element: curr }); } else { morphed.push({ key: curr.id, start: prev, end: curr }); } } else { entering.push({ key: curr.id, end: curr }); } }); // 2. Find Exiting prevElements.forEach(prev => { if (!currMap.has(prev.id)) { exiting.push({ key: prev.id, start: prev }); } }); return { stable, morphed, entering, exiting }; } // Simplified logic from src/utils/editor/transition-logic.ts export function categorizeTransition(prevElements, currElements) { const stable = []; const morphed = []; const entering = []; const exiting = []; const prevMap = new Map(prevElements.map(e => [e.id, e])); const currMap = new Map(currElements.map(e => [e.id, e])); // 1. Find Morphs (Stable) & Entering currElements.forEach(curr => { if (prevMap.has(curr.id)) { const prev = prevMap.get(curr.id); // We separate "Stable" (identical) from "Morphed" (changed) // to optimize the render loop if (areVisuallyIdentical(prev, curr)) { stable.push({ key: curr.id, element: curr }); } else { morphed.push({ key: curr.id, start: prev, end: curr }); } } else { entering.push({ key: curr.id, end: curr }); } }); // 2. Find Exiting prevElements.forEach(prev => { if (!currMap.has(prev.id)) { exiting.push({ key: prev.id, start: prev }); } }); return { stable, morphed, entering, exiting }; } 2. Interpolating Properties Interpolating Properties For the "Morphed" elements, we need to calculate the intermediate state at any given progress (0.0 to 1.0). progress You can't just use simple linear interpolation for everything. Numbers (x, y, width): Linear works fine. Colors (strokeColor): You must convert Hex to RGBA, interpolate each channel, and convert back. Angles: You need "shortest path" interpolation. Numbers (x, y, width): Linear works fine. Numbers (x, y, width): Colors (strokeColor): You must convert Hex to RGBA, interpolate each channel, and convert back. Colors (strokeColor): Angles: You need "shortest path" interpolation. Angles: If an object is at 10 degrees and rotates to 350 degrees, linear interpolation goes the long way around. We want it to just rotate -20 degrees. 10 degrees 350 degrees // src/utils/smart-animation.ts const angleProgress = (oldAngle, newAngle, progress) => { let diff = newAngle - oldAngle; // Normalize to -PI to +PI to find shortest direction while (diff > Math.PI) diff -= 2 * Math.PI; while (diff < -Math.PI) diff += 2 * Math.PI; return oldAngle + diff * progress; }; // src/utils/smart-animation.ts const angleProgress = (oldAngle, newAngle, progress) => { let diff = newAngle - oldAngle; // Normalize to -PI to +PI to find shortest direction while (diff > Math.PI) diff -= 2 * Math.PI; while (diff < -Math.PI) diff += 2 * Math.PI; return oldAngle + diff * progress; }; 3. The Render Loop & Overlapping Phases Instead of CSS transitions (which are hard to sync for complex canvas repaints), I used a requestAnimationFrame loop in a React hook called useTransitionAnimation. requestAnimationFrame useTransitionAnimation A key "secret sauce" to making animations feel professional is overlap.If you play animations sequentially (Exit -> Move -> Enter), it feels robotic.I overlapped the phases so the scene feels alive: overlap // Timeline Logic const exitEnd = hasExit ? 300 : 0; const morphStart = exitEnd; const morphEnd = morphStart + 500; // [MAGIC TRICK] Start entering elements BEFORE the morph ends // This creates that "Apple Keynote" feel where things arrive // just as others are settling into place. const overlapDuration = 200; const enterStart = Math.max(morphStart, morphEnd - overlapDuration); // Timeline Logic const exitEnd = hasExit ? 300 : 0; const morphStart = exitEnd; const morphEnd = morphStart + 500; // [MAGIC TRICK] Start entering elements BEFORE the morph ends // This creates that "Apple Keynote" feel where things arrive // just as others are settling into place. const overlapDuration = 200; const enterStart = Math.max(morphStart, morphEnd - overlapDuration); 4. Making it feel "Physical" Linear movement (progress = time / duration) is boring.I implemented spring-based easing functions. Even though I'm manually calculating specific frames, I apply aneasing curve to the progressvalue before feeding it into the interpolator. progress = time / duration easing curve progress // Quartic Ease-Out Approximation for a "Heavy" feel const springEasing = (t) => { return 1 - Math.pow(1 - t, 4); }; // Quartic Ease-Out Approximation for a "Heavy" feel const springEasing = (t) => { return 1 - Math.pow(1 - t, 4); }; This ensures that big architecture blocks "thud" into place with weight, rather than sliding around like ghosts. What's Next? I'm currently working on: Sub-step animations: Allowing you to click through bullet points within a single frame. Export to MP4: Recording the canvas stream directly to a video file. Sub-step animations: Allowing you to click through bullet points within a single frame. Sub-step animations: within Export to MP4: Recording the canvas stream directly to a video file. Export to MP4: The project is live, and I built it to help developers communicate better. Try here: https://postara.io/ Try here: https://postara.io/ https://postara.io/ Free Stripe Promotion Code: postara Let me know what you think of the approach!
![10 Best Anime Websites to Stream & Download [Free + Paid]](https://hackernoon.imgix.net/images/TggSxk7kWsMlczkuVtR0LstDzEG3-1993oxm.jpeg?auto=format&fit=max&w=3840)
