CodeBlock

The CodeBlock component provides beautiful, animated code snippets with syntax highlighting, line-by-line reveal, highlighting, and focus features.

1function hello() {
2  console.log("Hello World");
3  return true;
4}

0:00 / 0:04

120 frames (4.0s at 30fps)

textcodeanimation

Features

• Syntax Highlighting: Supports multiple languages using Prism.
• Line Reveal: Staggered animation for revealing code line by line.
• Highlighting: Highlight specific lines or ranges with custom colors and blur.
• Focus Mode: Dim non-focused lines to draw attention to specific parts of the code.
• Responsive: Automatically adjusts font size based on viewport width.