Jonathon's AI Wiki

HyperFrames Catalog — Code Blocks & Snippet Themes

6 min read

Source: HeyGen HyperFrames catalog — code blocks (https://hyperframes.heygen.com/catalog), pulled 2026-06-27; individual block pages archived under ai-research/hyperframes-block-code-*.md.

HeyGen HyperFrames ships a code block family for developer-focused video. It splits in two: WebGL/GSAP code-animation blocks that reveal or transform a snippet (typing, diff, morph, 3D extrude, particle assemble, shader dissolve, scroll-to-line, highlight sweep, snippet flight), and a large set of code-snippet-* themes that render a snippet or shell session typing out inside a faithfully-styled editor or terminal window in a chosen color scheme. Every block is a self-contained 1920×1080 composition installed the same way — npx hyperframes add <slug> — and previewable (poster + clip) at hyperframes.heygen.com/catalog. This page catalogs the 9 animation blocks and 24 syntax-highlight themes (33 blocks total).

Key Takeaways

  • Add any block with npx hyperframes add <slug> (e.g. npx hyperframes add code-diff); each lands as a hyperframes:composition HTML file in compositions/.
  • Install whole families at once: npx hyperframes add code pulls every VS Code code-snippet-* theme; npx hyperframes add apple-terminal pulls all 12 Apple Terminal profiles.
  • Mount a block in a host composition via a <div> carrying the shared data-attributes: data-composition-id, data-composition-src, data-start, data-duration, data-track-index, data-width, data-height. Durations vary per block (animation blocks 5–8s; VS Code themes 11s; Apple Terminal themes 12s).
  • VS Code themes recreate the full workbench (activity bar, sidebar, explorer tree, tabs, breadcrumbs, terminal panel, status bar) with colors sourced from the official microsoft/vscode built-in theme JSON, per-character typing with cursor tracking + active-line highlight, an end-of-sequence 3D perspective tilt, and a mock-test terminal panel; they ship a background.jpeg asset.
  • Apple Terminal themes recreate macOS Terminal.app window chrome (traffic-light buttons + centered title bar), per-character GSAP typing, sequential output reveal, and a cursor that blinks three times then holds; they are self-contained (GSAP CDN only, no external assets).
  • When to use: reach for the code-animation blocks to dramatize an edit or reveal a snippet with motion; reach for the code-snippet-* themes to show static code or a shell session typing out in a recognizable IDE/terminal skin. ^[inferred]

Code Animation Blocks

WebGL/GSAP blocks that animate a snippet. Each mounts with the shared data-composition-* attributes; set data-duration to the value listed.

Code 3D Extrude (code-3d-extrude)

  • Renders: 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.
  • Tags: code code-animation 3d webgl developer · Duration: 8s.
  • Add / mount: npx hyperframes add code-3d-extrude → <div data-composition-id="code-3d-extrude" data-composition-src="compositions/code-3d-extrude.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>

Code Diff (code-diff)

  • Renders: an edit shown as a colored diff — removed lines collapse in red, added lines expand in green.
  • Tags: code code-animation diff developer · Duration: 6s.
  • Add / mount: npx hyperframes add code-diff → mount with data-composition-id="code-diff", data-duration="6".

Code Highlight Sweep (code-highlight)

  • Renders: a highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.
  • Tags: code code-animation highlight developer · Duration: 5s.
  • Add / mount: npx hyperframes add code-highlight → mount with data-composition-id="code-highlight", data-duration="5".

Code Morph (code-morph)

  • Renders: 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.
  • Tags: code code-animation morph refactor developer · Duration: 7s.
  • Add / mount: npx hyperframes add code-morph → mount with data-composition-id="code-morph", data-duration="7". Good for showing a refactor.

Code Particle Assemble (code-particle-assemble)

  • Renders: 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.
  • Tags: code code-animation particles gpu webgl developer · Duration: 8s.
  • Add / mount: npx hyperframes add code-particle-assemble → mount with data-composition-id="code-particle-assemble", data-duration="8".

Code Scroll To Line (code-scroll)

  • Renders: the camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.
  • Tags: code code-animation scroll developer · Duration: 6s.
  • Add / mount: npx hyperframes add code-scroll → mount with data-composition-id="code-scroll", data-duration="6".

Code Shader Dissolve (code-shader-dissolve)

  • Renders: 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.
  • Tags: code code-animation shader webgl developer · Duration: 7s.
  • Add / mount: npx hyperframes add code-shader-dissolve → mount with data-composition-id="code-shader-dissolve", data-duration="7".

Code Typing (code-typing)

  • Renders: token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.
  • Tags: code code-animation typing developer · Duration: 5s.
  • Add / mount: npx hyperframes add code-typing → mount with data-composition-id="code-typing", data-duration="5".

Code Snippet Flight (code-snippet-flight)

  • Renders: discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.
  • Tags: code code-animation flight developer · Duration: 6s.
  • Note: despite the code-snippet- prefix, this is an animation block (no color theme), and is not pulled by the npx hyperframes add code theme bundle. ^[inferred]
  • Add / mount: npx hyperframes add code-snippet-flight → mount with data-composition-id="code-snippet-flight", data-duration="6".

Code Snippet Themes (code-snippet-*)

All 24 themes are the same per-character-typing snippet block re-skinned in a different color scheme. Two families:

  • Apple Terminal (12) — macOS Terminal.app window chrome (traffic lights + title bar); 12s; self-contained (GSAP CDN only). Grab all at once: npx hyperframes add apple-terminal.
  • VS Code (12) — full VS Code workbench, colors from the official microsoft/vscode theme JSON, end-of-sequence 3D tilt, ships background.jpeg; 11s. Grab all at once: npx hyperframes add code.
Themeadd slugPalette / style
Apple Terminal Basiccode-snippet-apple-terminal-basicWhite bg, black monospace text, solid black cursor
Apple Terminal Clear Darkcode-snippet-apple-terminal-clear-darkTranslucent black bg, white text, grey cursor
Apple Terminal Clear Lightcode-snippet-apple-terminal-clear-lightTranslucent white bg, black text, grey cursor
Apple Terminal Grasscode-snippet-apple-terminal-grassBlack bg, pure green #00C100 text + cursor; green-accented title bar
Apple Terminal Homebrewcode-snippet-apple-terminal-homebrewBlack bg, #00CF00 green text, #48F800 lime cursor (classic)
Apple Terminal Man Pagecode-snippet-apple-terminal-man-pagePale yellow #FEF49C bg, black text; mock man-page output
Apple Terminal Novelcode-snippet-apple-terminal-novelWarm parchment #DFC18A bg, #3E2900 dark-brown text
Apple Terminal Oceancode-snippet-apple-terminal-ocean#224FBE blue bg, white text
Apple Terminal Procode-snippet-apple-terminal-proBlack bg, #BBBBBB grey text, #88FF67 lime cursor (hacker look)
Apple Terminal Red Sandscode-snippet-apple-terminal-red-sands#7B140E crimson bg, #FFE1B9 sandy text
Apple Terminal Silver Aerogelcode-snippet-apple-terminal-silver-aerogel#3D3D3D dark-grey bg, white text (neutral)
Apple Terminal Solid Colorscode-snippet-apple-terminal-solid-colors#4C0099 deep-purple bg, white text
Dark 2026code-snippet-dark-2026Newest VS Code dark theme; refined token scopes, updated palette
Dark Moderncode-snippet-dark-modernDefault dark theme; clean, contemporary, comfortable contrast
Dark+code-snippet-dark-plusClassic dark theme; enhanced highlighting for popular languages
High Contrastcode-snippet-high-contrastMaximum-contrast dark theme (accessibility)
High Contrast Lightcode-snippet-high-contrast-lightMaximum-contrast light theme (accessibility)
Light 2026code-snippet-light-2026Newest VS Code light theme; refined token scopes, updated palette
Light Moderncode-snippet-light-modernDefault light theme; fresh modern take on classic VS light
Light+code-snippet-light-plusClassic light theme; enhanced highlighting for popular languages
Monokaicode-snippet-monokaiIconic warm-toned dark theme
Solarized Lightcode-snippet-solarized-lightEthan Schoonover’s precision-engineered light scheme
Visual Studio Darkcode-snippet-visual-studio-darkTraditional Visual Studio dark scheme
Visual Studio Lightcode-snippet-visual-studio-lightTraditional Visual Studio light scheme

Try It

  1. Drop a diff reveal: npx hyperframes add code-diff, then mount <div data-composition-id="code-diff" data-composition-src="compositions/code-diff.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div> on track 1 of a host composition.
  2. Pick a snippet skin: npx hyperframes add code-snippet-monokai (or npx hyperframes add code for all 12 VS Code themes), then prompt HyperFrames to fill the editor with your own code.
  3. Show a shell demo: npx hyperframes add apple-terminal installs all 12 Terminal.app profiles; switch looks by changing only the data-composition-id (e.g. code-snippet-apple-terminal-homebrew → code-snippet-apple-terminal-ocean).
  4. Browse first: preview every block’s poster + clip at hyperframes.heygen.com/catalog before choosing a slug.

Graph View

Backlinks