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.

🚀 Live Demo

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

npm install react-animated-code

Quick Start

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 <AnimatedCode code={codeSteps} />;
}

Props

Core Props

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

Navigation Props

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

Callbacks

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

Auto-Play Props

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

Basic Multi-Code Navigation

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

<AnimatedCode code={codeSteps} />

With Filenames

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" },
];

<AnimatedCode code={steps} />

Auto-Play for Presentations

<AnimatedCode
  code={steps}
  autoPlay
  autoPlayInterval={4000}
  duration={600}
/>

Custom Theme and Language

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

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

External Controls (Hide Built-in Navigation)

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

  return (
    <>
      <AnimatedCode
        code={steps}
        showControls={false}
        initialIndex={currentIndex}
        onChange={setCurrentIndex}
      />
      <div className="my-custom-controls">
        <button onClick={() => setCurrentIndex(prev => Math.max(0, prev - 1))}>
          Previous
        </button>
        <span>{currentIndex + 1} / {steps.length}</span>
        <button onClick={() => setCurrentIndex(prev => Math.min(steps.length - 1, prev + 1))}>
          Next
        </button>
      </div>
    </>
  );
}

Tutorial-Style with Callbacks

<AnimatedCode
  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')}
/>

Without Line Numbers

<AnimatedCode
  code={steps}
  lineNumbers={false}
/>

Custom Styling

<AnimatedCode
  code={steps}
  className="my-custom-code-block"
/>

Mixed String and Object Arrays

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

<AnimatedCode code={mixedSteps} />

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.

Animation Behavior

• 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

Highlighter Optimization

• 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

Best Practices

• 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

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.