yoanbernabeu 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:
- Identifies unchanged tokens
- Finds moved/renamed tokens
- Detects added/removed tokens
- 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
```
````
Disable Line Numbers
````md magic-move {lines: false}
```js
const x = 1
```
```js
const x = 2
```
````
Combined Options
````md magic-move {at: 2, lines: true}
```js {*|1|2}
const first = 1
const second = 2
```
```js {*}
const result = first + second
```
````
Real-World Examples
React Hook Evolution
````md magic-move
```jsx
// Class component state
class Counter extends React.Component {
state = { count: 0 }
increment = () => {
this.setState({ count: this.state.count + 1 })
}
render() {
return (
<button
{this.state.count}
</button>
)
}
}
```
```jsx
// Function component with useState
function Counter() {
const [count, setCount] = useState(0)
const increment = () => {
setCount(count + 1)
}
return (
<button
{count}
</button>
)
}
```
```jsx
// Simplified with inline handler
function Counter() {
const [count, setCount] = useState(0)
return (
<button => setCount(c => c + 1)}>
{count}
</button>
)
}
```
````
API Evolution
````md magic-move
```js
// Callbacks
function fetchUser(id, callback) {
fetch(`/api/users/${id}`)
.then(res => res.json())
.then(data => callback(null, data))
.catch(err => callback(err, null))
}
fetchUser(1, (err, user) => {
if (err) console.error(err)
else console.log(user)
})
```
```js
// Promises
function fetchUser(id) {
return fetch(`/api/users/${id}`)
.then(res => res.json())
}
fetchUser(1)
.then(user => console.log(user))
.catch(err => console.error(err))
```
```js
// Async/Await
async function fetchUser(id) {
const res = await fetch(`/api/users/${id}`)
return res.json()
}
try {
const user = await fetchUser(1)
console.log(user)
} catch (err) {
console.error(err)
}
```
````
Building a Function
````md magic-move
```typescript
function processData() {
}
```
```typescript
function processData(data) {
}
```
```typescript
function processData(data: string[]) {
}
```
```typescript
function processData(data: string[]): string[] {
return data
}
```
```typescript
function processData(data: string[]): string[] {
return data
.filter(item => item.length > 0)
}
```
```typescript
function processData(data: string[]): string[] {
return data
.filter(item => item.length > 0)
.map(item => item.trim())
}
```
```typescript
function processData(data: string[]): string[] {
return data
.filter(item => item.length > 0)
.map(item => item.trim())
.sort((a, b) => a.localeCompare(b))
}
```
````
SQL Query Building
````md magic-move
```sql
SELECT * FROM users
```
```sql
SELECT id, name, email FROM users
```
```sql
SELECT id, name, email FROM users
WHERE active = true
```
```sql
SELECT id, name, email FROM users
WHERE active = true
ORDER BY created_at DESC
```
```sql
SELECT id, name, email FROM users
WHERE active = true
ORDER BY created_at DESC
LIMIT 10
```
````
Patterns and Tips
Start Simple, Add Complexity
````md magic-move
```js
// Start with the goal
const result = processData(input)
```
```js
// Show the implementation
function processData(input) {
return input
}
const result = processData(input)
```
```js
// Add details
function processData(input) {
return input
.filter(x => x != null)
.map(x => transform(x))
}
const result = processData(input)
```
````
Show Problem Then Solution
````md magic-move
```js
// Problem: Callback hell
getData(function(a) {
getMoreData(a, function(b) {
getMoreData(b, function(c) {
getMoreData(c, function(d) {
// Finally done
})
})
})
})
```
```js
// Solution: Promises
getData()
.then(a => getMoreData(a))
.then(b => getMoreData(b))
.then(c => getMoreData(c))
.then(d => {
// Clean and flat!
})
```
````
Highlight Changes with Comments
````md magic-move
```js
const config = {
debug: true,
timeout: 1000
}
```
```js
const config = {
debug: false, // Changed!
timeout: 1000
}
```
```js
const config = {
debug: false,
timeout: 5000 // Increased!
}
```
````
Best Practices
- Small Steps: Each transition should show one logical change
- Maintain Context: Keep surrounding code visible when possible
- Use Comments: Add comments to explain what's changing
- Consistent Style: Keep formatting consistent across steps
- Test the Animation: Verify smooth transitions before presenting
Common Mistakes
❌ Too many changes at once
Step 1: Original code
Step 2: Completely different code
✓ Incremental changes
Step 1: Original
Step 2: Add one feature
Step 3: Add another feature
Step 4: Refactor
❌ Lost context
Step 1: function foo() { ... }
Step 2: const bar = ... // Where did foo go?
✓ Preserved context
Step 1: function foo() { ... }
Step 2: function foo() { const bar = ... }
Interactive Playground
Try Magic Move at: https://shiki-magic-move.netlify.app/
Output Format
When creating Magic Move animations:
ANIMATION GOAL: [What transformation are you showing?]
STEPS:
1. [Initial state - describe]
2. [Change 1 - describe]
3. [Change 2 - describe]
...
CODE:
````md magic-move {[options]}
```[lang]
[Step 1 code]
[Step 2 code]
...
SPEAKER NOTES:
- Step 1: [What to say]
- Step 2: [What to say]
```