astro-magic-move

install

Get started

Three steps to your first animation.

terminal

# click to continue
pnpm add astro-magic-move

before / after

Two-step shorthand

The simplest way to animate between two code states.

page.astro

---
import { MagicMove } from 'astro-magic-move'
// click to see the template
const before = `const data = fetch('/api')`
const after = `const data = await fetch('/api')
const json = await data.json()`
---

steps

Multi-step transitions

Pass an array for more than two states.

page.astro

---
// click to add more steps
const steps = [
  `const x = 1`,
  `const x = 1
console.log(x)`,
]
---

triggers

Trigger modes

Three ways to fire the animation.

template

<!-- click to see other triggers -->

<!-- auto-play on mount -->
<MagicMove
  before={a}
  after={b}
  trigger="auto"
/>

theming

CSS variable theming

Define --shiki-* variables to control syntax colors.

global.css

/* click to add token colors */
:root {
  --shiki-foreground: #d4d4d4;
  --shiki-background: #1e1e1e;
}