Mellow Lines

Code animation studio built with Next.js that transforms your code snippets into beautiful, smooth transition animations. Perfect for creating high-quality videos of code refactorings, feature implementations, or explaining complex logic.

_n.u.q.s.mp4

✨ Features

• Magical Transitions: Smoothly animate code changes between multiple steps using a custom layout engine.
• Shiki Integration: High-fidelity syntax highlighting powered by Shiki with support for various themes.
• High-Performance Rendering: Direct-to-canvas 2D rendering ensures sharp visuals and fluid 60 FPS animations.
• Video Export: Export your animations directly to high-quality MP4, WebM, or GIF formats using FFmpeg (WASM).
• Interactive Studio: Real-time preview with timeline seeking, play/pause controls, and customizable transition timings.
• Customizable: Toggle line numbers, adjust FPS, change themes, and more.

🚀 Getting Started

First, install the dependencies:

npm install
# or
bun install

Then, run the development server:

npm run dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

🛠️ Technology Stack

• Framework: Next.js 16 (App Router)
• Highlighter: Shiki
• Graphics: HTML5 Canvas 2D API
• Video Processing: @ffmpeg/ffmpeg (WebAssembly)

Export Notes

• MP4/WebM: Preserve the selected 30/60 FPS export setting.
• GIF: Uses the same full export dimensions as video export and palette-optimized FFmpeg encoding for crisp text.
• GIF FPS policy: When the editor is set to 60 FPS, GIF export intentionally encodes at 50 FPS for more consistent playback across GIF viewers.
• GIF audio: Not supported.

📖 Learn More

To learn more about the internals of the animation engine, check out:

• app/lib/magicMove/: The core logic for token selection and layout animation.
• app/lib/video/: Video recording and FFmpeg conversion logic.