slidev-magic-move

Shiki Magic Move

This skill covers Shiki Magic Move, a powerful feature that creates smooth animated transitions between different code states, similar to Keynote's Magic Move effect.

When to Use This Skill

• Showing code evolution step by step
• Refactoring demonstrations
• Before/after code comparisons
• Tutorial walkthroughs
• Animated code transformations

How Magic Move Works

Magic Move analyzes two code blocks and:

1. Identifies unchanged tokens
2. Finds moved/renamed tokens
3. Detects added/removed tokens
4. Animates the transition smoothly

Basic Syntax

Use 4 backticks with md magic-move:

````md magic-move
```js
console.log('Hello')
```
```js
console.log('Hello, World!')
```
````

Each code block represents a step, animated on click.

Step-by-Step Example

Refactoring Journey

````md magic-move
```js
// Step 1: Original code
function add(a, b) {
  return a + b
}
```

```js
// Step 2: Add types
function add(a: number, b: number) {
  return a + b
}
```

```js
// Step 3: Add return type
function add(a: number, b: number): number {
  return a + b
}
```

```ts
// Step 4: Convert to arrow function
const add = (a: number, b: number): number => a + b
```
````

Multiple Steps

````md magic-move
```js
const name = 'world'
```
```js
const name = 'world'
const greeting = 'Hello'
```
```js
const name = 'world'
const greeting = 'Hello'
console.log(`${greeting}, ${name}!`)
```
```js
const name = 'world'
const greeting = 'Hello'
console.log(`${greeting}, ${name}!`)
// Output: Hello, world!
```
````

Combining with Line Highlighting

Add highlights within Magic Move:

````md magic-move {lines: true}
```js {*|1|2|3}
const a = 1
const b = 2
const c = 3
```
```js {*}
const sum = 1 + 2 + 3
```
````

Advanced Options

Control Animation Timing

````md magic-move {at: 3}
```js
// Starts at click 3
const x = 1
```
```js
const x = 1
const y = 2
```
````