React Animated Code

A beautiful React component for animating code transitions with smooth, Fireship-style animations powered by Shiki Magic Move. Perfect for presentations, tutorials, and interactive code demonstrations.

Features

✨ Smooth Animations - Beautiful transitions between code states
🎨 Syntax Highlighting - Powered by Shiki with 100+ themes
🎬 Multi-Code Navigation - Display multiple code snippets with built-in navigation
📁 Filename Display - VS Code-style header with filename support
▶️ Auto-Play - Automatically cycle through code snippets
⚡ Fast Loading - Optimized highlighter initialization with instant fallback
📦 Zero Config - Works out of the box
🔧 TypeScript Support - Fully typed
🎯 Customizable - Control duration, stagger, themes, navigation, and more

Installation

``bash
npm install react-animated-code
`

Quick Start

`tsx
import { AnimatedCode } from 'react-animated-code';
import 'react-animated-code/style.css';

function App() {
const codeSteps = [
"const greeting = 'Hello';",
"const greeting = 'Hello World!';",
"const greeting = 'Hello Universe!';",
];

return ;
}
`

Props

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| code | CodeInput[] | required | Array of code strings or objects with {code, filename} |
| lang | string | 'typescript' | Programming language for syntax highlighting |
| theme | string | 'github-dark' | Shiki theme name |
| className | string | '' | CSS class for container |
| duration | number | 800 | Animation duration in milliseconds |
| stagger | number | 3 | Stagger delay between animated elements |
| lineNumbers | boolean | true | Show line numbers |

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| showControls | boolean | true | Show built-in prev/next navigation buttons |
| showFilename | boolean | true | Show filename in header bar (if provided) |
| initialIndex | number | 0 | Initial code snippet index to display |

$3

| Prop | Type | Description |
|------|------|-------------|
| onNext | () => void | Called when next button is clicked |
| onPrev | () => void | Called when previous button is clicked |
| onChange | (index: number) => void | Called when the code index changes |

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autoPlay | boolean | false | Enable auto-play mode |
| autoPlayInterval | number | 3000 | Delay between auto-play transitions (ms) |
| autoPlayLoop | boolean | true | Loop back to start when reaching the end |

Examples

$3

`tsx
const codeSteps = [
"const x = 1;",
"const x = 2;",
"const x = 3;",
];


`

$3

`tsx
const steps = [
{ code: "import React from 'react';", filename: "App.tsx" },
{ code: "import React, { useState } from 'react';", filename: "App.tsx" },
{ code: "import React, { useState, useEffect } from 'react';", filename: "App.tsx" },
];


`

$3

`tsx
code={steps}
autoPlay
autoPlayInterval={4000}
duration={600}
/>
`

$3

`tsx
const pythonSteps = [
"def greet():\n print('Hello')",
"def greet(name):\n print(f'Hello {name}')",
];

code={pythonSteps}
lang="python"
theme="dracula"
duration={1000}
/>
`

$3

`tsx
function CodeDemo() {
const [currentIndex, setCurrentIndex] = useState(0);

return (
<>
code={steps}
showControls={false}
initialIndex={currentIndex}
onChange={setCurrentIndex}
/>




);
}
`

$3

`tsx
code={tutorialSteps}
onChange={(index) => {
console.log(Now showing step ${index + 1});
// Update tutorial text, highlight UI elements, etc.
}}
onNext={() => console.log('User clicked next')}
onPrev={() => console.log('User clicked previous')}
/>
`

$3

`tsx
code={steps}
lineNumbers={false}
/>
`

$3

`tsx
code={steps}
className="my-custom-code-block"
/>
`

$3

`tsx
const mixedSteps = [
"console.log('Step 1');",
{ code: "console.log('Step 2');", filename: "demo.js" },
"console.log('Step 3');",
];


`

Available Themes

Popular themes include:
- github-dark / github-light
- nord
- dracula
- monokai
- one-dark-pro
- tokyo-night

See all available themes →

Supported Languages

Supports 100+ languages including:
- JavaScript, TypeScript, JSX, TSX
- Python, Java, C++, Rust, Go
- HTML, CSS, SCSS, JSON
- And many more...

See all supported languages →

How It Works

The component automatically:
1. Eagerly initializes a Shiki syntax highlighter on module import for instant rendering
2. Normalizes input - Accepts both string arrays and objects with filenames
3. Manages state - Tracks current code index and auto-play status
4. Calculates diffs - When navigating between code snippets, calculates the difference
5. Animates transitions - Uses FLIP technique for smooth morphing animations

Lines that exist in both versions move smoothly, new lines fade in, and removed lines fade out.

$3

- Navigation: Clicking next/prev triggers smooth code transitions
- Auto-Play: Automatically advances through code at specified intervals
- Manual Override: Auto-play pauses when user manually navigates
- Looping: Can loop back to the beginning or stop at the end

Performance

$3

- Global singleton cache - Highlighters are cached and reused across components
- Eager initialization - Default highlighter loads immediately on module import
- Instant fallback - Shows styled code immediately while highlighter initializes in background
- Resource reuse - Existing highlighters can load additional themes/languages without recreation
- Zero blocking - Users see code immediately, animation upgrades happen seamlessly

$3

- For presentations, use autoPlay to create smooth, automated demonstrations
- For tutorials, use onChange callback to sync UI with code changes
- For better performance with many snippets, keep code strings reasonably sized
- Use showControls={false} and build custom navigation for advanced UX

TypeScript Types

`typescript
import type { CodeItem, CodeInput } from 'react-animated-code';

// CodeItem: Object with code and optional filename
type CodeItem = {
code: string;
filename?: string;
};

// CodeInput: Either a string or a CodeItem object
type CodeInput = string | CodeItem;

// Example usage
const steps: CodeInput[] = [
"const x = 1;",
{ code: "const x = 2;", filename: "demo.ts" },
];
``

Browser Support

Works in all modern browsers that support ES2020.

License

MIT

Credits

Built with:
- Shiki Magic Move by Anthony Fu
- Shiki - Beautiful syntax highlighter

Contributing

Contributions are welcome! Please read our Contributing Guide for details.

Issues

Found a bug? Have a feature request? Open an issue.