Uploaded March 2026 | Updated September 2026, 2 weeks ago

---

A deep dive into Shiki Magic Move code animations

Check out CodeCrafters: app.codecrafters.io/join?via=mattcroat

🔴 Patreon: patreon.com/joyofcode
💬 Discord: discord.com/invite/k6ZpwAKwwZ

⚓️ Links

🔗 Animotion: github.com/animotionjs/animotion
🔗 Shiki Magic Move: github.com/shikijs/shiki-magic-move
🔗 Post: https://joyofcode.xyz/how-shiki-magic-move-works
🔗 GitHub: github.com/joysofcode/animating-code

🔖 Timestamps

0:00 Intro
0:49 Sponsor
1:20 The Code Setup
2:41 Shiki Magic Move High-Level Overview
4:19 The Shiki Magic Move Core
7:00 The Magic Move Machine
7:53 Code To Keyed Tokens
9:18 Keying Tokens
13:01 Syncing Token Keys
21:38 The Shiki Magic Move Renderer
25:06 The Render Method
30:46 Classifying Tokens And Orchestrating Transitions
38:32 Shiki Magic Move

#joyofcode #javascript #typescript