Code

Animated code and terminal components

Typing effects, diff reveals, syntax-highlighted scroll, 3D extrusion, and a full set of terminal themes — for developer explainers, changelogs, and launch videos.

Showing code on screen is its own problem: it has to be readable at video sizes, highlighted correctly, and revealed at a pace a viewer can follow. These components handle the highlighting and the reveal timing so the code stays legible while it animates.

The terminal set ships in the familiar Apple Terminal and VS Code themes, which matters more than it sounds — a developer audience reads an unfamiliar colour scheme as a stock asset.

38 verified components. Browse every category.

block

Code 3D Extrude

hf

Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.

block

Code Diff

hf

An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.

block

Code Highlight Sweep

hf

A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.

block

Code Morph

hf

One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.

block

Code Particle Assemble

hf

Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.

block

Code Scroll To Line

hf

The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.

block

Code Shader Dissolve

hf

The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.

block

Code Snippet - Apple Terminal Basic

hf

Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session.

block

Code Snippet - Apple Terminal Clear Dark

hf

Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session.

block

Code Snippet - Apple Terminal Clear Light

hf

Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session.

block

Code Snippet - Apple Terminal Grass

hf

Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session.

block

Code Snippet - Apple Terminal Homebrew

hf

Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session.

block

Code Snippet - Apple Terminal Man Page

hf

Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session.

block

Code Snippet - Apple Terminal Novel

hf

Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session.

block

Code Snippet - Apple Terminal Ocean

hf

Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session.

block

Code Snippet - Apple Terminal Pro

hf

Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.

block

Code Snippet - Apple Terminal Red Sands

hf

Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session.

block

Code Snippet - Apple Terminal Silver Aerogel

hf

Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session.

block

Code Snippet - Apple Terminal Solid Colors

hf

Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session.

block

Code Snippet - Dark 2026

hf

VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet - Dark Modern

hf

VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet - Dark+

hf

VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet - High Contrast

hf

VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet - High Contrast Light

hf

VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet - Light 2026

hf

VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet - Light Modern

hf

VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet - Light+

hf

VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet - Monokai

hf

VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet - Solarized Light

hf

VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet - Visual Studio Dark

hf

VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet - Visual Studio Light

hf

VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.

block

Code Snippet Flight

hf

Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.

component

Code Terminal Run

hf

A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.

block

Code Typing

hf

Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.

block

Glass Code Walk

rcn

A camera that scans a glass code block top to bottom as it types, then pulls back to a centered hold.

block

Terminal Cursor Zoom

rcn

Camera locked to the typing cursor, dollying across a terminal as a command types at high zoom.

component

Terminal Simulator

rcn

A terminal window types commands and streams log output.

component

VS Code Theme Visualizer

hf

Faithful VS Code workbench recreation with per-character typing animation across 12 built-in themes. Activity bar, sidebar, tabs, editor, terminal, and status bar — all driven by official theme JSON files.