| 1 | --- |
| 2 | name: magic-move |
| 3 | description: Animate code changes with smooth transitions between code blocks |
| 4 | --- |
| 5 | |
| 6 | # Shiki Magic Move |
| 7 | |
| 8 | Animate code changes with smooth transitions (like Keynote's Magic Move). |
| 9 | |
| 10 | ## Basic Usage |
| 11 | |
| 12 | `````md |
| 13 | ````md magic-move |
| 14 | ```js |
| 15 | console.log(`Step ${1}`) |
| 16 | ``` |
| 17 | ```js |
| 18 | console.log(`Step ${1 + 1}`) |
| 19 | ``` |
| 20 | ```ts |
| 21 | console.log(`Step ${3}` as string) |
| 22 | ``` |
| 23 | ```` |
| 24 | ````` |
| 25 | |
| 26 | Note: Use 4 backticks for the wrapper. |
| 27 | |
| 28 | ## With Line Highlighting |
| 29 | |
| 30 | `````md |
| 31 | ````md magic-move {at:4, lines: true} |
| 32 | ```js {*|1|2-5} |
| 33 | let count = 1 |
| 34 | function add() { |
| 35 | count++ |
| 36 | } |
| 37 | ``` |
| 38 | |
| 39 | Non-code blocks in between are ignored. |
| 40 | |
| 41 | ```js {*}{lines: false} |
| 42 | let count = 1 |
| 43 | const add = () => count += 1 |
| 44 | ``` |
| 45 | ```` |
| 46 | ````` |
| 47 | |
| 48 | ## Animation Options |
| 49 | |
| 50 | Customize duration globally with `magicMoveDuration` (ms, headmatter). Fine-tune easing, stagger, delays, and diffing behavior via `shiki.magicMove` (headmatter), which is passed through to [Shiki Magic Move](https://shiki.style/packages/magic-move#options): |
| 51 | |
| 52 | ```yaml |
| 53 | --- |
| 54 | shiki: |
| 55 | magicMove: |
| 56 | easing: ease-in-out |
| 57 | stagger: 5 |
| 58 | --- |
| 59 | ``` |
| 60 | |
| 61 | ## How It Works |
| 62 | |
| 63 | - Wraps multiple code blocks as one |
| 64 | - Each block is a "step" |
| 65 | - Morphs between steps on click |
| 66 | - Syntax highlighting preserved during animation |
| 67 | |
| 68 | ## Resources |
| 69 | |
| 70 | - Playground: https://shiki-magic-move.netlify.app/ |
| 71 |