910 B
910 B
name, description
| name | description |
|---|---|
| magic-move | 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 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 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);
```
````
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/