---
name: magic-move
description: Animate code changes with smooth transitions between code blocks
---

# Shiki Magic Move

Animate code changes with smooth transitions (like Keynote's Magic Move).

## Basic Usage

`````md
````md magic-move
```js
console.log(`Step ${1}`)
```
```js
console.log(`Step ${1 + 1}`)
```
```ts
console.log(`Step ${3}` as string)
```
````
`````

Note: Use 4 backticks for the wrapper.

## With Line Highlighting

`````md
````md magic-move {at:4, lines: true}
```js {*|1|2-5}
let count = 1
function add() {
  count++
}
```

Non-code blocks in between are ignored.

```js {*}{lines: false}
let count = 1
const add = () => count += 1
```
````
`````

## Animation Options

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):

```yaml
---
shiki:
  magicMove:
    easing: ease-in-out
    stagger: 5
---
```

## How It Works

- Wraps multiple code blocks as one
- Each block is a "step"
- Morphs between steps on click
- Syntax highlighting preserved during animation

## Resources

- Playground: https://shiki-magic-move.netlify.app/