roboco/motion/skills/hyperframes-catalog-index.md

HyperFrames catalog index

RoboCo-authored reference index of the public HyperFrames catalog (https://hyperframes.heygen.com, machine index llms.txt, fetched 2026-07-17) — 109 blocks + 24 components, 133 entries total, grouped below by kind. This is design vocabulary to study and EMULATE with the RoboCo kit (motion/kit/), not a list of installable dependencies: none of this is vendored code, npx hyperframes add is not part of this repo's toolchain, and the offline-render constraint (no CDN, no npm runtime deps — see motion/kit/README.md) still applies to every composition regardless of what inspired it. Read this file on demand when planning a beat that needs more visual range than the current pk-* pieces cover; it is not injected into any agent prompt.

How to use this index

• Skim the category you need, find a slug whose description matches the beat you're planning, then ask: does an existing pk-* piece already cover this look, or does it need a new one?
• Maps onto existing kit pieces. Most caption styles, lower-thirds, and social overlays describe a LOOK a pk-card/pk-pill/pk-toast/pk-outro variant could already achieve with a new modifier class or animation curve. Before writing new CSS, check motion/kit/kit.css and the "Visual design bar" section in motion/README.md for the closest existing pattern to extend rather than a one-off composition-local hack.
• Maps onto the choreography engines. Camera pushes/pulls (pk-camera + data-shots) and cursor travel (pk-cursor + data-waypoints) already cover most "reads as filmed" and "cursor behaves like a hand" needs the shader/transition entries below gesture at; a CSS crossfade or hard cut between .clip layers is usually enough for a scene change. Reach for a shader transition only when a composition genuinely needs a GPU effect no CSS transform can fake — and note the shader packages themselves are not vendored here, only the idea of what they look like.
• Needs a new kit piece. Code blocks, charts/flowcharts, maps, VFX, and liquid-glass/3D-device blocks have no RoboCo kit equivalent today. If a brief genuinely needs one — a code-diff beat for a dev-tooling release clip, say — that's a normal dev task: build a new pk-* piece under motion/kit/kit.css following the design bar in motion/README.md, not a composition-local hack. Don't reach for one of these categories to decorate a beat a pk-card/pk-chip variant would serve just as well — see "Anti-generic tells" in motion/README.md's Visual design bar section.
• Full craft rules behind any of this (palette, density, motion, frame composition, rhythm planning) live in the vendored references at references/ — house-style.md, video-composition.md, beat-direction.md, motion-principles.md — read those before choosing colors or timing for anything below.

Catalog

Code blocks (33) — VS Code / Apple Terminal theme skins + animated code effects

• code-3d-extrude (Code 3D Extrude) — 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.
• code-diff (Code Diff) — An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.
• code-highlight (Code Highlight Sweep) — A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. line is 0-based: line: 1 targets the second displayed line (unlike code-scroll, whose target is 1-based).
• code-morph (Code Morph) — 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.
• code-particle-assemble (Code Particle Assemble) — 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.
• code-scroll (Code Scroll To Line) — The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.
• code-shader-dissolve (Code Shader Dissolve) — 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.
• code-snippet-flight (Code Snippet Flight) — Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.
• code-typing (Code Typing) — Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.
• code-snippet-dark-2026 (Dark 2026) — The newest VS Code dark theme with refined token scopes and updated palette.
• code-snippet-dark-modern (Dark Modern) — The default dark theme — clean and contemporary with comfortable contrast.
• code-snippet-dark-plus (Dark+) — Classic dark theme with enhanced syntax highlighting for popular languages.
• code-snippet-high-contrast (High Contrast) — Maximum contrast dark theme for accessibility.
• code-snippet-high-contrast-light (High Contrast Light) — Maximum contrast light theme for accessibility.
• code-snippet-light-2026 (Light 2026) — The newest VS Code light theme with refined token scopes and updated palette.
• code-snippet-light-modern (Light Modern) — The default light theme — a fresh, modern take on the classic VS light experience.
• code-snippet-light-plus (Light+) — Classic light theme with enhanced syntax highlighting for popular languages.
• code-snippet-monokai (Monokai) — The iconic warm-toned dark theme beloved by developers worldwide.
• code-snippet-solarized-light (Solarized Light) — Ethan Schoonover's precision-engineered light color scheme.
• code-snippet-visual-studio-dark (Visual Studio Dark) — The traditional Visual Studio dark color scheme.
• code-snippet-visual-studio-light (Visual Studio Light) — The traditional Visual Studio light color scheme.
• code-snippet-apple-terminal-basic (Apple Terminal Basic) — Apple Terminal Basic profile with white background and black text, per-character typing animation.
• code-snippet-apple-terminal-clear-dark (Apple Terminal Clear Dark) — Apple Terminal Clear Dark profile with semi-transparent dark background and white text, per-character typing animation.
• code-snippet-apple-terminal-clear-light (Apple Terminal Clear Light) — Apple Terminal Clear Light profile with semi-transparent white background and black text, per-character typing animation.
• code-snippet-apple-terminal-grass (Apple Terminal Grass) — Apple Terminal Grass profile with black background and bright green text, per-character typing animation.
• code-snippet-apple-terminal-homebrew (Apple Terminal Homebrew) — Apple Terminal Homebrew profile with black background, bright green text and lime cursor, per-character typing animation.
• code-snippet-apple-terminal-man-page (Apple Terminal Man Page) — Apple Terminal Man Page profile with pale yellow background and black text, per-character typing animation.
• code-snippet-apple-terminal-novel (Apple Terminal Novel) — Apple Terminal Novel profile with warm parchment background and dark brown text, per-character typing animation.
• code-snippet-apple-terminal-ocean (Apple Terminal Ocean) — Apple Terminal Ocean profile with deep blue background and white text, per-character typing animation.
• code-snippet-apple-terminal-pro (Apple Terminal Pro) — Apple Terminal Pro profile with black background, grey text and lime green cursor, per-character typing animation.
• code-snippet-apple-terminal-red-sands (Apple Terminal Red Sands) — Apple Terminal Red Sands profile with deep red background and sandy text, per-character typing animation.
• code-snippet-apple-terminal-silver-aerogel (Apple Terminal Silver Aerogel) — Apple Terminal Silver Aerogel profile with dark grey background and white text, per-character typing animation.
• code-snippet-apple-terminal-solid-colors (Apple Terminal Solid Colors) — Apple Terminal Solid Colors profile with deep purple background and white text, per-character typing animation.

Shader transitions (14) — WebGL GPU scene-to-scene effects

• chromatic-radial-split (Chromatic Radial Split) — Shader transition with chromatic aberration radial split
• cinematic-zoom (Cinematic Zoom) — Shader transition with dramatic zoom blur
• cross-warp-morph (Cross Warp Morph) — Shader transition with cross-warped morphing
• domain-warp-dissolve (Domain Warp Dissolve) — Shader transition with fractal noise domain warping
• flash-through-white (Flash Through White) — Shader transition with white flash crossfade
• glitch (Glitch) — Shader transition with digital glitch artifacts
• gravitational-lens (Gravitational Lens) — Shader transition with gravitational lensing distortion
• light-leak (Light Leak) — Shader transition with cinematic light leak overlay
• ridged-burn (Ridged Burn) — Shader transition with ridged turbulence burn effect
• ripple-waves (Ripple Waves) — Shader transition with concentric ripple wave distortion
• sdf-iris (SDF Iris) — Shader transition with signed distance field iris reveal
• swirl-vortex (Swirl Vortex) — Shader transition with swirling vortex distortion
• thermal-distortion (Thermal Distortion) — Shader transition with heat haze thermal distortion
• whip-pan (Whip Pan) — Shader transition simulating a fast camera whip pan

Transition showcase groups (13) — CSS transition families (non-shader)

• transitions-3d (3D Transitions) — Showcase of 3D perspective flip and rotate transitions
• transitions-blur (Blur Transitions) — Showcase of blur-based transitions between scenes
• transitions-cover (Cover Transitions) — Showcase of cover/uncover slide transitions
• transitions-destruction (Destruction Transitions) — Showcase of destructive break-apart transitions
• transitions-dissolve (Dissolve Transitions) — Showcase of dissolve and fade transitions
• transitions-distortion (Distortion Transitions) — Showcase of warp and distortion transitions
• transitions-grid (Grid Transitions) — Showcase of grid-based tile transitions
• transitions-light (Light Transitions) — Showcase of light-based glow and flash transitions
• transitions-mechanical (Mechanical Transitions) — Showcase of mechanical shutter and iris transitions
• transitions-other (Other Transitions) — Showcase of miscellaneous creative transitions
• transitions-push (Push Transitions) — Showcase of push and slide transitions
• transitions-radial (Radial Transitions) — Showcase of radial wipe and reveal transitions
• transitions-scale (Scale Transitions) — Showcase of scale and zoom transitions

Charts / flowchart (3)

• data-chart (Data Chart) — Animated bar + line chart with staggered reveal, NYT-style typography, and value labels
• flowchart (Flowchart) — Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
• flowchart-vertical (Flowchart Vertical) — Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction

Maps (6) — data-driven D3 map visualizations

• spain-map (Spain Map) — Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection
• us-map (US Map) — Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP
• us-map-bubble (US Bubble Map) — Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map
• us-map-flow (US Flow Map) — Animated connection arcs between US cities over a base map — composable origin-destination flow visualization
• us-map-hex (US Hex Grid Map) — Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label
• world-map (World Map) — Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection

Liquid-glass / 3D-device blocks (8)

• ios26-liquid-glass (iOS 26 Liquid Glass Home Screen) — 3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.
• macos-tahoe-liquid-glass (macOS Tahoe Liquid Glass Desktop) — 3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.
• liquid-glass-context-menu (Liquid Glass Context Menu) — Frosted glass context menu panel drifting over an aurora shader background
• liquid-glass-media-controls (Liquid Glass Media Controls) — Frosted glass media control panels spreading over an aurora shader background
• liquid-glass-notification (Liquid Glass Notification) — Frosted glass notification cards floating over an aurora shader background
• liquid-glass-widgets (Liquid Glass Widgets) — Frosted glass stat cards, showcase panel and pill chips over an aurora shader background
• vfx-liquid-glass (Liquid Glass) — VFX composition block
• vfx-iphone-device (iPhone & MacBook 3D Showcase) — Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.

Lower-thirds (12)

• lower-third-bild (Lower Third — BILD Style) — News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.
• lt-accent-underline (Lower Third — Accent Underline) — Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility
• lt-bold-block (Lower Third — Bold Block) — High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops
• lt-clean-bar (Lower Third — Clean Bar) — Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance
• lt-color-block (Lower Third — Color Block) — High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role
• lt-dark-card (Lower Third — Dark Card) — Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance
• lt-kicker-name (Lower Third — Kicker Name) — Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage
• lt-mask-reveal (Lower Third — Mask Reveal) — Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage
• lt-side-rule (Lower Third — Side Rule) — Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage
• lt-soft-pill (Lower Third — Soft Pill) — Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance
• lt-stack-bars (Lower Third — Stack Bars) — Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right
• yt-lower-third (YouTube Lower Third) — Animated YouTube subscribe lower third with avatar and channel info

Social / device overlays (8)

• instagram-follow (Instagram Follow) — Animated Instagram follow overlay with profile card and follow button
• tiktok-follow (TikTok Follow) — Animated TikTok follow overlay with profile card and follow button
• x-post (X Post Card) — Animated X/Twitter post card overlay with engagement metrics
• reddit-post (Reddit Post Card) — Animated Reddit post card overlay with upvotes and comments
• spotify-card (Spotify Now Playing) — Animated Spotify now-playing card with album art and progress bar
• macos-notification (macOS Notification) — Animated macOS-style notification banner with app icon and message
• news-ticker (News Ticker) — Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.
• ui-3d-reveal (3D UI Reveal) — Perspective 3D reveal animation for UI elements

VFX (5)

• vfx-liquid-background (Liquid Background) — Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.
• vfx-magnetic (Magnetic) — VFX composition block
• vfx-portal (Portal) — VFX composition block
• vfx-shatter (Shatter) — VFX composition block
• vfx-text-cursor (VFX Text Cursor) — Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.

Full demo compositions (7) — multi-beat narrative pieces, often with sound

• app-showcase (App Showcase) — Fitness app product showcase with three floating smartphone screens
• apple-money-count (Apple Money Count) — Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.
• blue-sweater-intro-video (Blue Sweater Intro Video) — Warm AI creator intro sequence that resolves into an X follow card for @blue_sweater.
• logo-outro (Logo Outro) — Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill
• north-korea-locked-down (North Korea Locked Down) — Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.
• nyc-paris-flight (NYC Paris Flight) — Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.
• vpn-youtube-spot (VPN YouTube Spot) — Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.

Caption styles (16, components)

• caption-blend-difference (Blend Difference) — Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background
• caption-clip-wipe (Clip Wipe) — Left-to-right clip-path wipe reveal per word
• caption-editorial-emphasis (Editorial Emphasis) — Dual-font system with dramatic size contrast for emphasis words
• caption-emoji-pop (Emoji Pop) — Emoji integration with stroked text and horizontal squeeze entrance
• caption-glitch-rgb (Glitch RGB) — RGB chromatic aberration with CRT scanline overlay
• caption-gradient-fill (Gradient Fill) — Gradient-clipped text with elastic bounce entrance
• caption-highlight (Highlight) — Red background sweep behind each active word, TikTok-style
• caption-kinetic-slam (Kinetic Slam) — Full-screen single-word display with alternating entrance directions
• caption-matrix-decode (Matrix Decode) — Character scramble animation before text reveal
• caption-neon-accent (Neon Accent) — Multi-color neon glow accents with wiggle drift animation
• caption-neon-glow (Neon Glow) — Cyan and magenta neon glow with keyword accent colors
• caption-parallax-layers (Parallax Layers) — Behind-subject 3D text layering with vertical stretch effect
• caption-particle-burst (Particle Burst) — Keyword words trigger colored particle explosions
• caption-pill-karaoke (Pill Karaoke) — Pill-shaped container with per-word karaoke color highlight
• caption-texture (Texture) — Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable
• caption-weight-shift (Weight Shift) — Elegant font-weight transition between caption lines

Text/overlay effect components (8)

• grain-overlay (Grain Overlay) — Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition
• grid-pixelate-wipe (Grid Pixelate Wipe) — Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes
• morph-text (Morph Text) — Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect
• parallax-unzoom (Parallax Unzoom) — Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)
• parallax-zoom (Parallax Zoom) — Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition
• shimmer-sweep (Shimmer Sweep) — Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals
• texture-mask-text (Texture Mask Text) — Large display text filled with a swappable material mask (brick, rock, ground, wood, metal, lava); the general-purpose sibling of the caption-only Texture component.
• vignette (Vignette) — Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center

Coverage note

33 code + 14 shader transitions + 13 transition showcase groups + 3 charts/flowchart + 6 maps + 8 liquid-glass/3D-device + 12 lower-thirds + 8 social/device overlays + 5 VFX + 7 full demo compositions = 109 blocks. 16 caption styles + 8 text/overlay effect components = 24 components. 109 + 24 = 133, matching the verified catalog count. Category boundaries beyond the code/shader/transition/lower-third counts (which the upstream naming makes unambiguous) are this file's own judgment call, not an upstream taxonomy — re-derive from https://hyperframes.heygen.com/llms.txt if the catalog grows and this file goes stale.