astro component

astro-magic-move

Animated code morphing for Astro, built on shiki-magic-move.

usage.astro 
<MagicMove />
why this package

What it adds to shiki-magic-move

I loved the shiki-magic-move package, and wanted to make it easier to add into Astro projects. shiki-magic-move provides the core diffing engine, renderer, and framework components — including a precompiled path where you tokenize server-side. This package builds on top of that.

Zero-config precompilation

Tokenization runs automatically in Astro's frontmatter. No highlighter setup, no manual serialization — just pass code strings as props.

Built-in triggers

Scroll into view, click to advance, or auto-play on mount. shiki-magic-move leaves trigger wiring to you — this has it built in.

CSS-variable theming

Token colors come from --shiki-* custom properties instead of inline styles. Override as many or as few as you want.

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"
/>
external control

Drive it from your own code

Use trigger="none" and control steps via the element's .step property.

demo.ts
1/4 
const el = document.querySelector('magic-move')
theming

CSS variable theming

Define --shiki-* variables to control syntax colors. Click through to see themes applied live.

global.css 
/* github dark — click to cycle themes */
:root {
  --shiki-foreground: #c9d1d9;
  --shiki-token-keyword: #d2a8ff;
  --shiki-token-string: #a5d6ff;
  --shiki-token-function: #79c0ff;
  --shiki-token-comment: #484f58;
  --shiki-token-constant: #ff7b72;
  --shiki-token-parameter: #ffa657;
}