# HyperFrames — full corpus --- title: "Knowledge Base Index" type: index updated: 2026-06-01 --- # Knowledge Base Index Master catalog of all wiki pages. Every page in the wiki must have an entry here. ## Concepts | Page | Tags | Confidence | Updated | |------|------|------------|---------| | [[concepts/authoring-model]] | composition, html, data-attributes, timeline | high | 2026-06-01 | | [[concepts/catalog-system]] | catalog, block, component, transition | high | 2026-06-01 | | [[concepts/common-mistakes-and-troubleshooting]] | common-mistakes, troubleshooting, checklist | high | 2026-06-01 | | [[concepts/data-attributes]] | data-attributes, composition, timeline | high | 2026-06-01 | | [[concepts/deployment-and-performance]] | deployment, performance, 4k, hdr | high | 2026-06-01 | | [[concepts/deterministic-rendering]] | determinism, rendering, official-source | high | 2026-06-01 | | [[concepts/frame-adapters]] | frame-adapter, determinism, timeline | high | 2026-06-01 | | [[concepts/gsap-animation]] | gsap, timeline, composition | high | 2026-06-01 | | [[concepts/html-in-canvas-and-vfx]] | html-in-canvas, vfx, catalog | high | 2026-06-01 | | [[concepts/hyperframes-overview]] | overview, composition, official-source | high | 2026-06-01 | | [[concepts/prompting-and-agent-workflow]] | prompting, agent-workflow, common-mistakes | high | 2026-06-01 | | [[concepts/rendering-pipeline]] | rendering, cli, producer, engine | high | 2026-06-01 | | [[concepts/website-to-video-workflow]] | website-to-video, agent-workflow, prompting | high | 2026-06-01 | ## Entities | Page | Tags | Updated | |------|------|---------| | [[entities/catalog-caption-components]] | caption, component, catalog | 2026-06-01 | | [[entities/catalog-data-and-map-blocks]] | data-viz, map, catalog, block | 2026-06-01 | | [[entities/catalog-social-and-ui-blocks]] | social-card, ui, catalog, block | 2026-06-01 | | [[entities/catalog-transition-blocks]] | transition, catalog, block | 2026-06-01 | | [[entities/hyperframes-packages]] | package, cli, core, engine, player, producer, studio | 2026-06-01 | ## Summaries | Page | Source | Key Topics | Created | |------|--------|------------|---------| | [[summaries/3d-transitions]] | `raw/docs/catalog-blocks__transitions-3d.md` | 3D Transitions | 2026-06-01 | | [[summaries/3d-ui-reveal]] | `raw/docs/catalog-blocks__ui-3d-reveal.md` | 3D UI Reveal | 2026-06-01 | | [[summaries/4k-rendering]] | `raw/docs/guides__4k-rendering.md` | 4K Rendering | 2026-06-01 | | [[summaries/adopters]] | `raw/docs/community__adopters.md` | Adopters | 2026-06-01 | | [[summaries/app-showcase]] | `raw/docs/catalog-blocks__app-showcase.md` | App Showcase | 2026-06-01 | | [[summaries/apple-money-count]] | `raw/docs/catalog-blocks__apple-money-count.md` | Apple Money Count | 2026-06-01 | | [[summaries/aws-lambda]] | `raw/docs/deploy__aws-lambda.md` | AWS Lambda | 2026-06-01 | | [[summaries/blend-difference]] | `raw/docs/catalog-components__caption-blend-difference.md` | Blend Difference | 2026-06-01 | | [[summaries/blue-sweater-intro-video]] | `raw/docs/catalog-blocks__blue-sweater-intro-video.md` | Blue Sweater Intro Video | 2026-06-01 | | [[summaries/blur-transitions]] | `raw/docs/catalog-blocks__transitions-blur.md` | Blur Transitions | 2026-06-01 | | [[summaries/chromatic-radial-split]] | `raw/docs/catalog-blocks__chromatic-radial-split.md` | Chromatic Radial Split | 2026-06-01 | | [[summaries/cinematic-zoom]] | `raw/docs/catalog-blocks__cinematic-zoom.md` | Cinematic Zoom | 2026-06-01 | | [[summaries/claude-design]] | `raw/docs/guides__claude-design.md` | Claude Design | 2026-06-01 | | [[summaries/cli]] | `raw/docs/packages__cli.md` | CLI | 2026-06-01 | | [[summaries/clip-wipe]] | `raw/docs/catalog-components__caption-clip-wipe.md` | Clip Wipe | 2026-06-01 | | [[summaries/common-mistakes]] | `raw/docs/guides__common-mistakes.md` | Common Mistakes | 2026-06-01 | | [[summaries/compositions]] | `raw/docs/concepts__compositions.md` | Compositions | 2026-06-01 | | [[summaries/contributing]] | `raw/docs/docs__contributing.md` | Contributing | 2026-06-01 | | [[summaries/contributing-to-the-catalog]] | `raw/docs/contributing__catalog.md` | Contributing to the Catalog | 2026-06-01 | | [[summaries/cover-transitions]] | `raw/docs/catalog-blocks__transitions-cover.md` | Cover Transitions | 2026-06-01 | | [[summaries/cross-warp-morph]] | `raw/docs/catalog-blocks__cross-warp-morph.md` | Cross Warp Morph | 2026-06-01 | | [[summaries/dark]] | `raw/docs/catalog-blocks__code-snippet-dark-plus.md` | Dark+ | 2026-06-01 | | [[summaries/dark-2026]] | `raw/docs/catalog-blocks__code-snippet-dark-2026.md` | Dark 2026 | 2026-06-01 | | [[summaries/dark-modern]] | `raw/docs/catalog-blocks__code-snippet-dark-modern.md` | Dark Modern | 2026-06-01 | | [[summaries/data-attributes]] | `raw/docs/concepts__data-attributes.md` | Data Attributes | 2026-06-01 | | [[summaries/data-chart]] | `raw/docs/catalog-blocks__data-chart.md` | Data Chart | 2026-06-01 | | [[summaries/deploy]] | `raw/docs/guides__deploy.md` | Deploy | 2026-06-01 | | [[summaries/destruction-transitions]] | `raw/docs/catalog-blocks__transitions-destruction.md` | Destruction Transitions | 2026-06-01 | | [[summaries/deterministic-rendering]] | `raw/docs/concepts__determinism.md` | Deterministic Rendering | 2026-06-01 | | [[summaries/dissolve-transitions]] | `raw/docs/catalog-blocks__transitions-dissolve.md` | Dissolve Transitions | 2026-06-01 | | [[summaries/distortion-transitions]] | `raw/docs/catalog-blocks__transitions-distortion.md` | Distortion Transitions | 2026-06-01 | | [[summaries/domain-warp-dissolve]] | `raw/docs/catalog-blocks__domain-warp-dissolve.md` | Domain Warp Dissolve | 2026-06-01 | | [[summaries/editorial-emphasis]] | `raw/docs/catalog-components__caption-editorial-emphasis.md` | Editorial Emphasis | 2026-06-01 | | [[summaries/emoji-pop]] | `raw/docs/catalog-components__caption-emoji-pop.md` | Emoji Pop | 2026-06-01 | | [[summaries/examples]] | `raw/docs/docs__examples.md` | Examples | 2026-06-01 | | [[summaries/feedback-collection]] | `raw/docs/guides__feedback.md` | Feedback Collection | 2026-06-01 | | [[summaries/flash-through-white]] | `raw/docs/catalog-blocks__flash-through-white.md` | Flash Through White | 2026-06-01 | | [[summaries/flowchart]] | `raw/docs/catalog-blocks__flowchart.md` | Flowchart | 2026-06-01 | | [[summaries/frame-adapters]] | `raw/docs/concepts__frame-adapters.md` | Frame Adapters | 2026-06-01 | | [[summaries/github-copilot-cli]] | `raw/docs/guides__copilot-cli.md` | GitHub Copilot CLI | 2026-06-01 | | [[summaries/glitch]] | `raw/docs/catalog-blocks__glitch.md` | Glitch | 2026-06-01 | | [[summaries/glitch-rgb]] | `raw/docs/catalog-components__caption-glitch-rgb.md` | Glitch RGB | 2026-06-01 | | [[summaries/google-antigravity]] | `raw/docs/guides__antigravity.md` | Google Antigravity | 2026-06-01 | | [[summaries/gradient-fill]] | `raw/docs/catalog-components__caption-gradient-fill.md` | Gradient Fill | 2026-06-01 | | [[summaries/grain-overlay]] | `raw/docs/catalog-components__grain-overlay.md` | Grain Overlay | 2026-06-01 | | [[summaries/gravitational-lens]] | `raw/docs/catalog-blocks__gravitational-lens.md` | Gravitational Lens | 2026-06-01 | | [[summaries/grid-pixelate-wipe]] | `raw/docs/catalog-components__grid-pixelate-wipe.md` | Grid Pixelate Wipe | 2026-06-01 | | [[summaries/grid-transitions]] | `raw/docs/catalog-blocks__transitions-grid.md` | Grid Transitions | 2026-06-01 | | [[summaries/gsap-animation]] | `raw/docs/guides__gsap-animation.md` | GSAP Animation | 2026-06-01 | | [[summaries/hdr-rendering]] | `raw/docs/guides__hdr.md` | HDR Rendering | 2026-06-01 | | [[summaries/high-contrast]] | `raw/docs/catalog-blocks__code-snippet-high-contrast.md` | High Contrast | 2026-06-01 | | [[summaries/high-contrast-light]] | `raw/docs/catalog-blocks__code-snippet-high-contrast-light.md` | High Contrast Light | 2026-06-01 | | [[summaries/highlight]] | `raw/docs/catalog-components__caption-highlight.md` | Highlight | 2026-06-01 | | [[summaries/html-in-canvas]] | `raw/docs/guides__html-in-canvas.md` | HTML-in-Canvas | 2026-06-01 | | [[summaries/html-schema-reference]] | `raw/docs/reference__html-schema.md` | HTML Schema Reference | 2026-06-01 | | [[summaries/hyperframes-core]] | `raw/docs/packages__core.md` | @hyperframes/core | 2026-06-01 | | [[summaries/hyperframes-engine]] | `raw/docs/packages__engine.md` | @hyperframes/engine | 2026-06-01 | | [[summaries/hyperframes-player]] | `raw/docs/packages__player.md` | @hyperframes/player | 2026-06-01 | | [[summaries/hyperframes-producer]] | `raw/docs/packages__producer.md` | @hyperframes/producer | 2026-06-01 | | [[summaries/hyperframes-studio]] | `raw/docs/packages__studio.md` | @hyperframes/studio | 2026-06-01 | | [[summaries/hyperframes-vs-remotion]] | `raw/docs/guides__hyperframes-vs-remotion.md` | Hyperframes vs Remotion | 2026-06-01 | | [[summaries/instagram-follow]] | `raw/docs/catalog-blocks__instagram-follow.md` | Instagram Follow | 2026-06-01 | | [[summaries/introduction]] | `raw/docs/docs__introduction.md` | Introduction | 2026-06-01 | | [[summaries/ios-26-liquid-glass-home-screen]] | `raw/docs/catalog-blocks__ios26-liquid-glass.md` | iOS 26 Liquid Glass Home Screen | 2026-06-01 | | [[summaries/iphone-macbook-3d-showcase]] | `raw/docs/catalog-blocks__vfx-iphone-device.md` | iPhone & MacBook 3D Showcase | 2026-06-01 | | [[summaries/kinetic-slam]] | `raw/docs/catalog-components__caption-kinetic-slam.md` | Kinetic Slam | 2026-06-01 | | [[summaries/launch-videos]] | `raw/docs/docs__launch-videos.md` | Launch Videos | 2026-06-01 | | [[summaries/light]] | `raw/docs/catalog-blocks__code-snippet-light-plus.md` | Light+ | 2026-06-01 | | [[summaries/light-2026]] | `raw/docs/catalog-blocks__code-snippet-light-2026.md` | Light 2026 | 2026-06-01 | | [[summaries/light-leak]] | `raw/docs/catalog-blocks__light-leak.md` | Light Leak | 2026-06-01 | | [[summaries/light-modern]] | `raw/docs/catalog-blocks__code-snippet-light-modern.md` | Light Modern | 2026-06-01 | | [[summaries/light-transitions]] | `raw/docs/catalog-blocks__transitions-light.md` | Light Transitions | 2026-06-01 | | [[summaries/liquid-background]] | `raw/docs/catalog-blocks__vfx-liquid-background.md` | Liquid Background | 2026-06-01 | | [[summaries/liquid-glass-context-menu]] | `raw/docs/catalog-blocks__liquid-glass-context-menu.md` | Liquid Glass Context Menu | 2026-06-01 | | [[summaries/liquid-glass-media-controls]] | `raw/docs/catalog-blocks__liquid-glass-media-controls.md` | Liquid Glass Media Controls | 2026-06-01 | | [[summaries/liquid-glass-notification]] | `raw/docs/catalog-blocks__liquid-glass-notification.md` | Liquid Glass Notification | 2026-06-01 | | [[summaries/liquid-glass-widgets]] | `raw/docs/catalog-blocks__liquid-glass-widgets.md` | Liquid Glass Widgets | 2026-06-01 | | [[summaries/logo-outro]] | `raw/docs/catalog-blocks__logo-outro.md` | Logo Outro | 2026-06-01 | | [[summaries/macos-notification]] | `raw/docs/catalog-blocks__macos-notification.md` | macOS Notification | 2026-06-01 | | [[summaries/macos-tahoe-liquid-glass-desktop]] | `raw/docs/catalog-blocks__macos-tahoe-liquid-glass.md` | macOS Tahoe Liquid Glass Desktop | 2026-06-01 | | [[summaries/magnetic]] | `raw/docs/catalog-blocks__vfx-magnetic.md` | Magnetic | 2026-06-01 | | [[summaries/matrix-decode]] | `raw/docs/catalog-components__caption-matrix-decode.md` | Matrix Decode | 2026-06-01 | | [[summaries/mechanical-transitions]] | `raw/docs/catalog-blocks__transitions-mechanical.md` | Mechanical Transitions | 2026-06-01 | | [[summaries/migrating-to-hyperframes-lambda]] | `raw/docs/deploy__migrating-to-hyperframes-lambda.md` | Migrating to HyperFrames Lambda | 2026-06-01 | | [[summaries/monokai]] | `raw/docs/catalog-blocks__code-snippet-monokai.md` | Monokai | 2026-06-01 | | [[summaries/neon-accent]] | `raw/docs/catalog-components__caption-neon-accent.md` | Neon Accent | 2026-06-01 | | [[summaries/neon-glow]] | `raw/docs/catalog-components__caption-neon-glow.md` | Neon Glow | 2026-06-01 | | [[summaries/north-korea-locked-down]] | `raw/docs/catalog-blocks__north-korea-locked-down.md` | North Korea Locked Down | 2026-06-01 | | [[summaries/nyc-paris-flight]] | `raw/docs/catalog-blocks__nyc-paris-flight.md` | NYC Paris Flight | 2026-06-01 | | [[summaries/open-design]] | `raw/docs/guides__open-design.md` | Open Design | 2026-06-01 | | [[summaries/other-transitions]] | `raw/docs/catalog-blocks__transitions-other.md` | Other Transitions | 2026-06-01 | | [[summaries/parallax-layers]] | `raw/docs/catalog-components__caption-parallax-layers.md` | Parallax Layers | 2026-06-01 | | [[summaries/parallax-unzoom]] | `raw/docs/catalog-components__parallax-unzoom.md` | Parallax Unzoom | 2026-06-01 | | [[summaries/parallax-zoom]] | `raw/docs/catalog-components__parallax-zoom.md` | Parallax Zoom | 2026-06-01 | | [[summaries/particle-burst]] | `raw/docs/catalog-components__caption-particle-burst.md` | Particle Burst | 2026-06-01 | | [[summaries/performance]] | `raw/docs/guides__performance.md` | Performance | 2026-06-01 | | [[summaries/pill-karaoke]] | `raw/docs/catalog-components__caption-pill-karaoke.md` | Pill Karaoke | 2026-06-01 | | [[summaries/portal]] | `raw/docs/catalog-blocks__vfx-portal.md` | Portal | 2026-06-01 | | [[summaries/prompt-guide]] | `raw/docs/guides__prompting.md` | Prompt Guide | 2026-06-01 | | [[summaries/push-transitions]] | `raw/docs/catalog-blocks__transitions-push.md` | Push Transitions | 2026-06-01 | | [[summaries/quickstart]] | `raw/docs/docs__quickstart.md` | Quickstart | 2026-06-01 | | [[summaries/radial-transitions]] | `raw/docs/catalog-blocks__transitions-radial.md` | Radial Transitions | 2026-06-01 | | [[summaries/reddit-post-card]] | `raw/docs/catalog-blocks__reddit-post.md` | Reddit Post Card | 2026-06-01 | | [[summaries/release-channels]] | `raw/docs/contributing__release-channels.md` | Release channels | 2026-06-01 | | [[summaries/remove-background-transparent-video]] | `raw/docs/guides__remove-background.md` | Remove Background (transparent video) | 2026-06-01 | | [[summaries/rendering]] | `raw/docs/guides__rendering.md` | Rendering | 2026-06-01 | | [[summaries/ridged-burn]] | `raw/docs/catalog-blocks__ridged-burn.md` | Ridged Burn | 2026-06-01 | | [[summaries/ripple-waves]] | `raw/docs/catalog-blocks__ripple-waves.md` | Ripple Waves | 2026-06-01 | | [[summaries/scale-transitions]] | `raw/docs/catalog-blocks__transitions-scale.md` | Scale Transitions | 2026-06-01 | | [[summaries/sdf-iris]] | `raw/docs/catalog-blocks__sdf-iris.md` | SDF Iris | 2026-06-01 | | [[summaries/shatter]] | `raw/docs/catalog-blocks__vfx-shatter.md` | Shatter | 2026-06-01 | | [[summaries/shimmer-sweep]] | `raw/docs/catalog-components__shimmer-sweep.md` | Shimmer Sweep | 2026-06-01 | | [[summaries/showcase]] | `raw/docs/docs__showcase.md` | Showcase | 2026-06-01 | | [[summaries/solarized-light]] | `raw/docs/catalog-blocks__code-snippet-solarized-light.md` | Solarized Light | 2026-06-01 | | [[summaries/spain-map]] | `raw/docs/catalog-blocks__spain-map.md` | Spain Map | 2026-06-01 | | [[summaries/spotify-now-playing]] | `raw/docs/catalog-blocks__spotify-card.md` | Spotify Now Playing | 2026-06-01 | | [[summaries/studio-manual-dom-editing]] | `raw/docs/contributing__studio-manual-dom-editing.md` | Studio Manual DOM Editing | 2026-06-01 | | [[summaries/swirl-vortex]] | `raw/docs/catalog-blocks__swirl-vortex.md` | Swirl Vortex | 2026-06-01 | | [[summaries/templates-on-lambda]] | `raw/docs/deploy__templates-on-lambda.md` | Templates on Lambda | 2026-06-01 | | [[summaries/testing-local-cli-changes]] | `raw/docs/contributing__testing-local-changes.md` | Testing Local CLI Changes | 2026-06-01 | | [[summaries/texture]] | `raw/docs/catalog-components__caption-texture.md` | Texture | 2026-06-01 | | [[summaries/texture-mask-text]] | `raw/docs/catalog-components__texture-mask-text.md` | Texture Mask Text | 2026-06-01 | | [[summaries/the-pipeline]] | `raw/docs/guides__pipeline.md` | The Pipeline | 2026-06-01 | | [[summaries/thermal-distortion]] | `raw/docs/catalog-blocks__thermal-distortion.md` | Thermal Distortion | 2026-06-01 | | [[summaries/tiktok-follow]] | `raw/docs/catalog-blocks__tiktok-follow.md` | TikTok Follow | 2026-06-01 | | [[summaries/timeline-editing]] | `raw/docs/guides__timeline-editing.md` | Timeline Editing | 2026-06-01 | | [[summaries/troubleshooting]] | `raw/docs/guides__troubleshooting.md` | Troubleshooting | 2026-06-01 | | [[summaries/us-bubble-map]] | `raw/docs/catalog-blocks__us-map-bubble.md` | US Bubble Map | 2026-06-01 | | [[summaries/us-flow-map]] | `raw/docs/catalog-blocks__us-map-flow.md` | US Flow Map | 2026-06-01 | | [[summaries/us-hex-grid-map]] | `raw/docs/catalog-blocks__us-map-hex.md` | US Hex Grid Map | 2026-06-01 | | [[summaries/us-map]] | `raw/docs/catalog-blocks__us-map.md` | US Map | 2026-06-01 | | [[summaries/variables]] | `raw/docs/concepts__variables.md` | Variables | 2026-06-01 | | [[summaries/vfx-text-cursor]] | `raw/docs/catalog-blocks__vfx-text-cursor.md` | VFX Text Cursor | 2026-06-01 | | [[summaries/video-editor-cheatsheet]] | `raw/docs/guides__video-editor-cheatsheet.md` | Video Editor Cheatsheet | 2026-06-01 | | [[summaries/visual-studio-dark]] | `raw/docs/catalog-blocks__code-snippet-visual-studio-dark.md` | Visual Studio Dark | 2026-06-01 | | [[summaries/visual-studio-light]] | `raw/docs/catalog-blocks__code-snippet-visual-studio-light.md` | Visual Studio Light | 2026-06-01 | | [[summaries/vpn-youtube-spot]] | `raw/docs/catalog-blocks__vpn-youtube-spot.md` | VPN YouTube Spot | 2026-06-01 | | [[summaries/website-to-video]] | `raw/docs/guides__website-to-video.md` | Website to Video | 2026-06-01 | | [[summaries/weight-shift]] | `raw/docs/catalog-components__caption-weight-shift.md` | Weight Shift | 2026-06-01 | | [[summaries/whip-pan]] | `raw/docs/catalog-blocks__whip-pan.md` | Whip Pan | 2026-06-01 | | [[summaries/world-map]] | `raw/docs/catalog-blocks__world-map.md` | World Map | 2026-06-01 | | [[summaries/x-post-card]] | `raw/docs/catalog-blocks__x-post.md` | X Post Card | 2026-06-01 | | [[summaries/youtube-lower-third]] | `raw/docs/catalog-blocks__yt-lower-third.md` | YouTube Lower Third | 2026-06-01 | ## Syntheses | Page | Pages Compared | Created | |------|----------------|---------| | [[syntheses/authoring-checklist]] | checklist, composition, troubleshooting, agent-workflow | 2026-06-01 | | [[syntheses/docs-map]] | docs, comparison, overview | 2026-06-01 | | [[syntheses/tonbi-followup-content-angle]] | agent-workflow, overview, website-to-video | 2026-06-01 | ## Statistics - **Total pages**: 161 - **Concepts**: 13 - **Entities**: 5 - **Summaries**: 143 - **Syntheses**: 3 - **Sources ingested**: 144 - **High confidence**: 163 - **Medium confidence**: 1 - **Low confidence**: 0 - **Failed fetches**: 0 ## Operator ring (added 2026-06-09) - [[concepts/cli-reference]] — the hyperframes command: init/render/cloud render/auth flags, agent-mode JSON --- title: "Authoring Model" type: concept tags: [composition, html, data-attributes, timeline] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/concepts__compositions.md", "raw/docs/reference__html-schema.md", "raw/docs/concepts__data-attributes.md"] confidence: high --- # Authoring Model ## Definition The HyperFrames authoring model is HTML-first. A composition is an HTML document whose elements are time-aware through `data-*` attributes. CSS controls layout/style; animation runtimes like GSAP can be added when their timelines are seekable. ## How It Works The root element identifies the composition and canvas. Child elements become timed clips. Elements can be arranged as scenes, sub-compositions, overlays, captions, media layers, or reusable catalog blocks. The linter and validator inspect whether timing, composition metadata, and runtime behavior are renderable. ## Key Parameters - Root: `data-composition-id`, `data-start`, `data-width`, `data-height`. - Clips: `class="clip"`, `data-start`, `data-duration`, `data-track-index`. - Media: `muted`, `playsinline`, source paths, audio volume. - Sub-compositions: composition source attributes where supported by the project pattern. ## When To Use Use this model whenever you want an agent or developer to edit video source as code. ## Risks & Pitfalls Missing `class="clip"` or timing attributes can make elements invisible or incorrectly timed. Large single-file compositions become hard to inspect; split coherent scenes into sub-compositions when needed. ## Related Concepts - [[concepts/data-attributes]] - [[concepts/gsap-animation]] - [[concepts/catalog-system]] ## Sources - `raw/docs/concepts__compositions.md` - `raw/docs/concepts__data-attributes.md` - `raw/docs/reference__html-schema.md` --- title: "Catalog System" type: concept tags: [catalog, block, component, transition] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/docs__examples.md", "raw/docs/docs-index-llms.md"] confidence: high --- # Catalog System ## Definition The HyperFrames catalog is a library of reusable blocks and components documented in the official docs. The docs index currently lists 96 catalog pages across blocks and components. ## How It Works Catalog pages document ready-made visual patterns: product showcases, maps, charts, code themes, captions, social cards, transitions, VFX, UI reveals, and overlays. These serve as starting points for composition scenes or reusable sub-compositions. ## Key Parameters - Block/component name. - Category: block or component. - Visual role: transition, caption, social card, map, data visualization, VFX, product UI, code snippet. - Compatibility with deterministic render and project assets. ## When To Use Use catalog items to speed up production and maintain a high visual bar without inventing every scene from scratch. Relevant groups: [[entities/catalog-transition-blocks]], [[entities/catalog-social-and-ui-blocks]], [[entities/catalog-data-and-map-blocks]], and [[entities/catalog-caption-components]]. ## Risks & Pitfalls Catalog blocks are source material, not a license to over-stack effects. Pick one or two hero effects per video. Preserve the source’s identity. ## Related Concepts - [[entities/catalog-transition-blocks]] - [[entities/catalog-social-and-ui-blocks]] - [[entities/catalog-data-and-map-blocks]] - [[entities/catalog-caption-components]] ## Sources - `raw/docs/docs-index-llms.md` - Catalog raw docs under `raw/docs/catalog-*__*.md` --- title: "CLI Reference — the hyperframes Command" type: concept tags: [cli, commands, reference, rendering] updated: 2026-06-09 confidence: high sources: ["raw/docs/packages__cli.md"] --- # CLI Reference — the `hyperframes` Command The CLI is "the primary way to work with HyperFrames": project creation, live preview, rendering, linting, diagnostics. Install globally (`npm install -g hyperframes`) or run via `npx hyperframes `. ## Agent-friendly by default Commands default to **agent mode** (non-interactive, machine-parsable); `--human-friendly` switches to interactive prompts where supported (it's command-specific, e.g. `catalog`, not global). JSON output ships in a **`_meta` envelope**; update notices are passive. ## `init` — scaffold a project ```bash npx hyperframes init my-video --example blank --video video.mp4 # agent mode: --example required npx hyperframes init my-video --example blank --tailwind ``` Key flags: `--example/-e` (required in agent mode; e.g. `blank`, `warm-grain`), `--resolution` (`landscape` 1920×1080 · `portrait` · `landscape-4k` · `portrait-4k` · `square` · `square-4k`, aliases `1080p`/`4k`/…; default keeps template dimensions), `--video/-V` (MP4/WebM/MOV), `--audio/-a` (MP3/WAV/M4A), `--tailwind`, `--skip-skills`, `--skip-transcribe`, `--model` (whisper size, e.g. `large-v3`), `--language`. ## Render — local and cloud ```bash npx hyperframes render --output output.mp4 --fps 30 --quality standard ``` `cloud render []` flags: `--fps` (1–240, default 30), `--quality` (`draft`/`standard`/`high`), `--format` (`mp4`/`webm`/`mov`), `--resolution` (presets as above), `--composition/-c` (default `index.html`), `--variables` / `--variables-file` (override `data-composition-variables`), `--strict-variables`, `--title`. ## `auth` — cloud credentials `auth login --api-key` (hidden prompt, or pipe from stdin for CI) · `auth status` · `auth logout`. Env vars: `HEYGEN_API_KEY` (or alias `HYPERFRAMES_API_KEY`), `HEYGEN_API_URL`, `HEYGEN_CONFIG_DIR` (default `~/.heygen`). ## Maintenance `upgrade --check --json` · `catalog --human-friendly` (browse the block/component library — [[concepts/catalog-system]]). Full per-command tables: `raw/docs/packages__cli.md`. Related: [[concepts/rendering-pipeline]] · [[concepts/deterministic-rendering]] · [[concepts/common-mistakes-and-troubleshooting]]. --- title: "Common Mistakes and Troubleshooting" type: concept tags: [common-mistakes, troubleshooting, checklist] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/guides__common-mistakes.md", "raw/docs/guides__troubleshooting.md"] confidence: high --- # Common Mistakes and Troubleshooting ## Definition Common mistakes and troubleshooting pages cover the failure modes that prevent compositions from linting, validating, rendering, or looking correct. ## How It Works Failures usually come from incomplete timing metadata, non-deterministic animation, missing assets, console errors, layout overflow, inaccessible contrast, non-seekable runtime behavior, or environment setup issues. ## Key Parameters - `npm run check` / lint + validate + inspect results. - Browser console errors. - Contrast warnings. - Layout samples across the timeline. - Asset paths and media availability. ## When To Use Use before any final render and after every meaningful composition edit. ## Risks & Pitfalls Warnings can still matter: contrast warnings hurt readability; WebGL warnings may indicate fallback behavior; large files slow iteration. ## Related Concepts - [[concepts/deterministic-rendering]] - [[concepts/rendering-pipeline]] - [[syntheses/authoring-checklist]] ## Sources - `raw/docs/guides__common-mistakes.md` - `raw/docs/guides__troubleshooting.md` --- title: "Data Attributes" type: concept tags: [data-attributes, composition, timeline] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/concepts__data-attributes.md", "raw/docs/reference__html-schema.md"] confidence: high --- # Data Attributes ## Definition Data attributes are the timing and metadata layer that turns ordinary HTML into a HyperFrames composition. ## How It Works Attributes on the root identify the composition and dimensions. Attributes on elements define when each layer appears, how long it lasts, and where it sits in the track stack. The renderer samples these attributes during frame capture. ## Key Parameters - `data-composition-id`: composition identity. - `data-width`, `data-height`: canvas dimensions. - `data-start`: start time in seconds. - `data-duration`: duration in seconds. - `data-track-index`: layer/track order. - `data-volume`: audio volume when present. ## When To Use Use data attributes on every render-critical timed element. Treat them as the video timeline encoded in HTML. ## Risks & Pitfalls Do not hide timing in JavaScript state that cannot be inspected. Ensure visible timed elements use the expected clip conventions from the project’s HyperFrames version. ## Related Concepts - [[concepts/authoring-model]] - [[concepts/rendering-pipeline]] - [[concepts/common-mistakes-and-troubleshooting]] ## Sources - `raw/docs/concepts__data-attributes.md` - `raw/docs/reference__html-schema.md` --- title: "Deployment and Performance" type: concept tags: [deployment, performance, 4k, hdr] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/guides__deploy.md", "raw/docs/deploy__aws-lambda.md", "raw/docs/guides__performance.md", "raw/docs/guides__4k-rendering.md", "raw/docs/guides__hdr.md"] confidence: high --- # Deployment and Performance ## Definition Deployment and performance cover running HyperFrames renders outside local development and tuning output for demanding formats such as 4K or HDR. ## How It Works Official docs include deployment guides, Lambda-specific pages, performance guidance, and specialized render guides. The central concern is ensuring the render environment has the needed browser, encoding, assets, memory, and timeout behavior. ## Key Parameters - Runtime target: local, Docker, server, or Lambda. - Resolution and FPS. - Asset size and loading strategy. - Chrome/FFmpeg availability. - Render duration, memory, and timeout limits. ## When To Use Use for production rendering APIs, scheduled/batch video generation, template rendering, high-resolution output, and automated pipelines. ## Risks & Pitfalls Production environments magnify local assumptions. Pin versions, package assets, validate in the target runtime, and keep compositions deterministic. ## Related Concepts - [[concepts/rendering-pipeline]] - [[entities/hyperframes-packages]] - [[concepts/deterministic-rendering]] ## Sources - `raw/docs/guides__deploy.md` - `raw/docs/deploy__aws-lambda.md` - `raw/docs/guides__performance.md` - `raw/docs/guides__4k-rendering.md` - `raw/docs/guides__hdr.md` --- title: "Deterministic Rendering" type: concept tags: [determinism, rendering, official-source] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/concepts__determinism.md", "raw/docs/docs__introduction.md", "raw/docs/guides__common-mistakes.md"] confidence: high --- # Deterministic Rendering ## Definition Deterministic rendering means the same composition input should produce the same output frames each time. HyperFrames is designed around seek-driven frame capture instead of wall-clock playback. ## How It Works The renderer calculates the frame from time, seeks the page state, captures a frame through Chrome, and encodes the output. Each frame should be independently reproducible. ## Key Parameters - FPS and duration determine frame count. - Timeline state must be seekable. - Assets must be local or stable before render starts. - Animation must use explicit time, not elapsed real time. ## When To Use Always. Determinism is the reason HyperFrames works well for CI, automated rendering, agent edits, regression testing, and video variants. ## Risks & Pitfalls Avoid `Date.now()`, `performance.now()` as source of truth, `Math.random()` without fixed seeds, render-critical network fetches, unawaited async work, and live iframes that change independently of capture. ## Related Concepts - [[concepts/rendering-pipeline]] - [[concepts/gsap-animation]] - [[concepts/common-mistakes-and-troubleshooting]] ## Sources - `raw/docs/concepts__determinism.md` - `raw/docs/guides__common-mistakes.md` --- title: "Frame Adapters" type: concept tags: [frame-adapter, determinism, timeline] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/concepts__frame-adapters.md"] confidence: high --- # Frame Adapters ## Definition Frame adapters are the pattern for connecting animation runtimes to HyperFrames’ seek-driven renderer. ## How It Works An adapter translates render time/frame position into the external runtime’s state. This lets runtimes beyond basic CSS or GSAP participate in deterministic rendering if they can be explicitly seeked. ## Key Parameters - Runtime initialization. - Seek method or equivalent state setter. - Frame/time mapping. - Stable assets and no hidden wall-clock dependencies. ## When To Use Use frame adapters when integrating Lottie, Canvas, WebGL, Three.js, or custom animation systems that need frame-accurate control. ## Risks & Pitfalls A runtime that cannot seek reliably will produce inconsistent captures. Treat adapter code as render-critical infrastructure. ## Related Concepts - [[concepts/deterministic-rendering]] - [[concepts/gsap-animation]] - [[concepts/html-in-canvas-and-vfx]] ## Sources - `raw/docs/concepts__frame-adapters.md` --- title: "GSAP Animation" type: concept tags: [gsap, timeline, composition] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/guides__gsap-animation.md", "raw/docs/concepts__frame-adapters.md"] confidence: high --- # GSAP Animation ## Definition GSAP is the primary animation runtime used in many HyperFrames compositions because timelines can be made seekable and controlled by render time. ## How It Works Create paused GSAP timelines and expose/register them so HyperFrames can seek them during render. Animation should be tied to the composition timeline rather than running freely on wall-clock time. ## Key Parameters - Paused timeline construction. - Explicit durations and labels. - Registration on the expected global timeline registry for the project/version. - Avoiding random stagger or runtime-generated state unless seeded and stable. ## When To Use Use GSAP for scene transitions, typography, card cascades, chart reveals, UI motion, and any motion that benefits from precise timeline control. ## Risks & Pitfalls Do not let GSAP auto-play independently. Avoid timelines created after validation/render starts. Make sure timeline state is fully seekable and deterministic. ## Related Concepts - [[concepts/deterministic-rendering]] - [[concepts/frame-adapters]] - [[concepts/authoring-model]] ## Sources - `raw/docs/guides__gsap-animation.md` - `raw/docs/concepts__frame-adapters.md` --- title: "HTML-in-Canvas and VFX" type: concept tags: [html-in-canvas, vfx, catalog] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/guides__html-in-canvas.md", "raw/docs/catalog-blocks__vfx-shatter.md", "raw/docs/catalog-blocks__vfx-iphone-device.md"] confidence: high --- # HTML-in-Canvas and VFX ## Definition HTML-in-Canvas and VFX workflows use rendered HTML/UI as material for effects such as shatter, device reveals, liquid glass, portals, and other advanced transitions. ## How It Works The composition captures or recreates UI as deterministic HTML, then uses canvas/WebGL/Three.js-style effects to transform it. This is useful when the UI itself is the hero object, not just a flat screenshot. ## Key Parameters - Source UI fidelity. - Capture or recreation path. - Effect timing and readability. - Whether assets/models are local and render-stable. ## When To Use Use for product trailers, app reveals, cinematic UI transitions, and videos where a web interface turns into motion or a device mockup. ## Risks & Pitfalls Do not let the VFX obscure product recognition. WebGL warnings may be environment-specific; validate and inspect frames. ## Related Concepts - [[concepts/website-to-video-workflow]] - [[concepts/catalog-system]] - [[concepts/rendering-pipeline]] ## Sources - `raw/docs/guides__html-in-canvas.md` - `raw/docs/catalog-blocks__vfx-shatter.md` - `raw/docs/catalog-blocks__vfx-iphone-device.md` --- title: "HyperFrames Overview" type: concept tags: [overview, composition, official-source] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/docs__introduction.md", "raw/docs/docs__quickstart.md"] confidence: high --- # HyperFrames Overview ## Definition HyperFrames is an open-source HTML-to-video framework: define a video as a web page, preview it in a browser, and render it frame-by-frame into a video file. The official positioning is “Write HTML. Render video. Built for agents.” ## How It Works A project contains plain HTML compositions. The root composition declares metadata with data attributes such as `data-composition-id`, `data-width`, `data-height`, and timing attributes. Renderable elements such as text, media, and layers are timed with `data-start`, `data-duration`, and `data-track-index`. HyperFrames loads the HTML in Chrome, seeks frames deterministically, captures frames, and encodes output. ## Key Parameters - Composition size, usually `1920x1080` for 16:9. - Time: `data-start` and `data-duration`. - Layering: `data-track-index`. - Media: video, audio, images, HTML, CSS, SVG, Canvas, Three.js, Lottie, and seekable animation runtimes. ## When To Use Use HyperFrames for source-grounded videos: product explainers, repo explainers, deterministic UI motion, social cards, data stories, launch videos, and agent-generated edits. ## Risks & Pitfalls Do not treat it like prompt-to-video. Render-critical state must be deterministic. Avoid wall-clock time, random numbers, fragile live iframes, and async behavior that changes across frames. ## Related Concepts - [[concepts/authoring-model]] - [[concepts/data-attributes]] - [[concepts/deterministic-rendering]] - [[concepts/rendering-pipeline]] ## Sources - `raw/docs/docs__introduction.md` - `raw/docs/docs__quickstart.md` --- title: "Prompting and Agent Workflow" type: concept tags: [prompting, agent-workflow, common-mistakes] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/guides__prompting.md", "raw/docs/guides__common-mistakes.md", "raw/docs/guides__troubleshooting.md"] confidence: high --- # Prompting and Agent Workflow ## Definition HyperFrames prompting is the practice of instructing AI coding agents to inspect sources, create deterministic HTML compositions, validate them, and iterate with real preview/render feedback. ## How It Works Good prompts specify source material, audience, duration, aspect ratio, visual identity, scene timings, technical constraints, deliverables, and verification steps. Agents should inspect actual sources before writing final scenes and run checks after edits. ## Key Parameters - Source grounding requirements. - Deliverables: design, script, storyboard, composition, checkpoints, render. - Technical constraints: seekable GSAP, no live iframes, deterministic assets, readable text. - Verification: lint, validate, inspect, preview, render. ## When To Use Use for website promos, repo explainers, launch videos, data stories, social cards, and product trailers created by coding agents. ## Risks & Pitfalls Generic prompts produce generic videos. Missing source inspection leads to hallucinated claims. Missing validation leaves hidden render errors. ## Related Concepts - [[concepts/website-to-video-workflow]] - [[concepts/authoring-model]] - [[concepts/common-mistakes-and-troubleshooting]] ## Sources - `raw/docs/guides__prompting.md` - `raw/docs/guides__common-mistakes.md` - `raw/docs/guides__troubleshooting.md` --- title: "Rendering Pipeline" type: concept tags: [rendering, cli, producer, engine] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/guides__rendering.md", "raw/docs/packages__producer.md", "raw/docs/packages__engine.md", "raw/docs/packages__cli.md"] confidence: high --- # Rendering Pipeline ## Definition The rendering pipeline converts HTML compositions into video outputs such as MP4, MOV, or WebM using browser capture and encoding. ## How It Works A render command loads the composition in headless Chrome, advances through frames, captures pixels, handles audio/media, and encodes the final artifact. The engine layer handles seekable page capture; the producer layer handles the complete render pipeline. ## Key Parameters - Output format/path. - Canvas size and FPS. - Chrome/engine availability. - FFmpeg/encoding environment. - Local versus Docker or deployment runtime. ## When To Use Use local rendering for development and final exports. Use deployment/Lambda patterns when rendering needs automation from a backend or service. ## Risks & Pitfalls Validate before rendering. Rendering can expose missing assets, console errors, poor contrast, layout overflow, non-seekable animations, and environment issues. ## Related Concepts - [[entities/hyperframes-packages]] - [[concepts/deterministic-rendering]] - [[concepts/deployment-and-performance]] ## Sources - `raw/docs/guides__rendering.md` - `raw/docs/packages__producer.md` - `raw/docs/packages__engine.md` - `raw/docs/packages__cli.md` --- title: "Website to Video Workflow" type: concept tags: [website-to-video, agent-workflow, prompting] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/guides__website-to-video.md", "raw/docs/guides__prompting.md", "raw/docs/guides__claude-design.md"] confidence: high --- # Website to Video Workflow ## Definition Website-to-video is a HyperFrames workflow for converting a real website into a source-grounded promo, explainer, or launch video. ## How It Works The agent inspects/captures the site, extracts visual identity and copy, writes a script/storyboard/design brief, recreates key sections deterministically in HTML/CSS, adds motion, validates, previews, and renders. ## Key Parameters - Source URL and target audience. - Duration/aspect ratio. - Brand colors, typography, screenshots, claims, and CTAs. - Whether to use captured imagery or deterministic HTML recreation. ## When To Use Use for launch videos, SaaS explainers, newsletter promos, product demos, founder updates, and social ads where fidelity to an existing site matters. ## Risks & Pitfalls Do not invent claims or features not present in the site. Avoid fragile live iframes for render-critical UI. Keep text large enough for social playback. ## Related Concepts - [[concepts/prompting-and-agent-workflow]] - [[concepts/html-in-canvas-and-vfx]] - [[concepts/catalog-system]] ## Sources - `raw/docs/guides__website-to-video.md` - `raw/docs/guides__prompting.md` - `raw/docs/guides__claude-design.md` --- title: "Catalog Caption Components" type: entity tags: [caption, component, catalog] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/docs-index-llms.md", "raw/docs/catalog-blocks__glitch.md", "raw/docs/catalog-components__caption-blend-difference.md", "raw/docs/catalog-components__caption-clip-wipe.md", "raw/docs/catalog-components__caption-editorial-emphasis.md", "raw/docs/catalog-components__caption-emoji-pop.md", "raw/docs/catalog-components__caption-glitch-rgb.md", "raw/docs/catalog-components__caption-gradient-fill.md", "raw/docs/catalog-components__caption-highlight.md", "raw/docs/catalog-components__caption-kinetic-slam.md", "raw/docs/catalog-components__caption-matrix-decode.md", "raw/docs/catalog-components__caption-neon-accent.md", "raw/docs/catalog-components__caption-neon-glow.md", "raw/docs/catalog-components__caption-parallax-layers.md", "raw/docs/catalog-components__caption-particle-burst.md", "raw/docs/catalog-components__caption-pill-karaoke.md", "raw/docs/catalog-components__caption-texture.md", "raw/docs/catalog-components__caption-weight-shift.md", "raw/docs/catalog-components__texture-mask-text.md"] confidence: high --- # Catalog Caption Components ## Overview This entity page groups official catalog docs that are useful together. Use it as a shopping list when designing a scene. ## Characteristics | Block/Component | Raw doc | Use cue | |---|---|---| | Glitch | `raw/docs/catalog-blocks__glitch.md` | Shader transition with digital glitch artifacts | | Blend Difference | `raw/docs/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 | `raw/docs/catalog-components__caption-clip-wipe.md` | Left-to-right clip-path wipe reveal per word | | Editorial Emphasis | `raw/docs/catalog-components__caption-editorial-emphasis.md` | Dual-font system with dramatic size contrast for emphasis words | | Emoji Pop | `raw/docs/catalog-components__caption-emoji-pop.md` | Emoji integration with stroked text and horizontal squeeze entrance | | Glitch RGB | `raw/docs/catalog-components__caption-glitch-rgb.md` | RGB chromatic aberration with CRT scanline overlay | | Gradient Fill | `raw/docs/catalog-components__caption-gradient-fill.md` | Gradient-clipped text with elastic bounce entrance | | Highlight | `raw/docs/catalog-components__caption-highlight.md` | Red background sweep behind each active word, TikTok-style | | Kinetic Slam | `raw/docs/catalog-components__caption-kinetic-slam.md` | Full-screen single-word display with alternating entrance directions | | Matrix Decode | `raw/docs/catalog-components__caption-matrix-decode.md` | Character scramble animation before text reveal | | Neon Accent | `raw/docs/catalog-components__caption-neon-accent.md` | Multi-color neon glow accents with wiggle drift animation | | Neon Glow | `raw/docs/catalog-components__caption-neon-glow.md` | Cyan and magenta neon glow with keyword accent colors | | Parallax Layers | `raw/docs/catalog-components__caption-parallax-layers.md` | Behind-subject 3D text layering with vertical stretch effect | | Particle Burst | `raw/docs/catalog-components__caption-particle-burst.md` | Keyword words trigger colored particle explosions | | Pill Karaoke | `raw/docs/catalog-components__caption-pill-karaoke.md` | Pill-shaped container with per-word karaoke color highlight | | Texture | `raw/docs/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 | `raw/docs/catalog-components__caption-weight-shift.md` | Elegant font-weight transition between caption lines | | Texture Mask Text | `raw/docs/catalog-components__texture-mask-text.md` | - [Vignette](https://hyperframes.mintlify.app/catalog/components/vignette.md): Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center | ## Common Strategies - Pick one primary block/effect per scene. - Prefer source-grounded UI and readable captions over decorative effects. - Validate the composition after adding catalog code. ## Related Entities - [[concepts/catalog-system]] - [[concepts/authoring-model]] - [[concepts/deterministic-rendering]] ## Sources - `raw/docs/docs-index-llms.md` - Grouped catalog raw docs listed above. --- title: "Catalog Data and Map Blocks" type: entity tags: [data-viz, map, catalog, block] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/docs-index-llms.md", "raw/docs/catalog-blocks__data-chart.md", "raw/docs/catalog-blocks__flowchart.md", "raw/docs/catalog-blocks__north-korea-locked-down.md", "raw/docs/catalog-blocks__nyc-paris-flight.md", "raw/docs/catalog-blocks__spain-map.md", "raw/docs/catalog-blocks__us-map.md", "raw/docs/catalog-blocks__us-map-bubble.md", "raw/docs/catalog-blocks__us-map-flow.md", "raw/docs/catalog-blocks__us-map-hex.md", "raw/docs/catalog-blocks__world-map.md"] confidence: high --- # Catalog Data and Map Blocks ## Overview This entity page groups official catalog docs that are useful together. Use it as a shopping list when designing a scene. ## Characteristics | Block/Component | Raw doc | Use cue | |---|---|---| | Data Chart | `raw/docs/catalog-blocks__data-chart.md` | Animated bar + line chart with staggered reveal, NYT-style typography, and value labels | | Flowchart | `raw/docs/catalog-blocks__flowchart.md` | Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction | | North Korea Locked Down | `raw/docs/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 | `raw/docs/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. | | Spain Map | `raw/docs/catalog-blocks__spain-map.md` | Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection | | US Map | `raw/docs/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 | `raw/docs/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 | `raw/docs/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 | `raw/docs/catalog-blocks__us-map-hex.md` | Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label | | World Map | `raw/docs/catalog-blocks__world-map.md` | Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection | ## Common Strategies - Pick one primary block/effect per scene. - Prefer source-grounded UI and readable captions over decorative effects. - Validate the composition after adding catalog code. ## Related Entities - [[concepts/catalog-system]] - [[concepts/authoring-model]] - [[concepts/deterministic-rendering]] ## Sources - `raw/docs/docs-index-llms.md` - Grouped catalog raw docs listed above. --- title: "Catalog Social and UI Blocks" type: entity tags: [social-card, ui, catalog, block] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/docs-index-llms.md", "raw/docs/catalog-blocks__app-showcase.md", "raw/docs/catalog-blocks__apple-money-count.md", "raw/docs/catalog-blocks__blue-sweater-intro-video.md", "raw/docs/catalog-blocks__chromatic-radial-split.md", "raw/docs/catalog-blocks__cinematic-zoom.md", "raw/docs/catalog-blocks__code-snippet-dark-2026.md", "raw/docs/catalog-blocks__code-snippet-dark-modern.md", "raw/docs/catalog-blocks__code-snippet-dark-plus.md", "raw/docs/catalog-blocks__code-snippet-high-contrast.md", "raw/docs/catalog-blocks__code-snippet-high-contrast-light.md", "raw/docs/catalog-blocks__code-snippet-light-2026.md", "raw/docs/catalog-blocks__code-snippet-light-modern.md", "raw/docs/catalog-blocks__code-snippet-light-plus.md", "raw/docs/catalog-blocks__code-snippet-monokai.md", "raw/docs/catalog-blocks__code-snippet-solarized-light.md", "raw/docs/catalog-blocks__code-snippet-visual-studio-dark.md", "raw/docs/catalog-blocks__code-snippet-visual-studio-light.md", "raw/docs/catalog-blocks__cross-warp-morph.md", "raw/docs/catalog-blocks__data-chart.md"] confidence: high --- # Catalog Social and UI Blocks ## Overview This entity page groups official catalog docs that are useful together. Use it as a shopping list when designing a scene. ## Characteristics | Block/Component | Raw doc | Use cue | |---|---|---| | App Showcase | `raw/docs/catalog-blocks__app-showcase.md` | Fitness app product showcase with three floating smartphone screens | | Apple Money Count | `raw/docs/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. | | Blue Sweater Intro Video | `raw/docs/catalog-blocks__blue-sweater-intro-video.md` | Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_. | | Chromatic Radial Split | `raw/docs/catalog-blocks__chromatic-radial-split.md` | Shader transition with chromatic aberration radial split | | Cinematic Zoom | `raw/docs/catalog-blocks__cinematic-zoom.md` | Shader transition with dramatic zoom blur | | Dark 2026 | `raw/docs/catalog-blocks__code-snippet-dark-2026.md` | The newest VS Code dark theme with refined token scopes and updated palette. | | Dark Modern | `raw/docs/catalog-blocks__code-snippet-dark-modern.md` | The default dark theme — clean and contemporary with comfortable contrast. | | Dark+ | `raw/docs/catalog-blocks__code-snippet-dark-plus.md` | Classic dark theme with enhanced syntax highlighting for popular languages. | | High Contrast | `raw/docs/catalog-blocks__code-snippet-high-contrast.md` | Maximum contrast dark theme for accessibility. | | High Contrast Light | `raw/docs/catalog-blocks__code-snippet-high-contrast-light.md` | Maximum contrast light theme for accessibility. | | Light 2026 | `raw/docs/catalog-blocks__code-snippet-light-2026.md` | The newest VS Code light theme with refined token scopes and updated palette. | | Light Modern | `raw/docs/catalog-blocks__code-snippet-light-modern.md` | The default light theme — a fresh, modern take on the classic VS light experience. | | Light+ | `raw/docs/catalog-blocks__code-snippet-light-plus.md` | Classic light theme with enhanced syntax highlighting for popular languages. | | Monokai | `raw/docs/catalog-blocks__code-snippet-monokai.md` | The iconic warm-toned dark theme beloved by developers worldwide. | | Solarized Light | `raw/docs/catalog-blocks__code-snippet-solarized-light.md` | Ethan Schoonover's precision-engineered light color scheme. | | Visual Studio Dark | `raw/docs/catalog-blocks__code-snippet-visual-studio-dark.md` | The traditional Visual Studio dark color scheme. | | Visual Studio Light | `raw/docs/catalog-blocks__code-snippet-visual-studio-light.md` | The traditional Visual Studio light color scheme. | | Cross Warp Morph | `raw/docs/catalog-blocks__cross-warp-morph.md` | Shader transition with cross-warped morphing | | Data Chart | `raw/docs/catalog-blocks__data-chart.md` | Animated bar + line chart with staggered reveal, NYT-style typography, and value labels | | Domain Warp Dissolve | `raw/docs/catalog-blocks__domain-warp-dissolve.md` | Shader transition with fractal noise domain warping | | Flash Through White | `raw/docs/catalog-blocks__flash-through-white.md` | Shader transition with white flash crossfade | | Flowchart | `raw/docs/catalog-blocks__flowchart.md` | Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction | | Glitch | `raw/docs/catalog-blocks__glitch.md` | Shader transition with digital glitch artifacts | | Gravitational Lens | `raw/docs/catalog-blocks__gravitational-lens.md` | Shader transition with gravitational lensing distortion | | Instagram Follow | `raw/docs/catalog-blocks__instagram-follow.md` | Animated Instagram follow overlay with profile card and follow button | | iOS 26 Liquid Glass Home Screen | `raw/docs/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 | `raw/docs/catalog-blocks__light-leak.md` | Shader transition with cinematic light leak overlay | | Liquid Glass Context Menu | `raw/docs/catalog-blocks__liquid-glass-context-menu.md` | Frosted glass context menu panel drifting over an aurora shader background | | Liquid Glass Media Controls | `raw/docs/catalog-blocks__liquid-glass-media-controls.md` | Frosted glass media control panels spreading over an aurora shader background | | Liquid Glass Notification | `raw/docs/catalog-blocks__liquid-glass-notification.md` | Frosted glass notification cards floating over an aurora shader background | | Liquid Glass Widgets | `raw/docs/catalog-blocks__liquid-glass-widgets.md` | Frosted glass stat cards, showcase panel and pill chips over an aurora shader background | | Logo Outro | `raw/docs/catalog-blocks__logo-outro.md` | Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill | | macOS Notification | `raw/docs/catalog-blocks__macos-notification.md` | Animated macOS-style notification banner with app icon and message | | macOS Tahoe Liquid Glass Desktop | `raw/docs/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. | | North Korea Locked Down | `raw/docs/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 | `raw/docs/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. | | Reddit Post Card | `raw/docs/catalog-blocks__reddit-post.md` | Animated Reddit post card overlay with upvotes and comments | | Ridged Burn | `raw/docs/catalog-blocks__ridged-burn.md` | Shader transition with ridged turbulence burn effect | | Ripple Waves | `raw/docs/catalog-blocks__ripple-waves.md` | Shader transition with concentric ripple wave distortion | | SDF Iris | `raw/docs/catalog-blocks__sdf-iris.md` | Shader transition with signed distance field iris reveal | | Spain Map | `raw/docs/catalog-blocks__spain-map.md` | Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection | | Spotify Now Playing | `raw/docs/catalog-blocks__spotify-card.md` | Animated Spotify now-playing card with album art and progress bar | | Swirl Vortex | `raw/docs/catalog-blocks__swirl-vortex.md` | Shader transition with swirling vortex distortion | | Thermal Distortion | `raw/docs/catalog-blocks__thermal-distortion.md` | Shader transition with heat haze thermal distortion | | TikTok Follow | `raw/docs/catalog-blocks__tiktok-follow.md` | Animated TikTok follow overlay with profile card and follow button | | 3D Transitions | `raw/docs/catalog-blocks__transitions-3d.md` | Showcase of 3D perspective flip and rotate transitions | | Blur Transitions | `raw/docs/catalog-blocks__transitions-blur.md` | Showcase of blur-based transitions between scenes | | Cover Transitions | `raw/docs/catalog-blocks__transitions-cover.md` | Showcase of cover/uncover slide transitions | | Destruction Transitions | `raw/docs/catalog-blocks__transitions-destruction.md` | Showcase of destructive break-apart transitions | | Dissolve Transitions | `raw/docs/catalog-blocks__transitions-dissolve.md` | Showcase of dissolve and fade transitions | | Distortion Transitions | `raw/docs/catalog-blocks__transitions-distortion.md` | Showcase of warp and distortion transitions | | Grid Transitions | `raw/docs/catalog-blocks__transitions-grid.md` | Showcase of grid-based tile transitions | | Light Transitions | `raw/docs/catalog-blocks__transitions-light.md` | Showcase of light-based glow and flash transitions | | Mechanical Transitions | `raw/docs/catalog-blocks__transitions-mechanical.md` | Showcase of mechanical shutter and iris transitions | | Other Transitions | `raw/docs/catalog-blocks__transitions-other.md` | Showcase of miscellaneous creative transitions | | Push Transitions | `raw/docs/catalog-blocks__transitions-push.md` | Showcase of push and slide transitions | | Radial Transitions | `raw/docs/catalog-blocks__transitions-radial.md` | Showcase of radial wipe and reveal transitions | | Scale Transitions | `raw/docs/catalog-blocks__transitions-scale.md` | Showcase of scale and zoom transitions | | 3D UI Reveal | `raw/docs/catalog-blocks__ui-3d-reveal.md` | Perspective 3D reveal animation for UI elements | | US Map | `raw/docs/catalog-blocks__us-map.md` | Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP | ## Common Strategies - Pick one primary block/effect per scene. - Prefer source-grounded UI and readable captions over decorative effects. - Validate the composition after adding catalog code. ## Related Entities - [[concepts/catalog-system]] - [[concepts/authoring-model]] - [[concepts/deterministic-rendering]] ## Sources - `raw/docs/docs-index-llms.md` - Grouped catalog raw docs listed above. --- title: "Catalog Transition Blocks" type: entity tags: [transition, catalog, block] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/docs-index-llms.md", "raw/docs/catalog-blocks__chromatic-radial-split.md", "raw/docs/catalog-blocks__cinematic-zoom.md", "raw/docs/catalog-blocks__code-snippet-high-contrast-light.md", "raw/docs/catalog-blocks__code-snippet-light-2026.md", "raw/docs/catalog-blocks__code-snippet-light-modern.md", "raw/docs/catalog-blocks__code-snippet-light-plus.md", "raw/docs/catalog-blocks__code-snippet-solarized-light.md", "raw/docs/catalog-blocks__code-snippet-visual-studio-light.md", "raw/docs/catalog-blocks__cross-warp-morph.md", "raw/docs/catalog-blocks__domain-warp-dissolve.md", "raw/docs/catalog-blocks__glitch.md", "raw/docs/catalog-blocks__light-leak.md", "raw/docs/catalog-blocks__nyc-paris-flight.md", "raw/docs/catalog-blocks__ridged-burn.md", "raw/docs/catalog-blocks__ripple-waves.md", "raw/docs/catalog-blocks__sdf-iris.md", "raw/docs/catalog-blocks__swirl-vortex.md", "raw/docs/catalog-blocks__thermal-distortion.md", "raw/docs/catalog-blocks__transitions-3d.md"] confidence: high --- # Catalog Transition Blocks ## Overview This entity page groups official catalog docs that are useful together. Use it as a shopping list when designing a scene. ## Characteristics | Block/Component | Raw doc | Use cue | |---|---|---| | Chromatic Radial Split | `raw/docs/catalog-blocks__chromatic-radial-split.md` | Shader transition with chromatic aberration radial split | | Cinematic Zoom | `raw/docs/catalog-blocks__cinematic-zoom.md` | Shader transition with dramatic zoom blur | | High Contrast Light | `raw/docs/catalog-blocks__code-snippet-high-contrast-light.md` | Maximum contrast light theme for accessibility. | | Light 2026 | `raw/docs/catalog-blocks__code-snippet-light-2026.md` | The newest VS Code light theme with refined token scopes and updated palette. | | Light Modern | `raw/docs/catalog-blocks__code-snippet-light-modern.md` | The default light theme — a fresh, modern take on the classic VS light experience. | | Light+ | `raw/docs/catalog-blocks__code-snippet-light-plus.md` | Classic light theme with enhanced syntax highlighting for popular languages. | | Solarized Light | `raw/docs/catalog-blocks__code-snippet-solarized-light.md` | Ethan Schoonover's precision-engineered light color scheme. | | Visual Studio Light | `raw/docs/catalog-blocks__code-snippet-visual-studio-light.md` | The traditional Visual Studio light color scheme. | | Cross Warp Morph | `raw/docs/catalog-blocks__cross-warp-morph.md` | Shader transition with cross-warped morphing | | Domain Warp Dissolve | `raw/docs/catalog-blocks__domain-warp-dissolve.md` | Shader transition with fractal noise domain warping | | Glitch | `raw/docs/catalog-blocks__glitch.md` | Shader transition with digital glitch artifacts | | Light Leak | `raw/docs/catalog-blocks__light-leak.md` | Shader transition with cinematic light leak overlay | | NYC Paris Flight | `raw/docs/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. | | Ridged Burn | `raw/docs/catalog-blocks__ridged-burn.md` | Shader transition with ridged turbulence burn effect | | Ripple Waves | `raw/docs/catalog-blocks__ripple-waves.md` | Shader transition with concentric ripple wave distortion | | SDF Iris | `raw/docs/catalog-blocks__sdf-iris.md` | Shader transition with signed distance field iris reveal | | Swirl Vortex | `raw/docs/catalog-blocks__swirl-vortex.md` | Shader transition with swirling vortex distortion | | Thermal Distortion | `raw/docs/catalog-blocks__thermal-distortion.md` | Shader transition with heat haze thermal distortion | | 3D Transitions | `raw/docs/catalog-blocks__transitions-3d.md` | Showcase of 3D perspective flip and rotate transitions | | Blur Transitions | `raw/docs/catalog-blocks__transitions-blur.md` | Showcase of blur-based transitions between scenes | | Cover Transitions | `raw/docs/catalog-blocks__transitions-cover.md` | Showcase of cover/uncover slide transitions | | Destruction Transitions | `raw/docs/catalog-blocks__transitions-destruction.md` | Showcase of destructive break-apart transitions | | Dissolve Transitions | `raw/docs/catalog-blocks__transitions-dissolve.md` | Showcase of dissolve and fade transitions | | Distortion Transitions | `raw/docs/catalog-blocks__transitions-distortion.md` | Showcase of warp and distortion transitions | | Grid Transitions | `raw/docs/catalog-blocks__transitions-grid.md` | Showcase of grid-based tile transitions | | Light Transitions | `raw/docs/catalog-blocks__transitions-light.md` | Showcase of light-based glow and flash transitions | | Mechanical Transitions | `raw/docs/catalog-blocks__transitions-mechanical.md` | Showcase of mechanical shutter and iris transitions | | Other Transitions | `raw/docs/catalog-blocks__transitions-other.md` | Showcase of miscellaneous creative transitions | | Push Transitions | `raw/docs/catalog-blocks__transitions-push.md` | Showcase of push and slide transitions | | Radial Transitions | `raw/docs/catalog-blocks__transitions-radial.md` | Showcase of radial wipe and reveal transitions | | Scale Transitions | `raw/docs/catalog-blocks__transitions-scale.md` | Showcase of scale and zoom transitions | | Whip Pan | `raw/docs/catalog-blocks__whip-pan.md` | Shader transition simulating a fast camera whip pan | | Clip Wipe | `raw/docs/catalog-components__caption-clip-wipe.md` | Left-to-right clip-path wipe reveal per word | | Glitch RGB | `raw/docs/catalog-components__caption-glitch-rgb.md` | RGB chromatic aberration with CRT scanline overlay | | Highlight | `raw/docs/catalog-components__caption-highlight.md` | Red background sweep behind each active word, TikTok-style | | Grid Pixelate Wipe | `raw/docs/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 | | Parallax Unzoom | `raw/docs/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 | `raw/docs/catalog-components__parallax-zoom.md` | Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition | ## Common Strategies - Pick one primary block/effect per scene. - Prefer source-grounded UI and readable captions over decorative effects. - Validate the composition after adding catalog code. ## Related Entities - [[concepts/catalog-system]] - [[concepts/authoring-model]] - [[concepts/deterministic-rendering]] ## Sources - `raw/docs/docs-index-llms.md` - Grouped catalog raw docs listed above. --- title: "HyperFrames Packages" type: entity tags: [package, cli, core, engine, player, producer, studio] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/packages__cli.md", "raw/docs/packages__core.md", "raw/docs/packages__engine.md", "raw/docs/packages__player.md", "raw/docs/packages__producer.md", "raw/docs/packages__studio.md"] confidence: high --- # HyperFrames Packages ## Overview The official docs describe a package ecosystem around authoring, validating, previewing, playing, and rendering HyperFrames compositions. ## Characteristics | Package | Role | |---|---| | CLI | Command-line workflow for create, preview, render, publish, docs, and related operations. | | @hyperframes/core | Types, HTML generation, runtime, and linter foundation. | | @hyperframes/engine | Seekable page-to-video capture engine using Chrome/browser capture. | | @hyperframes/player | Embeddable web component/player for compositions. | | @hyperframes/producer | Full rendering pipeline with encoding/audio/Docker-oriented capabilities. | | @hyperframes/studio | Visual composition editor with live preview/timeline/hot reload. | ## Common Strategies - Use CLI for local agent workflows and project scripts. - Use core/engine/producer docs when debugging render internals. - Use player/studio when embedding or visually editing compositions. ## Related Entities - [[concepts/rendering-pipeline]] - [[concepts/authoring-model]] - [[concepts/deployment-and-performance]] ## Sources - Official package docs under `raw/docs/packages__*.md` --- title: "Activity Log" type: log --- # Activity Log Append-only record of all wiki changes. ## Format Each entry follows this format: ``` ### YYYY-MM-DD HH:MM - [Action Type] - **Source/Trigger**: what initiated the action - **Pages created**: list of new pages - **Pages updated**: list of updated pages - **Notes**: any contradictions flagged, decisions made ``` --- ### 2026-06-01 00:00 - Setup - **Source/Trigger**: User requested a HyperFrames knowledge base based on official docs, following the `tonbistudio/llm-wiki` format. - **Pages created**: `CLAUDE.md`, `wiki/SCHEMA.md`, `wiki/index.md`, `wiki/log.md`, `wiki/dashboard.md`, `wiki/analytics.md`, `wiki/flashcards.md`, 143 summary pages, 13 concept pages, 5 entity pages, 3 synthesis pages. - **Raw sources created**: `raw/docs/docs-index-llms.md` plus 143 official docs markdown pages fetched from `hyperframes.mintlify.app`. - **Pages updated**: none. - **Notes**: Failed fetches: 0. The KB uses official docs as raw immutable sources and compiles a navigable LLM Wiki layer under `wiki/`. --- ## 2026-06-10 — removed Obsidian scaffolding from the served wiki Deleted `analytics.md`, `dashboard.md`, `flashcards.md` (Obsidian plugin pages — Dataview/Charts View/Spaced Repetition markup, unusable when served as plain Markdown to agents) and the `journal/` scaffold (template only). `SCHEMA.md` moved to repo root; index Dashboards table removed; total 164 -> 161. `CLAUDE.md` directory layout updated: production/planning material lives at repo root, never under `wiki/` (everything under `wiki/` is served publicly). --- title: "3D Transitions" type: summary tags: [docs, official-source, catalog_blocks] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/catalog-blocks__transitions-3d.md"] confidence: high --- # 3D Transitions ## Key Points - Official docs page: https://hyperframes.mintlify.app/catalog/blocks/transitions-3d.md - Docs-index description: Showcase of 3D perspective flip and rotate transitions - Category: `catalog-blocks`. - Main headings: 3D Transitions, 3D Transitions, Install, Details, Files, Usage. - Command/code entry points seen: ``. ## Relevant Concepts - [[concepts/catalog-system]] ## Source Metadata - Source URL: https://hyperframes.mintlify.app/catalog/blocks/transitions-3d.md - Raw file: `raw/docs/catalog-blocks__transitions-3d.md` - Ingested: 2026-06-01 - Description from docs index: Showcase of 3D perspective flip and rotate transitions --- title: "3D UI Reveal" type: summary tags: [docs, official-source, catalog_blocks] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/catalog-blocks__ui-3d-reveal.md"] confidence: high --- # 3D UI Reveal ## Key Points - Official docs page: https://hyperframes.mintlify.app/catalog/blocks/ui-3d-reveal.md - Docs-index description: Perspective 3D reveal animation for UI elements - Category: `catalog-blocks`. - Main headings: 3D UI Reveal, 3D UI Reveal, Install, Details, Files, Usage. - Command/code entry points seen: ``. ## Relevant Concepts - [[concepts/catalog-system]] ## Source Metadata - Source URL: https://hyperframes.mintlify.app/catalog/blocks/ui-3d-reveal.md - Raw file: `raw/docs/catalog-blocks__ui-3d-reveal.md` - Ingested: 2026-06-01 - Description from docs index: Perspective 3D reveal animation for UI elements --- title: "4K Rendering" type: summary tags: [docs, official-source, guides] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/guides__4k-rendering.md"] confidence: high --- # 4K Rendering ## Key Points - Official docs page: https://hyperframes.mintlify.app/guides/4k-rendering.md - Docs-index description: Render any composition to 4K (3840×2160) without rewriting it — the CLI supersamples a 1080p composition via Chrome's device scale factor. - Category: `guides`. - Main headings: 4K Rendering, Quickstart, Resolution presets, How `--resolution` works (supersampling), What scales, what doesn't, Constraints, Aspect ratio must match, OK — both landscape. - Command/code entry points seen: `The composition's data-width / data-height are unchanged. Chrome's deviceScaleFactor is set to 2, so the captured screenshot for eac`; `## How --resolution works (supersampling)`. ## Relevant Concepts - [[concepts/rendering-pipeline]] ## Source Metadata - Source URL: https://hyperframes.mintlify.app/guides/4k-rendering.md - Raw file: `raw/docs/guides__4k-rendering.md` - Ingested: 2026-06-01 - Description from docs index: Render any composition to 4K (3840×2160) without rewriting it — the CLI supersamples a 1080p composition via Chrome's device scale factor. --- title: "Adopters" type: summary tags: [docs, official-source, community] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/community__adopters.md"] confidence: high --- # Adopters ## Key Points - Official docs page: https://hyperframes.mintlify.app/community/adopters.md - Docs-index description: Organizations using HyperFrames in production or actively evaluating it. - Category: `community`. - Main headings: Adopters, How to add your organization, Production. ## Relevant Concepts - [[concepts/hyperframes-overview]] ## Source Metadata - Source URL: https://hyperframes.mintlify.app/community/adopters.md - Raw file: `raw/docs/community__adopters.md` - Ingested: 2026-06-01 - Description from docs index: Organizations using HyperFrames in production or actively evaluating it. --- title: "App Showcase" type: summary tags: [docs, official-source, catalog_blocks] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/catalog-blocks__app-showcase.md"] confidence: high --- # App Showcase ## Key Points - Official docs page: https://hyperframes.mintlify.app/catalog/blocks/app-showcase.md - Docs-index description: Fitness app product showcase with three floating smartphone screens - Category: `catalog-blocks`. - Main headings: App Showcase, App Showcase, Install, Details, Files, Usage. - Command/code entry points seen: ``. ## Relevant Concepts - [[concepts/catalog-system]] ## Source Metadata - Source URL: https://hyperframes.mintlify.app/catalog/blocks/app-showcase.md - Raw file: `raw/docs/catalog-blocks__app-showcase.md` - Ingested: 2026-06-01 - Description from docs index: Fitness app product showcase with three floating smartphone screens --- title: "Apple Money Count" type: summary tags: [docs, official-source, catalog_blocks] created: 2026-06-01 updated: 2026-06-01 sources: ["raw/docs/catalog-blocks__apple-money-count.md"] confidence: high --- # Apple Money Count ## Key Points - Official docs page: https://hyperframes.mintlify.app/catalog/blocks/apple-money-count.md - Docs-index description: Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound. - Category: `catalog-blocks`. - Main headings: Apple Money Count, Apple Money Count, Source Prompt, Install, Details, Files, Usage. - Command/code entry points seen: `