Animated Code Block types out source code character by character inside a styled React panel, with Prism syntax highlighting and several built-in themes. Line highlights, custom fonts, and playback speed are all props, so the same component can narrate a tutorial walkthrough, animate an API example on a landing page, or bring a README snippet to life in a hero section. Built with React and Tailwind CSS.
Installation
Examples
Parchment
Terminal
Minimal
Usage
import { AnimatedCodeBlock } from "@/components/ui/animated-code-block";<AnimatedCodeBlock
code={`console.log("Hello world!");`}
theme="dark"
typingSpeed={50}
showLineNumbers={true}
autoPlay={true}
/>Props
Animated Code Block
| Prop | Type | Default | Description |
|---|---|---|---|
code | string | Required | The code to display and animate |
theme | "dark" | "terminal" | "minimal" | "parchment" | "dark" | The visual theme |
typingSpeed | number | 50 | The speed of the typing animation in milliseconds |
showLineNumbers | boolean | true | Whether to show line numbers |
highlightLines | number[] | [] | Array of line numbers to highlight |
title | string | "Code Example" | Title to display in the header |
autoPlay | boolean | false | Whether to start the animation automatically |
loop | boolean | false | Whether to loop the animation |
showControls | boolean | true | Whether to show play/pause and copy controls |
onCopy | () => void | undefined | Callback function when code is copied |
className | string | "" | Additional CSS classes to apply |
language | string | "javascript" | Language for syntax highlighting (e.g., javascript, python, etc.) |