# HyperFrames

## Docs

- [App Showcase](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/app-showcase.md): Fitness app product showcase with three floating smartphone screens
- [Apple Money Count](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/apple-money-count.md): Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.
- [Beat Freeze Cut](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/beat-freeze-cut.md): A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.
- [Blue Sweater Intro Video](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/blue-sweater-intro-video.md): Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.
- [Camcorder HUD](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/camcorder-hud.md): Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments
- [Chromatic Radial Split](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/chromatic-radial-split.md): Shader transition with chromatic aberration radial split
- [Cinematic Zoom](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/cinematic-zoom.md): Shader transition with dramatic zoom blur
- [Code 3D Extrude](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-3d-extrude.md): 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](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-diff.md): An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.
- [Code Highlight Sweep](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-highlight.md): 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](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-morph.md): 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](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-particle-assemble.md): 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 To Line](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-scroll.md): The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.
- [Code Shader Dissolve](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-shader-dissolve.md): 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 - Apple Terminal Basic](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-basic.md): Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session.
- [Code Snippet - Apple Terminal Clear Dark](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-clear-dark.md): Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session.
- [Code Snippet - Apple Terminal Clear Light](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-clear-light.md): Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session.
- [Code Snippet - Apple Terminal Grass](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-grass.md): Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session.
- [Code Snippet - Apple Terminal Homebrew](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-homebrew.md): Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session.
- [Code Snippet - Apple Terminal Man Page](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-man-page.md): Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session.
- [Code Snippet - Apple Terminal Novel](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-novel.md): Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session.
- [Code Snippet - Apple Terminal Ocean](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-ocean.md): Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session.
- [Code Snippet - Apple Terminal Pro](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-pro.md): Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.
- [Code Snippet - Apple Terminal Red Sands](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-red-sands.md): Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session.
- [Code Snippet - Apple Terminal Silver Aerogel](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.md): Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session.
- [Code Snippet - Apple Terminal Solid Colors](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-apple-terminal-solid-colors.md): Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session.
- [Code Snippet - Dark 2026](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-dark-2026.md): 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.
- [Code Snippet - Dark Modern](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-dark-modern.md): 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.
- [Code Snippet - Dark+](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-dark-plus.md): VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
- [Code Snippet Flight](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-flight.md): Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.
- [Code Snippet - High Contrast](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-high-contrast.md): 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.
- [Code Snippet - High Contrast Light](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-high-contrast-light.md): 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.
- [Code Snippet - Light 2026](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-light-2026.md): 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.
- [Code Snippet - Light Modern](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-light-modern.md): 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.
- [Code Snippet - Light+](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-light-plus.md): VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
- [Code Snippet - Monokai](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-monokai.md): VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
- [Code Snippet - Solarized Light](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-solarized-light.md): 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.
- [Code Snippet - Visual Studio Dark](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-visual-studio-dark.md): 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.
- [Code Snippet - Visual Studio Light](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-snippet-visual-studio-light.md): 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.
- [Code Typing](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/code-typing.md): Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.
- [Cross Warp Morph](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/cross-warp-morph.md): Shader transition with cross-warped morphing
- [Data Chart](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/data-chart.md): Animated bar + line chart with staggered reveal, NYT-style typography, and value labels
- [Domain Warp Dissolve](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/domain-warp-dissolve.md): Shader transition with fractal noise domain warping
- [Editorial Flash Overlay](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/editorial-flash-overlay.md): Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal
- [Flash Through White](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/flash-through-white.md): Shader transition with white flash crossfade
- [Flowchart](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/flowchart.md): Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
- [Flowchart Vertical](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/flowchart-vertical.md): Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
- [Freeze-Frame Dressing](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/freeze-frame-dressing.md): Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject
- [Glitch](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/glitch.md): Shader transition with digital glitch artifacts
- [Gravitational Lens](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/gravitational-lens.md): Shader transition with gravitational lensing distortion
- [Sketched Frame](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/hw-frame.md): Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)
- [Text Along a Path](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/hw-path-text.md): Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input
- [Hand-Drawn Flowchart](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/hw-pipeline.md): Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list
- [Scribble Transition](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/hw-scribble-transition.md): Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears
- [Speech Bubble](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/hw-text-cloud.md): Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils
- [Handwritten Title](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/hw-title.md): Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils
- [Instagram Follow](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/instagram-follow.md): Animated Instagram follow overlay with profile card and follow button
- [iOS 26 Liquid Glass Home Screen](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/ios26-liquid-glass.md): 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.
- [Light Leak](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/light-leak.md): Shader transition with cinematic light leak overlay
- [Liquid Glass Context Menu](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/liquid-glass-context-menu.md): Frosted glass context menu panel drifting over an aurora shader background
- [Liquid Glass Media Controls](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/liquid-glass-media-controls.md): Frosted glass media control panels spreading over an aurora shader background
- [Liquid Glass Notification](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/liquid-glass-notification.md): Frosted glass notification cards floating over an aurora shader background
- [Liquid Glass Widgets](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/liquid-glass-widgets.md): Frosted glass stat cards, showcase panel and pill chips over an aurora shader background
- [Logo Outro](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/logo-outro.md): Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill
- [Lower Third — BILD Style](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/lower-third-bild.md): News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.
- [Lower Third — Accent Underline](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/lt-accent-underline.md): Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility
- [Lower Third — Bold Block](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/lt-bold-block.md): High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops
- [Lower Third — Clean Bar](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/lt-clean-bar.md): Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance
- [Lower Third — Color Block](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/lt-color-block.md): High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role
- [Lower Third — Dark Card](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/lt-dark-card.md): Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance
- [Lower Third — Kicker Name](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/lt-kicker-name.md): Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage
- [Lower Third — Mask Reveal](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/lt-mask-reveal.md): Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage
- [Lower Third — Side Rule](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/lt-side-rule.md): Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage
- [Lower Third — Soft Pill](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/lt-soft-pill.md): Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance
- [Lower Third — Stack Bars](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/lt-stack-bars.md): Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right
- [macOS Notification](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/macos-notification.md): Animated macOS-style notification banner with app icon and message
- [macOS Tahoe Liquid Glass Desktop](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/macos-tahoe-liquid-glass.md): 3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.
- [Minimal Gradient Background](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/mk-background.md): Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode
- [Word-Sweep Highlight](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/mk-callout-highlight.md): A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover
- [Text Clone Wall Transition](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/mk-clone-wall-transition.md): Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered
- [Minimal Line Graph](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/mk-line-graph.md): One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend
- [Rounded Media Grid](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/mk-placeholder-grid.md): N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle
- [Count-Up Stat Card](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/mk-progress-stat.md): Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes
- [Specs Checklist](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/mk-specs-list.md): Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes
- [News Ticker](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/news-ticker.md): Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.
- [North Korea Locked Down](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/north-korea-locked-down.md): Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.
- [NYC Paris Flight](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/nyc-paris-flight.md): Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.
- [Organic Light Leak Overlay](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/organic-light-leak-overlay.md): Finite CSS light-leak overlay for memory beats and motivated transitions
- [Reddit Post Card](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/reddit-post.md): Animated Reddit post card overlay with upvotes and comments
- [Ridged Burn](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/ridged-burn.md): Shader transition with ridged turbulence burn effect
- [Ripple Waves](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/ripple-waves.md): Shader transition with concentric ripple wave distortion
- [SDF Iris](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/sdf-iris.md): Shader transition with signed distance field iris reveal
- [Spain Map](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/spain-map.md): Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection
- [Spotify Now Playing](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/spotify-card.md): Animated Spotify now-playing card with album art and progress bar
- [Swirl Vortex](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/swirl-vortex.md): Shader transition with swirling vortex distortion
- [Thermal Distortion](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/thermal-distortion.md): Shader transition with heat haze thermal distortion
- [TikTok Follow](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/tiktok-follow.md): Animated TikTok follow overlay with profile card and follow button
- [3D Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-3d.md): Showcase of 3D perspective flip and rotate transitions
- [Blur Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-blur.md): Showcase of blur-based transitions between scenes
- [Cover Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-cover.md): Showcase of cover/uncover slide transitions
- [Destruction Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-destruction.md): Showcase of destructive break-apart transitions
- [Dissolve Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-dissolve.md): Showcase of dissolve and fade transitions
- [Distortion Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-distortion.md): Showcase of warp and distortion transitions
- [Grid Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-grid.md): Showcase of grid-based tile transitions
- [Light Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-light.md): Showcase of light-based glow and flash transitions
- [Mechanical Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-mechanical.md): Showcase of mechanical shutter and iris transitions
- [Other Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-other.md): Showcase of miscellaneous creative transitions
- [Push Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-push.md): Showcase of push and slide transitions
- [Radial Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-radial.md): Showcase of radial wipe and reveal transitions
- [Scale Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/transitions-scale.md): Showcase of scale and zoom transitions
- [3D UI Reveal](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/ui-3d-reveal.md): Perspective 3D reveal animation for UI elements
- [US Map](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/us-map.md): Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP
- [US Bubble Map](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/us-map-bubble.md): Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map
- [US Flow Map](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/us-map-flow.md): Animated connection arcs between US cities over a base map — composable origin-destination flow visualization
- [US Hex Grid Map](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/us-map-hex.md): Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label
- [iPhone & MacBook 3D Showcase](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/vfx-iphone-device.md): 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.
- [Liquid Background](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/vfx-liquid-background.md): Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.
- [Liquid Glass](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/vfx-liquid-glass.md): VFX composition block
- [Magnetic](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/vfx-magnetic.md): VFX composition block
- [Portal](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/vfx-portal.md): VFX composition block
- [Shatter](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/vfx-shatter.md): VFX composition block
- [VFX Text Cursor](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/vfx-text-cursor.md): 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.
- [VPN YouTube Spot](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/vpn-youtube-spot.md): Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.
- [Whip Pan](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/whip-pan.md): Shader transition simulating a fast camera whip pan
- [World Map](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/world-map.md): Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection
- [X Post Card](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/x-post.md): Animated X/Twitter post card overlay with engagement metrics
- [Comment Cards](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/yt-comment-card.md): Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips
- [Scanline Board Background](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/yt-lcd-background.md): Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title
- [Logo Intro Sequence](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/yt-logo-intro.md): Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion
- [YouTube Lower Third](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/yt-lower-third.md): Animated YouTube subscribe lower third with avatar and channel info
- [Chromatic Fringe Title](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/yt-prism-title.md): Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift
- [Vertical Media Filler](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/blocks/yt-vertical-fill.md): Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)
- [Blend Difference](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-blend-difference.md): Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background
- [Clip Wipe](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-clip-wipe.md): Left-to-right clip-path wipe reveal per word
- [Editorial Emphasis](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-editorial-emphasis.md): Dual-font system with dramatic size contrast for emphasis words
- [Emoji Pop](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-emoji-pop.md): Emoji integration with stroked text and horizontal squeeze entrance
- [Glitch RGB](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-glitch-rgb.md): RGB chromatic aberration with CRT scanline overlay
- [Gradient Fill](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-gradient-fill.md): Gradient-clipped text with elastic bounce entrance
- [Highlight](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-highlight.md): Red background sweep behind each active word, TikTok-style
- [Kinetic Slam](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-kinetic-slam.md): Full-screen single-word display with alternating entrance directions
- [Matrix Decode](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-matrix-decode.md): Character scramble animation before text reveal
- [Neon Accent](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-neon-accent.md): Multi-color neon glow accents with wiggle drift animation
- [Neon Glow](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-neon-glow.md): Cyan and magenta neon glow with keyword accent colors
- [Parallax Layers](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-parallax-layers.md): Behind-subject 3D text layering with vertical stretch effect
- [Particle Burst](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-particle-burst.md): Keyword words trigger colored particle explosions
- [Pill Karaoke](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-pill-karaoke.md): Pill-shaped container with per-word karaoke color highlight
- [Texture](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-texture.md): Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable
- [Weight Shift](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/caption-weight-shift.md): Elegant font-weight transition between caption lines
- [Grain Overlay](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/grain-overlay.md): Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition
- [Grid Pixelate Wipe](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/grid-pixelate-wipe.md): Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes
- [Hand-Drawn Arrow](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/hw-arrow.md): Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen
- [Hand-Drawn Boil](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/hw-boil.md): Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher and a wobbled-ellipse path generator
- [Hand-Drawn Box Label](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/hw-box-label.md): Wobbled rounded rectangle draws around a region with a handwritten label above or centered
- [Scribble Callout Circle](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/hw-callout-circle.md): Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label
- [Squiggle Marks](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/hw-underline.md): Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on
- [Background Emphasis Type](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/mk-emphasis-type.md): Oversized low-contrast background word drifting slowly behind the subject — typography as texture
- [Hairline Arc Gauge](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/mk-usage-arc.md): Thin circular gauge that draws on while its percentage counts up; one helper call drives both
- [Morph Text](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/morph-text.md): Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect
- [Motion Blur](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/motion-blur.md): Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed
- [Parallax Unzoom](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/parallax-unzoom.md): Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)
- [Parallax Zoom](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/parallax-zoom.md): Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition
- [Shimmer Sweep](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/shimmer-sweep.md): Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals
- [Texture Mask Text](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/texture-mask-text.md): CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps
- [Vignette](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/vignette.md): Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center
- [Camera Punch-In](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/yt-camera-move.md): Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay
- [Pointer Circle + Countdown](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/yt-circle-pointer.md): Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick
- [Feathered Spotlight](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/yt-feather-highlight.md): Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets
- [On-Screen Display Effect](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/components/yt-screen-warp.md): Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display
- [Catalog](https://hyperframes-canary-calibration-notes.mintlify.site/catalog/index.md): Browse reusable HyperFrames scenes, transitions, captions, overlays, effects, and components.
- [Changelog](https://hyperframes-canary-calibration-notes.mintlify.site/changelog.md): Release notes for HyperFrames.
- [Adopters](https://hyperframes-canary-calibration-notes.mintlify.site/community/adopters.md): Organizations using HyperFrames in production or actively evaluating it.
- [Understand compositions](https://hyperframes-canary-calibration-notes.mintlify.site/concepts/compositions.md): See how a HyperFrames project divides a video into timed, reusable parts.
- [Time elements with data attributes](https://hyperframes-canary-calibration-notes.mintlify.site/concepts/data-attributes.md): Place clips on the HyperFrames timeline without putting timing logic in JavaScript.
- [Deterministic Rendering](https://hyperframes-canary-calibration-notes.mintlify.site/concepts/determinism.md): Make every frame depend on the playhead, not the wall clock.
- [Frame adapters](https://hyperframes-canary-calibration-notes.mintlify.site/concepts/frame-adapters.md): Connect a seekable animation timeline to a custom HyperFrames host.
- [How a HyperFrames project works](https://hyperframes-canary-calibration-notes.mintlify.site/concepts/index.md): Understand the editable files, compositions, timing, and tools behind a HyperFrames video.
- [Reuse a design with variables](https://hyperframes-canary-calibration-notes.mintlify.site/concepts/variables.md): Change approved text, colors, media, and choices without rebuilding the composition.
- [Contribute to HyperFrames](https://hyperframes-canary-calibration-notes.mintlify.site/contributing.md): Set up the repository, make a focused change, and open a pull request.
- [Canary rollouts](https://hyperframes-canary-calibration-notes.mintlify.site/contributing/canary-rollouts.md): Ship a change to a percentage of installs instead of all-or-nothing.
- [Contribute to the Catalog](https://hyperframes-canary-calibration-notes.mintlify.site/contributing/catalog.md): Add a reusable block or component to the HyperFrames registry.
- [Changelog process](https://hyperframes-canary-calibration-notes.mintlify.site/contributing/changelog-process.md): How HyperFrames drafts, reviews, and publishes release notes.
- [Release channels](https://hyperframes-canary-calibration-notes.mintlify.site/contributing/release-channels.md): How HyperFrames keeps alpha-only work out of stable releases.
- [Test local CLI changes](https://hyperframes-canary-calibration-notes.mintlify.site/contributing/testing-local-changes.md): Run an unreleased HyperFrames CLI build against a real project outside the monorepo.
- [AWS Lambda](https://hyperframes-canary-calibration-notes.mintlify.site/deploy/aws-lambda.md): Deploy distributed HyperFrames rendering to AWS Lambda and drive renders from a laptop or CI.
- [Cloud rendering](https://hyperframes-canary-calibration-notes.mintlify.site/deploy/cloud.md): Render on HeyGen's managed cloud without deploying your own infrastructure.
- [Google Cloud Run](https://hyperframes-canary-calibration-notes.mintlify.site/deploy/gcp-cloud-run.md): Deploy distributed HyperFrames rendering to Cloud Run, Cloud Workflows, and Google Cloud Storage.
- [Migrating to HyperFrames Lambda](https://hyperframes-canary-calibration-notes.mintlify.site/deploy/migrating-to-hyperframes-lambda.md): Side-by-side mapping for adopters coming to HyperFrames from another one-command-deploy video renderer.
- [Choose a rendering path](https://hyperframes-canary-calibration-notes.mintlify.site/deploy/overview.md): Choose the smallest HyperFrames rendering surface for local work, an application backend, managed cloud, or infrastructure you operate.
- [Render templates on Lambda](https://hyperframes-canary-calibration-notes.mintlify.site/deploy/templates-on-lambda.md): Render one HyperFrames composition with different variable values, individually or from a JSONL batch.
- [CLI guide](https://hyperframes-canary-calibration-notes.mintlify.site/developers/cli.md): Find the HyperFrames command for creating, checking, rendering, publishing, and automating projects.
- [Build on HyperFrames](https://hyperframes-canary-calibration-notes.mintlify.site/developers/index.md): Choose the smallest HyperFrames surface for automation, editing, playback, rendering, or generated compositions.
- [How HyperFrames fits into an application](https://hyperframes-canary-calibration-notes.mintlify.site/developers/overview.md): Understand the composition contract, editing surfaces, Player, CLI, and rendering layers before choosing an integration.
- [Examples](https://hyperframes-canary-calibration-notes.mintlify.site/examples.md): Watch finished HyperFrames videos, inspect real production projects, or start from a working template.
- [Go further with HyperFrames](https://hyperframes-canary-calibration-notes.mintlify.site/go-further.md): Take more control of an existing project through your agent, Studio, richer composition tools, and a reliable finish.
- [Render in 4K](https://hyperframes-canary-calibration-notes.mintlify.site/guides/4k-rendering.md): Author at 4K or supersample an existing composition at render time.
- [Authentication & API keys](https://hyperframes-canary-calibration-notes.mintlify.site/guides/authentication.md): Sign in to HeyGen and understand how agent workflows choose voice, music, sound, and optional capture-description providers.
- [Add an avatar presenter](https://hyperframes-canary-calibration-notes.mintlify.site/guides/avatar-presenter.md): Create or reuse a presenter clip, keep it as project media, and combine it with editable HyperFrames scenes.
- [Add captions or repackage talking-head footage](https://hyperframes-canary-calibration-notes.mintlify.site/guides/captions-and-recuts.md): Add captions, add designed overlays, or change the spoken edit.
- [Choose how to create](https://hyperframes-canary-calibration-notes.mintlify.site/guides/choose-creation-path.md): Choose between a local HyperFrames project, hosted chat, a design-first handoff, or a HeyGen-generated video.
- [Color grade images and footage](https://hyperframes-canary-calibration-notes.mintlify.site/guides/color-grading.md): Correct exposure and color, shape a look, apply a LUT, and review the result in Studio.
- [Deploy a preview and render API](https://hyperframes-canary-calibration-notes.mintlify.site/guides/deploy.md): Start from an official Vercel, Cloudflare, or Modal template when you need a hosted preview and MP4 render endpoint.
- [Bring a design into a project](https://hyperframes-canary-calibration-notes.mintlify.site/guides/design-tools.md): Start from Figma, a design-tool draft, or an existing brand system without turning the video into a stack of screenshots.
- [Finish and share a video](https://hyperframes-canary-calibration-notes.mintlify.site/guides/export-and-share.md): Review the project, run its checks, render through an agent, Studio, or the CLI, and deliver the right file or link.
- [Create a faceless explainer](https://hyperframes-canary-calibration-notes.mintlify.site/guides/faceless-explainer.md): Turn notes, an article, or a difficult idea into a visual explanation without product footage.
- [Share feedback](https://hyperframes-canary-calibration-notes.mintlify.site/guides/feedback.md): Report a problem or tell the HyperFrames team what would make the product better.
- [Figma integration](https://hyperframes-canary-calibration-notes.mintlify.site/guides/figma.md): Bring Figma designs into HyperFrames — frozen assets, brand tokens, editable components, storyboard reconstruction, and Figma Motion timelines translated to GSAP.
- [Create a custom video](https://hyperframes-canary-calibration-notes.mintlify.site/guides/general-video.md): Combine sources, change existing footage, or co-direct a video when no focused workflow fits.
- [Animate with GSAP](https://hyperframes-canary-calibration-notes.mintlify.site/guides/gsap-animation.md): Create a paused timeline that HyperFrames can seek to any frame.
- [Render HDR video](https://hyperframes-canary-calibration-notes.mintlify.site/guides/hdr.md): Preserve BT.2020 PQ or HLG sources in a 10-bit H.265 MP4.
- [HTML in Canvas](https://hyperframes-canary-calibration-notes.mintlify.site/guides/html-in-canvas.md): Use live DOM content as a texture for WebGL and canvas effects.
- [HyperFrames or Remotion?](https://hyperframes-canary-calibration-notes.mintlify.site/guides/hyperframes-vs-remotion.md): A practical comparison of HTML-first HyperFrames and React-first Remotion.
- [Create through an AI chat](https://hyperframes-canary-calibration-notes.mintlify.site/guides/mcp.md): Use the hosted HyperFrames MCP connector to create and render without installing the local CLI.
- [Work with media](https://hyperframes-canary-calibration-notes.mintlify.site/guides/media.md): Use footage, images, audio, captions, backgrounds, and color in a HyperFrames project.
- [Apply media effects](https://hyperframes-canary-calibration-notes.mintlify.site/guides/media-effects.md): Apply editable blur, bloom, retro, print, glitch, and art treatments to images and video.
- [Create a motion graphic](https://hyperframes-canary-calibration-notes.mintlify.site/guides/motion-graphics.md): Make a short, motion-led title, statistic, chart, logo sting, or overlay.
- [Create a music-driven video](https://hyperframes-canary-calibration-notes.mintlify.site/guides/music-to-video.md): Cut footage, images, lyrics, and motion to a track’s beat grid.
- [Fix a slow preview or render](https://hyperframes-canary-calibration-notes.mintlify.site/guides/performance.md): Find the expensive part of a composition and make it cheaper.
- [Turn a pull request into a video](https://hyperframes-canary-calibration-notes.mintlify.site/guides/pr-to-video.md): Show what changed, why it matters, and what happens next.
- [Create a product or website video](https://hyperframes-canary-calibration-notes.mintlify.site/guides/product-launch-video.md): Turn a product URL or launch brief into a promo, product tour, or social video.
- [Remove a background](https://hyperframes-canary-calibration-notes.mintlify.site/guides/remove-background.md): Turn footage of a person or a portrait image into transparent media you can layer over a HyperFrames scene.
- [Render from the command line](https://hyperframes-canary-calibration-notes.mintlify.site/guides/rendering.md): Check a project and render MP4, MOV, WebM, GIF, or PNG output.
- [Install and update agent skills](https://hyperframes-canary-calibration-notes.mintlify.site/guides/skills.md): Teach a coding agent how to create valid HyperFrames projects and load specialized workflows when needed.
- [Create an interactive presentation](https://hyperframes-canary-calibration-notes.mintlify.site/guides/slideshow.md): Build a navigable deck with reveals, notes, optional branches, hotspots, and presenter mode.
- [Troubleshooting](https://hyperframes-canary-calibration-notes.mintlify.site/guides/troubleshooting.md): Solve common Studio, project, media, animation, preview, and rendering problems.
- [Use images and video](https://hyperframes-canary-calibration-notes.mintlify.site/guides/video-components.md): Import, place, replace, trim, and review images and footage in a HyperFrames project.
- [Use voice, music, sound, and captions](https://hyperframes-canary-calibration-notes.mintlify.site/guides/voice-and-audio.md): Build an understandable audio mix, transcribe real speech, and turn it into readable captions.
- [Get unstuck](https://hyperframes-canary-calibration-notes.mintlify.site/help.md): Start with what you can see, try the smallest useful fix, and get back to your HyperFrames task.
- [What is HyperFrames?](https://hyperframes-canary-calibration-notes.mintlify.site/introduction.md): See what an AI agent can make with ordinary web technology.
- [@hyperframes/aws-lambda](https://hyperframes-canary-calibration-notes.mintlify.site/packages/aws-lambda.md): AWS Lambda and Step Functions adapter for distributed HyperFrames rendering.
- [CLI](https://hyperframes-canary-calibration-notes.mintlify.site/packages/cli.md): Create, preview, and render HTML video compositions from the command line.
- [@hyperframes/core](https://hyperframes-canary-calibration-notes.mintlify.site/packages/core.md): Composition types, generation, compilation, and browser runtime.
- [@hyperframes/engine](https://hyperframes-canary-calibration-notes.mintlify.site/packages/engine.md): Low-level, seekable frame capture and encoding primitives.
- [@hyperframes/gcp-cloud-run](https://hyperframes-canary-calibration-notes.mintlify.site/packages/gcp-cloud-run.md): Google Cloud Run and Workflows adapter for distributed HyperFrames rendering.
- [@hyperframes/lint](https://hyperframes-canary-calibration-notes.mintlify.site/packages/lint.md): The composition linter as a standalone library — lint a directory or a single HTML file without the CLI.
- [@hyperframes/parsers](https://hyperframes-canary-calibration-notes.mintlify.site/packages/parsers.md): The GSAP + HTML parser/writer suite — standalone, zero @hyperframes/* dependencies.
- [@hyperframes/player](https://hyperframes-canary-calibration-notes.mintlify.site/packages/player.md): Embeddable web component for playing HyperFrames compositions in any web page.
- [@hyperframes/producer](https://hyperframes-canary-calibration-notes.mintlify.site/packages/producer.md): Render a HyperFrames project from Node.js.
- [@hyperframes/sdk](https://hyperframes-canary-calibration-notes.mintlify.site/packages/sdk.md): Headless, framework-neutral composition editing engine for agents and custom editors.
- [@hyperframes/shader-transitions](https://hyperframes-canary-calibration-notes.mintlify.site/packages/shader-transitions.md): WebGL shader transitions for HyperFrames scenes and compositions.
- [@hyperframes/studio](https://hyperframes-canary-calibration-notes.mintlify.site/packages/studio.md): React components and hooks used to build the HyperFrames Studio editing interface.
- [@hyperframes/studio-server](https://hyperframes-canary-calibration-notes.mintlify.site/packages/studio-server.md): Mount the Studio project and preview API in your own server.
- [Product updates](https://hyperframes-canary-calibration-notes.mintlify.site/product-updates.md): The HyperFrames changes that matter when you create, edit, and render projects.
- [Anatomy of a one-shot prompt](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/anatomy.md): The six-part skeleton — route, spec, beats, copy, technique, negatives — that removes the decisions agents most often get wrong.
- [Capstone — every technique, one journey](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/capstone.md): One prompt, one continuous camera move, every technique in this guide — the viewer rides the timeline itself from typed markup to rendered MP4.
- [Captions and talking-head footage](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/captions-and-talking-heads.md): Two ways to dress an existing talking-head clip — readable captions or designed graphic overlays — both leaving the footage itself untouched.
- [Caption styles](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/captions-catalog.md): Map caption tone to named caption components, and prompt per-word emphasis for composed videos.
- [Code changes and PRs](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/code-and-prs.md): What to say to turn a GitHub pull request into a code-change explainer — changelog, feature reveal, fix, or refactor walkthrough.
- [Code animations](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/code-blocks.md): Prompt code walkthroughs — typing, diffing, highlighting, scrolling — and pick a terminal or editor theme by name.
- [Color grading and film effects](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/color-grading.md): Grade media with a fixed-order pipeline — tonal work, hue keys, print and analogue treatments — and know why the source matters more than the payload.
- [Data and maps](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/data-and-maps.md): Prompt animated charts, count-up stats, and maps — highlight regions, draw flows, size bubbles — or hand-draw a chart for full control.
- [Design systems and brand](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/design-systems.md): Point the agent at a source of brand truth — a design spec, a site, or a Figma file — instead of asking for 'on-brand', and let it compose the frame.
- [Editing existing videos](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/editing-existing-videos.md): Direct the agent like an editor — trim, move, retime, swap, restyle — with the NLE verb you already know mapped to the prompt that lands it in one pass.
- [Verified example prompts](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/examples.md): Copy-paste prompts, every one run end-to-end to a finished video that passes check.
- [Explainers](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/explainers.md): What to say to turn an article, notes, or a topic into a faceless explainer — where every visual is invented, not captured.
- [When to generate artwork](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/generated-artwork.md): Code-drawn wins for UI, type, geometry, and 3D; illustration-led hero art comes from an image model, animated as layers.
- [Iterating](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/iterating.md): Talk to the agent like a video editor — small targeted edits beat re-specification.
- [Media and audio](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/media-and-audio.md): Ask for the voiceover, music, sound, captions, cutouts, and assets a composition needs — with the precise, unambiguous phrasing the media pipeline acts on.
- [Motion that reads premium](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/motion.md): Eight motion-grammar rules from frame-by-frame study of professional work — nothing stops, the camera acts, action overlaps, imperfection stays reproducible.
- [Motion graphics](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/motion-graphics.md): Short, design-led pieces where motion is the message — kinetic type, a stat hit, a logo sting — and the knobs that decide MP4 versus transparent overlay.
- [Music videos and slideshows](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/music-and-slideshows.md): Two music- and slide-driven outputs that look alike in a brief but ship differently — a beat-synced MP4 versus a navigable deck — and how to route to the right one.
- [Overlays and lower thirds](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/overlays-and-lower-thirds.md): Prompt named lower-third and social-post overlay blocks with timing, copy, and brand tone.
- [Prompt Guide](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/overview.md): How to prompt AI agents to author HyperFrames videos — setup, the two prompt shapes, and the map of this guide.
- [Product launch videos](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/product-launch.md): What to say to turn a product URL, a script, or a brief into a launch or promo video — and when to reach for a site tour instead.
- [Recreating something you saw](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/recreating-references.md): Transcribe motion, iterate with absolute targets, distill the constants — and know where the text-only ceiling is.
- [Porting from Remotion](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/remotion-migration.md): What to say to migrate an existing Remotion (React) composition's source into HyperFrames HTML — and what to expect the agent to refuse.
- [Rendering and output](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/rendering-and-output.md): What to say to get the right file out — quality tier, format, resolution, framerate, and cloud rendering — without over-speccing a render that slows to no benefit.
- [Rules and anti-patterns](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/rules-and-anti-patterns.md): The technical rules that keep renders correct, and the prompt patterns that cause friction.
- [Runtimes and 3D](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/runtimes-and-3d.md): GSAP is the default and you rarely name it — but real 3D, existing animation files, and scene transitions each have a runtime worth pinning in the prompt.
- [The specification dial](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/specification-dial.md): Spec density controls how far the result drifts from what you imagined — not whether it works.
- [Storyboards](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/storyboards.md): For multi-scene work, don't prompt the scenes one by one — prompt the plan: the arc, the per-frame beats, and the pacing rule the build follows to fill them in.
- [Transitions](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/transitions.md): Map energy and mood to named shader and CSS transition blocks, and prompt them per seam.
- [Variables and templating](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/variables-and-templating.md): Ask for the parts that should change to become named slots, then re-render the same composition with different values — one output per record.
- [VFX and liquid glass](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/vfx-and-liquid-glass.md): Prompt device mockups, liquid-glass UI, shatter/portal/magnetic moments, and ambient polish — and know which effects need the canvas pipeline.
- [High-fidelity looks](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/visual-specs.md): Write a visual spec — every element named, positioned, colored, and timed — to carry a specific look in words.
- [Vocabulary that changes output](https://hyperframes-canary-calibration-notes.mintlify.site/prompting/vocabulary.md): Natural-language adjectives the skills map to specific framework settings — easing, captions, transitions, audio, voices.
- [Make your first video](https://hyperframes-canary-calibration-notes.mintlify.site/quickstart.md): Install the HyperFrames skills, make one short request, and continue with your agent, Studio, or the CLI.
- [Color grading implementation](https://hyperframes-canary-calibration-notes.mintlify.site/reference/color-grading.md): Persist, automate, animate, and spatially isolate media color grading.
- [HTML schema reference](https://hyperframes-canary-calibration-notes.mintlify.site/reference/html-schema.md): The current contract for a HyperFrames composition.
- [Canvas & Preview Integration](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/guides/canvas-integration.md): Connect a same-origin composition iframe to the SDK for hit-testing, draft preview, and selection.
- [Editing Affordances](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/guides/editing-affordances.md): Resolve capability flags and inspector sections for a selected element so your editor panel is element-aware.
- [Embedded Override Mode](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/guides/embedded-override-mode.md): Layer a sparse delta on top of a reusable base composition so the host stores only what changed.
- [Persistence](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/guides/persistence.md): Autosave composition edits through pluggable adapters — filesystem, memory, or your own storage backend.
- [Querying & Editing Elements](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/guides/querying-and-editing.md): Find elements by property, make typed mutations, group edits with batch, and work with element handles and selection.
- [Timing & Animation](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/guides/timing-and-animation.md): Set clip timing, elastic holds, GSAP tweens, and keyframed animations on composition elements.
- [Undo, Redo & Patches](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/guides/undo-redo-and-patches.md): Use the SDK's built-in undo stack, subscribe to patch events, and integrate with a host application's own history.
- [Edit a composition with the SDK](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/quickstart.md): Open composition HTML, query and edit elements, serialize the result, and add persistence.
- [Adapters](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/reference/adapters.md): Persistence and preview adapter interfaces, contracts, and the built-in factory functions.
- [Composition](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/reference/composition.md): The main editing surface returned by openComposition — query, mutate, animate, and serialize a composition.
- [Edit Operations](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/reference/edit-operations.md): The complete EditOp catalog for dispatch(), can(), and batch().
- [openComposition](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/reference/open-composition.md): Open a composition HTML string for editing. Returns a Composition session.
- [Types](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/reference/types.md): Core types exported from @hyperframes/sdk, with pointers to the adapter, history, and persistence types.
- [Utilities & Constants](https://hyperframes-canary-calibration-notes.mintlify.site/sdk/reference/utilities.md): History module, persist queue, document utilities, constants, and error types exported from @hyperframes/sdk.
- [Edit animation and keyframes](https://hyperframes-canary-calibration-notes.mintlify.site/studio/animation.md): Read existing motion, add and retime keyframes, record gestures, shape paths, and handle generated animation.
- [Use Assets and Catalog](https://hyperframes-canary-calibration-notes.mintlify.site/studio/assets-and-blocks.md): Import project media, reuse existing files, and add ready-made visuals.
- [Edit the frame](https://hyperframes-canary-calibration-notes.mintlify.site/studio/canvas.md): Select the right element, change its content or design, arrange layers, and verify the result in motion.
- [Edit captions](https://hyperframes-canary-calibration-notes.mintlify.site/studio/captions.md): Review captions in context and understand which Studio edits are saved today.
- [Export and manage renders](https://hyperframes-canary-calibration-notes.mintlify.site/studio/export.md): Choose a format, quality, resolution, and frame rate, then manage the render queue.
- [Work on a project in Studio](https://hyperframes-canary-calibration-notes.mintlify.site/studio/index.md): Open a HyperFrames project, understand the workspace, make a safe edit, and finish a version.
- [Keyboard shortcuts](https://hyperframes-canary-calibration-notes.mintlify.site/studio/shortcuts.md): Use Studio shortcuts for playback, editing, navigation, and project actions.
- [Build a slideshow](https://hyperframes-canary-calibration-notes.mintlify.site/studio/slideshows.md): Shape the main presentation, then add reveals, notes, branches, and hotspots where they help.
- [Work with source and an agent](https://hyperframes-canary-calibration-notes.mintlify.site/studio/source.md): Edit project files, diagnose a failed check, and hand the right context to an AI agent.
- [Review the storyboard](https://hyperframes-canary-calibration-notes.mintlify.site/studio/storyboard.md): Review planned frames, direction, voiceover, status, and feedback before or during the build.
- [Edit timing on the timeline](https://hyperframes-canary-calibration-notes.mintlify.site/studio/timeline.md): Move, trim, split, align, and inspect clips in HyperFrames Studio.
- [Studio troubleshooting](https://hyperframes-canary-calibration-notes.mintlify.site/studio/troubleshooting.md): Recover from selection, preview, editing, timeline, and export problems.
- [Use variables and templates](https://hyperframes-canary-calibration-notes.mintlify.site/studio/variables.md): Turn a visible value into a reusable input, preview variants, and hand the template off.
- [30 Days of HyperFrames](https://hyperframes-canary-calibration-notes.mintlify.site/thirty-days.md): The official 30 Days of HyperFrames lessons, collected in one place as the series is published.
- [Weekly updates](https://hyperframes-canary-calibration-notes.mintlify.site/weekly-updates.md): Curated weekly highlights for HyperFrames.
- [Choose a workflow](https://hyperframes-canary-calibration-notes.mintlify.site/workflows.md): Start from the material you already have.