diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index f379445b7f..8ab61962cb 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "hyperframes", "description": "HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.", - "version": "0.8.62", + "version": "0.8.65", "author": { "name": "HeyGen", "email": "hyperframes@heygen.com", diff --git a/.codex-plugin/plugin.json b/.codex-plugin/plugin.json index 2dd1605c7b..1dc1ed03ef 100644 --- a/.codex-plugin/plugin.json +++ b/.codex-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "hyperframes", "description": "Write HTML, render video. Compositions, Tailwind v4 styles, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.", - "version": "0.8.62", + "version": "0.8.65", "author": { "name": "HeyGen", "email": "hyperframes@heygen.com", diff --git a/.cursor-plugin/plugin.json b/.cursor-plugin/plugin.json index a529c3dfba..36f65c2be4 100644 --- a/.cursor-plugin/plugin.json +++ b/.cursor-plugin/plugin.json @@ -3,7 +3,7 @@ "name": "hyperframes", "displayName": "HyperFrames by HeyGen", "description": "Write HTML, render video. Compositions, Tailwind v4 styles, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.", - "version": "0.8.62", + "version": "0.8.65", "author": { "name": "HeyGen", "email": "hyperframes@heygen.com" diff --git a/.github/workflows/catalog-publish.yml b/.github/workflows/catalog-publish.yml new file mode 100644 index 0000000000..074f9b9f2f --- /dev/null +++ b/.github/workflows/catalog-publish.yml @@ -0,0 +1,41 @@ +name: Publish catalog + +on: + push: + branches: [main] + workflow_dispatch: + +permissions: + contents: write + pull-requests: write + +concurrency: + group: catalog-publish + cancel-in-progress: false + +env: + HYPERFRAMES_NO_TELEMETRY: "1" + +jobs: + publish: + runs-on: ubuntu-latest + timeout-minutes: 30 + steps: + - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4 + with: + ref: main + fetch-depth: 0 + persist-credentials: false + - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2 + - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4 + with: + node-version: 22 + - run: bash scripts/ci/install-workspace-dependencies.sh + - run: bun run --filter '@hyperframes/{parsers,lint,studio-server}' build + - run: bun run --cwd packages/core build + - run: bun run --cwd packages/core build:hyperframes-runtime + - run: bun run check:catalog-drift + - name: Refresh the standing publish PR + run: node scripts/publish-catalog.mjs + env: + GH_TOKEN: ${{ github.token }} diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e3f829bc75..504d2fe3cf 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -80,11 +80,12 @@ jobs: token: "" filters: | catalog_index: - - "registry/registry.json" + - "registry/**" - "registry/catalog-artifact/**" - "skills/media-use/audio/assets/sfx/**" - "scripts/catalog/check-artifact-coverage.ts" docs_catalog: + - "skills/media-use/audio/assets/sfx/**" - "docs/**" - "registry/**" - "scripts/*catalog*" @@ -202,8 +203,8 @@ jobs: node-version: 22 - uses: ./.github/actions/prepare-ffmpeg-bin - run: bash scripts/ci/install-workspace-dependencies.sh + - run: bun scripts/generate-registry-items.ts - run: bun run lint - - run: bun run check:docs-catalog # Loads every catalog payload a PR changes in headless Chrome. A static scan of the # markup cannot see an asset a script fetches, and the docs host serves only fonts, @@ -226,8 +227,26 @@ jobs: - run: bun run --filter '@hyperframes/{parsers,lint,studio-server}' build - run: bun run --cwd packages/core build - run: bun run --cwd packages/core build:hyperframes-runtime + - name: Keep catalog source PRs source-only + if: github.event_name == 'pull_request' + run: node scripts/check-catalog-source-pr.mjs origin/main + - name: Generate and validate catalog + env: + PUBLISH_PR: ${{ github.head_ref == 'bot/catalog-publish' }} + run: | + if [ "$PUBLISH_PR" = "true" ]; then + bun run check:catalog-drift --committed + else + bun run check:catalog-drift + fi - run: bun run verify:catalog-payloads --changed origin/main - - run: bun run check:catalog-drift + - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4 + with: + name: catalog-index + path: | + registry/registry.json + registry/catalog-artifact/local-vectors.json + registry/catalog-artifact/local-vectors.bin # `fallow audit` runs dead-code + complexity + duplication analysis scoped to # the changed files. The default `--gate new-only` means existing legacy @@ -411,6 +430,8 @@ jobs: uses: browser-actions/setup-chrome@c785b87e244131f27c9f19c1a33e2ead956ab7ce # v1 with: chrome-version: stable + - run: bun run generate:catalog + if: needs.changes.outputs.docs_catalog == 'true' - run: bun run test:scripts env: HYPERFRAMES_BROWSER_PATH: ${{ steps.catalog-chrome.outputs.chrome-path }} @@ -525,16 +546,17 @@ jobs: # drift. bun runs the TS script directly, no install needed. catalog-index-coverage: name: "Catalog: search index covers the registry" - needs: changes + needs: [changes, catalog-payloads] if: needs.changes.outputs.catalog_index == 'true' runs-on: ubuntu-latest timeout-minutes: 3 steps: - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4 - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2 - # Comparing two name lists needs neither the embedding model nor a - # network call, so this stays a seconds-long gate. Regenerating the - # vectors does need the model, which is why CI checks rather than fixes. + - uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4 + with: + name: catalog-index + path: registry - name: Verify every searchable registry item has a vector run: bun scripts/catalog/check-artifact-coverage.ts diff --git a/.prettierignore b/.prettierignore index c7120b3873..00c7408cb4 100644 --- a/.prettierignore +++ b/.prettierignore @@ -32,6 +32,8 @@ registry/blocks/cuboid-carousel/assets/addons/**/*.js registry/blocks/orbit-card/assets/three.core.min.js registry/blocks/orbit-card/assets/three.module.min.js registry/blocks/orbit-card/assets/gsap-3.14.2.min.js +# generated Lottie data: pretty-printing multiplies its size +registry/blocks/lottie-character-walk/assets/mascot.json # reference snippets with intentional pseudo-markup (literal "..." attributes) skills/talking-head-recut/references/frames/polaroid.html # repo-native skill examples with intentional pseudo-markup placeholders diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 43025de04c..a8e953597d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -99,47 +99,45 @@ before merge, listed at the end. 2. For components: include a `demo.html` 3. Run `npx hyperframes lint` and `npx hyperframes validate` on your HTML 4. Test the install flow: `hyperframes add --dir /tmp/test-project` -5. Regenerate the manifest: `npx tsx scripts/generate-registry-items.ts` +5. Generate and validate the catalog: `bun run check:catalog-drift` -`registry/registry.json` is generated from the item directories, so edit it with -that script rather than by hand. An entry added by hand survives until the next -regeneration and then disappears; entries left behind for directories that no -longer exist are worse, because `hyperframes add ` resolves the name and -then fails on missing files. +### Generated catalog files -### What a maintainer finishes for you +Catalog additions and edits commit only the item's source files. Do not commit +search vectors, generated docs pages, preview payloads, gallery data, or Catalog +navigation. CI builds and validates them from your sources. -Two things need assets an outside contributor is not expected to install. Open -the pull request without them and say so; neither blocks review. +Deleting or renaming an item has one exception: remove its old entry from +`registry/registry.json` in the same PR that deletes the complete item directory. +The CLI reads item files directly from main, so leaving that entry would offer an +item whose files no longer exist. Keep every other index entry and all metadata +unchanged. Do not add the new entry for a rename or an add-plus-delete PR; +automation publishes additions. CI rejects missing removals, added entries, +metadata edits, and removals whose item directories still exist. -| Thing | If you have it | If you do not | -| ----------------------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------- | -| The search index (`registry/catalog-artifact/`) | The pre-commit hook rebuilds and stages it | The hook skips, CI names the gap, a maintainer regenerates before merge | -| The catalog preview image | Internal contributors run `scripts/upload-docs-images.sh` | Attach the preview MP4 to the PR instead | - -The search index needs a 32 MB embedding model, which is an opt-in for catalog -search rather than a build dependency. Until it is regenerated your item is -findable by word search and not by meaning, which is the same state as any item -published since a user last refreshed their copy. - -### Auto-generated docs - -When you add a new block or component, its documentation page is generated automatically — you don't need to write MDX by hand. - -Run the codegen script after adding items: +To generate the complete catalog locally after installing dependencies and +building the workspace packages: ```bash -npx tsx scripts/generate-catalog-pages.ts +bun run generate:catalog ``` -This produces: +This command downloads the pinned embedding model when needed. It updates the +registry index, vectors, payloads, pages, gallery and navigation in dependency +order. Restore generated files before committing, preserving only the required +index-entry removals when you delete item directories. -- `docs/catalog/blocks/.mdx` — per-block detail page -- `docs/catalog/components/.mdx` — per-component detail page -- `docs/public/catalog-index.json` — flat manifest for the catalog grid page -- Updates `docs/docs.json` navigation with the new pages +After source changes merge, automation updates one standing publication PR on +`bot/catalog-publish`, titled `chore(catalog): publish generated catalog`. +A maintainer approves any waiting workflow runs, reviews it, and merges it after +checks pass. New items become discoverable after publication; edits to existing +CLI item sources take effect on main immediately. Generated docs and search +artifacts update when the publication PR merges. Existing URLs remain unchanged. -The script wipes `docs/catalog/` before regenerating, so deleted items are automatically cleaned up. +Example manifests are authored source. To deliberately scaffold them, use +`scripts/scaffold-example-manifests.ts`; indexing never rewrites them. +Catalog preview images remain a separate workflow. Attach your preview MP4 to +the item PR if you cannot upload its hosted image. ## Pull Requests diff --git a/docs/catalog/blocks/lottie-character-walk.mdx b/docs/catalog/blocks/lottie-character-walk.mdx new file mode 100644 index 0000000000..d214dddb7c --- /dev/null +++ b/docs/catalog/blocks/lottie-character-walk.mdx @@ -0,0 +1,230 @@ +--- +title: "Lottie Character Walk" +description: "A jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the stage is GSAP." +mode: "frame" +--- + +import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx"; +import { InstallCommand } from "/snippets/install-command.jsx"; + + + + + +```html lottie-character-walk.html + + + + + + lottie-character-walk + + + + + + + + +
+
+
+
Meet your guide
+
+
Walks in on planted feet, then points the way.
+
+
+
+ + + +``` + + + + + + + +That writes `compositions/lottie-character-walk/lottie-character-walk.html`, plus 1 supporting file under `compositions/lottie-character-walk/assets/`. + + + + + +## Add it to your video + +It runs for 7.5 seconds at 1920×1080. Paste this into your composition: + +```html index.html +
+``` + +Move it in time with `data-start`. Put it on a different timeline row with +`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest. + +## Variables + +Every one of these has a default, so the piece works untouched. Set the ones you +want to change on the element: + +| Variable | Default | Accepts | What it does | +| --- | --- | --- | --- | +| `title` | `Meet your guide` | string | | +| `body` | `Walks in on planted feet, then points the way.` | string | | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +{/* hf:generated-footer */} + +Tagged `character` `character-animation` `mascot` `walk-cycle` `gesture` `pointing` `puppet` `lottie` `explainer`. + +## Related topics + +- [Browse the complete Catalog](/catalog) +- [Add assets and Catalog items in Studio](/studio/assets-and-blocks) +- [Build a richer composition](/go-further) + + + + diff --git a/docs/changelog.mdx b/docs/changelog.mdx index f056409202..35e379fd94 100644 --- a/docs/changelog.mdx +++ b/docs/changelog.mdx @@ -8,6 +8,83 @@ Recent HyperFrames releases, including user-facing features, fixes, and migratio {/* New release entries are prepended by `bun run changelog:draft --write`. */} + +Studio edits feel lighter: changing one scene only redraws that scene's thumbnails, and timeline clips keep their pictures while you scroll instead of blanking out. The player no longer shows a stray "transition" label while assets load, and looping Lottie animations in the catalog play smoothly from the start. + +## Fixes + +- **Studio:** Timeline clips keep their pictures while you scroll ([2c70e65784](https://github.com/heygen-com/hyperframes/commit/2c70e657842dffb50b4987f65015e8287ba963d6), [#4305](https://github.com/heygen-com/hyperframes/pull/4305)). +- **Player:** Drop the empty transition label from the Loading assets card ([8f7e902f5c](https://github.com/heygen-com/hyperframes/commit/8f7e902f5cba113d06e1cfff7d10d56664b98470), [#4327](https://github.com/heygen-com/hyperframes/pull/4327)). + +## Performance + +- **Studio:** Re-render only the edited scene's thumbnails after an edit ([8cb7d06db6](https://github.com/heygen-com/hyperframes/commit/8cb7d06db66faf567c425e972bb75057bc669322), [#4315](https://github.com/heygen-com/hyperframes/pull/4315)). +- **Studio:** Find timeline transition seams once per track, not once per row ([e02120fd0e](https://github.com/heygen-com/hyperframes/commit/e02120fd0edfcae6c9c7edc6ad6bf46d3000da72), [#4324](https://github.com/heygen-com/hyperframes/pull/4324)). + +## Catalog + +- **Registry:** A Lottie character walk-in, and looping Lottie that keeps playing ([8055961740](https://github.com/heygen-com/hyperframes/commit/805596174007bff93dc1b5fe25c887e401f2d6d3), [#4316](https://github.com/heygen-com/hyperframes/pull/4316)). + +[View the full commit range](https://github.com/heygen-com/hyperframes/compare/v0.8.64...v0.8.65). + + + +HyperFrames adds `data-vfx-chain`, a per-pixel effect element that paints GPU shader chains such as fractal noise, wave warp and displacement map. Every frame is computed from the seek time alone, so renders and previews match exactly. Chains that read their own content rely on Chrome's HTML-in-Canvas capture, and the runtime reports when that is unavailable instead of painting a blank. + +## Features + +- **Runtime:** Add `data-vfx-chain`, a seek-deterministic per-pixel effect element ([b32b9a7da](https://github.com/heygen-com/hyperframes/commit/b32b9a7dabf71e97049d1fa91a818817191414fc), [#4306](https://github.com/heygen-com/hyperframes/pull/4306)). + +[View the full commit range](https://github.com/heygen-com/hyperframes/compare/v0.8.63...v0.8.64). + + + +HyperFrames adds IBM Bob as a supported coding agent, and Studio stops a thumbnail error loop that could hang the timeline. Studio also fixes a seam and faded look where two clips touch. Static file requests now stay inside their served folders, closing a path traversal gap. + +## Features + +- **Studio:** Export AudioWaveform, ImageThumbnail, useRenderClipContent ([b9fe13ad8c](https://github.com/heygen-com/hyperframes/commit/b9fe13ad8cfcbf1c8c0a95cf19cce7cf2918944d), [#4301](https://github.com/heygen-com/hyperframes/pull/4301)). +- **CLI:** Add IBM Bob runtime support ([105984cac4](https://github.com/heygen-com/hyperframes/commit/105984cac4d8a52d99075cc06ed25ab2f12451e2), [#3930](https://github.com/heygen-com/hyperframes/pull/3930)). + +## Fixes + +- **Studio:** Clip pictures at full strength and a seam where touching clips meet ([06340f656e](https://github.com/heygen-com/hyperframes/commit/06340f656ef2f70e41d2f4cafc85b78f184a24cd), [#4309](https://github.com/heygen-com/hyperframes/pull/4309)). +- **Engine:** Classify a single-keyframe video as problematic, not healthy ([29378b6c7f](https://github.com/heygen-com/hyperframes/commit/29378b6c7f08bf62635e7e80286021c2af57de9a), [#3998](https://github.com/heygen-com/hyperframes/pull/3998)). +- **CLI:** Replace pre-planted links when writing capture files ([42eb6e9ad2](https://github.com/heygen-com/hyperframes/commit/42eb6e9ad2ca75fe1d5ac79794935f3ee523b979), [#4298](https://github.com/heygen-com/hyperframes/pull/4298)). +- **Producer:** Bound nested media by a host's data-duration when it has no data-end ([1d6a0d5141](https://github.com/heygen-com/hyperframes/commit/1d6a0d5141d0c71b0af94ac993590966d53f4aff), [#3975](https://github.com/heygen-com/hyperframes/pull/3975)). +- **Studio:** Stop VideoFrameThumbnail error→cleanup infinite loop ([e5eeeef972](https://github.com/heygen-com/hyperframes/commit/e5eeeef972f264b3989e004ec0de6862db31709a), [#4037](https://github.com/heygen-com/hyperframes/pull/4037)). +- **CLI:** Stopping the preview server no longer leaves a Chrome running ([1b8f8a43d4](https://github.com/heygen-com/hyperframes/commit/1b8f8a43d43bc2456075215b066b23e11d821435), [#4183](https://github.com/heygen-com/hyperframes/pull/4183)). +- **Server:** Contain static file requests within their served roots ([cc19b8c812](https://github.com/heygen-com/hyperframes/commit/cc19b8c8121d938aa589c50363f3c099e8dec8e7), [#4217](https://github.com/heygen-com/hyperframes/pull/4217)). +- **Media Use:** Remove clicks and ~25ms gaps at every transcript-cut splice ([dd97478175](https://github.com/heygen-com/hyperframes/commit/dd97478175584cca0e071ed2e3ba686fd57c48db), [#4179](https://github.com/heygen-com/hyperframes/pull/4179)). + +## Docs & Examples + +- Alphabetize supported coding agents ([ec3bc93b90](https://github.com/heygen-com/hyperframes/commit/ec3bc93b90e482141da324568124ce7cf094eafe), [#4297](https://github.com/heygen-com/hyperframes/pull/4297)). + +## Catalog + +- **Catalog:** Regenerating the texture-mask page no longer duplicates its section ([bc1c60ae5b](https://github.com/heygen-com/hyperframes/commit/bc1c60ae5b6e599a3caa482052547a5775a52261), [#4302](https://github.com/heygen-com/hyperframes/pull/4302)). + +## Internal + +- **Studio:** Remove unreachable expanded-child timeline code ([b73df3549e](https://github.com/heygen-com/hyperframes/commit/b73df3549eb52744fe54dac2728a2f9d0fb6a9c7), [#4219](https://github.com/heygen-com/hyperframes/pull/4219)). +- Compare test reachability against the merge ref's base parent ([8027c758d1](https://github.com/heygen-com/hyperframes/commit/8027c758d1d5fb5a43439ecdd7e0e12ead80de41), [#4303](https://github.com/heygen-com/hyperframes/pull/4303)). + +[View the full commit range](https://github.com/heygen-com/hyperframes/compare/v0.8.62...v0.8.63). + + ` cannot express — +a wave warp, a self-referential displacement map, or a generated fractal-noise +texture — where you need the same frame twice at the same `t` to produce +byte-identical pixels. + +## Element + +```html +
+
…layer content, with any PRECEDING CSS/SVG effects already applied on this wrapper…
 + +
+``` + +- `data-vfx-chain` is JSON with the same field names as `data-fx-chain`: + `version`, `nodes[]`, and each node's `type` / `id` / `enabled` / `params`. +- **Static params** live in `params`. **Animated params** live in CSS custom + properties named `--vfx--` on the host element, tweened by GSAP + like every other exporter variable. The runtime reads the CSS var first on + every paint and falls back to `params` when it doesn't resolve. +- `.hf-vfx-src` (a ``) is present **only** when some + node's def needs to read pixels besides `(x, y, t, params)` — see + [Capture](#capture) below. Its one child, `.hf-vfx-in`, is the texture + source. Give `.hf-vfx-in` an **explicit pixel box** (`width`/`height`, the + layer's own size) — `position:absolute; inset:0` has no containing block to + resolve against inside a `layoutsubtree` canvas and collapses to 0×0, which + makes the capture succeed and draw nothing, silently. +- Effects that run **before** the chain in After Effects order belong on + `.hf-vfx-in` (inside the capture); effects that run **after** belong on the + host (outside, applied to `.hf-vfx-out` by the ordinary page compositor). + Chain order is nesting order. +- `.hf-vfx-out` is created by the runtime if you don't provide it. It is + `position:absolute; inset:0`, sized to the host's own (untransformed) layout + box — `offsetWidth`/`offsetHeight` — times devicePixelRatio, not the host's + transformed bounding box. A GSAP scale or rotation on the host does not + inflate or stretch the capture. + +## Capture + +Every kernel declares a `capture` requirement on its **def**, not the element: + +| capture | reads | render capture path | ships in this plan | +| --- | --- | --- | --- | +| `none` | `(x, y, t, params)` only | screenshot capture, workers unpinned | `fractal-noise` | +| `self` | its own layer's pixels, via `drawElementImage` | screenshot capture, **pinned to 1 worker** | `wave-warp`, `displacement-map` | +| `backdrop` | every layer below it | screenshot capture, pinned to 1 worker | not yet — later phase | + +A `self` or `backdrop` node puts the whole composition on screenshot capture +pinned to one worker (the `htmlInCanvas` render-mode hint exists because a +paint-cache race across parallel browser instances is a measured failure, not +a theoretical one). A `none` node still forces screenshot capture — WebGL +content is not something the fast `drawElementImage` path can read back +faithfully — but leaves worker count auto-resolved. + +Neither is a regression against the alternative of baking the effect in After +Effects and shipping video instead of a live chain: a bake costs a full AE +render up front and produces a filmstrip nothing can retime. But compared to a +`drawElement` render of the same composition **without** the node, both `self` +and `none` capture are slower. Budget for it, and don't add a chain to a layer +that doesn't need per-pixel treatment. + +## Determinism + +Same backend, same `(u_t, params)` → byte-identical `.hf-vfx-out` pixels. A +kernel may read only `(u_size, u_t, u_fps, params, u_src)` — no `Math.random`, +no clock, no state carried between paints. That's what makes `data-vfx-chain` +safe to seek anywhere in a render, including backwards, and still get the same +frame you'd get scrubbing forward to it in Studio. + +## Studio and browser support + +`self` and `backdrop` capture depend on `drawElementImage`, the same +experimental Chromium API [HTML in Canvas](/guides/html-in-canvas) uses. In a +normal browser preview, enable `chrome://flags/#canvas-draw-element` in a +compatible Chrome or Brave build and restart it before opening a composition +that uses a capturing chain. Without it — or on a browser build with no +WebGL2 — a chain fails loudly (a `[HyperFrames] composition script error:` +console line naming the flag) rather than silently rendering the wrong thing. +`none`-capture chains (like `fractal-noise`) need only WebGL2, not the flag. + +## Known constraints + +A few things the runtime implementation found worth knowing before you author +a chain by hand: + +- **`.hf-vfx-in` needs an explicit pixel box.** See [Element](#element) above — + this is the one that costs a silent, empty capture if you skip it. +- **Only immediate children of the `layoutsubtree` canvas can be captured.** + `drawElementImage` throws on a grandchild. `.hf-vfx-in` must be the canvas's + only child. +- **Output size follows the host's layout box, not its transformed bounding + box.** A GSAP `transform: scale()` or rotation on the host does not affect + `.hf-vfx-out`'s resolution. +- **A chain repaints on seek, not on every animation-frame tick.** Every render + path seeks per frame, so this only matters for Studio scrubbing-free + playback, where a chain does not repaint between seeks. +- **Known conflict with page-side shader transitions.** A composition running + both `@hyperframes/shader-transitions`' page-side compositing and a + capturing `data-vfx-chain` node can have the chain painted from a stale + texture outside a transition's own active window. If your composition uses + both features together and a chain looks wrong outside a transition, this is + why. + +## Related topics + + + + The same `drawElementImage` capture, for compositing DOM into a 3D scene + instead of a per-pixel kernel. + + + The `data-fx-chain` shape `data-vfx-chain` mirrors, for the audio rack. + + diff --git a/docs/prompting/runtimes-and-3d.mdx b/docs/prompting/runtimes-and-3d.mdx index cec14db431..04d1f453e1 100644 --- a/docs/prompting/runtimes-and-3d.mdx +++ b/docs/prompting/runtimes-and-3d.mdx @@ -71,6 +71,15 @@ The Lottie adapter seeks the existing animation frame by frame, so the designer's work renders exactly as authored. Asking the agent to recreate it in GSAP throws away the source and lands somewhere approximate. +Characters work the same way. A mascot that walks in, stops and points is a +Lottie file with the acting in it; the agent builds the scene around it in GSAP: + +> Use this character Lottie (`assets/mascot.json`): it walks in and points right at 5.2s. Bring the title card in on the point. + +A short walk cycle with `loop: true` keeps cycling for the whole scene. The +[`lottie-character-walk`](/catalog/blocks/lottie-character-walk) block is a +working starting point. + ## Simple UI and text motion → the default Fades, slides, staggers, counters, kinetic type, hover-style reveals — the diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json index 2f95001729..e2e43d28d5 100644 --- a/docs/public/catalog-index.json +++ b/docs/public/catalog-index.json @@ -2612,6 +2612,25 @@ "href": "/catalog/components/logo-wall", "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/logo-wall.png" }, + { + "name": "lottie-character-walk", + "type": "block", + "title": "Lottie Character Walk", + "description": "A jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the stage is GSAP.", + "tags": [ + "character", + "character-animation", + "mascot", + "walk-cycle", + "gesture", + "pointing", + "puppet", + "lottie", + "explainer" + ], + "href": "/catalog/blocks/lottie-character-walk", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lottie-character-walk.png" + }, { "name": "lower-third-bild", "type": "block", diff --git a/docs/public/catalog/blocks/lottie-character-walk.json b/docs/public/catalog/blocks/lottie-character-walk.json new file mode 100644 index 0000000000..92cd71056e --- /dev/null +++ b/docs/public/catalog/blocks/lottie-character-walk.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n lottie-character-walk\n \n \n \n \n \n \n \n \n \n
\n
\n
Meet your guide
\n
\n
Walks in on planted feet, then points the way.
\n
\n
\n \n \n \n\n"} \ No newline at end of file diff --git a/docs/snippets/catalog-gallery-data.mdx b/docs/snippets/catalog-gallery-data.mdx index 2fc83a6443..ef55d903c3 100644 --- a/docs/snippets/catalog-gallery-data.mdx +++ b/docs/snippets/catalog-gallery-data.mdx @@ -1 +1 @@ -export const catalogGalleryData = {"source":"https://github.com/heygen-com/hyperframes","groups":[{"id":"3d-motion","label":"3D motion","pinned":true,"count":7},{"id":"carousels","label":"Carousels","pinned":false,"count":25},{"id":"text-captions","label":"Text & captions","pinned":false,"count":73},{"id":"code","label":"Code","pinned":false,"count":12},{"id":"transitions","label":"Transitions","pinned":false,"count":31},{"id":"data-charts","label":"Data & charts","pinned":false,"count":18},{"id":"scenes-demos","label":"Scenes & demos","pinned":false,"count":95},{"id":"motion-effects","label":"Motion & effects","pinned":false,"count":94},{"id":"surfaces","label":"Surfaces","pinned":false,"count":18},{"id":"blocks","label":"Blocks","pinned":false,"count":13}],"items":[{"id":"canopy-part-title","kind":"block","href":"/catalog/blocks/canopy-part-title","title":"Canopy Part Title","tagline":"Leaves sweep through the frame and part to reveal the headline.","description":"Leaves sweep through the frame and part to reveal the headline.","group":"3d-motion","section":"3D motion","tags":["3d-motion","title-card","leaves","organic","depth-of-field","two-headlines","sweep"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/canopy-part-title.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/canopy-part-title.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/canopy-part-title.json","heavy":true,"width":1920,"height":1080}},{"id":"code-slice-hero","kind":"block","href":"/catalog/blocks/code-slice-hero","title":"Code Slice Hero","tagline":"A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.","description":"A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.","group":"3d-motion","section":"3D motion","tags":["3d-motion","transition","typography","tiles","flip","webgl2","shadows","two-headlines"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-slice-hero.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-slice-hero.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-slice-hero.json","heavy":false,"width":1920,"height":1080}},{"id":"cuboid-carousel","kind":"block","href":"/catalog/blocks/cuboid-carousel","title":"Cuboid Carousel","tagline":"A chain of bevelled cuboids rides a travelling wave as a content carousel.","description":"A chain of bevelled cuboids rides a travelling wave as a content carousel.","group":"3d-motion","section":"3D motion","tags":["3d-motion","carousel","cards","travelling-wave","pbr","shadows","room-environment"],"tech":[],"duration":6.67,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cuboid-carousel.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cuboid-carousel.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/cuboid-carousel.json","heavy":true,"width":1920,"height":1080}},{"id":"frost-sequence-camera-orbit","kind":"block","href":"/catalog/blocks/frost-sequence-camera-orbit","title":"Frost Sequence Camera Orbit","tagline":"An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades.","description":"An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades.","group":"3d-motion","section":"3D motion","tags":["3d-motion","ice","frost","camera-orbit","logo","particles","webgpu","two-headlines"],"tech":[],"duration":22.5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/frost-sequence-camera-orbit.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/frost-sequence-camera-orbit.mp4","preview":{"mode":"video"}},{"id":"glass-shard-title","kind":"block","href":"/catalog/blocks/glass-shard-title","title":"Glass Shard Title","tagline":"Glass shards fly in through fog and tile themselves into the headline.","description":"Glass shards fly in through fog and tile themselves into the headline.","group":"3d-motion","section":"3D motion","tags":["3d-motion","title-card","glass","voronoi","shards","fog","hdr"],"tech":[],"duration":12.16,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glass-shard-title.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glass-shard-title.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/glass-shard-title.json","heavy":true,"width":1920,"height":1080}},{"id":"orbit-card","kind":"block","href":"/catalog/blocks/orbit-card","title":"Orbit Card","tagline":"A single feature card orbits a dot sphere on approved Blender camera motion.","description":"A single feature card orbits a dot sphere on approved Blender camera motion.","group":"3d-motion","section":"3D motion","tags":["3d-motion","cards","feature-reveal","dots","orbit","blender-motion","sphere"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/orbit-card.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/orbit-card.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/orbit-card.json","heavy":true,"width":1920,"height":1080}},{"id":"wireframe-portal-title","kind":"block","href":"/catalog/blocks/wireframe-portal-title","title":"Wireframe Portal Title","tagline":"A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.","description":"A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.","group":"3d-motion","section":"3D motion","tags":["3d-motion","title-card","wireframe","portal","burst","typography","post-processing","phrase-swap"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/wireframe-portal-title.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/wireframe-portal-title.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/wireframe-portal-title.json","heavy":true,"width":1920,"height":1080}},{"id":"carousel-circle-1","kind":"block","href":"/catalog/blocks/carousel-circle-1","title":"Circle Carousel 1","tagline":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots.","description":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","circle"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-circle-1.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-circle-2","kind":"block","href":"/catalog/blocks/carousel-circle-2","title":"Circle Carousel 2","tagline":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots.","description":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","circle"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-circle-2.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-circle-3","kind":"block","href":"/catalog/blocks/carousel-circle-3","title":"Circle Carousel 3","tagline":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots.","description":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","circle"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-circle-3.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-circle-4","kind":"block","href":"/catalog/blocks/carousel-circle-4","title":"Circle Carousel 4","tagline":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots.","description":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","circle"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-circle-4.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-circle-5","kind":"block","href":"/catalog/blocks/carousel-circle-5","title":"Circle Carousel 5","tagline":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots.","description":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","circle"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-circle-5.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-orbit-1","kind":"block","href":"/catalog/blocks/carousel-orbit-1","title":"Orbit Carousel 1","tagline":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots.","description":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","orbit","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-orbit-1.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-orbit-2","kind":"block","href":"/catalog/blocks/carousel-orbit-2","title":"Orbit Carousel 2","tagline":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots.","description":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","orbit","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-orbit-2.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-orbit-3","kind":"block","href":"/catalog/blocks/carousel-orbit-3","title":"Orbit Carousel 3","tagline":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots.","description":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","orbit","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-orbit-3.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-orbit-4","kind":"block","href":"/catalog/blocks/carousel-orbit-4","title":"Orbit Carousel 4","tagline":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots.","description":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","orbit","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-orbit-4.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-orbit-5","kind":"block","href":"/catalog/blocks/carousel-orbit-5","title":"Orbit Carousel 5","tagline":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots.","description":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","orbit","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-orbit-5.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-path-1","kind":"block","href":"/catalog/blocks/carousel-path-1","title":"Path Carousel 1","tagline":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image slots.","description":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","path"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-path-1.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-path-2","kind":"block","href":"/catalog/blocks/carousel-path-2","title":"Path Carousel 2","tagline":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image slots.","description":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","path"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-path-2.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-path-3","kind":"block","href":"/catalog/blocks/carousel-path-3","title":"Path Carousel 3","tagline":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image slots.","description":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","path"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-path-3.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-path-4","kind":"block","href":"/catalog/blocks/carousel-path-4","title":"Path Carousel 4","tagline":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image slots.","description":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","path"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-path-4.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-path-5","kind":"block","href":"/catalog/blocks/carousel-path-5","title":"Path Carousel 5","tagline":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image slots.","description":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","path"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-path-5.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-text-circle-1","kind":"block","href":"/catalog/blocks/carousel-text-circle-1","title":"Text + Circle Carousel 1","tagline":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 1).","description":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 1).","group":"carousels","section":"Carousels","tags":["carousel","title-card","kinetic-text","images","showcase","circle"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-text-circle-1.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-text-circle-2","kind":"block","href":"/catalog/blocks/carousel-text-circle-2","title":"Text + Circle Carousel 2","tagline":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 2).","description":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 2).","group":"carousels","section":"Carousels","tags":["carousel","title-card","kinetic-text","images","showcase","circle"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-text-circle-2.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-text-circle-3","kind":"block","href":"/catalog/blocks/carousel-text-circle-3","title":"Text + Circle Carousel 3","tagline":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 3).","description":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 3).","group":"carousels","section":"Carousels","tags":["carousel","title-card","kinetic-text","images","showcase","circle"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-text-circle-3.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-text-circle-4","kind":"block","href":"/catalog/blocks/carousel-text-circle-4","title":"Text + Circle Carousel 4","tagline":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 4).","description":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 4).","group":"carousels","section":"Carousels","tags":["carousel","title-card","kinetic-text","images","showcase","circle"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-text-circle-4.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-text-circle-5","kind":"block","href":"/catalog/blocks/carousel-text-circle-5","title":"Text + Circle Carousel 5","tagline":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 5).","description":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 5).","group":"carousels","section":"Carousels","tags":["carousel","title-card","kinetic-text","images","showcase","circle"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-text-circle-5.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-vision-1","kind":"block","href":"/catalog/blocks/carousel-vision-1","title":"Vision Carousel 1","tagline":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 1); 12 image slots.","description":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 1); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","vision","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-vision-1.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-vision-2","kind":"block","href":"/catalog/blocks/carousel-vision-2","title":"Vision Carousel 2","tagline":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 2); 12 image slots.","description":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 2); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","vision","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-vision-2.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-vision-3","kind":"block","href":"/catalog/blocks/carousel-vision-3","title":"Vision Carousel 3","tagline":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 3); 12 image slots.","description":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 3); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","vision","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-vision-3.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-vision-4","kind":"block","href":"/catalog/blocks/carousel-vision-4","title":"Vision Carousel 4","tagline":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 4); 12 image slots.","description":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 4); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","vision","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-vision-4.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-vision-5","kind":"block","href":"/catalog/blocks/carousel-vision-5","title":"Vision Carousel 5","tagline":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 5); 12 image slots.","description":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 5); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","vision","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-vision-5.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-camera-follow","kind":"component","href":"/catalog/components/caption-camera-follow","title":"Camera Follow Captions","tagline":"One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small.","description":"One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small.","group":"text-captions","section":"Captions","tags":["captions","caption-style","camera","typography","motion-primitive","portrait"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/caption-camera-follow.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-clip-wipe","kind":"component","href":"/catalog/components/caption-clip-wipe","title":"Clip Wipe","tagline":"Left-to-right clip-path wipe reveal per word","description":"Left-to-right clip-path wipe reveal per word","group":"text-captions","section":"Captions","tags":["captions","caption-style","wipe","clip-path","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-clip-wipe.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-editorial-emphasis","kind":"component","href":"/catalog/components/caption-editorial-emphasis","title":"Editorial Emphasis","tagline":"Dual-font system with dramatic size contrast for emphasis words","description":"Dual-font system with dramatic size contrast for emphasis words","group":"text-captions","section":"Captions","tags":["captions","caption-style","editorial","typography","emphasis"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-editorial-emphasis/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-editorial-emphasis.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-emoji-pop","kind":"component","href":"/catalog/components/caption-emoji-pop","title":"Emoji Pop","tagline":"Emoji integration with stroked text and horizontal squeeze entrance","description":"Emoji integration with stroked text and horizontal squeeze entrance","group":"text-captions","section":"Captions","tags":["captions","caption-style","emoji","social"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-emoji-pop/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-emoji-pop.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-glitch-rgb","kind":"component","href":"/catalog/components/caption-glitch-rgb","title":"Glitch RGB","tagline":"RGB chromatic aberration with CRT scanline overlay","description":"RGB chromatic aberration with CRT scanline overlay","group":"text-captions","section":"Captions","tags":["captions","caption-style","glitch","cyber","tech"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-glitch-rgb.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-gradient-fill","kind":"component","href":"/catalog/components/caption-gradient-fill","title":"Gradient Fill","tagline":"Gradient-clipped text with elastic bounce entrance","description":"Gradient-clipped text with elastic bounce entrance","group":"text-captions","section":"Captions","tags":["captions","caption-style","gradient","colorful"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-gradient-fill.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-highlight","kind":"component","href":"/catalog/components/caption-highlight","title":"Highlight","tagline":"Red background sweep behind each active word, TikTok-style","description":"Red background sweep behind each active word, TikTok-style","group":"text-captions","section":"Captions","tags":["captions","caption-style","highlight","social","tiktok"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-highlight/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-kinetic-slam","kind":"component","href":"/catalog/components/caption-kinetic-slam","title":"Kinetic Slam","tagline":"Full-screen single-word display with alternating entrance directions","description":"Full-screen single-word display with alternating entrance directions","group":"text-captions","section":"Captions","tags":["captions","caption-style","kinetic","typography","slam"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-kinetic-slam/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-kinetic-slam.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-matrix-decode","kind":"component","href":"/catalog/components/caption-matrix-decode","title":"Matrix Decode","tagline":"Character scramble animation before text reveal","description":"Character scramble animation before text reveal","group":"text-captions","section":"Captions","tags":["captions","caption-style","matrix","scramble","decode"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-matrix-decode.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-neon-accent","kind":"component","href":"/catalog/components/caption-neon-accent","title":"Neon Accent","tagline":"Multi-color neon glow accents with wiggle drift animation","description":"Multi-color neon glow accents with wiggle drift animation","group":"text-captions","section":"Captions","tags":["captions","caption-style","neon","glow","accent"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-accent/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-neon-accent.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-neon-glow","kind":"component","href":"/catalog/components/caption-neon-glow","title":"Neon Glow","tagline":"Cyan and magenta neon glow with keyword accent colors","description":"Cyan and magenta neon glow with keyword accent colors","group":"text-captions","section":"Captions","tags":["captions","caption-style","neon","glow","gaming"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-glow/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-neon-glow.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-parallax-layers","kind":"component","href":"/catalog/components/caption-parallax-layers","title":"Parallax Layers","tagline":"Behind-subject 3D text layering with vertical stretch effect","description":"Behind-subject 3D text layering with vertical stretch effect","group":"text-captions","section":"Captions","tags":["captions","caption-style","parallax","3d","depth"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-parallax-layers/preview.mp4?v=1779051692","preview":{"mode":"player","source":"/public/catalog/components/caption-parallax-layers.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-particle-burst","kind":"component","href":"/catalog/components/caption-particle-burst","title":"Particle Burst","tagline":"Keyword words trigger colored particle explosions","description":"Keyword words trigger colored particle explosions","group":"text-captions","section":"Captions","tags":["captions","caption-style","particles","burst","effects"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-particle-burst/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-particle-burst.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-pill-karaoke","kind":"component","href":"/catalog/components/caption-pill-karaoke","title":"Pill Karaoke","tagline":"Pill-shaped container with per-word karaoke color highlight","description":"Pill-shaped container with per-word karaoke color highlight","group":"text-captions","section":"Captions","tags":["captions","caption-style","karaoke","pill"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-pill-karaoke.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-texture","kind":"component","href":"/catalog/components/caption-texture","title":"Texture","tagline":"Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable","description":"Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable","group":"text-captions","section":"Captions","tags":["captions","caption-style","texture","mask"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-texture.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-weight-shift","kind":"component","href":"/catalog/components/caption-weight-shift","title":"Weight Shift","tagline":"Elegant font-weight transition between caption lines","description":"Elegant font-weight transition between caption lines","group":"text-captions","section":"Captions","tags":["captions","caption-style","minimal","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-weight-shift.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-callout-highlight","kind":"block","href":"/catalog/blocks/mk-callout-highlight","title":"Word-Sweep Highlight","tagline":"A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover","description":"A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover","group":"text-captions","section":"Captions","tags":["typography","karaoke","captions","minimal"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-callout-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"blur-out-up","kind":"component","href":"/catalog/components/blur-out-up","title":"Blur Out Up","tagline":"Words arrive clean and depart upward with increasing blur for airy exits.","description":"Words arrive clean and depart upward with increasing blur for airy exits.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/blur-out-up.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/blur-out-up.json","heavy":false,"width":1920,"height":1080}},{"id":"bottom-up-letters","kind":"component","href":"/catalog/components/bottom-up-letters","title":"Bottom Up Letters","tagline":"Splits text into letters and reveals each glyph from below with deterministic staggered timing","description":"Splits text into letters and reveals each glyph from below with deterministic staggered timing","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text","letters","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/bottom-up-letters.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-blend-difference","kind":"component","href":"/catalog/components/caption-blend-difference","title":"Blend Difference","tagline":"Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background","description":"Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background","group":"text-captions","section":"Typography & Text","tags":["text","text-effect","effect","blend-mode","contrast","inversion"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/caption-blend-difference.json","heavy":false,"width":1920,"height":1080}},{"id":"char-slam-explode","kind":"component","href":"/catalog/components/char-slam-explode","title":"Char Slam Explode","tagline":"Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.","description":"Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","text-treatment","scatter","slam","impact"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/char-slam-explode.json","heavy":false,"width":1920,"height":1080}},{"id":"extended-keyframe","kind":"component","href":"/catalog/components/extended-keyframe","title":"Extended Keyframe","tagline":"The never-fully-lands arrival: an element covers most of its move in the first fifth of the duration and creeps the rest to the last frame, exits along its arrival vector, and carries shutter motion blur — from any side or by scale, one call per element, plus the ease on its own for any tween","description":"The never-fully-lands arrival: an element covers most of its move in the first fifth of the duration and creeps the rest to the last frame, exits along its arrival vector, and carries shutter motion blur — from any side or by scale, one call per element, plus the ease on its own for any tween","group":"text-captions","section":"Typography & Text","tags":["motion","ease","arrival","kinetic-type","text","motion-blur","after-effects","slide-in","scale-in"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/extended-keyframe.json","heavy":false,"width":1920,"height":1080}},{"id":"focus-blur-resolve","kind":"component","href":"/catalog/components/focus-blur-resolve","title":"Focus Blur Resolve","tagline":"A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.","description":"A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/focus-blur-resolve.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/focus-blur-resolve.json","heavy":false,"width":1920,"height":1080}},{"id":"headline-slam","kind":"component","href":"/catalog/components/headline-slam","title":"Headline Slam","tagline":"A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.","description":"A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","headline","slam","impact","exit"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/headline-slam.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-path-text","kind":"block","href":"/catalog/blocks/hw-path-text","title":"Text Along a Path","tagline":"Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input","description":"Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input","group":"text-captions","section":"Typography & Text","tags":["handwritten","typography","path","overlay"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-path-text.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-title","kind":"block","href":"/catalog/blocks/hw-title","title":"Handwritten Title","tagline":"Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils","description":"Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils","group":"text-captions","section":"Typography & Text","tags":["handwritten","typography","title-card","overlay"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-title.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-write-title","kind":"block","href":"/catalog/blocks/hw-write-title","title":"Handwritten Write-On Title","tagline":"True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts); optional squiggle underline; boils","description":"True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts); optional squiggle underline; boils","group":"text-captions","section":"Typography & Text","tags":["handwritten","typography","title-card","write-on","overlay"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-write-title.json","heavy":false,"width":1920,"height":1080}},{"id":"inline-highlight","kind":"component","href":"/catalog/components/inline-highlight","title":"Inline Highlight","tagline":"A clean marker-style inline highlight that animates behind text using a CSS scale variable","description":"A clean marker-style inline highlight that animates behind text using a CSS scale variable","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text","highlight","caption"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/inline-highlight.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/inline-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"kinetic-center-build","kind":"component","href":"/catalog/components/kinetic-center-build","title":"Kinetic Center Build","tagline":"Words enter from the right and push the growing phrase left until the final line locks centered.","description":"Words enter from the right and push the growing phrase left until the final line locks centered.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","kinetic-type","reveal","remocn-port"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/kinetic-center-build.json","heavy":false,"width":1920,"height":1080}},{"id":"kinetic-type-swap","kind":"component","href":"/catalog/components/kinetic-type-swap","title":"Kinetic Type Swap","tagline":"A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.","description":"A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","kinetic-type","word-swap","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/kinetic-type-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"line-by-line-slide","kind":"component","href":"/catalog/components/line-by-line-slide","title":"Line-by-Line Slide","tagline":"Each line enters from the left with staggered slide and exits to the right.","description":"Each line enters from the left with staggered slide and exits to the right.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/line-by-line-slide.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/line-by-line-slide.json","heavy":false,"width":1920,"height":1080}},{"id":"line-swap","kind":"component","href":"/catalog/components/line-swap","title":"Line Swap","tagline":"A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B.","description":"A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","swap","beat","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/line-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"logo-brand-close","kind":"component","href":"/catalog/components/logo-brand-close","title":"Logo Brand Close","tagline":"A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film.","description":"A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","brand","logo","end-card","close"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/logo-brand-close.json","heavy":false,"width":1920,"height":1080}},{"id":"marker-highlight","kind":"component","href":"/catalog/components/marker-highlight","title":"Marker Highlight","tagline":"Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue.","description":"Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","emphasis","marker","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/marker-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"matrix-decode","kind":"component","href":"/catalog/components/matrix-decode","title":"Matrix Decode","tagline":"Random scramble resolves left-to-right into the target text.","description":"Random scramble resolves left-to-right into the target text.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/matrix-decode.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/matrix-decode.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-emphasis-type","kind":"component","href":"/catalog/components/mk-emphasis-type","title":"Background Emphasis Type","tagline":"Oversized low-contrast background word drifting slowly behind the subject — typography as texture","description":"Oversized low-contrast background word drifting slowly behind the subject — typography as texture","group":"text-captions","section":"Typography & Text","tags":["typography","text-treatment","minimal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/mk-emphasis-type.json","heavy":false,"width":1920,"height":1080}},{"id":"morph-text","kind":"component","href":"/catalog/components/morph-text","title":"Morph Text","tagline":"Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect","description":"Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect","group":"text-captions","section":"Typography & Text","tags":["text","text-effect","typography","morph","gooey","kinetic","animation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.mp4","preview":{"mode":"player","source":"/public/catalog/components/morph-text.json","heavy":false,"width":1920,"height":1080}},{"id":"particle-text-dissolve","kind":"component","href":"/catalog/components/particle-text-dissolve","title":"Particle Text Dissolve","tagline":"Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter.","description":"Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","particles","canvas","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/particle-text-dissolve.json","heavy":false,"width":1920,"height":1080}},{"id":"per-word-crossfade","kind":"component","href":"/catalog/components/per-word-crossfade","title":"Per-Word Crossfade","tagline":"Words gently fade into place with a short vertical drift for calm keynote rhythm.","description":"Words gently fade into place with a short vertical drift for calm keynote rhythm.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/per-word-crossfade.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/per-word-crossfade.json","heavy":false,"width":1920,"height":1080}},{"id":"per-word-rise","kind":"component","href":"/catalog/components/per-word-rise","title":"Per Word Rise","tagline":"Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).","description":"Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","typography","stagger","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/per-word-rise.json","heavy":false,"width":1920,"height":1080}},{"id":"perspective-marquee","kind":"component","href":"/catalog/components/perspective-marquee","title":"Perspective Marquee","tagline":"A 3D tilted marquee with depth feel as items roll toward the horizon.","description":"A 3D tilted marquee with depth feel as items roll toward the horizon.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/perspective-marquee.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/perspective-marquee.json","heavy":false,"width":1920,"height":1080}},{"id":"rgb-glitch-text","kind":"component","href":"/catalog/components/rgb-glitch-text","title":"RGB Glitch Text","tagline":"RGB-offset text copies jitter briefly for a controlled glitch window.","description":"RGB-offset text copies jitter briefly for a controlled glitch window.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/rgb-glitch-text.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/rgb-glitch-text.json","heavy":false,"width":1920,"height":1080}},{"id":"scan-band","kind":"component","href":"/catalog/components/scan-band","title":"Scan Band","tagline":"A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.","description":"A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","scan","chromatic","distortion","wordmark"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/scan-band.json","heavy":false,"width":1920,"height":1080}},{"id":"scramble-reveal","kind":"component","href":"/catalog/components/scramble-reveal","title":"Scramble Reveal","tagline":"A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.","description":"A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","scramble","reveal","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/scramble-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"shared-axis-y","kind":"component","href":"/catalog/components/shared-axis-y","title":"Shared Axis Y","tagline":"Per-word vertical shared-axis transition for sharp editorial swaps.","description":"Per-word vertical shared-axis transition for sharp editorial swaps.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shared-axis-y.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/shared-axis-y.json","heavy":false,"width":1920,"height":1080}},{"id":"shared-axis-z","kind":"component","href":"/catalog/components/shared-axis-z","title":"Shared Axis Z","tagline":"Scale-based shared-axis transition for focus shifts and context depth.","description":"Scale-based shared-axis transition for focus shifts and context depth.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shared-axis-z.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/shared-axis-z.json","heavy":false,"width":1920,"height":1080}},{"id":"shimmer-sweep","kind":"component","href":"/catalog/components/shimmer-sweep","title":"Shimmer Sweep","tagline":"Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals","description":"Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals","group":"text-captions","section":"Typography & Text","tags":["text","shimmer","highlight","effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/shimmer-sweep.json","heavy":false,"width":1920,"height":1080}},{"id":"soft-blur-in","kind":"component","href":"/catalog/components/soft-blur-in","title":"Soft Blur In","tagline":"A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts","description":"A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text","reveal","blur"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blur-in.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/soft-blur-in.json","heavy":false,"width":1920,"height":1080}},{"id":"split-flap-board","kind":"block","href":"/catalog/blocks/split-flap-board","title":"Split-Flap Board","tagline":"Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.","description":"Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.","group":"text-captions","section":"Typography & Text","tags":["text","kinetic","mechanical","split-flap","solari","departure-board","reveal"],"tech":[],"duration":3.5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/split-flap-board.json","heavy":false,"width":1920,"height":1080}},{"id":"strikethrough-replace","kind":"component","href":"/catalog/components/strikethrough-replace","title":"Strikethrough Replace","tagline":"Draw a strike line across old text, then reveal the replacement.","description":"Draw a strike line across old text, then reveal the replacement.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/strikethrough-replace.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/strikethrough-replace.json","heavy":false,"width":1920,"height":1080}},{"id":"text-match-cut","kind":"component","href":"/catalog/components/text-match-cut","title":"Text Match Cut","tagline":"One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide.","description":"One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","transition","typography","match-cut","hard-cut","continuity"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/text-match-cut.json","heavy":false,"width":1920,"height":1080}},{"id":"text-shimmer","kind":"component","href":"/catalog/components/text-shimmer","title":"Text Shimmer","tagline":"A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.","description":"A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","shimmer","specular","emphasis"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/text-shimmer.json","heavy":false,"width":1920,"height":1080}},{"id":"ticker-takeover","kind":"component","href":"/catalog/components/ticker-takeover","title":"Ticker Takeover","tagline":"A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.","description":"A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","ticker","slot-machine","headline","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ticker-takeover.json","heavy":false,"width":1920,"height":1080}},{"id":"titlecard-calm","kind":"component","href":"/catalog/components/titlecard-calm","title":"Titlecard Calm","tagline":"A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.","description":"A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","title-card","calm","orient"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/titlecard-calm.json","heavy":false,"width":1920,"height":1080}},{"id":"titlecard-lockup","kind":"component","href":"/catalog/components/titlecard-lockup","title":"Titlecard Lockup","tagline":"The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.","description":"The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","title-card","lockup","breather","orient"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/titlecard-lockup.json","heavy":false,"width":1920,"height":1080}},{"id":"tracking-in","kind":"component","href":"/catalog/components/tracking-in","title":"Tracking In","tagline":"A precise letter-spacing reveal for premium headings and interface labels","description":"A precise letter-spacing reveal for premium headings and interface labels","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text","reveal","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracking-in.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/tracking-in.json","heavy":false,"width":1920,"height":1080}},{"id":"variable-axis-type","kind":"component","href":"/catalog/components/variable-axis-type","title":"Variable Axis Type","tagline":"A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.","description":"A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.","group":"text-captions","section":"Typography & Text","tags":["typography","variable-font","kinetic-type","axis","emphasize"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/variable-axis-type.json","heavy":false,"width":1920,"height":1080}},{"id":"vox-annotate","kind":"component","href":"/catalog/components/vox-annotate","title":"Vox Annotate","tagline":"The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.","description":"The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","annotation","marker","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/vox-annotate.json","heavy":false,"width":1920,"height":1080}},{"id":"weight-wave","kind":"block","href":"/catalog/blocks/weight-wave","title":"Weight Wave","tagline":"A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.","description":"A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.","group":"text-captions","section":"Typography & Text","tags":["typography","kinetic-type","title","variable-font","text"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/weight-wave.json","heavy":false,"width":1920,"height":1080}},{"id":"wordmark-tiles","kind":"component","href":"/catalog/components/wordmark-tiles","title":"Wordmark Tiles","tagline":"A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.","description":"A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.","group":"text-captions","section":"Typography & Text","tags":["typography","wordmark","tiles","raster","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/wordmark-tiles.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-prism-title","kind":"block","href":"/catalog/blocks/yt-prism-title","title":"Chromatic Fringe Title","tagline":"Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift","description":"Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift","group":"text-captions","section":"Typography & Text","tags":["typography","title-card","creator"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/yt-prism-title.json","heavy":false,"width":1920,"height":1080}},{"id":"lower-third-bild","kind":"block","href":"/catalog/blocks/lower-third-bild","title":"Lower Third — BILD Style","tagline":"News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.","description":"News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.","group":"text-captions","section":"Lower Thirds","tags":["broadcast","lower-third","news","overlay"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lower-third-bild.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-accent-underline","kind":"block","href":"/catalog/blocks/lt-accent-underline","title":"Lower Third — Accent Underline","tagline":"Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility","description":"Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","minimal"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-accent-underline.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-bold-block","kind":"block","href":"/catalog/blocks/lt-bold-block","title":"Lower Third — Bold Block","tagline":"High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops","description":"High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","bold"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-bold-block.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-clean-bar","kind":"block","href":"/catalog/blocks/lt-clean-bar","title":"Lower Third — Clean Bar","tagline":"Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance","description":"Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-clean-bar.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-color-block","kind":"block","href":"/catalog/blocks/lt-color-block","title":"Lower Third — Color Block","tagline":"High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role","description":"High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","bold"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-color-block.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-dark-card","kind":"block","href":"/catalog/blocks/lt-dark-card","title":"Lower Third — Dark Card","tagline":"Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance","description":"Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","dark"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-dark-card.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-kicker-name","kind":"block","href":"/catalog/blocks/lt-kicker-name","title":"Lower Third — Kicker Name","tagline":"Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage","description":"Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","bold"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-kicker-name.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-mask-reveal","kind":"block","href":"/catalog/blocks/lt-mask-reveal","title":"Lower Third — Mask Reveal","tagline":"Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage","description":"Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","bold"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-mask-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-side-rule","kind":"block","href":"/catalog/blocks/lt-side-rule","title":"Lower Third — Side Rule","tagline":"Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage","description":"Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","minimal"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-side-rule.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-soft-pill","kind":"block","href":"/catalog/blocks/lt-soft-pill","title":"Lower Third — Soft Pill","tagline":"Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance","description":"Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","minimal"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-soft-pill.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-stack-bars","kind":"block","href":"/catalog/blocks/lt-stack-bars","title":"Lower Third — Stack Bars","tagline":"Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right","description":"Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","bold"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-stack-bars.json","heavy":false,"width":1920,"height":1080}},{"id":"news-ticker","kind":"block","href":"/catalog/blocks/news-ticker","title":"News Ticker","tagline":"Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.","description":"Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","news","ticker"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/news-ticker.json","heavy":false,"width":1920,"height":1080}},{"id":"code-3d-extrude","kind":"block","href":"/catalog/blocks/code-3d-extrude","title":"Code 3D Extrude","tagline":"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.","description":"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.","group":"code","section":"Code Animations","tags":["code","code-animation","3d","webgl","developer"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-3d-extrude.json","heavy":true,"width":1920,"height":1080}},{"id":"code-diff","kind":"block","href":"/catalog/blocks/code-diff","title":"Code Diff","tagline":"An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.","description":"An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.","group":"code","section":"Code Animations","tags":["code","code-animation","diff","developer"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-diff.json","heavy":false,"width":1920,"height":1080}},{"id":"code-highlight","kind":"block","href":"/catalog/blocks/code-highlight","title":"Code Highlight Sweep","tagline":"A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.","description":"A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.","group":"code","section":"Code Animations","tags":["code","code-animation","highlight","developer"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"code-morph","kind":"block","href":"/catalog/blocks/code-morph","title":"Code Morph","tagline":"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.","description":"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.","group":"code","section":"Code Animations","tags":["code","code-animation","morph","refactor","developer"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-morph.json","heavy":false,"width":1920,"height":1080}},{"id":"code-particle-assemble","kind":"block","href":"/catalog/blocks/code-particle-assemble","title":"Code Particle Assemble","tagline":"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.","description":"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.","group":"code","section":"Code Animations","tags":["code","code-animation","particles","gpu","webgl","developer"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-particle-assemble.json","heavy":true,"width":1920,"height":1080}},{"id":"code-scroll","kind":"block","href":"/catalog/blocks/code-scroll","title":"Code Scroll To Line","tagline":"The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.","description":"The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.","group":"code","section":"Code Animations","tags":["code","code-animation","scroll","developer"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-scroll.json","heavy":false,"width":1920,"height":1080}},{"id":"code-shader-dissolve","kind":"block","href":"/catalog/blocks/code-shader-dissolve","title":"Code Shader Dissolve","tagline":"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.","description":"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.","group":"code","section":"Code Animations","tags":["code","code-animation","shader","webgl","developer"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-shader-dissolve.json","heavy":true,"width":1920,"height":1080}},{"id":"code-typing","kind":"block","href":"/catalog/blocks/code-typing","title":"Code Typing","tagline":"Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.","description":"Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.","group":"code","section":"Code Animations","tags":["code","code-animation","typing","developer"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-typing.json","heavy":false,"width":1920,"height":1080}},{"id":"terminal-simulator","kind":"component","href":"/catalog/components/terminal-simulator","title":"Terminal Simulator","tagline":"A terminal window types commands and streams log output.","description":"A terminal window types commands and streams log output.","group":"code","section":"Code Animations","tags":["code-animation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-simulator.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/terminal-simulator.json","heavy":false,"width":1920,"height":1080}},{"id":"code-snippet-apple-terminal-pro","kind":"block","href":"/catalog/blocks/code-snippet-apple-terminal-pro","title":"Code Snippet - Apple Terminal Pro","tagline":"Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.","description":"Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.","group":"code","section":"Code Snippets","tags":["code","developer","showcase","terminal","apple","apple-terminal"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-snippet-apple-terminal-pro.json","heavy":false,"width":1920,"height":1080}},{"id":"code-snippet-dark-2026","kind":"block","href":"/catalog/blocks/code-snippet-dark-2026","title":"Code Snippet - Dark 2026","tagline":"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.","description":"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.","group":"code","section":"Code Snippets","tags":["code","developer","showcase","vscode"],"tech":[],"duration":11,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/code-snippet-dark-2026.json","heavy":false,"width":1920,"height":1080}},{"id":"code-snippet-dark-modern","kind":"block","href":"/catalog/blocks/code-snippet-dark-modern","title":"Code Snippet - Dark Modern","tagline":"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.","description":"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.","group":"code","section":"Code Snippets","tags":["code","developer","showcase","vscode"],"tech":[],"duration":11,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/code-snippet-dark-modern.json","heavy":false,"width":1920,"height":1080}},{"id":"chromatic-radial-split","kind":"block","href":"/catalog/blocks/chromatic-radial-split","title":"Chromatic Radial Split","tagline":"Shader transition with chromatic aberration radial split","description":"Shader transition with chromatic aberration radial split","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/chromatic-radial-split.json","heavy":true,"width":1920,"height":1080}},{"id":"cinematic-zoom","kind":"block","href":"/catalog/blocks/cinematic-zoom","title":"Cinematic Zoom","tagline":"Shader transition with dramatic zoom blur","description":"Shader transition with dramatic zoom blur","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/cinematic-zoom.json","heavy":true,"width":1920,"height":1080}},{"id":"cross-warp-morph","kind":"block","href":"/catalog/blocks/cross-warp-morph","title":"Cross Warp Morph","tagline":"Shader transition with cross-warped morphing","description":"Shader transition with cross-warped morphing","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/cross-warp-morph.json","heavy":true,"width":1920,"height":1080}},{"id":"domain-warp-dissolve","kind":"block","href":"/catalog/blocks/domain-warp-dissolve","title":"Domain Warp Dissolve","tagline":"Shader transition with fractal noise domain warping","description":"Shader transition with fractal noise domain warping","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/domain-warp-dissolve.json","heavy":true,"width":1920,"height":1080}},{"id":"flash-through-white","kind":"block","href":"/catalog/blocks/flash-through-white","title":"Flash Through White","tagline":"Shader transition with white flash crossfade","description":"Shader transition with white flash crossfade","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/flash-through-white.json","heavy":true,"width":1920,"height":1080}},{"id":"glitch","kind":"block","href":"/catalog/blocks/glitch","title":"Glitch","tagline":"Shader transition with digital glitch artifacts","description":"Shader transition with digital glitch artifacts","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/glitch.json","heavy":true,"width":1920,"height":1080}},{"id":"gravitational-lens","kind":"block","href":"/catalog/blocks/gravitational-lens","title":"Gravitational Lens","tagline":"Shader transition with gravitational lensing distortion","description":"Shader transition with gravitational lensing distortion","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/gravitational-lens.json","heavy":true,"width":1920,"height":1080}},{"id":"light-leak","kind":"block","href":"/catalog/blocks/light-leak","title":"Light Leak","tagline":"Shader transition with cinematic light leak overlay","description":"Shader transition with cinematic light leak overlay","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/light-leak.json","heavy":true,"width":1920,"height":1080}},{"id":"ridged-burn","kind":"block","href":"/catalog/blocks/ridged-burn","title":"Ridged Burn","tagline":"Shader transition with ridged turbulence burn effect","description":"Shader transition with ridged turbulence burn effect","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/ridged-burn.json","heavy":true,"width":1920,"height":1080}},{"id":"ripple-waves","kind":"block","href":"/catalog/blocks/ripple-waves","title":"Ripple Waves","tagline":"Shader transition with concentric ripple wave distortion","description":"Shader transition with concentric ripple wave distortion","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/ripple-waves.json","heavy":true,"width":1920,"height":1080}},{"id":"sdf-iris","kind":"block","href":"/catalog/blocks/sdf-iris","title":"SDF Iris","tagline":"Shader transition with signed distance field iris reveal","description":"Shader transition with signed distance field iris reveal","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/sdf-iris.json","heavy":true,"width":1920,"height":1080}},{"id":"swirl-vortex","kind":"block","href":"/catalog/blocks/swirl-vortex","title":"Swirl Vortex","tagline":"Shader transition with swirling vortex distortion","description":"Shader transition with swirling vortex distortion","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/swirl-vortex.json","heavy":true,"width":1920,"height":1080}},{"id":"thermal-distortion","kind":"block","href":"/catalog/blocks/thermal-distortion","title":"Thermal Distortion","tagline":"Shader transition with heat haze thermal distortion","description":"Shader transition with heat haze thermal distortion","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/thermal-distortion.json","heavy":true,"width":1920,"height":1080}},{"id":"whip-pan","kind":"block","href":"/catalog/blocks/whip-pan","title":"Whip Pan","tagline":"Shader transition simulating a fast camera whip pan","description":"Shader transition simulating a fast camera whip pan","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/whip-pan.json","heavy":true,"width":1920,"height":1080}},{"id":"beat-freeze-cut","kind":"block","href":"/catalog/blocks/beat-freeze-cut","title":"Beat Freeze Cut","tagline":"A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.","description":"A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.","group":"transitions","section":"CSS Transitions","tags":["transition","music","beat-driven","freeze-frame"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/beat-freeze-cut.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-scribble-transition","kind":"block","href":"/catalog/blocks/hw-scribble-transition","title":"Scribble Transition","tagline":"Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears","description":"Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears","group":"transitions","section":"CSS Transitions","tags":["handwritten","transition","wipe"],"tech":[],"duration":2.2,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-scribble-transition.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-clone-wall-transition","kind":"block","href":"/catalog/blocks/mk-clone-wall-transition","title":"Text Clone Wall Transition","tagline":"Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered","description":"Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered","group":"transitions","section":"CSS Transitions","tags":["transition","typography","wipe"],"tech":[],"duration":2.4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-clone-wall-transition.json","heavy":false,"width":1920,"height":1080}},{"id":"organic-light-leak-overlay","kind":"block","href":"/catalog/blocks/organic-light-leak-overlay","title":"Organic Light Leak Overlay","tagline":"Finite CSS light-leak overlay for memory beats and motivated transitions","description":"Finite CSS light-leak overlay for memory beats and motivated transitions","group":"transitions","section":"CSS Transitions","tags":["light-leak","film","memory","transition","overlay","media-treatment-overlay"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/organic-light-leak-overlay.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-3d","kind":"block","href":"/catalog/blocks/transitions-3d","title":"3D Transitions","tagline":"Showcase of 3D perspective flip and rotate transitions","description":"Showcase of 3D perspective flip and rotate transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":11,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-3d.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-blur","kind":"block","href":"/catalog/blocks/transitions-blur","title":"Blur Transitions","tagline":"Showcase of blur-based transitions between scenes","description":"Showcase of blur-based transitions between scenes","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":20,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-blur.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-cover","kind":"block","href":"/catalog/blocks/transitions-cover","title":"Cover Transitions","tagline":"Showcase of cover/uncover slide transitions","description":"Showcase of cover/uncover slide transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":21,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-cover.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-destruction","kind":"block","href":"/catalog/blocks/transitions-destruction","title":"Destruction Transitions","tagline":"Showcase of destructive break-apart transitions","description":"Showcase of destructive break-apart transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":14,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-destruction.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-dissolve","kind":"block","href":"/catalog/blocks/transitions-dissolve","title":"Dissolve Transitions","tagline":"Showcase of dissolve and fade transitions","description":"Showcase of dissolve and fade transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":24,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-dissolve.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-distortion","kind":"block","href":"/catalog/blocks/transitions-distortion","title":"Distortion Transitions","tagline":"Showcase of warp and distortion transitions","description":"Showcase of warp and distortion transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":21,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-distortion.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-grid","kind":"block","href":"/catalog/blocks/transitions-grid","title":"Grid Transitions","tagline":"Showcase of grid-based tile transitions","description":"Showcase of grid-based tile transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":11,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-grid.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-light","kind":"block","href":"/catalog/blocks/transitions-light","title":"Light Transitions","tagline":"Showcase of light-based glow and flash transitions","description":"Showcase of light-based glow and flash transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":21,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-light.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-mechanical","kind":"block","href":"/catalog/blocks/transitions-mechanical","title":"Mechanical Transitions","tagline":"Showcase of mechanical shutter and iris transitions","description":"Showcase of mechanical shutter and iris transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-mechanical.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-other","kind":"block","href":"/catalog/blocks/transitions-other","title":"Other Transitions","tagline":"Showcase of miscellaneous creative transitions","description":"Showcase of miscellaneous creative transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":20,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-other.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-push","kind":"block","href":"/catalog/blocks/transitions-push","title":"Push Transitions","tagline":"Showcase of push and slide transitions","description":"Showcase of push and slide transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":24,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-push.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-radial","kind":"block","href":"/catalog/blocks/transitions-radial","title":"Radial Transitions","tagline":"Showcase of radial wipe and reveal transitions","description":"Showcase of radial wipe and reveal transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":20,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-radial.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-scale","kind":"block","href":"/catalog/blocks/transitions-scale","title":"Scale Transitions","tagline":"Showcase of scale and zoom transitions","description":"Showcase of scale and zoom transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-scale.json","heavy":false,"width":1920,"height":1080}},{"id":"animated-bar-chart","kind":"component","href":"/catalog/components/animated-bar-chart","title":"Animated Bar Chart","tagline":"A compact data card with deterministic bar growth and value callouts.","description":"A compact data card with deterministic bar growth and value callouts.","group":"data-charts","section":"Data","tags":["data"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-bar-chart.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/animated-bar-chart.json","heavy":false,"width":1920,"height":1080}},{"id":"ascii-render-pass","kind":"component","href":"/catalog/components/ascii-render-pass","title":"ASCII Render Pass","tagline":"A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.","description":"A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.","group":"data-charts","section":"Data","tags":["motion-primitive","experiment","texture","ascii","quantize"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ascii-render-pass.json","heavy":false,"width":1920,"height":1080}},{"id":"ascii-trail-reveal","kind":"component","href":"/catalog/components/ascii-trail-reveal","title":"ASCII Trail Reveal","tagline":"An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.","description":"An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.","group":"data-charts","section":"Data","tags":["motion-primitive","intro","reveal","ascii","trail","grid"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ascii-trail-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"bar-chart-race","kind":"block","href":"/catalog/blocks/bar-chart-race","title":"Bar Chart Race","tagline":"Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads","description":"Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads","group":"data-charts","section":"Data","tags":["data","chart","statistics","ranking"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/bar-chart-race.json","heavy":false,"width":1920,"height":1080}},{"id":"chart-story","kind":"component","href":"/catalog/components/chart-story","title":"Chart Story","tagline":"One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.","description":"One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.","group":"data-charts","section":"Data","tags":["motion-primitive","proof","stats","chart","bars","line","donut","progress","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/chart-story.json","heavy":false,"width":1920,"height":1080}},{"id":"conic-progress-ring","kind":"component","href":"/catalog/components/conic-progress-ring","title":"Conic Progress Ring","tagline":"A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.","description":"A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.","group":"data-charts","section":"Data","tags":["data","progress","ring","conic-gradient","prove","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/conic-progress-ring.json","heavy":false,"width":1920,"height":1080}},{"id":"data-chart","kind":"block","href":"/catalog/blocks/data-chart","title":"Data Chart","tagline":"Animated bar + line chart with staggered reveal, NYT-style typography, and value labels","description":"Animated bar + line chart with staggered reveal, NYT-style typography, and value labels","group":"data-charts","section":"Data","tags":["data","chart","statistics"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/data-chart.json","heavy":false,"width":1920,"height":1080}},{"id":"decline-chart","kind":"component","href":"/catalog/components/decline-chart","title":"Decline Chart","tagline":"A metric line draws downward as its value counts down and the ambient background darkens in lockstep.","description":"A metric line draws downward as its value counts down and the ambient background darkens in lockstep.","group":"data-charts","section":"Data","tags":["motion-primitive","data","chart","decline","metric","problem"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/decline-chart.json","heavy":false,"width":1920,"height":1080}},{"id":"logo-wall","kind":"component","href":"/catalog/components/logo-wall","title":"Logo Wall","tagline":"A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.","description":"A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.","group":"data-charts","section":"Data","tags":["data","logos","social-proof","stagger","prove"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/logo-wall.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-line-graph","kind":"block","href":"/catalog/blocks/mk-line-graph","title":"Minimal Line Graph","tagline":"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","description":"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","group":"data-charts","section":"Data","tags":["data-viz","chart","graph","minimal"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-line-graph.json","heavy":false,"width":1920,"height":1080}},{"id":"spain-map","kind":"block","href":"/catalog/blocks/spain-map","title":"Spain Map","tagline":"Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection","description":"Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection","group":"data-charts","section":"Data","tags":["data","map","geography","spain","europe","choropleth"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/spain-map.json","heavy":false,"width":1920,"height":1080}},{"id":"star-rating-fill","kind":"component","href":"/catalog/components/star-rating-fill","title":"Star Rating Fill","tagline":"A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.","description":"A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.","group":"data-charts","section":"Data","tags":["data","rating","stars","fractional","fill","prove"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/star-rating-fill.json","heavy":false,"width":1920,"height":1080}},{"id":"us-map","kind":"block","href":"/catalog/blocks/us-map","title":"US Map","tagline":"Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP","description":"Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP","group":"data-charts","section":"Data","tags":["data","map","geography","usa","choropleth"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/us-map.json","heavy":false,"width":1920,"height":1080}},{"id":"us-map-bubble","kind":"block","href":"/catalog/blocks/us-map-bubble","title":"US Bubble Map","tagline":"Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map","description":"Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map","group":"data-charts","section":"Data","tags":["data","map","geography","usa","bubble","cities"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/us-map-bubble.json","heavy":false,"width":1920,"height":1080}},{"id":"us-map-flow","kind":"block","href":"/catalog/blocks/us-map-flow","title":"US Flow Map","tagline":"Animated connection arcs between US cities over a base map — composable origin-destination flow visualization","description":"Animated connection arcs between US cities over a base map — composable origin-destination flow visualization","group":"data-charts","section":"Data","tags":["data","map","geography","usa","flow","connections","arcs"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/us-map-flow.json","heavy":false,"width":1920,"height":1080}},{"id":"us-map-hex","kind":"block","href":"/catalog/blocks/us-map-hex","title":"US Hex Grid Map","tagline":"Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label","description":"Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label","group":"data-charts","section":"Data","tags":["data","map","geography","usa","hexgrid","tilegrid"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/us-map-hex.json","heavy":false,"width":1920,"height":1080}},{"id":"week-in-merges","kind":"block","href":"/catalog/blocks/week-in-merges","title":"Week in Merges","tagline":"Each author's avatar bounces across their row at a speed set by how many pull requests they merged","description":"Each author's avatar bounces across their row at a speed set by how many pull requests they merged","group":"data-charts","section":"Data","tags":["data","chart","ranking","leaderboard"],"tech":[],"duration":16,"width":1080,"height":1350,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/week-in-merges.json","heavy":false,"width":1080,"height":1350}},{"id":"world-map","kind":"block","href":"/catalog/blocks/world-map","title":"World Map","tagline":"Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection","description":"Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection","group":"data-charts","section":"Data","tags":["data","map","geography","world","choropleth"],"tech":[],"duration":14,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/world-map.json","heavy":false,"width":1920,"height":1080}},{"id":"ai-chat-reveal","kind":"block","href":"/catalog/blocks/ai-chat-reveal","title":"AI Chat Reveal","tagline":"A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card","description":"A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","ai","chat","vertical","ad-template"],"tech":[],"duration":19.3333,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/ai-chat-reveal.json","heavy":false,"width":1080,"height":1920}},{"id":"app-showcase","kind":"block","href":"/catalog/blocks/app-showcase","title":"App Showcase","tagline":"Fitness app product showcase with three floating smartphone screens","description":"Fitness app product showcase with three floating smartphone screens","group":"scenes-demos","section":"Showcases","tags":["showcase","app","3d"],"tech":[],"duration":5.5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/app-showcase.json","heavy":false,"width":1920,"height":1080}},{"id":"apple-money-count","kind":"block","href":"/catalog/blocks/apple-money-count","title":"Apple Money Count","tagline":"Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.","description":"Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.","group":"scenes-demos","section":"Showcases","tags":["showcase","finance","kinetic","youtube","sfx"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/apple-money-count.json","heavy":false,"width":1920,"height":1080}},{"id":"blue-sweater-intro-video","kind":"block","href":"/catalog/blocks/blue-sweater-intro-video","title":"Blue Sweater Intro Video","tagline":"Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.","description":"Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.","group":"scenes-demos","section":"Showcases","tags":["showcase","ai","creator","sfx"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/blue-sweater-intro-video.json","heavy":false,"width":1920,"height":1080}},{"id":"camera-dolly-zoom","kind":"block","href":"/catalog/blocks/camera-dolly-zoom","title":"Dolly Zoom (Vertigo Shot)","tagline":"Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move.","description":"Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move.","group":"scenes-demos","section":"Showcases","tags":["camera","depth","3d","cinematic"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/camera-dolly-zoom.json","heavy":false,"width":1920,"height":1080}},{"id":"chatgpt-exchange","kind":"block","href":"/catalog/blocks/chatgpt-exchange","title":"ChatGPT Exchange","tagline":"A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result","description":"A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","ai","chat","vertical","ad-template"],"tech":[],"duration":14.9,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/chatgpt-exchange.json","heavy":false,"width":1080,"height":1920}},{"id":"claude-exchange","kind":"block","href":"/catalog/blocks/claude-exchange","title":"Claude Exchange","tagline":"A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions","description":"A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","ai","chat","vertical","ad-template"],"tech":[],"duration":21.4,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/claude-exchange.json","heavy":false,"width":1080,"height":1920}},{"id":"cosmic-orb","kind":"block","href":"/catalog/blocks/cosmic-orb","title":"Cosmic Orb","tagline":"An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge.","description":"An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge.","group":"scenes-demos","section":"Showcases","tags":["webgl","shader","background","showcase","3d"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/cosmic-orb.json","heavy":true,"width":1920,"height":1080}},{"id":"gallery-tunnel","kind":"block","href":"/catalog/blocks/gallery-tunnel","title":"Gallery Tunnel","tagline":"An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog.","description":"An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog.","group":"scenes-demos","section":"Showcases","tags":["webgl","3d","background","showcase","depth","loop"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/gallery-tunnel.json","heavy":false,"width":1920,"height":1080}},{"id":"heygen-avatar-promo-card","kind":"block","href":"/catalog/blocks/heygen-avatar-promo-card","title":"HeyGen Avatar Promo Card","tagline":"A portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout","description":"A portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout","group":"scenes-demos","section":"Showcases","tags":["showcase","avatar","promotion","vertical"],"tech":[],"duration":10,"width":1080,"height":1920,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/heygen-avatar-promo-card.json","heavy":false,"width":1080,"height":1920}},{"id":"message-thread-reveal","kind":"block","href":"/catalog/blocks/message-thread-reveal","title":"Message Thread Reveal","tagline":"A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message","description":"A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","chat","vertical","ad-template"],"tech":[],"duration":25.7667,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/message-thread-reveal.json","heavy":false,"width":1080,"height":1920}},{"id":"north-korea-locked-down","kind":"block","href":"/catalog/blocks/north-korea-locked-down","title":"North Korea Locked Down","tagline":"Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.","description":"Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.","group":"scenes-demos","section":"Showcases","tags":["showcase","map","annotation","youtube","kinetic"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/north-korea-locked-down.json","heavy":false,"width":1920,"height":1080}},{"id":"notes-reveal","kind":"block","href":"/catalog/blocks/notes-reveal","title":"Notes Reveal","tagline":"A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist","description":"A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","notes","typing","vertical","ad-template"],"tech":[],"duration":24.85,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/notes-reveal.json","heavy":false,"width":1080,"height":1920}},{"id":"notification-cascade","kind":"block","href":"/catalog/blocks/notification-cascade","title":"Notification Cascade","tagline":"Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card","description":"Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","notification","vertical","ad-template"],"tech":[],"duration":14,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/notification-cascade.json","heavy":false,"width":1080,"height":1920}},{"id":"nyc-paris-flight","kind":"block","href":"/catalog/blocks/nyc-paris-flight","title":"NYC Paris Flight","tagline":"Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.","description":"Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.","group":"scenes-demos","section":"Showcases","tags":["showcase","travel","map","youtube","sfx"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/nyc-paris-flight.json","heavy":false,"width":1920,"height":1080}},{"id":"oscilloscope-trace","kind":"block","href":"/catalog/blocks/oscilloscope-trace","title":"Oscilloscope Trace","tagline":"CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows","description":"CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows","group":"scenes-demos","section":"Showcases","tags":["instrument","data","showcase","retro"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/oscilloscope-trace.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/oscilloscope-trace.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/oscilloscope-trace.json","heavy":false,"width":1920,"height":1080}},{"id":"rack-focus","kind":"block","href":"/catalog/blocks/rack-focus","title":"Rack Focus","tagline":"A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables.","description":"A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables.","group":"scenes-demos","section":"Showcases","tags":["webgl","shader","camera","depth","cinematic","showcase"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/rack-focus.json","heavy":true,"width":1920,"height":1080}},{"id":"share-sheet-carousel","kind":"block","href":"/catalog/blocks/share-sheet-carousel","title":"Share-Sheet Carousel","tagline":"A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap","description":"A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","share-sheet","vertical","ad-template"],"tech":[],"duration":7.2333,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/share-sheet-carousel.json","heavy":false,"width":1080,"height":1920}},{"id":"slack-notification-ad","kind":"block","href":"/catalog/blocks/slack-notification-ad","title":"Slack Notification Ad","tagline":"A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff","description":"A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","notification","vertical","ad-template"],"tech":[],"duration":12,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/slack-notification-ad.json","heavy":false,"width":1080,"height":1920}},{"id":"ui-3d-reveal","kind":"block","href":"/catalog/blocks/ui-3d-reveal","title":"3D UI Reveal","tagline":"Perspective 3D reveal animation for UI elements","description":"Perspective 3D reveal animation for UI elements","group":"scenes-demos","section":"Showcases","tags":["showcase","3d","reveal"],"tech":[],"duration":13,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/ui-3d-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"vfx-anamorphic-flare","kind":"block","href":"/catalog/blocks/vfx-anamorphic-flare","title":"Anamorphic Streak Flare","tagline":"A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.","description":"A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.","group":"scenes-demos","section":"Showcases","tags":["vfx","background","showcase","optical","canvas"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/vfx-anamorphic-flare.json","heavy":false,"width":1920,"height":1080}},{"id":"vpn-youtube-spot","kind":"block","href":"/catalog/blocks/vpn-youtube-spot","title":"VPN YouTube Spot","tagline":"Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.","description":"Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.","group":"scenes-demos","section":"Showcases","tags":["app","showcase","youtube","sfx"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/vpn-youtube-spot.json","heavy":false,"width":1920,"height":1080}},{"id":"browser-device-stage","kind":"component","href":"/catalog/components/browser-device-stage","title":"Browser Device Stage","tagline":"A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap.","description":"A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap.","group":"scenes-demos","section":"Product Demo","tags":["stage","product-demo","device","browser","phone","slot","chrome"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/browser-device-stage.json","heavy":false,"width":1920,"height":1080}},{"id":"code-terminal-run","kind":"component","href":"/catalog/components/code-terminal-run","title":"Code Terminal Run","tagline":"A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.","description":"A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","terminal","typing","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/code-terminal-run.json","heavy":false,"width":1920,"height":1080}},{"id":"cursor-glyph-trail","kind":"component","href":"/catalog/components/cursor-glyph-trail","title":"Cursor Glyph Trail","tagline":"An actor travels an authored path depositing small dithered glyphs at its past positions, each popping in and decaying in place, stamp rate scaling with the actor's velocity.","description":"An actor travels an authored path depositing small dithered glyphs at its past positions, each popping in and decaying in place, stamp rate scaling with the actor's velocity.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","demonstrate","trail","cursor","glyphs","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/cursor-glyph-trail.json","heavy":false,"width":1920,"height":1080}},{"id":"echo-trail","kind":"component","href":"/catalog/components/echo-trail","title":"Echo Trail","tagline":"A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest.","description":"A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","demonstrate","trail","onion-skin","ghosts","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/echo-trail.json","heavy":false,"width":1920,"height":1080}},{"id":"focus-swap","kind":"component","href":"/catalog/components/focus-swap","title":"Focus Swap","tagline":"Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.","description":"Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.","group":"scenes-demos","section":"Product Demo","tags":["effect","ui-props","focus","blur","attention","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/focus-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"icon-morph-beat","kind":"component","href":"/catalog/components/icon-morph-beat","title":"Icon Morph Beat","tagline":"An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.","description":"An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","icon","morph","state-change","completion"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/icon-morph-beat.json","heavy":false,"width":1920,"height":1080}},{"id":"native-notification-pop","kind":"component","href":"/catalog/components/native-notification-pop","title":"Native Notification Pop","tagline":"One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit.","description":"One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","overlay","notification","spring"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/native-notification-pop.json","heavy":false,"width":1920,"height":1080}},{"id":"notification-stack","kind":"component","href":"/catalog/components/notification-stack","title":"Notification Stack","tagline":"1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.","description":"1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","notification","stack","stagger"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/notification-stack.json","heavy":false,"width":1920,"height":1080}},{"id":"offset-path-traveler","kind":"component","href":"/catalog/components/offset-path-traveler","title":"Offset Path Traveler","tagline":"A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.","description":"A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","path","traveler","auto-rotate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/offset-path-traveler.json","heavy":false,"width":1920,"height":1080}},{"id":"press-ripple","kind":"component","href":"/catalog/components/press-ripple","title":"Press Ripple","tagline":"A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with ink ripple rings, then exits off-stage while the pressed state holds.","description":"A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with ink ripple rings, then exits off-stage while the pressed state holds.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","cursor","press","ripple","payoff"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/press-ripple.json","heavy":false,"width":1920,"height":1080}},{"id":"pull-to-refresh","kind":"component","href":"/catalog/components/pull-to-refresh","title":"Pull to Refresh","tagline":"A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.","description":"A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.","group":"scenes-demos","section":"Product Demo","tags":["pointer","pointers","mobile","gesture","interaction","refresh","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/pull-to-refresh.json","heavy":false,"width":1920,"height":1080}},{"id":"screen-flow-carousel","kind":"component","href":"/catalog/components/screen-flow-carousel","title":"Screen Flow Carousel","tagline":"Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults.","description":"Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults.","group":"scenes-demos","section":"Product Demo","tags":["product-demo","feature-tour","carousel","rail","slot","screens"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/screen-flow-carousel.json","heavy":false,"width":1920,"height":1080}},{"id":"segmentation-flood","kind":"component","href":"/catalog/components/segmentation-flood","title":"Segmentation Flood","tagline":"Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean.","description":"Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","ai","hud","canvas","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/segmentation-flood.json","heavy":false,"width":1920,"height":1080}},{"id":"soft-blob-touch","kind":"component","href":"/catalog/components/soft-blob-touch","title":"Soft Blob Touch","tagline":"A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.","description":"A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","material","blob","touch","grain"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/soft-blob-touch.json","heavy":false,"width":1920,"height":1080}},{"id":"spring-stack-shuffle","kind":"component","href":"/catalog/components/spring-stack-shuffle","title":"Spring Stack Shuffle","tagline":"A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved.","description":"A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","physics","stack","interruptible-spring"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/spring-stack-shuffle.json","heavy":false,"width":1920,"height":1080}},{"id":"state-chip-rail","kind":"component","href":"/catalog/components/state-chip-rail","title":"State Chip Rail","tagline":"A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state.","description":"A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","state-machine","status","chips","rail"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/state-chip-rail.json","heavy":false,"width":1920,"height":1080}},{"id":"sticky-mock-swap","kind":"component","href":"/catalog/components/sticky-mock-swap","title":"Sticky Mock Swap","tagline":"A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.","description":"A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","sticky","mock","crossfade","feature-tour"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/sticky-mock-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"telemetry-hud","kind":"component","href":"/catalog/components/telemetry-hud","title":"Telemetry HUD","tagline":"Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.","description":"Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","hud","telemetry","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/telemetry-hud.json","heavy":false,"width":1920,"height":1080}},{"id":"toggle-flip","kind":"component","href":"/catalog/components/toggle-flip","title":"Toggle Flip","tagline":"An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.","description":"An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.","group":"scenes-demos","section":"Product Demo","tags":["prop","ui-props","toggle","interaction","reference-prop","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/toggle-flip.json","heavy":false,"width":1920,"height":1080}},{"id":"tracing-beam","kind":"component","href":"/catalog/components/tracing-beam","title":"Tracing Beam","tagline":"A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.","description":"A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","attention","beam","path","spotlight"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/tracing-beam.json","heavy":false,"width":1920,"height":1080}},{"id":"typed-prompt","kind":"component","href":"/catalog/components/typed-prompt","title":"Typed Prompt","tagline":"A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.","description":"A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","typing","prompt","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/typed-prompt.json","heavy":false,"width":1920,"height":1080}},{"id":"vector-editor-rig","kind":"component","href":"/catalog/components/vector-editor-rig","title":"Vector Editor Rig","tagline":"A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.","description":"A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.","group":"scenes-demos","section":"Product Demo","tags":["prop","ui-props","demonstrate","vector","design-tool","pen-tool","bezier","app-chrome"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/vector-editor-rig.json","heavy":false,"width":1920,"height":1080}},{"id":"editorial-flash-overlay","kind":"block","href":"/catalog/blocks/editorial-flash-overlay","title":"Editorial Flash Overlay","tagline":"Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal","description":"Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal","group":"scenes-demos","section":"Social Overlays","tags":["flash","editorial","social","light","transition","overlay","media-treatment-overlay"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/editorial-flash-overlay.json","heavy":false,"width":1920,"height":1080}},{"id":"freeze-frame-dressing","kind":"block","href":"/catalog/blocks/freeze-frame-dressing","title":"Freeze-Frame Dressing","tagline":"Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject","description":"Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject","group":"scenes-demos","section":"Social Overlays","tags":["freeze-frame","cutout","scrapbook","paper","social","overlay","media-treatment-overlay"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/freeze-frame-dressing.json","heavy":false,"width":1920,"height":1080}},{"id":"instagram-follow","kind":"block","href":"/catalog/blocks/instagram-follow","title":"Instagram Follow","tagline":"Animated Instagram follow overlay with profile card and follow button","description":"Animated Instagram follow overlay with profile card and follow button","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","instagram"],"tech":[],"duration":4.5,"width":1080,"height":1920,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/instagram-follow.json","heavy":false,"width":1080,"height":1920}},{"id":"macos-notification","kind":"block","href":"/catalog/blocks/macos-notification","title":"macOS Notification","tagline":"Animated macOS-style notification banner with app icon and message","description":"Animated macOS-style notification banner with app icon and message","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","notification"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/macos-notification.json","heavy":false,"width":1920,"height":1080}},{"id":"reddit-post","kind":"block","href":"/catalog/blocks/reddit-post","title":"Reddit Post Card","tagline":"Animated Reddit post card overlay with upvotes and comments","description":"Animated Reddit post card overlay with upvotes and comments","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","reddit"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/reddit-post.json","heavy":false,"width":1920,"height":1080}},{"id":"spotify-card","kind":"block","href":"/catalog/blocks/spotify-card","title":"Spotify Now Playing","tagline":"Animated Spotify now-playing card with album art and progress bar","description":"Animated Spotify now-playing card with album art and progress bar","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","spotify"],"tech":[],"duration":5,"width":1080,"height":1920,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/spotify-card.json","heavy":false,"width":1080,"height":1920}},{"id":"thread-message-stack","kind":"block","href":"/catalog/blocks/thread-message-stack","title":"Thread Message Stack","tagline":"A source-owned editable conversation stack with arbitrary incoming and outgoing messages","description":"A source-owned editable conversation stack with arbitrary incoming and outgoing messages","group":"scenes-demos","section":"Social Overlays","tags":["social","conversation","messages"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/thread-message-stack.json","heavy":false,"width":1920,"height":1080}},{"id":"tiktok-follow","kind":"block","href":"/catalog/blocks/tiktok-follow","title":"TikTok Follow","tagline":"Animated TikTok follow overlay with profile card and follow button","description":"Animated TikTok follow overlay with profile card and follow button","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","tiktok"],"tech":[],"duration":4.5,"width":1080,"height":1920,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/tiktok-follow.json","heavy":false,"width":1080,"height":1920}},{"id":"x-post","kind":"block","href":"/catalog/blocks/x-post","title":"X Post Card","tagline":"Animated X/Twitter post card overlay with engagement metrics","description":"Animated X/Twitter post card overlay with engagement metrics","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","twitter"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/x-post.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-comment-card","kind":"block","href":"/catalog/blocks/yt-comment-card","title":"Comment Cards","tagline":"Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips","description":"Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips","group":"scenes-demos","section":"Social Overlays","tags":["social","comments","creator","overlay"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/yt-comment-card.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-lower-third","kind":"block","href":"/catalog/blocks/yt-lower-third","title":"YouTube Lower Third","tagline":"Animated YouTube subscribe lower third with avatar and channel info","description":"Animated YouTube subscribe lower third with avatar and channel info","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","youtube"],"tech":[],"duration":4.5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/yt-lower-third.json","heavy":false,"width":1920,"height":1080}},{"id":"aurora-drift","kind":"component","href":"/catalog/components/aurora-drift","title":"Aurora Drift","tagline":"Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.","description":"Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","background","aurora","gradient","ambient","loopable"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/aurora-drift.json","heavy":false,"width":1920,"height":1080}},{"id":"beat-accent","kind":"component","href":"/catalog/components/beat-accent","title":"Beat Accent","tagline":"A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.","description":"A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","effects","burst","sting","emphasize","impact"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/beat-accent.json","heavy":false,"width":1920,"height":1080}},{"id":"beat-pulse-background","kind":"component","href":"/catalog/components/beat-pulse-background","title":"Beat Pulse Background","tagline":"An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.","description":"An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","background","beat","pulse","rhythmic","reactive"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/beat-pulse-background.json","heavy":false,"width":1920,"height":1080}},{"id":"chat-thread","kind":"component","href":"/catalog/components/chat-thread","title":"Chat Thread","tagline":"The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits","description":"The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","chat","mock-ui","conversation","vertical"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/chat-thread.json","heavy":false,"width":1920,"height":1080}},{"id":"constellation-hub","kind":"component","href":"/catalog/components/constellation-hub","title":"Constellation Hub","tagline":"Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.","description":"Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","feature-tour","hub","nodes","connector","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/constellation-hub.json","heavy":false,"width":1920,"height":1080}},{"id":"count-up","kind":"component","href":"/catalog/components/count-up","title":"Count Up","tagline":"A token-native stat counter that eases between values and lands with a restrained scale pulse.","description":"A token-native stat counter that eases between values and lands with a restrained scale pulse.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","proof","stats","counter","number","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/count-up.json","heavy":false,"width":1920,"height":1080}},{"id":"cta-close","kind":"component","href":"/catalog/components/cta-close","title":"CTA Close","tagline":"A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.","description":"A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","ui-props","cta","end-card","close","ask"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/cta-close.json","heavy":false,"width":1920,"height":1080}},{"id":"cta-lockup","kind":"component","href":"/catalog/components/cta-lockup","title":"CTA Lockup","tagline":"A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.","description":"A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","ui-props","cta","end-card","lockup","ask"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/cta-lockup.json","heavy":false,"width":1920,"height":1080}},{"id":"facet-morph","kind":"component","href":"/catalog/components/facet-morph","title":"Facet Morph","tagline":"A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.","description":"A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","intro","morph","low-poly","svg","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/facet-morph.json","heavy":false,"width":1920,"height":1080}},{"id":"gesture-tap","kind":"component","href":"/catalog/components/gesture-tap","title":"Gesture Tap","tagline":"A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.","description":"A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","gesture","tap","interaction","ui-props"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/gesture-tap.json","heavy":false,"width":1920,"height":1080}},{"id":"gloss-sweep","kind":"component","href":"/catalog/components/gloss-sweep","title":"Gloss Sweep","tagline":"A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.","description":"A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","celebration","gloss","card","badge","payoff"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/gloss-sweep.json","heavy":false,"width":1920,"height":1080}},{"id":"grade-split-reveal","kind":"component","href":"/catalog/components/grade-split-reveal","title":"Grade Split Reveal","tagline":"The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match.","description":"The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match.","group":"scenes-demos","section":"Motion Scenes","tags":["color-grading","media","compare","reveal","motion-primitive","grade"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/grade-split-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"grid-card-assemble","kind":"component","href":"/catalog/components/grid-card-assemble","title":"Grid Card Assemble","tagline":"N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.","description":"N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","layout","grid","list","stagger","assemble","feature-tour"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/grid-card-assemble.json","heavy":false,"width":1920,"height":1080}},{"id":"light-sweep-pass","kind":"component","href":"/catalog/components/light-sweep-pass","title":"Light Sweep Pass","tagline":"A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty.","description":"A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","overlay","light","sweep","slots","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/light-sweep-pass.json","heavy":false,"width":1920,"height":1080}},{"id":"locked-nucleus-orbit","kind":"component","href":"/catalog/components/locked-nucleus-orbit","title":"Locked Nucleus Orbit","tagline":"A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.","description":"A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","intro","reveal","orbit","lockup","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/locked-nucleus-orbit.json","heavy":false,"width":1920,"height":1080}},{"id":"logo-sting","kind":"component","href":"/catalog/components/logo-sting","title":"Logo Sting","tagline":"A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.","description":"A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","brand","logo","sting","impact","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/logo-sting.json","heavy":false,"width":1920,"height":1080}},{"id":"marker-checklist-card","kind":"component","href":"/catalog/components/marker-checklist-card","title":"Marker Checklist Card","tagline":"A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows","description":"A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","handwritten","checklist","paper","marker"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/marker-checklist-card.json","heavy":false,"width":1920,"height":1080}},{"id":"modal-morph","kind":"component","href":"/catalog/components/modal-morph","title":"Modal Morph","tagline":"A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.","description":"A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","structure","flip","shared-element","modal","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/modal-morph.json","heavy":false,"width":1920,"height":1080}},{"id":"multi-device-splay","kind":"component","href":"/catalog/components/multi-device-splay","title":"Multi Device Splay","tagline":"Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.","description":"Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","device","phone","tablet","desktop","splay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/multi-device-splay.json","heavy":false,"width":1920,"height":1080}},{"id":"notes-typing","kind":"component","href":"/catalog/components/notes-typing","title":"Notes Typing","tagline":"The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter","description":"The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","notes","typing","mock-ui","vertical"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/notes-typing.json","heavy":false,"width":1920,"height":1080}},{"id":"outline-draw","kind":"component","href":"/catalog/components/outline-draw","title":"Outline Draw","tagline":"A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.","description":"A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","effects","outline","border","mask","proof"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/outline-draw.json","heavy":false,"width":1920,"height":1080}},{"id":"oversized-cursor","kind":"component","href":"/catalog/components/oversized-cursor","title":"Oversized Cursor","tagline":"A deliberately oversized macOS-style pointer that enters off-screen, travels to a target, clicks to ignite a visible response, then exits","description":"A deliberately oversized macOS-style pointer that enters off-screen, travels to a target, clicks to ignite a visible response, then exits","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","actor","cursor","pointer","interaction"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/oversized-cursor.json","heavy":false,"width":1920,"height":1080}},{"id":"particle-image-reveal","kind":"component","href":"/catalog/components/particle-image-reveal","title":"Particle Image Reveal","tagline":"A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.","description":"A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","intros-reveals","particles","reveal","canvas","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/particle-image-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"physical-exit","kind":"component","href":"/catalog/components/physical-exit","title":"Physical Exit","tagline":"A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.","description":"A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","exit","momentum","toss","drop","slide"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/physical-exit.json","heavy":false,"width":1920,"height":1080}},{"id":"radial-surround","kind":"component","href":"/catalog/components/radial-surround","title":"Radial Surround","tagline":"Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.","description":"Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","problem-setup","radial","ring","surround","converge"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/radial-surround.json","heavy":false,"width":1920,"height":1080}},{"id":"scroll-feed","kind":"component","href":"/catalog/components/scroll-feed","title":"Scroll Feed","tagline":"A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.","description":"A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","effects","scroll","feed","loop","agitation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/scroll-feed.json","heavy":false,"width":1920,"height":1080}},{"id":"slit-scan-reveal","kind":"component","href":"/catalog/components/slit-scan-reveal","title":"Slit Scan Reveal","tagline":"The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent.","description":"The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","time","slit-scan","canvas","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/slit-scan-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"social-proof-card","kind":"component","href":"/catalog/components/social-proof-card","title":"Social Proof Card","tagline":"The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup","description":"The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","social-proof","end-card","cta","vertical"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/social-proof-card.json","heavy":false,"width":1920,"height":1080}},{"id":"split-tilt-cards","kind":"component","href":"/catalog/components/split-tilt-cards","title":"Split Tilt Cards","tagline":"Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.","description":"Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","layout","compare","holdable","book-open","tilt","slots"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/split-tilt-cards.json","heavy":false,"width":1920,"height":1080}},{"id":"spring-pop","kind":"component","href":"/catalog/components/spring-pop","title":"Spring Pop","tagline":"A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.","description":"A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","effects","spring","overshoot","pop","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/spring-pop.json","heavy":false,"width":1920,"height":1080}},{"id":"stitched-text-draw","kind":"component","href":"/catalog/components/stitched-text-draw","title":"Stitched Text Draw","tagline":"Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter.","description":"Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","experiment","type","craft","stitch","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/stitched-text-draw.json","heavy":false,"width":1920,"height":1080}},{"id":"stop-motion-cadence","kind":"component","href":"/catalog/components/stop-motion-cadence","title":"Stop Motion Cadence","tagline":"The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames.","description":"The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","time-law","stop-motion","stepped","boil","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/stop-motion-cadence.json","heavy":false,"width":1920,"height":1080}},{"id":"svg-stroke-trace","kind":"component","href":"/catalog/components/svg-stroke-trace","title":"SVG Stroke Trace","tagline":"An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.","description":"An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","intro","reveal","svg","stroke","line-draw"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/svg-stroke-trace.json","heavy":false,"width":1920,"height":1080}},{"id":"swipe-rail","kind":"component","href":"/catalog/components/swipe-rail","title":"Swipe Rail","tagline":"A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.","description":"A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","interaction","gesture","swipe","cards","rail"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/swipe-rail.json","heavy":false,"width":1920,"height":1080}},{"id":"testimonial-proof-card","kind":"component","href":"/catalog/components/testimonial-proof-card","title":"Testimonial Proof Card","tagline":"A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.","description":"A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","proof","testimonial","quote","social-proof","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/testimonial-proof-card.json","heavy":false,"width":1920,"height":1080}},{"id":"touch-indicator","kind":"component","href":"/catalog/components/touch-indicator","title":"Touch Indicator","tagline":"A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass, causes a same-frame response, and lifts. Tap or swipe, picked by variable.","description":"A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass, causes a same-frame response, and lifts. Tap or swipe, picked by variable.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","mobile","gesture","touch","pointer"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/touch-indicator.json","heavy":false,"width":1920,"height":1080}},{"id":"trust-strip","kind":"component","href":"/catalog/components/trust-strip","title":"Trust Strip","tagline":"A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.","description":"A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","proof","trust","logo-strip","wordmarks"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/trust-strip.json","heavy":false,"width":1920,"height":1080}},{"id":"variable-font-flex","kind":"component","href":"/catalog/components/variable-font-flex","title":"Variable Font Flex","tagline":"A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.","description":"A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","experiment","type","variable-font","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/variable-font-flex.json","heavy":false,"width":1920,"height":1080}},{"id":"velocity-throw-snap","kind":"component","href":"/catalog/components/velocity-throw-snap","title":"Velocity Throw Snap","tagline":"A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.","description":"A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","feature-tour","rail","velocity","throw","snap","physics"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/velocity-throw-snap.json","heavy":false,"width":1920,"height":1080}},{"id":"whiteboard-ink","kind":"component","href":"/catalog/components/whiteboard-ink","title":"Whiteboard Ink","tagline":"A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.","description":"A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","intro","reveal","svg","whiteboard","line-draw","slot"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/whiteboard-ink.json","heavy":false,"width":1920,"height":1080}},{"id":"arc-motion-path","kind":"component","href":"/catalog/components/arc-motion-path","title":"Arc Motion Path","tagline":"A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation.","description":"A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motionpath","gsap-plugin","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/arc-motion-path.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/arc-motion-path.json","heavy":false,"width":1920,"height":1080}},{"id":"avatar-group-hover","kind":"component","href":"/catalog/components/avatar-group-hover","title":"Avatar Group Hover","tagline":"A distance-falloff avatar group lift with bouncy hover return","description":"A distance-falloff avatar group lift with bouncy hover return","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","avatar","hover"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/avatar-group-hover.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/avatar-group-hover.json","heavy":false,"width":1920,"height":1080}},{"id":"badge-pop","kind":"component","href":"/catalog/components/badge-pop","title":"Badge Pop","tagline":"A transitions.dev-inspired notification badge pop with elastic scale and count reveal","description":"A transitions.dev-inspired notification badge pop with elastic scale and count reveal","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","badge","microinteraction"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/badge-pop.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/badge-pop.json","heavy":false,"width":1920,"height":1080}},{"id":"blur-in","kind":"component","href":"/catalog/components/blur-in","title":"Blur In","tagline":"An Operator Black word-level content reveal that resolves its own text from controlled blur","description":"An Operator Black word-level content reveal that resolves its own text from controlled blur","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","blur-in","text-effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/blur-in.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/blur-in.json","heavy":false,"width":1920,"height":1080}},{"id":"card-resize","kind":"component","href":"/catalog/components/card-resize","title":"Card Resize","tagline":"A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel","description":"A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","card","layout"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/card-resize.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/card-resize.json","heavy":false,"width":1920,"height":1080}},{"id":"chat-message","kind":"component","href":"/catalog/components/chat-message","title":"Chat Message","tagline":"One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from","description":"One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","chat","mock-ui","message"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/chat-message.json","heavy":false,"width":1920,"height":1080}},{"id":"chromatic-aberration-wipe","kind":"component","href":"/catalog/components/chromatic-aberration-wipe","title":"Chromatic Aberration Wipe","tagline":"A fast slide wipe with RGB channel split on peak frames.","description":"A fast slide wipe with RGB channel split on peak frames.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/chromatic-aberration-wipe.json","heavy":false,"width":1920,"height":1080}},{"id":"dynamic-grid","kind":"component","href":"/catalog/components/dynamic-grid","title":"Dynamic Grid","tagline":"A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes","description":"A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","background","grid","ui"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dynamic-grid.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/dynamic-grid.json","heavy":false,"width":1920,"height":1080}},{"id":"icon-swap","kind":"component","href":"/catalog/components/icon-swap","title":"Icon Swap","tagline":"A scale-and-blur icon swap primitive for toolbar and action state changes","description":"A scale-and-blur icon swap primitive for toolbar and action state changes","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","icon","swap"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/icon-swap.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/icon-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-neon-border","kind":"block","href":"/catalog/blocks/lt-neon-border","title":"Neon Border","tagline":"Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role.","description":"Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role.","group":"motion-effects","section":"Motion Primitives","tags":["lower-third","glow","loop","video-primitive"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-neon-border.json","heavy":false,"width":1920,"height":1080}},{"id":"menu-morph","kind":"component","href":"/catalog/components/menu-morph","title":"Menu Morph","tagline":"A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus","description":"A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","menu","morph"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/menu-morph.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/menu-morph.json","heavy":false,"width":1920,"height":1080}},{"id":"number-pop-in","kind":"component","href":"/catalog/components/number-pop-in","title":"Number Pop In","tagline":"A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal","description":"A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","number","pop"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-pop-in.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/number-pop-in.json","heavy":false,"width":1920,"height":1080}},{"id":"number-wheel","kind":"component","href":"/catalog/components/number-wheel","title":"Number Wheel","tagline":"A rolling digit counter primitive for metrics, prices, counts, and scoreboards","description":"A rolling digit counter primitive for metrics, prices, counts, and scoreboards","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","number","counter","data"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-wheel.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/number-wheel.json","heavy":false,"width":1920,"height":1080}},{"id":"page-slide","kind":"component","href":"/catalog/components/page-slide","title":"Page Slide","tagline":"A transitions.dev-inspired page slide primitive with outgoing and incoming panels","description":"A transitions.dev-inspired page slide primitive with outgoing and incoming panels","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","page","slide"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/page-slide.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/page-slide.json","heavy":false,"width":1920,"height":1080}},{"id":"separator","kind":"component","href":"/catalog/components/separator","title":"Separator","tagline":"A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal","description":"A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","separator","layout"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/separator.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/separator.json","heavy":false,"width":1920,"height":1080}},{"id":"sheet-spring-up","kind":"component","href":"/catalog/components/sheet-spring-up","title":"Sheet Spring-Up","tagline":"A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease","description":"A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","sheet","spring","mock-ui","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/sheet-spring-up.json","heavy":false,"width":1920,"height":1080}},{"id":"simulated-cursor","kind":"component","href":"/catalog/components/simulated-cursor","title":"Simulated Cursor","tagline":"A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos","description":"A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","cursor","ui","walkthrough"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/simulated-cursor.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/simulated-cursor.json","heavy":false,"width":1920,"height":1080}},{"id":"skeleton-reveal","kind":"component","href":"/catalog/components/skeleton-reveal","title":"Skeleton Reveal","tagline":"A skeleton loader transition that pulses, then cross-fades into content","description":"A skeleton loader transition that pulses, then cross-fades into content","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","skeleton","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/skeleton-reveal.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/skeleton-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"slot-machine-roll","kind":"component","href":"/catalog/components/slot-machine-roll","title":"Slot Machine Roll","tagline":"A vertical reel scrolls characters from one value to another.","description":"A vertical reel scrolls characters from one value to another.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/slot-machine-roll.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/slot-machine-roll.json","heavy":false,"width":1920,"height":1080}},{"id":"staggered-fade-up","kind":"component","href":"/catalog/components/staggered-fade-up","title":"Staggered Fade Up","tagline":"Words fade in and slide up one after another with configurable delay.","description":"Words fade in and slide up one after another with configurable delay.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/staggered-fade-up.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/staggered-fade-up.json","heavy":false,"width":1920,"height":1080}},{"id":"streaming-text","kind":"component","href":"/catalog/components/streaming-text","title":"Streaming Text","tagline":"Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter","description":"Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","text-effect","ai","chat"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/streaming-text.json","heavy":false,"width":1920,"height":1080}},{"id":"success-check","kind":"component","href":"/catalog/components/success-check","title":"Success Check","tagline":"A success check primitive with ring pop, path draw, and subtle rotate blur","description":"A success check primitive with ring pop, path draw, and subtle rotate blur","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","success","check"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/success-check.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/success-check.json","heavy":false,"width":1920,"height":1080}},{"id":"svg-line-draw-loader","kind":"component","href":"/catalog/components/svg-line-draw-loader","title":"SVG Line Draw Loader","tagline":"An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.","description":"An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","advanced-motion","anime-inspired","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/svg-line-draw-loader.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/svg-line-draw-loader.json","heavy":false,"width":1920,"height":1080}},{"id":"text-stagger","kind":"component","href":"/catalog/components/text-stagger","title":"Text Stagger","tagline":"A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words","description":"A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","text","stagger"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-stagger.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/text-stagger.json","heavy":false,"width":1920,"height":1080}},{"id":"text-state-swap","kind":"component","href":"/catalog/components/text-state-swap","title":"Text State Swap","tagline":"A text state swap primitive with outgoing blur and incoming lift","description":"A text state swap primitive with outgoing blur and incoming lift","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","text","swap"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-state-swap.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/text-state-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"three-orbiting-cards","kind":"component","href":"/catalog/components/three-orbiting-cards","title":"Three Orbiting Cards","tagline":"A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.","description":"A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","three-js","webgl","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/three-orbiting-cards.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/three-orbiting-cards.json","heavy":true,"width":1920,"height":1080}},{"id":"tilt-card","kind":"component","href":"/catalog/components/tilt-card","title":"Tilt Card","tagline":"A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax","description":"A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","card","tilt"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tilt-card.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/tilt-card.json","heavy":false,"width":1920,"height":1080}},{"id":"top-down-letters","kind":"component","href":"/catalog/components/top-down-letters","title":"Top-Down Letters","tagline":"Letters descend from above in a pronounced staircase with zero blur.","description":"Letters descend from above in a pronounced staircase with zero blur.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/top-down-letters.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/top-down-letters.json","heavy":false,"width":1920,"height":1080}},{"id":"typewriter","kind":"component","href":"/catalog/components/typewriter","title":"Typewriter","tagline":"Character-by-character text reveal with a deterministic blinking cursor.","description":"Character-by-character text reveal with a deterministic blinking cursor.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/typewriter.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/typewriter.json","heavy":false,"width":1920,"height":1080}},{"id":"typing-indicator","kind":"component","href":"/catalog/components/typing-indicator","title":"Typing Indicator","tagline":"The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands","description":"The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","chat","mock-ui","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/typing-indicator.json","heavy":false,"width":1920,"height":1080}},{"id":"avatar-cloud","kind":"component","href":"/catalog/components/avatar-cloud","title":"Avatar Cloud","tagline":"Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.","description":"Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.","group":"motion-effects","section":"Effects","tags":["effects","avatars","community","network","social-proof","prove"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/avatar-cloud.json","heavy":false,"width":1920,"height":1080}},{"id":"beat-timeline","kind":"component","href":"/catalog/components/beat-timeline","title":"Beat Timeline","tagline":"A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.","description":"A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.","group":"motion-effects","section":"Effects","tags":["orchestration","transitions","sequencing","bridge","timeline"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/beat-timeline.json","heavy":false,"width":1920,"height":1080}},{"id":"before-after-wipe","kind":"component","href":"/catalog/components/before-after-wipe","title":"Before After Wipe","tagline":"Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","description":"Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","group":"motion-effects","section":"Effects","tags":["prop","ui-props","compare","holdable","before-after","wipe","slots"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/before-after-wipe.json","heavy":false,"width":1920,"height":1080}},{"id":"camera-rig-depth-stack","kind":"component","href":"/catalog/components/camera-rig-depth-stack","title":"Camera Rig Depth Stack","tagline":"A 3D camera-rig-style card stack with depth, parallax, and focus shift.","description":"A 3D camera-rig-style card stack with depth, parallax, and focus shift.","group":"motion-effects","section":"Effects","tags":["advanced-motion","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/camera-rig-depth-stack.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/camera-rig-depth-stack.json","heavy":false,"width":1920,"height":1080}},{"id":"comparison-split","kind":"component","href":"/catalog/components/comparison-split","title":"Comparison Split","tagline":"Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.","description":"Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.","group":"motion-effects","section":"Effects","tags":["prop","ui-props","compare","holdable","before-after","wipe"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/comparison-split.json","heavy":false,"width":1920,"height":1080}},{"id":"confetti","kind":"component","href":"/catalog/components/confetti","title":"Confetti","tagline":"A deterministic celebration burst with seeded particles and gravity.","description":"A deterministic celebration burst with seeded particles and gravity.","group":"motion-effects","section":"Effects","tags":["effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/confetti.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/confetti.json","heavy":false,"width":1920,"height":1080}},{"id":"cut-the-curve","kind":"component","href":"/catalog/components/cut-the-curve","title":"Cut the Curve","tagline":"A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.","description":"A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.","group":"motion-effects","section":"Effects","tags":["transition","directional-cut","velocity-match","whip","bridge","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/cut-the-curve.json","heavy":false,"width":1920,"height":1080}},{"id":"device-frame-stage","kind":"component","href":"/catalog/components/device-frame-stage","title":"Device Frame Stage","tagline":"A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float","description":"A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float","group":"motion-effects","section":"Effects","tags":["prop","device","mobile","tablet","ui-props","holdable"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/device-frame-stage.json","heavy":false,"width":1920,"height":1080}},{"id":"directional-wipe","kind":"component","href":"/catalog/components/directional-wipe","title":"Directional Wipe","tagline":"A directional scene push that slides one panel over another.","description":"A directional scene push that slides one panel over another.","group":"motion-effects","section":"Effects","tags":["transition-primitive"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/directional-wipe.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/directional-wipe.json","heavy":false,"width":1920,"height":1080}},{"id":"fade-through","kind":"component","href":"/catalog/components/fade-through","title":"Fade Through","tagline":"A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer","description":"A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer","group":"motion-effects","section":"Effects","tags":["motion-primitive","transition","fade","scene"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/fade-through.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/fade-through.json","heavy":false,"width":1920,"height":1080}},{"id":"grid-pixelate-wipe","kind":"component","href":"/catalog/components/grid-pixelate-wipe","title":"Grid Pixelate Wipe","tagline":"Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes","description":"Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes","group":"motion-effects","section":"Effects","tags":["transition","wipe","grid","pixelate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/grid-pixelate-wipe.json","heavy":false,"width":1920,"height":1080}},{"id":"halftone-dissolve","kind":"component","href":"/catalog/components/halftone-dissolve","title":"Halftone Dissolve","tagline":"Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A.","description":"Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A.","group":"motion-effects","section":"Effects","tags":["motion-primitive","transition","texture","halftone","dissolve"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/halftone-dissolve.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-arrow","kind":"component","href":"/catalog/components/hw-arrow","title":"Hand-Drawn Arrow","tagline":"Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen","description":"Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen","group":"motion-effects","section":"Effects","tags":["handwritten","annotation","arrow","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/hw-arrow.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-boil","kind":"component","href":"/catalog/components/hw-boil","title":"Hand-Drawn Boil","tagline":"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, a wobbled-ellipse path generator, the boil pose control (off/calm/lively over the family-locked frameDrop), a curvature-adaptive pen-velocity ease, and the completed stroke matrix (plain/soft/sharp/spray — spray is index-seeded deterministic dots, no turbulence) with texture-safe draw-on","description":"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, a wobbled-ellipse path generator, the boil pose control (off/calm/lively over the family-locked frameDrop), a curvature-adaptive pen-velocity ease, and the completed stroke matrix (plain/soft/sharp/spray — spray is index-seeded deterministic dots, no turbulence) with texture-safe draw-on","group":"motion-effects","section":"Effects","tags":["handwritten","effect","annotation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/hw-boil.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-box-label","kind":"component","href":"/catalog/components/hw-box-label","title":"Hand-Drawn Box Label","tagline":"Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered; boils","description":"Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered; boils","group":"motion-effects","section":"Effects","tags":["handwritten","annotation","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/hw-box-label.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-callout-circle","kind":"component","href":"/catalog/components/hw-callout-circle","title":"Scribble Callout Circle","tagline":"Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash; outline and connector take the family stroke matrix (plain/soft/sharp/spray); boils","description":"Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash; outline and connector take the family stroke matrix (plain/soft/sharp/spray); boils","group":"motion-effects","section":"Effects","tags":["handwritten","annotation","callout","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/hw-callout-circle.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-underline","kind":"component","href":"/catalog/components/hw-underline","title":"Squiggle Marks","tagline":"Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on","description":"Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on","group":"motion-effects","section":"Effects","tags":["handwritten","annotation","text-treatment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/hw-underline.json","heavy":false,"width":1920,"height":1080}},{"id":"input-feedback","kind":"component","href":"/catalog/components/input-feedback","title":"Input Feedback","tagline":"A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state","description":"A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state","group":"motion-effects","section":"Effects","tags":["transition-primitive","transitions-dev-port","input","feedback"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/input-feedback.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/input-feedback.json","heavy":false,"width":1920,"height":1080}},{"id":"iris-reveal","kind":"component","href":"/catalog/components/iris-reveal","title":"Iris Reveal","tagline":"A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","description":"A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","group":"motion-effects","section":"Effects","tags":["transition","iris","circle-reveal","clip-path","bridge","slots"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/iris-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"keyframe-scrub-stack","kind":"component","href":"/catalog/components/keyframe-scrub-stack","title":"Keyframe Scrub Stack","tagline":"A keyframe-sequenced stack of cards with offset timing and easing presets.","description":"A keyframe-sequenced stack of cards with offset timing and easing presets.","group":"motion-effects","section":"Effects","tags":["advanced-motion","anime-inspired","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/keyframe-scrub-stack.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/keyframe-scrub-stack.json","heavy":false,"width":1920,"height":1080}},{"id":"match-cut","kind":"component","href":"/catalog/components/match-cut","title":"Match Cut","tagline":"A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.","description":"A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.","group":"motion-effects","section":"Effects","tags":["motion-primitive","transition","match-cut","hard-cut","continuity"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/match-cut.json","heavy":false,"width":1920,"height":1080}},{"id":"mesh-gradient-bg","kind":"component","href":"/catalog/components/mesh-gradient-bg","title":"Mesh Gradient Background","tagline":"A render-safe mesh gradient using animated radial layers.","description":"A render-safe mesh gradient using animated radial layers.","group":"motion-effects","section":"Effects","tags":["effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/mesh-gradient-bg.json","heavy":false,"width":1920,"height":1080}},{"id":"micro-transitions","kind":"component","href":"/catalog/components/micro-transitions","title":"Micro Transitions","tagline":"A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions","description":"A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions","group":"motion-effects","section":"Effects","tags":["transition-primitive","motion-primitive","transitions-dev-port","ui","transition","microinteraction"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/micro-transitions.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/micro-transitions.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-usage-arc","kind":"component","href":"/catalog/components/mk-usage-arc","title":"Hairline Arc Gauge","tagline":"Thin circular gauge that draws on while its percentage counts up; one helper call drives both","description":"Thin circular gauge that draws on while its percentage counts up; one helper call drives both","group":"motion-effects","section":"Effects","tags":["data-viz","gauge","minimal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/mk-usage-arc.json","heavy":false,"width":1920,"height":1080}},{"id":"morph-swap","kind":"component","href":"/catalog/components/morph-swap","title":"Morph Swap","tagline":"Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty.","description":"Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty.","group":"motion-effects","section":"Effects","tags":["transition","morph","swap","condense","reshape","holdable","slots"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/morph-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"motion-blur","kind":"component","href":"/catalog/components/motion-blur","title":"Motion Blur","tagline":"After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the GSAP timeline at sub-frame times and averaging equal-weight additive copies of the element along its real trajectory, so translation, scale, rotation, 3D rotation and skew all drive the smear","description":"After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the GSAP timeline at sub-frame times and averaging equal-weight additive copies of the element along its real trajectory, so translation, scale, rotation, 3D rotation and skew all drive the smear","group":"motion-effects","section":"Effects","tags":["effect","motion-blur","shutter","after-effects","velocity","animation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/motion-blur.json","heavy":false,"width":1920,"height":1080}},{"id":"multiplayer-cursors","kind":"component","href":"/catalog/components/multiplayer-cursors","title":"Multiplayer Cursors","tagline":"Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.","description":"Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.","group":"motion-effects","section":"Effects","tags":["cursor","pointer","multiplayer","collaboration","presence","loop","prove"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/multiplayer-cursors.json","heavy":false,"width":1920,"height":1080}},{"id":"notification-pileup","kind":"component","href":"/catalog/components/notification-pileup","title":"Notification Pileup","tagline":"Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.","description":"Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.","group":"motion-effects","section":"Effects","tags":["notification","mobile","ui-props","overload","pileup","loop","agitate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/notification-pileup.json","heavy":false,"width":1920,"height":1080}},{"id":"onboarding-stepper-flow","kind":"component","href":"/catalog/components/onboarding-stepper-flow","title":"Onboarding Stepper Flow","tagline":"A composed onboarding flow with milestone rail, active step card, and next-action button","description":"A composed onboarding flow with milestone rail, active step card, and next-action button","group":"motion-effects","section":"Effects","tags":["ui-flow","onboarding","stepper"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/onboarding-stepper-flow.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/onboarding-stepper-flow.json","heavy":false,"width":1920,"height":1080}},{"id":"ordered-dither-pass","kind":"component","href":"/catalog/components/ordered-dither-pass","title":"Ordered Dither Pass","tagline":"Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.","description":"Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.","group":"motion-effects","section":"Effects","tags":["motion-primitive","experiment","texture","dither","transition","quantize"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ordered-dither-pass.json","heavy":false,"width":1920,"height":1080}},{"id":"overwhelm-surround","kind":"component","href":"/catalog/components/overwhelm-surround","title":"Overwhelm Surround","tagline":"Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.","description":"Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.","group":"motion-effects","section":"Effects","tags":["effects","agitate","overwhelm","pressure","notifications"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/overwhelm-surround.json","heavy":false,"width":1920,"height":1080}},{"id":"panel-reveal","kind":"component","href":"/catalog/components/panel-reveal","title":"Panel Reveal","tagline":"A panel reveal primitive with height expansion and content fade","description":"A panel reveal primitive with height expansion and content fade","group":"motion-effects","section":"Effects","tags":["transition-primitive","transitions-dev-port","panel","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/panel-reveal.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/panel-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"parallax-device-dive","kind":"component","href":"/catalog/components/parallax-device-dive","title":"Parallax Device Dive","tagline":"A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.","description":"A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.","group":"motion-effects","section":"Effects","tags":["motion-primitive","camera","device","phone","parallax","transition"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/parallax-device-dive.json","heavy":false,"width":1920,"height":1080}},{"id":"parallax-unzoom","kind":"component","href":"/catalog/components/parallax-unzoom","title":"Parallax Unzoom","tagline":"Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)","description":"Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)","group":"motion-effects","section":"Effects","tags":["transition","reveal","unzoom","parallax","grid","hero"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/parallax-unzoom.json","heavy":false,"width":1920,"height":1080}},{"id":"parallax-zoom","kind":"component","href":"/catalog/components/parallax-zoom","title":"Parallax Zoom","tagline":"Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition","description":"Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition","group":"motion-effects","section":"Effects","tags":["transition","zoom","parallax","grid","hero"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/parallax-zoom.json","heavy":false,"width":1920,"height":1080}},{"id":"rubber-band-bumper","kind":"component","href":"/catalog/components/rubber-band-bumper","title":"Rubber Band Bumper","tagline":"An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.","description":"An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.","group":"motion-effects","section":"Effects","tags":["motion-primitive","transition","rubber-band","resistance","overshoot"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/rubber-band-bumper.json","heavy":false,"width":1920,"height":1080}},{"id":"settings-toggle-flow","kind":"component","href":"/catalog/components/settings-toggle-flow","title":"Settings Toggle Flow","tagline":"A composed settings flow with preference rows, toggle switches, and active-state feedback","description":"A composed settings flow with preference rows, toggle switches, and active-state feedback","group":"motion-effects","section":"Effects","tags":["ui-flow","settings","toggle"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/settings-toggle-flow.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/settings-toggle-flow.json","heavy":false,"width":1920,"height":1080}},{"id":"shutter-slam","kind":"component","href":"/catalog/components/shutter-slam","title":"Shutter Slam","tagline":"One word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn about each axis — on the measured easing of the After Effects export the shutter model was fitted to","description":"One word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn about each axis — on the measured easing of the After Effects export the shutter model was fitted to","group":"motion-effects","section":"Effects","tags":["effect","motion-blur","shutter","after-effects","slam","animation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shutter-slam.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/shutter-slam.json","heavy":false,"width":1920,"height":1080}},{"id":"signup-flow","kind":"component","href":"/catalog/components/signup-flow","title":"Signup Flow","tagline":"A composed signup flow with social action, email field, password field, and submit button","description":"A composed signup flow with social action, email field, password field, and submit button","group":"motion-effects","section":"Effects","tags":["ui-flow","signup","form"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/signup-flow.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/signup-flow.json","heavy":false,"width":1920,"height":1080}},{"id":"spotlight-card","kind":"component","href":"/catalog/components/spotlight-card","title":"Spotlight Card","tagline":"A card with a scripted cursor spotlight and lit border.","description":"A card with a scripted cursor spotlight and lit border.","group":"motion-effects","section":"Effects","tags":["effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spotlight-card.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/spotlight-card.json","heavy":false,"width":1920,"height":1080}},{"id":"stagger-cascade","kind":"component","href":"/catalog/components/stagger-cascade","title":"Stagger Cascade","tagline":"A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.","description":"A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.","group":"motion-effects","section":"Effects","tags":["effects","grid","stagger","entrance","exhibit"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/stagger-cascade.json","heavy":false,"width":1920,"height":1080}},{"id":"stagger-lattice","kind":"component","href":"/catalog/components/stagger-lattice","title":"Stagger Lattice","tagline":"A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames.","description":"A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames.","group":"motion-effects","section":"Effects","tags":["advanced-motion","anime-inspired","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/stagger-lattice.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/stagger-lattice.json","heavy":false,"width":1920,"height":1080}},{"id":"store-badge-lockup","kind":"component","href":"/catalog/components/store-badge-lockup","title":"Store Badge Lockup","tagline":"Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action.","description":"Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action.","group":"motion-effects","section":"Effects","tags":["prop","ui-props","mobile","store-badges","cta","ask"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/store-badge-lockup.json","heavy":false,"width":1920,"height":1080}},{"id":"svg-mask-reveal","kind":"component","href":"/catalog/components/svg-mask-reveal","title":"SVG Mask Reveal","tagline":"A soft token-colored sweep reveals media only through an editable SVG wordmark mask.","description":"A soft token-colored sweep reveals media only through an editable SVG wordmark mask.","group":"motion-effects","section":"Effects","tags":["effect","svg","mask","wordmark","reveal","exhibit"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/svg-mask-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"tabs-slide-indicator","kind":"component","href":"/catalog/components/tabs-slide-indicator","title":"Tabs Slide Indicator","tagline":"A pill indicator transition that slides between active tabs","description":"A pill indicator transition that slides between active tabs","group":"motion-effects","section":"Effects","tags":["transition-primitive","transitions-dev-port","tabs","indicator"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tabs-slide-indicator.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/tabs-slide-indicator.json","heavy":false,"width":1920,"height":1080}},{"id":"testimonial-card","kind":"component","href":"/catalog/components/testimonial-card","title":"Testimonial Card","tagline":"Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.","description":"Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.","group":"motion-effects","section":"Effects","tags":["prop","ui-props","testimonial","social-proof","quote","prove"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/testimonial-card.json","heavy":false,"width":1920,"height":1080}},{"id":"type-match-cut","kind":"component","href":"/catalog/components/type-match-cut","title":"Type Match Cut","tagline":"A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.","description":"A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.","group":"motion-effects","section":"Effects","tags":["motion-primitive","transition","typography","match-cut","continuity"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/type-match-cut.json","heavy":false,"width":1920,"height":1080}},{"id":"vignette","kind":"component","href":"/catalog/components/vignette","title":"Vignette","tagline":"Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center","description":"Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center","group":"motion-effects","section":"Effects","tags":["vignette","overlay","cinematic","effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/vignette.json","heavy":false,"width":1920,"height":1080}},{"id":"whip-pan-cut","kind":"component","href":"/catalog/components/whip-pan-cut","title":"Whip Pan Cut","tagline":"A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","description":"A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","group":"motion-effects","section":"Effects","tags":["transition","whip-pan","motion-blur","velocity-match","speed-ramp","bridge","slots"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/whip-pan-cut.json","heavy":false,"width":1920,"height":1080}},{"id":"x-follow-card","kind":"component","href":"/catalog/components/x-follow-card","title":"X Follow Card","tagline":"A social follow card with avatar, handle, and follower motion.","description":"A social follow card with avatar, handle, and follower motion.","group":"motion-effects","section":"Effects","tags":["social-overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/x-follow-card.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-circle-pointer","kind":"component","href":"/catalog/components/yt-circle-pointer","title":"Pointer Circle + Countdown","tagline":"Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick","description":"Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick","group":"motion-effects","section":"Effects","tags":["annotation","countdown","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/yt-circle-pointer.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-feather-highlight","kind":"component","href":"/catalog/components/yt-feather-highlight","title":"Feathered Spotlight","tagline":"Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets","description":"Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets","group":"motion-effects","section":"Effects","tags":["highlight","spotlight","effect","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/yt-feather-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"zoom-through-transition","kind":"component","href":"/catalog/components/zoom-through-transition","title":"Zoom Through Transition","tagline":"A transition that zooms through a focal card into the next scene.","description":"A transition that zooms through a focal card into the next scene.","group":"motion-effects","section":"Effects","tags":["transition-primitive"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/zoom-through-transition.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/zoom-through-transition.json","heavy":false,"width":1920,"height":1080}},{"id":"camcorder-hud","kind":"block","href":"/catalog/blocks/camcorder-hud","title":"Camcorder HUD","tagline":"Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments","description":"Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments","group":"motion-effects","section":"Camera & 3D","tags":["camcorder","camera","recording","hud","overlay","creator","media-treatment-overlay"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/camcorder-hud.json","heavy":false,"width":1920,"height":1080}},{"id":"camera-scan-gate","kind":"component","href":"/catalog/components/camera-scan-gate","title":"Camera Scan Gate","tagline":"A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.","description":"A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.","group":"motion-effects","section":"Camera & 3D","tags":["prop","ui-props","camera","qr","scan","recognition","interaction","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/camera-scan-gate.json","heavy":false,"width":1920,"height":1080}},{"id":"camera-shake","kind":"component","href":"/catalog/components/camera-shake","title":"Camera Shake","tagline":"Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe","description":"Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe","group":"motion-effects","section":"Camera & 3D","tags":["camera","shake","handheld","effect","cinematic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/camera-shake.json","heavy":false,"width":1920,"height":1080}},{"id":"drift-hold","kind":"component","href":"/catalog/components/drift-hold","title":"Drift Hold","tagline":"A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.","description":"A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.","group":"motion-effects","section":"Camera & 3D","tags":["motion-primitive","camera","ambient","drift","hold","loopable"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/drift-hold.json","heavy":false,"width":1920,"height":1080}},{"id":"focus-rack","kind":"component","href":"/catalog/components/focus-rack","title":"Focus Rack","tagline":"Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.","description":"Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.","group":"motion-effects","section":"Camera & 3D","tags":["motion-primitive","camera","focus","focus-rack","depth","parallax","emphasize"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/focus-rack.json","heavy":false,"width":1920,"height":1080}},{"id":"pan-stations","kind":"component","href":"/catalog/components/pan-stations","title":"Pan Stations","tagline":"A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.","description":"A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.","group":"motion-effects","section":"Camera & 3D","tags":["camera","pan","stations","features","exhibit","agitate","cross-shelved"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/pan-stations.json","heavy":false,"width":1920,"height":1080}},{"id":"pull-back-reveal","kind":"component","href":"/catalog/components/pull-back-reveal","title":"Pull Back Reveal","tagline":"A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.","description":"A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.","group":"motion-effects","section":"Camera & 3D","tags":["motion-primitive","camera","pull-back","reveal","recontextualize"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/pull-back-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"push-in","kind":"component","href":"/catalog/components/push-in","title":"Push In","tagline":"A centered headline gains focus through one slow, continuous camera push and a gentle fade out.","description":"A centered headline gains focus through one slow, continuous camera push and a gentle fade out.","group":"motion-effects","section":"Camera & 3D","tags":["motion-primitive","camera","push-in","focus","emphasize","holdable"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/push-in.json","heavy":false,"width":1920,"height":1080}},{"id":"scroll-camera-story","kind":"component","href":"/catalog/components/scroll-camera-story","title":"Scroll Camera Story","tagline":"A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section.","description":"A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section.","group":"motion-effects","section":"Camera & 3D","tags":["camera","scroll","parallax","story","sections","slot","servo"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/scroll-camera-story.json","heavy":false,"width":1920,"height":1080}},{"id":"ui-focus-zoom","kind":"component","href":"/catalog/components/ui-focus-zoom","title":"UI Focus Zoom","tagline":"A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default.","description":"A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default.","group":"motion-effects","section":"Camera & 3D","tags":["camera","product-demo","zoom","focus","pan","slot","servo"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ui-focus-zoom.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-camera-move","kind":"component","href":"/catalog/components/yt-camera-move","title":"Camera Punch-In","tagline":"Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay","description":"Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay","group":"motion-effects","section":"Camera & 3D","tags":["camera","zoom","effect","creator"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/yt-camera-move.json","heavy":false,"width":1920,"height":1080}},{"id":"grain-field","kind":"component","href":"/catalog/components/grain-field","title":"Grain Field","tagline":"A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.","description":"A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.","group":"surfaces","section":"Texture","tags":["motion-primitive","background","grain","dots","texture","ambient","loopable"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/grain-field.json","heavy":false,"width":1920,"height":1080}},{"id":"grain-overlay","kind":"component","href":"/catalog/components/grain-overlay","title":"Grain Overlay","tagline":"Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition","description":"Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition","group":"surfaces","section":"Texture","tags":["texture","grain","overlay","film"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/grain-overlay.json","heavy":false,"width":1920,"height":1080}},{"id":"halftone-field","kind":"block","href":"/catalog/blocks/halftone-field","title":"Halftone Field","tagline":"A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.","description":"A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.","group":"surfaces","section":"Texture","tags":["webgl","shader","background","texture","halftone"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/halftone-field.json","heavy":true,"width":1920,"height":1080}},{"id":"ink-bleed-reveal","kind":"component","href":"/catalog/components/ink-bleed-reveal","title":"Ink Bleed Reveal","tagline":"Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.","description":"Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.","group":"surfaces","section":"Texture","tags":["motion-primitive","texture","reveal","gooey","svg-filter","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ink-bleed-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"texture-mask-text","kind":"component","href":"/catalog/components/texture-mask-text","title":"Texture Mask Text","tagline":"CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps","description":"CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps","group":"surfaces","section":"Texture","tags":["text","text-effect","effect","texture","mask"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/texture-mask-text.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-lcd-background","kind":"block","href":"/catalog/blocks/yt-lcd-background","title":"Scanline Board Background","tagline":"Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title","description":"Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title","group":"surfaces","section":"Texture","tags":["background","texture","creator"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/yt-lcd-background.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-screen-warp","kind":"component","href":"/catalog/components/yt-screen-warp","title":"On-Screen Display Effect","tagline":"Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display","description":"Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display","group":"surfaces","section":"Texture","tags":["effect","overlay","texture"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/yt-screen-warp.json","heavy":false,"width":1920,"height":1080}},{"id":"ios26-liquid-glass","kind":"block","href":"/catalog/blocks/ios26-liquid-glass","title":"iOS 26 Liquid Glass Home Screen","tagline":"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.","description":"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.","group":"surfaces","section":"HTML-in-Canvas","tags":["liquid-glass-html-in-canvas","webgpu","3d","iphone","ios26","notifications","gltf","html-in-canvas"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4","preview":{"mode":"video"}},{"id":"liquid-glass-notification","kind":"block","href":"/catalog/blocks/liquid-glass-notification","title":"Liquid Glass Notification","tagline":"Frosted glass notification cards floating over an aurora shader background","description":"Frosted glass notification cards floating over an aurora shader background","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","liquid-glass-html-in-canvas","webgpu"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/liquid-glass-notification.json","heavy":true,"width":1920,"height":1080}},{"id":"liquid-glass-widgets","kind":"block","href":"/catalog/blocks/liquid-glass-widgets","title":"Liquid Glass Widgets","tagline":"Frosted glass stat cards, showcase panel and pill chips over an aurora shader background","description":"Frosted glass stat cards, showcase panel and pill chips over an aurora shader background","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","liquid-glass-html-in-canvas","webgpu"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/liquid-glass-widgets.json","heavy":true,"width":1920,"height":1080}},{"id":"macos-tahoe-liquid-glass","kind":"block","href":"/catalog/blocks/macos-tahoe-liquid-glass","title":"macOS Tahoe Liquid Glass Desktop","tagline":"3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.","description":"3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","3d","macos","tahoe","gltf"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4","preview":{"mode":"video"}},{"id":"vfx-iphone-device","kind":"block","href":"/catalog/blocks/vfx-iphone-device","title":"iPhone & MacBook 3D Showcase","tagline":"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.","description":"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.","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","3d","device","iphone","macbook","gltf"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.mp4","preview":{"mode":"video"}},{"id":"vfx-liquid-background","kind":"block","href":"/catalog/blocks/vfx-liquid-background","title":"Liquid Background","tagline":"Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.","description":"Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","liquid","webgl","displacement","background"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4","preview":{"mode":"video"}},{"id":"vfx-liquid-glass","kind":"block","href":"/catalog/blocks/vfx-liquid-glass","title":"Liquid Glass","tagline":"VFX composition block","description":"VFX composition block","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","webgl"],"tech":[],"duration":20,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4","preview":{"mode":"video"}},{"id":"vfx-magnetic","kind":"block","href":"/catalog/blocks/vfx-magnetic","title":"Magnetic","tagline":"VFX composition block","description":"VFX composition block","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","webgl"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.mp4","preview":{"mode":"video"}},{"id":"vfx-portal","kind":"block","href":"/catalog/blocks/vfx-portal","title":"Portal","tagline":"VFX composition block","description":"VFX composition block","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","webgl"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.mp4","preview":{"mode":"video"}},{"id":"vfx-shatter","kind":"block","href":"/catalog/blocks/vfx-shatter","title":"Shatter","tagline":"VFX composition block","description":"VFX composition block","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","webgl"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.mp4","preview":{"mode":"video"}},{"id":"vfx-text-cursor","kind":"block","href":"/catalog/blocks/vfx-text-cursor","title":"VFX Text Cursor","tagline":"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.","description":"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.","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","text","shader","cursor","chromatic"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/vfx-text-cursor.json","heavy":true,"width":1920,"height":1080}},{"id":"flowchart","kind":"block","href":"/catalog/blocks/flowchart","title":"Flowchart","tagline":"Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction","description":"Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction","group":"blocks","section":"Blocks","tags":["diagram","flowchart","interactive"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/flowchart.json","heavy":false,"width":1920,"height":1080}},{"id":"flowchart-vertical","kind":"block","href":"/catalog/blocks/flowchart-vertical","title":"Flowchart Vertical","tagline":"Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction","description":"Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction","group":"blocks","section":"Blocks","tags":["diagram","flowchart","interactive","portrait"],"tech":[],"duration":12,"width":1440,"height":2560,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/flowchart-vertical.json","heavy":false,"width":1440,"height":2560}},{"id":"hw-frame","kind":"block","href":"/catalog/blocks/hw-frame","title":"Sketched Frame","tagline":"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)","description":"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)","group":"blocks","section":"Blocks","tags":["handwritten","frame","media"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-frame.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-pipeline","kind":"block","href":"/catalog/blocks/hw-pipeline","title":"Hand-Drawn Flowchart","tagline":"Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list","description":"Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list","group":"blocks","section":"Blocks","tags":["handwritten","diagram","data-viz","overlay"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-pipeline.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-text-cloud","kind":"block","href":"/catalog/blocks/hw-text-cloud","title":"Speech Bubble","tagline":"Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils","description":"Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils","group":"blocks","section":"Blocks","tags":["handwritten","speech-bubble","overlay"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-text-cloud.json","heavy":false,"width":1920,"height":1080}},{"id":"logo-outro","kind":"block","href":"/catalog/blocks/logo-outro","title":"Logo Outro","tagline":"Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill","description":"Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill","group":"blocks","section":"Blocks","tags":["branding","outro","logo"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/logo-outro.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-background","kind":"block","href":"/catalog/blocks/mk-background","title":"Minimal Gradient Background","tagline":"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","description":"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","group":"blocks","section":"Blocks","tags":["background","gradient","minimal","professional","presentation"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-background.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-placeholder-grid","kind":"block","href":"/catalog/blocks/mk-placeholder-grid","title":"Rounded Media Grid","tagline":"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","description":"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","group":"blocks","section":"Blocks","tags":["placeholder","media","grid","minimal"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-placeholder-grid.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-progress-stat","kind":"block","href":"/catalog/blocks/mk-progress-stat","title":"Count-Up Stat Card","tagline":"Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes","description":"Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes","group":"blocks","section":"Blocks","tags":["data-viz","stat","minimal"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-progress-stat.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-specs-list","kind":"block","href":"/catalog/blocks/mk-specs-list","title":"Specs Checklist","tagline":"Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes","description":"Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes","group":"blocks","section":"Blocks","tags":["data-viz","list","minimal","professional"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-specs-list.json","heavy":false,"width":1920,"height":1080}},{"id":"spiral-galaxy","kind":"block","href":"/catalog/blocks/spiral-galaxy","title":"Spiral Galaxy","tagline":"A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own.","description":"A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own.","group":"blocks","section":"Blocks","tags":["hero","space","particles","webgl","background"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/spiral-galaxy.json","heavy":true,"width":1920,"height":1080}},{"id":"yt-logo-intro","kind":"block","href":"/catalog/blocks/yt-logo-intro","title":"Logo Intro Sequence","tagline":"Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion","description":"Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion","group":"blocks","section":"Blocks","tags":["logo","intro","creator"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/yt-logo-intro.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-vertical-fill","kind":"block","href":"/catalog/blocks/yt-vertical-fill","title":"Vertical Media Filler","tagline":"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)","description":"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)","group":"blocks","section":"Blocks","tags":["placeholder","vertical","media"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/yt-vertical-fill.json","heavy":false,"width":1920,"height":1080}}]}; +export const catalogGalleryData = {"source":"https://github.com/heygen-com/hyperframes","groups":[{"id":"3d-motion","label":"3D motion","pinned":true,"count":7},{"id":"carousels","label":"Carousels","pinned":false,"count":25},{"id":"text-captions","label":"Text & captions","pinned":false,"count":73},{"id":"code","label":"Code","pinned":false,"count":12},{"id":"transitions","label":"Transitions","pinned":false,"count":31},{"id":"data-charts","label":"Data & charts","pinned":false,"count":18},{"id":"scenes-demos","label":"Scenes & demos","pinned":false,"count":95},{"id":"motion-effects","label":"Motion & effects","pinned":false,"count":94},{"id":"surfaces","label":"Surfaces","pinned":false,"count":18},{"id":"blocks","label":"Blocks","pinned":false,"count":14}],"items":[{"id":"canopy-part-title","kind":"block","href":"/catalog/blocks/canopy-part-title","title":"Canopy Part Title","tagline":"Leaves sweep through the frame and part to reveal the headline.","description":"Leaves sweep through the frame and part to reveal the headline.","group":"3d-motion","section":"3D motion","tags":["3d-motion","title-card","leaves","organic","depth-of-field","two-headlines","sweep"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/canopy-part-title.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/canopy-part-title.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/canopy-part-title.json","heavy":true,"width":1920,"height":1080}},{"id":"code-slice-hero","kind":"block","href":"/catalog/blocks/code-slice-hero","title":"Code Slice Hero","tagline":"A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.","description":"A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.","group":"3d-motion","section":"3D motion","tags":["3d-motion","transition","typography","tiles","flip","webgl2","shadows","two-headlines"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-slice-hero.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-slice-hero.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-slice-hero.json","heavy":false,"width":1920,"height":1080}},{"id":"cuboid-carousel","kind":"block","href":"/catalog/blocks/cuboid-carousel","title":"Cuboid Carousel","tagline":"A chain of bevelled cuboids rides a travelling wave as a content carousel.","description":"A chain of bevelled cuboids rides a travelling wave as a content carousel.","group":"3d-motion","section":"3D motion","tags":["3d-motion","carousel","cards","travelling-wave","pbr","shadows","room-environment"],"tech":[],"duration":6.67,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cuboid-carousel.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cuboid-carousel.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/cuboid-carousel.json","heavy":true,"width":1920,"height":1080}},{"id":"frost-sequence-camera-orbit","kind":"block","href":"/catalog/blocks/frost-sequence-camera-orbit","title":"Frost Sequence Camera Orbit","tagline":"An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades.","description":"An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades.","group":"3d-motion","section":"3D motion","tags":["3d-motion","ice","frost","camera-orbit","logo","particles","webgpu","two-headlines"],"tech":[],"duration":22.5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/frost-sequence-camera-orbit.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/frost-sequence-camera-orbit.mp4","preview":{"mode":"video"}},{"id":"glass-shard-title","kind":"block","href":"/catalog/blocks/glass-shard-title","title":"Glass Shard Title","tagline":"Glass shards fly in through fog and tile themselves into the headline.","description":"Glass shards fly in through fog and tile themselves into the headline.","group":"3d-motion","section":"3D motion","tags":["3d-motion","title-card","glass","voronoi","shards","fog","hdr"],"tech":[],"duration":12.16,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glass-shard-title.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glass-shard-title.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/glass-shard-title.json","heavy":true,"width":1920,"height":1080}},{"id":"orbit-card","kind":"block","href":"/catalog/blocks/orbit-card","title":"Orbit Card","tagline":"A single feature card orbits a dot sphere on approved Blender camera motion.","description":"A single feature card orbits a dot sphere on approved Blender camera motion.","group":"3d-motion","section":"3D motion","tags":["3d-motion","cards","feature-reveal","dots","orbit","blender-motion","sphere"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/orbit-card.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/orbit-card.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/orbit-card.json","heavy":true,"width":1920,"height":1080}},{"id":"wireframe-portal-title","kind":"block","href":"/catalog/blocks/wireframe-portal-title","title":"Wireframe Portal Title","tagline":"A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.","description":"A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.","group":"3d-motion","section":"3D motion","tags":["3d-motion","title-card","wireframe","portal","burst","typography","post-processing","phrase-swap"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/wireframe-portal-title.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/wireframe-portal-title.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/wireframe-portal-title.json","heavy":true,"width":1920,"height":1080}},{"id":"carousel-circle-1","kind":"block","href":"/catalog/blocks/carousel-circle-1","title":"Circle Carousel 1","tagline":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots.","description":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","circle"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-circle-1.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-circle-2","kind":"block","href":"/catalog/blocks/carousel-circle-2","title":"Circle Carousel 2","tagline":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots.","description":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","circle"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-circle-2.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-circle-3","kind":"block","href":"/catalog/blocks/carousel-circle-3","title":"Circle Carousel 3","tagline":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots.","description":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","circle"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-circle-3.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-circle-4","kind":"block","href":"/catalog/blocks/carousel-circle-4","title":"Circle Carousel 4","tagline":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots.","description":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","circle"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-circle-4.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-circle-5","kind":"block","href":"/catalog/blocks/carousel-circle-5","title":"Circle Carousel 5","tagline":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots.","description":"Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","circle"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-circle-5.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-orbit-1","kind":"block","href":"/catalog/blocks/carousel-orbit-1","title":"Orbit Carousel 1","tagline":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots.","description":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","orbit","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-orbit-1.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-orbit-2","kind":"block","href":"/catalog/blocks/carousel-orbit-2","title":"Orbit Carousel 2","tagline":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots.","description":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","orbit","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-orbit-2.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-orbit-3","kind":"block","href":"/catalog/blocks/carousel-orbit-3","title":"Orbit Carousel 3","tagline":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots.","description":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","orbit","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-orbit-3.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-orbit-4","kind":"block","href":"/catalog/blocks/carousel-orbit-4","title":"Orbit Carousel 4","tagline":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots.","description":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","orbit","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-orbit-4.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-orbit-5","kind":"block","href":"/catalog/blocks/carousel-orbit-5","title":"Orbit Carousel 5","tagline":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots.","description":"Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","orbit","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-orbit-5.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-path-1","kind":"block","href":"/catalog/blocks/carousel-path-1","title":"Path Carousel 1","tagline":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image slots.","description":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","path"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-path-1.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-path-2","kind":"block","href":"/catalog/blocks/carousel-path-2","title":"Path Carousel 2","tagline":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image slots.","description":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","path"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-path-2.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-path-3","kind":"block","href":"/catalog/blocks/carousel-path-3","title":"Path Carousel 3","tagline":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image slots.","description":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","path"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-path-3.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-path-4","kind":"block","href":"/catalog/blocks/carousel-path-4","title":"Path Carousel 4","tagline":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image slots.","description":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","path"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-path-4.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-path-5","kind":"block","href":"/catalog/blocks/carousel-path-5","title":"Path Carousel 5","tagline":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image slots.","description":"Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","path"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-path-5.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-text-circle-1","kind":"block","href":"/catalog/blocks/carousel-text-circle-1","title":"Text + Circle Carousel 1","tagline":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 1).","description":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 1).","group":"carousels","section":"Carousels","tags":["carousel","title-card","kinetic-text","images","showcase","circle"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-text-circle-1.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-text-circle-2","kind":"block","href":"/catalog/blocks/carousel-text-circle-2","title":"Text + Circle Carousel 2","tagline":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 2).","description":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 2).","group":"carousels","section":"Carousels","tags":["carousel","title-card","kinetic-text","images","showcase","circle"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-text-circle-2.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-text-circle-3","kind":"block","href":"/catalog/blocks/carousel-text-circle-3","title":"Text + Circle Carousel 3","tagline":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 3).","description":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 3).","group":"carousels","section":"Carousels","tags":["carousel","title-card","kinetic-text","images","showcase","circle"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-text-circle-3.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-text-circle-4","kind":"block","href":"/catalog/blocks/carousel-text-circle-4","title":"Text + Circle Carousel 4","tagline":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 4).","description":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 4).","group":"carousels","section":"Carousels","tags":["carousel","title-card","kinetic-text","images","showcase","circle"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-text-circle-4.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-text-circle-5","kind":"block","href":"/catalog/blocks/carousel-text-circle-5","title":"Text + Circle Carousel 5","tagline":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 5).","description":"A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 5).","group":"carousels","section":"Carousels","tags":["carousel","title-card","kinetic-text","images","showcase","circle"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-text-circle-5.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-vision-1","kind":"block","href":"/catalog/blocks/carousel-vision-1","title":"Vision Carousel 1","tagline":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 1); 12 image slots.","description":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 1); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","vision","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-vision-1.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-vision-2","kind":"block","href":"/catalog/blocks/carousel-vision-2","title":"Vision Carousel 2","tagline":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 2); 12 image slots.","description":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 2); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","vision","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-vision-2.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-vision-3","kind":"block","href":"/catalog/blocks/carousel-vision-3","title":"Vision Carousel 3","tagline":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 3); 12 image slots.","description":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 3); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","vision","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-vision-3.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-vision-4","kind":"block","href":"/catalog/blocks/carousel-vision-4","title":"Vision Carousel 4","tagline":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 4); 12 image slots.","description":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 4); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","vision","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-vision-4.json","heavy":false,"width":1920,"height":1080}},{"id":"carousel-vision-5","kind":"block","href":"/catalog/blocks/carousel-vision-5","title":"Vision Carousel 5","tagline":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 5); 12 image slots.","description":"A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 5); 12 image slots.","group":"carousels","section":"Carousels","tags":["carousel","gallery","images","showcase","vision","3d"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/carousel-vision-5.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-camera-follow","kind":"component","href":"/catalog/components/caption-camera-follow","title":"Camera Follow Captions","tagline":"One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small.","description":"One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small.","group":"text-captions","section":"Captions","tags":["captions","caption-style","camera","typography","motion-primitive","portrait"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/caption-camera-follow.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-clip-wipe","kind":"component","href":"/catalog/components/caption-clip-wipe","title":"Clip Wipe","tagline":"Left-to-right clip-path wipe reveal per word","description":"Left-to-right clip-path wipe reveal per word","group":"text-captions","section":"Captions","tags":["captions","caption-style","wipe","clip-path","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-clip-wipe.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-editorial-emphasis","kind":"component","href":"/catalog/components/caption-editorial-emphasis","title":"Editorial Emphasis","tagline":"Dual-font system with dramatic size contrast for emphasis words","description":"Dual-font system with dramatic size contrast for emphasis words","group":"text-captions","section":"Captions","tags":["captions","caption-style","editorial","typography","emphasis"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-editorial-emphasis/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-editorial-emphasis.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-emoji-pop","kind":"component","href":"/catalog/components/caption-emoji-pop","title":"Emoji Pop","tagline":"Emoji integration with stroked text and horizontal squeeze entrance","description":"Emoji integration with stroked text and horizontal squeeze entrance","group":"text-captions","section":"Captions","tags":["captions","caption-style","emoji","social"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-emoji-pop/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-emoji-pop.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-glitch-rgb","kind":"component","href":"/catalog/components/caption-glitch-rgb","title":"Glitch RGB","tagline":"RGB chromatic aberration with CRT scanline overlay","description":"RGB chromatic aberration with CRT scanline overlay","group":"text-captions","section":"Captions","tags":["captions","caption-style","glitch","cyber","tech"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-glitch-rgb.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-gradient-fill","kind":"component","href":"/catalog/components/caption-gradient-fill","title":"Gradient Fill","tagline":"Gradient-clipped text with elastic bounce entrance","description":"Gradient-clipped text with elastic bounce entrance","group":"text-captions","section":"Captions","tags":["captions","caption-style","gradient","colorful"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-gradient-fill.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-highlight","kind":"component","href":"/catalog/components/caption-highlight","title":"Highlight","tagline":"Red background sweep behind each active word, TikTok-style","description":"Red background sweep behind each active word, TikTok-style","group":"text-captions","section":"Captions","tags":["captions","caption-style","highlight","social","tiktok"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-highlight/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-kinetic-slam","kind":"component","href":"/catalog/components/caption-kinetic-slam","title":"Kinetic Slam","tagline":"Full-screen single-word display with alternating entrance directions","description":"Full-screen single-word display with alternating entrance directions","group":"text-captions","section":"Captions","tags":["captions","caption-style","kinetic","typography","slam"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-kinetic-slam/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-kinetic-slam.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-matrix-decode","kind":"component","href":"/catalog/components/caption-matrix-decode","title":"Matrix Decode","tagline":"Character scramble animation before text reveal","description":"Character scramble animation before text reveal","group":"text-captions","section":"Captions","tags":["captions","caption-style","matrix","scramble","decode"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-matrix-decode.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-neon-accent","kind":"component","href":"/catalog/components/caption-neon-accent","title":"Neon Accent","tagline":"Multi-color neon glow accents with wiggle drift animation","description":"Multi-color neon glow accents with wiggle drift animation","group":"text-captions","section":"Captions","tags":["captions","caption-style","neon","glow","accent"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-accent/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-neon-accent.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-neon-glow","kind":"component","href":"/catalog/components/caption-neon-glow","title":"Neon Glow","tagline":"Cyan and magenta neon glow with keyword accent colors","description":"Cyan and magenta neon glow with keyword accent colors","group":"text-captions","section":"Captions","tags":["captions","caption-style","neon","glow","gaming"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-glow/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-neon-glow.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-parallax-layers","kind":"component","href":"/catalog/components/caption-parallax-layers","title":"Parallax Layers","tagline":"Behind-subject 3D text layering with vertical stretch effect","description":"Behind-subject 3D text layering with vertical stretch effect","group":"text-captions","section":"Captions","tags":["captions","caption-style","parallax","3d","depth"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-parallax-layers/preview.mp4?v=1779051692","preview":{"mode":"player","source":"/public/catalog/components/caption-parallax-layers.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-particle-burst","kind":"component","href":"/catalog/components/caption-particle-burst","title":"Particle Burst","tagline":"Keyword words trigger colored particle explosions","description":"Keyword words trigger colored particle explosions","group":"text-captions","section":"Captions","tags":["captions","caption-style","particles","burst","effects"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-particle-burst/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-particle-burst.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-pill-karaoke","kind":"component","href":"/catalog/components/caption-pill-karaoke","title":"Pill Karaoke","tagline":"Pill-shaped container with per-word karaoke color highlight","description":"Pill-shaped container with per-word karaoke color highlight","group":"text-captions","section":"Captions","tags":["captions","caption-style","karaoke","pill"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-pill-karaoke.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-texture","kind":"component","href":"/catalog/components/caption-texture","title":"Texture","tagline":"Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable","description":"Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable","group":"text-captions","section":"Captions","tags":["captions","caption-style","texture","mask"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416","preview":{"mode":"player","source":"/public/catalog/components/caption-texture.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-weight-shift","kind":"component","href":"/catalog/components/caption-weight-shift","title":"Weight Shift","tagline":"Elegant font-weight transition between caption lines","description":"Elegant font-weight transition between caption lines","group":"text-captions","section":"Captions","tags":["captions","caption-style","minimal","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png","video":"https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview-v2.mp4","preview":{"mode":"player","source":"/public/catalog/components/caption-weight-shift.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-callout-highlight","kind":"block","href":"/catalog/blocks/mk-callout-highlight","title":"Word-Sweep Highlight","tagline":"A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover","description":"A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover","group":"text-captions","section":"Captions","tags":["typography","karaoke","captions","minimal"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-callout-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"blur-out-up","kind":"component","href":"/catalog/components/blur-out-up","title":"Blur Out Up","tagline":"Words arrive clean and depart upward with increasing blur for airy exits.","description":"Words arrive clean and depart upward with increasing blur for airy exits.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/blur-out-up.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/blur-out-up.json","heavy":false,"width":1920,"height":1080}},{"id":"bottom-up-letters","kind":"component","href":"/catalog/components/bottom-up-letters","title":"Bottom Up Letters","tagline":"Splits text into letters and reveals each glyph from below with deterministic staggered timing","description":"Splits text into letters and reveals each glyph from below with deterministic staggered timing","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text","letters","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/bottom-up-letters.json","heavy":false,"width":1920,"height":1080}},{"id":"caption-blend-difference","kind":"component","href":"/catalog/components/caption-blend-difference","title":"Blend Difference","tagline":"Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background","description":"Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background","group":"text-captions","section":"Typography & Text","tags":["text","text-effect","effect","blend-mode","contrast","inversion"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/caption-blend-difference.json","heavy":false,"width":1920,"height":1080}},{"id":"char-slam-explode","kind":"component","href":"/catalog/components/char-slam-explode","title":"Char Slam Explode","tagline":"Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.","description":"Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","text-treatment","scatter","slam","impact"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/char-slam-explode.json","heavy":false,"width":1920,"height":1080}},{"id":"extended-keyframe","kind":"component","href":"/catalog/components/extended-keyframe","title":"Extended Keyframe","tagline":"The never-fully-lands arrival: an element covers most of its move in the first fifth of the duration and creeps the rest to the last frame, exits along its arrival vector, and carries shutter motion blur — from any side or by scale, one call per element, plus the ease on its own for any tween","description":"The never-fully-lands arrival: an element covers most of its move in the first fifth of the duration and creeps the rest to the last frame, exits along its arrival vector, and carries shutter motion blur — from any side or by scale, one call per element, plus the ease on its own for any tween","group":"text-captions","section":"Typography & Text","tags":["motion","ease","arrival","kinetic-type","text","motion-blur","after-effects","slide-in","scale-in"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/extended-keyframe.json","heavy":false,"width":1920,"height":1080}},{"id":"focus-blur-resolve","kind":"component","href":"/catalog/components/focus-blur-resolve","title":"Focus Blur Resolve","tagline":"A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.","description":"A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/focus-blur-resolve.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/focus-blur-resolve.json","heavy":false,"width":1920,"height":1080}},{"id":"headline-slam","kind":"component","href":"/catalog/components/headline-slam","title":"Headline Slam","tagline":"A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.","description":"A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","headline","slam","impact","exit"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/headline-slam.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-path-text","kind":"block","href":"/catalog/blocks/hw-path-text","title":"Text Along a Path","tagline":"Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input","description":"Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input","group":"text-captions","section":"Typography & Text","tags":["handwritten","typography","path","overlay"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-path-text.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-title","kind":"block","href":"/catalog/blocks/hw-title","title":"Handwritten Title","tagline":"Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils","description":"Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils","group":"text-captions","section":"Typography & Text","tags":["handwritten","typography","title-card","overlay"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-title.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-write-title","kind":"block","href":"/catalog/blocks/hw-write-title","title":"Handwritten Write-On Title","tagline":"True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts); optional squiggle underline; boils","description":"True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts); optional squiggle underline; boils","group":"text-captions","section":"Typography & Text","tags":["handwritten","typography","title-card","write-on","overlay"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-write-title.json","heavy":false,"width":1920,"height":1080}},{"id":"inline-highlight","kind":"component","href":"/catalog/components/inline-highlight","title":"Inline Highlight","tagline":"A clean marker-style inline highlight that animates behind text using a CSS scale variable","description":"A clean marker-style inline highlight that animates behind text using a CSS scale variable","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text","highlight","caption"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/inline-highlight.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/inline-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"kinetic-center-build","kind":"component","href":"/catalog/components/kinetic-center-build","title":"Kinetic Center Build","tagline":"Words enter from the right and push the growing phrase left until the final line locks centered.","description":"Words enter from the right and push the growing phrase left until the final line locks centered.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","kinetic-type","reveal","remocn-port"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/kinetic-center-build.json","heavy":false,"width":1920,"height":1080}},{"id":"kinetic-type-swap","kind":"component","href":"/catalog/components/kinetic-type-swap","title":"Kinetic Type Swap","tagline":"A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.","description":"A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","kinetic-type","word-swap","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/kinetic-type-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"line-by-line-slide","kind":"component","href":"/catalog/components/line-by-line-slide","title":"Line-by-Line Slide","tagline":"Each line enters from the left with staggered slide and exits to the right.","description":"Each line enters from the left with staggered slide and exits to the right.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/line-by-line-slide.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/line-by-line-slide.json","heavy":false,"width":1920,"height":1080}},{"id":"line-swap","kind":"component","href":"/catalog/components/line-swap","title":"Line Swap","tagline":"A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B.","description":"A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","swap","beat","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/line-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"logo-brand-close","kind":"component","href":"/catalog/components/logo-brand-close","title":"Logo Brand Close","tagline":"A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film.","description":"A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","brand","logo","end-card","close"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/logo-brand-close.json","heavy":false,"width":1920,"height":1080}},{"id":"marker-highlight","kind":"component","href":"/catalog/components/marker-highlight","title":"Marker Highlight","tagline":"Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue.","description":"Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","emphasis","marker","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/marker-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"matrix-decode","kind":"component","href":"/catalog/components/matrix-decode","title":"Matrix Decode","tagline":"Random scramble resolves left-to-right into the target text.","description":"Random scramble resolves left-to-right into the target text.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/matrix-decode.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/matrix-decode.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-emphasis-type","kind":"component","href":"/catalog/components/mk-emphasis-type","title":"Background Emphasis Type","tagline":"Oversized low-contrast background word drifting slowly behind the subject — typography as texture","description":"Oversized low-contrast background word drifting slowly behind the subject — typography as texture","group":"text-captions","section":"Typography & Text","tags":["typography","text-treatment","minimal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/mk-emphasis-type.json","heavy":false,"width":1920,"height":1080}},{"id":"morph-text","kind":"component","href":"/catalog/components/morph-text","title":"Morph Text","tagline":"Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect","description":"Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect","group":"text-captions","section":"Typography & Text","tags":["text","text-effect","typography","morph","gooey","kinetic","animation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.mp4","preview":{"mode":"player","source":"/public/catalog/components/morph-text.json","heavy":false,"width":1920,"height":1080}},{"id":"particle-text-dissolve","kind":"component","href":"/catalog/components/particle-text-dissolve","title":"Particle Text Dissolve","tagline":"Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter.","description":"Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","particles","canvas","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/particle-text-dissolve.json","heavy":false,"width":1920,"height":1080}},{"id":"per-word-crossfade","kind":"component","href":"/catalog/components/per-word-crossfade","title":"Per-Word Crossfade","tagline":"Words gently fade into place with a short vertical drift for calm keynote rhythm.","description":"Words gently fade into place with a short vertical drift for calm keynote rhythm.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/per-word-crossfade.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/per-word-crossfade.json","heavy":false,"width":1920,"height":1080}},{"id":"per-word-rise","kind":"component","href":"/catalog/components/per-word-rise","title":"Per Word Rise","tagline":"Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).","description":"Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","typography","stagger","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/per-word-rise.json","heavy":false,"width":1920,"height":1080}},{"id":"perspective-marquee","kind":"component","href":"/catalog/components/perspective-marquee","title":"Perspective Marquee","tagline":"A 3D tilted marquee with depth feel as items roll toward the horizon.","description":"A 3D tilted marquee with depth feel as items roll toward the horizon.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/perspective-marquee.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/perspective-marquee.json","heavy":false,"width":1920,"height":1080}},{"id":"rgb-glitch-text","kind":"component","href":"/catalog/components/rgb-glitch-text","title":"RGB Glitch Text","tagline":"RGB-offset text copies jitter briefly for a controlled glitch window.","description":"RGB-offset text copies jitter briefly for a controlled glitch window.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/rgb-glitch-text.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/rgb-glitch-text.json","heavy":false,"width":1920,"height":1080}},{"id":"scan-band","kind":"component","href":"/catalog/components/scan-band","title":"Scan Band","tagline":"A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.","description":"A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","scan","chromatic","distortion","wordmark"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/scan-band.json","heavy":false,"width":1920,"height":1080}},{"id":"scramble-reveal","kind":"component","href":"/catalog/components/scramble-reveal","title":"Scramble Reveal","tagline":"A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.","description":"A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","scramble","reveal","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/scramble-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"shared-axis-y","kind":"component","href":"/catalog/components/shared-axis-y","title":"Shared Axis Y","tagline":"Per-word vertical shared-axis transition for sharp editorial swaps.","description":"Per-word vertical shared-axis transition for sharp editorial swaps.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shared-axis-y.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/shared-axis-y.json","heavy":false,"width":1920,"height":1080}},{"id":"shared-axis-z","kind":"component","href":"/catalog/components/shared-axis-z","title":"Shared Axis Z","tagline":"Scale-based shared-axis transition for focus shifts and context depth.","description":"Scale-based shared-axis transition for focus shifts and context depth.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shared-axis-z.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/shared-axis-z.json","heavy":false,"width":1920,"height":1080}},{"id":"shimmer-sweep","kind":"component","href":"/catalog/components/shimmer-sweep","title":"Shimmer Sweep","tagline":"Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals","description":"Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals","group":"text-captions","section":"Typography & Text","tags":["text","shimmer","highlight","effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/shimmer-sweep.json","heavy":false,"width":1920,"height":1080}},{"id":"soft-blur-in","kind":"component","href":"/catalog/components/soft-blur-in","title":"Soft Blur In","tagline":"A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts","description":"A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text","reveal","blur"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blur-in.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/soft-blur-in.json","heavy":false,"width":1920,"height":1080}},{"id":"split-flap-board","kind":"block","href":"/catalog/blocks/split-flap-board","title":"Split-Flap Board","tagline":"Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.","description":"Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.","group":"text-captions","section":"Typography & Text","tags":["text","kinetic","mechanical","split-flap","solari","departure-board","reveal"],"tech":[],"duration":3.5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/split-flap-board.json","heavy":false,"width":1920,"height":1080}},{"id":"strikethrough-replace","kind":"component","href":"/catalog/components/strikethrough-replace","title":"Strikethrough Replace","tagline":"Draw a strike line across old text, then reveal the replacement.","description":"Draw a strike line across old text, then reveal the replacement.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/strikethrough-replace.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/strikethrough-replace.json","heavy":false,"width":1920,"height":1080}},{"id":"text-match-cut","kind":"component","href":"/catalog/components/text-match-cut","title":"Text Match Cut","tagline":"One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide.","description":"One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","transition","typography","match-cut","hard-cut","continuity"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/text-match-cut.json","heavy":false,"width":1920,"height":1080}},{"id":"text-shimmer","kind":"component","href":"/catalog/components/text-shimmer","title":"Text Shimmer","tagline":"A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.","description":"A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text-effects","shimmer","specular","emphasis"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/text-shimmer.json","heavy":false,"width":1920,"height":1080}},{"id":"ticker-takeover","kind":"component","href":"/catalog/components/ticker-takeover","title":"Ticker Takeover","tagline":"A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.","description":"A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","ticker","slot-machine","headline","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ticker-takeover.json","heavy":false,"width":1920,"height":1080}},{"id":"titlecard-calm","kind":"component","href":"/catalog/components/titlecard-calm","title":"Titlecard Calm","tagline":"A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.","description":"A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","title-card","calm","orient"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/titlecard-calm.json","heavy":false,"width":1920,"height":1080}},{"id":"titlecard-lockup","kind":"component","href":"/catalog/components/titlecard-lockup","title":"Titlecard Lockup","tagline":"The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.","description":"The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","title-card","lockup","breather","orient"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/titlecard-lockup.json","heavy":false,"width":1920,"height":1080}},{"id":"tracking-in","kind":"component","href":"/catalog/components/tracking-in","title":"Tracking In","tagline":"A precise letter-spacing reveal for premium headings and interface labels","description":"A precise letter-spacing reveal for premium headings and interface labels","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","text","reveal","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracking-in.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/tracking-in.json","heavy":false,"width":1920,"height":1080}},{"id":"variable-axis-type","kind":"component","href":"/catalog/components/variable-axis-type","title":"Variable Axis Type","tagline":"A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.","description":"A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.","group":"text-captions","section":"Typography & Text","tags":["typography","variable-font","kinetic-type","axis","emphasize"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/variable-axis-type.json","heavy":false,"width":1920,"height":1080}},{"id":"vox-annotate","kind":"component","href":"/catalog/components/vox-annotate","title":"Vox Annotate","tagline":"The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.","description":"The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.","group":"text-captions","section":"Typography & Text","tags":["motion-primitive","typography","annotation","marker","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/vox-annotate.json","heavy":false,"width":1920,"height":1080}},{"id":"weight-wave","kind":"block","href":"/catalog/blocks/weight-wave","title":"Weight Wave","tagline":"A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.","description":"A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.","group":"text-captions","section":"Typography & Text","tags":["typography","kinetic-type","title","variable-font","text"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/weight-wave.json","heavy":false,"width":1920,"height":1080}},{"id":"wordmark-tiles","kind":"component","href":"/catalog/components/wordmark-tiles","title":"Wordmark Tiles","tagline":"A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.","description":"A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.","group":"text-captions","section":"Typography & Text","tags":["typography","wordmark","tiles","raster","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/wordmark-tiles.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-prism-title","kind":"block","href":"/catalog/blocks/yt-prism-title","title":"Chromatic Fringe Title","tagline":"Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift","description":"Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift","group":"text-captions","section":"Typography & Text","tags":["typography","title-card","creator"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/yt-prism-title.json","heavy":false,"width":1920,"height":1080}},{"id":"lower-third-bild","kind":"block","href":"/catalog/blocks/lower-third-bild","title":"Lower Third — BILD Style","tagline":"News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.","description":"News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.","group":"text-captions","section":"Lower Thirds","tags":["broadcast","lower-third","news","overlay"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lower-third-bild.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-accent-underline","kind":"block","href":"/catalog/blocks/lt-accent-underline","title":"Lower Third — Accent Underline","tagline":"Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility","description":"Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","minimal"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-accent-underline.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-bold-block","kind":"block","href":"/catalog/blocks/lt-bold-block","title":"Lower Third — Bold Block","tagline":"High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops","description":"High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","bold"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-bold-block.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-clean-bar","kind":"block","href":"/catalog/blocks/lt-clean-bar","title":"Lower Third — Clean Bar","tagline":"Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance","description":"Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-clean-bar.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-color-block","kind":"block","href":"/catalog/blocks/lt-color-block","title":"Lower Third — Color Block","tagline":"High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role","description":"High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","bold"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-color-block.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-dark-card","kind":"block","href":"/catalog/blocks/lt-dark-card","title":"Lower Third — Dark Card","tagline":"Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance","description":"Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","dark"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-dark-card.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-kicker-name","kind":"block","href":"/catalog/blocks/lt-kicker-name","title":"Lower Third — Kicker Name","tagline":"Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage","description":"Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","bold"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-kicker-name.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-mask-reveal","kind":"block","href":"/catalog/blocks/lt-mask-reveal","title":"Lower Third — Mask Reveal","tagline":"Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage","description":"Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","bold"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-mask-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-side-rule","kind":"block","href":"/catalog/blocks/lt-side-rule","title":"Lower Third — Side Rule","tagline":"Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage","description":"Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","minimal"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-side-rule.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-soft-pill","kind":"block","href":"/catalog/blocks/lt-soft-pill","title":"Lower Third — Soft Pill","tagline":"Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance","description":"Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","minimal"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-soft-pill.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-stack-bars","kind":"block","href":"/catalog/blocks/lt-stack-bars","title":"Lower Third — Stack Bars","tagline":"Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right","description":"Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","podcast","interview","bold"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-stack-bars.json","heavy":false,"width":1920,"height":1080}},{"id":"news-ticker","kind":"block","href":"/catalog/blocks/news-ticker","title":"News Ticker","tagline":"Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.","description":"Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.","group":"text-captions","section":"Lower Thirds","tags":["lower-third","overlay","news","ticker"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/news-ticker.json","heavy":false,"width":1920,"height":1080}},{"id":"code-3d-extrude","kind":"block","href":"/catalog/blocks/code-3d-extrude","title":"Code 3D Extrude","tagline":"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.","description":"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.","group":"code","section":"Code Animations","tags":["code","code-animation","3d","webgl","developer"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-3d-extrude.json","heavy":true,"width":1920,"height":1080}},{"id":"code-diff","kind":"block","href":"/catalog/blocks/code-diff","title":"Code Diff","tagline":"An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.","description":"An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.","group":"code","section":"Code Animations","tags":["code","code-animation","diff","developer"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-diff.json","heavy":false,"width":1920,"height":1080}},{"id":"code-highlight","kind":"block","href":"/catalog/blocks/code-highlight","title":"Code Highlight Sweep","tagline":"A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.","description":"A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.","group":"code","section":"Code Animations","tags":["code","code-animation","highlight","developer"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"code-morph","kind":"block","href":"/catalog/blocks/code-morph","title":"Code Morph","tagline":"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.","description":"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.","group":"code","section":"Code Animations","tags":["code","code-animation","morph","refactor","developer"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-morph.json","heavy":false,"width":1920,"height":1080}},{"id":"code-particle-assemble","kind":"block","href":"/catalog/blocks/code-particle-assemble","title":"Code Particle Assemble","tagline":"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.","description":"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.","group":"code","section":"Code Animations","tags":["code","code-animation","particles","gpu","webgl","developer"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-particle-assemble.json","heavy":true,"width":1920,"height":1080}},{"id":"code-scroll","kind":"block","href":"/catalog/blocks/code-scroll","title":"Code Scroll To Line","tagline":"The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.","description":"The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.","group":"code","section":"Code Animations","tags":["code","code-animation","scroll","developer"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-scroll.json","heavy":false,"width":1920,"height":1080}},{"id":"code-shader-dissolve","kind":"block","href":"/catalog/blocks/code-shader-dissolve","title":"Code Shader Dissolve","tagline":"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.","description":"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.","group":"code","section":"Code Animations","tags":["code","code-animation","shader","webgl","developer"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-shader-dissolve.json","heavy":true,"width":1920,"height":1080}},{"id":"code-typing","kind":"block","href":"/catalog/blocks/code-typing","title":"Code Typing","tagline":"Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.","description":"Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.","group":"code","section":"Code Animations","tags":["code","code-animation","typing","developer"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-typing.json","heavy":false,"width":1920,"height":1080}},{"id":"terminal-simulator","kind":"component","href":"/catalog/components/terminal-simulator","title":"Terminal Simulator","tagline":"A terminal window types commands and streams log output.","description":"A terminal window types commands and streams log output.","group":"code","section":"Code Animations","tags":["code-animation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-simulator.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/terminal-simulator.json","heavy":false,"width":1920,"height":1080}},{"id":"code-snippet-apple-terminal-pro","kind":"block","href":"/catalog/blocks/code-snippet-apple-terminal-pro","title":"Code Snippet - Apple Terminal Pro","tagline":"Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.","description":"Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.","group":"code","section":"Code Snippets","tags":["code","developer","showcase","terminal","apple","apple-terminal"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/code-snippet-apple-terminal-pro.json","heavy":false,"width":1920,"height":1080}},{"id":"code-snippet-dark-2026","kind":"block","href":"/catalog/blocks/code-snippet-dark-2026","title":"Code Snippet - Dark 2026","tagline":"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.","description":"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.","group":"code","section":"Code Snippets","tags":["code","developer","showcase","vscode"],"tech":[],"duration":11,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/code-snippet-dark-2026.json","heavy":false,"width":1920,"height":1080}},{"id":"code-snippet-dark-modern","kind":"block","href":"/catalog/blocks/code-snippet-dark-modern","title":"Code Snippet - Dark Modern","tagline":"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.","description":"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.","group":"code","section":"Code Snippets","tags":["code","developer","showcase","vscode"],"tech":[],"duration":11,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/code-snippet-dark-modern.json","heavy":false,"width":1920,"height":1080}},{"id":"chromatic-radial-split","kind":"block","href":"/catalog/blocks/chromatic-radial-split","title":"Chromatic Radial Split","tagline":"Shader transition with chromatic aberration radial split","description":"Shader transition with chromatic aberration radial split","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/chromatic-radial-split.json","heavy":true,"width":1920,"height":1080}},{"id":"cinematic-zoom","kind":"block","href":"/catalog/blocks/cinematic-zoom","title":"Cinematic Zoom","tagline":"Shader transition with dramatic zoom blur","description":"Shader transition with dramatic zoom blur","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/cinematic-zoom.json","heavy":true,"width":1920,"height":1080}},{"id":"cross-warp-morph","kind":"block","href":"/catalog/blocks/cross-warp-morph","title":"Cross Warp Morph","tagline":"Shader transition with cross-warped morphing","description":"Shader transition with cross-warped morphing","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/cross-warp-morph.json","heavy":true,"width":1920,"height":1080}},{"id":"domain-warp-dissolve","kind":"block","href":"/catalog/blocks/domain-warp-dissolve","title":"Domain Warp Dissolve","tagline":"Shader transition with fractal noise domain warping","description":"Shader transition with fractal noise domain warping","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/domain-warp-dissolve.json","heavy":true,"width":1920,"height":1080}},{"id":"flash-through-white","kind":"block","href":"/catalog/blocks/flash-through-white","title":"Flash Through White","tagline":"Shader transition with white flash crossfade","description":"Shader transition with white flash crossfade","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/flash-through-white.json","heavy":true,"width":1920,"height":1080}},{"id":"glitch","kind":"block","href":"/catalog/blocks/glitch","title":"Glitch","tagline":"Shader transition with digital glitch artifacts","description":"Shader transition with digital glitch artifacts","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/glitch.json","heavy":true,"width":1920,"height":1080}},{"id":"gravitational-lens","kind":"block","href":"/catalog/blocks/gravitational-lens","title":"Gravitational Lens","tagline":"Shader transition with gravitational lensing distortion","description":"Shader transition with gravitational lensing distortion","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/gravitational-lens.json","heavy":true,"width":1920,"height":1080}},{"id":"light-leak","kind":"block","href":"/catalog/blocks/light-leak","title":"Light Leak","tagline":"Shader transition with cinematic light leak overlay","description":"Shader transition with cinematic light leak overlay","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/light-leak.json","heavy":true,"width":1920,"height":1080}},{"id":"ridged-burn","kind":"block","href":"/catalog/blocks/ridged-burn","title":"Ridged Burn","tagline":"Shader transition with ridged turbulence burn effect","description":"Shader transition with ridged turbulence burn effect","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/ridged-burn.json","heavy":true,"width":1920,"height":1080}},{"id":"ripple-waves","kind":"block","href":"/catalog/blocks/ripple-waves","title":"Ripple Waves","tagline":"Shader transition with concentric ripple wave distortion","description":"Shader transition with concentric ripple wave distortion","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/ripple-waves.json","heavy":true,"width":1920,"height":1080}},{"id":"sdf-iris","kind":"block","href":"/catalog/blocks/sdf-iris","title":"SDF Iris","tagline":"Shader transition with signed distance field iris reveal","description":"Shader transition with signed distance field iris reveal","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/sdf-iris.json","heavy":true,"width":1920,"height":1080}},{"id":"swirl-vortex","kind":"block","href":"/catalog/blocks/swirl-vortex","title":"Swirl Vortex","tagline":"Shader transition with swirling vortex distortion","description":"Shader transition with swirling vortex distortion","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/swirl-vortex.json","heavy":true,"width":1920,"height":1080}},{"id":"thermal-distortion","kind":"block","href":"/catalog/blocks/thermal-distortion","title":"Thermal Distortion","tagline":"Shader transition with heat haze thermal distortion","description":"Shader transition with heat haze thermal distortion","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/thermal-distortion.json","heavy":true,"width":1920,"height":1080}},{"id":"whip-pan","kind":"block","href":"/catalog/blocks/whip-pan","title":"Whip Pan","tagline":"Shader transition simulating a fast camera whip pan","description":"Shader transition simulating a fast camera whip pan","group":"transitions","section":"Shader Transitions","tags":["transition","shader"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/whip-pan.json","heavy":true,"width":1920,"height":1080}},{"id":"beat-freeze-cut","kind":"block","href":"/catalog/blocks/beat-freeze-cut","title":"Beat Freeze Cut","tagline":"A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.","description":"A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.","group":"transitions","section":"CSS Transitions","tags":["transition","music","beat-driven","freeze-frame"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/beat-freeze-cut.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-scribble-transition","kind":"block","href":"/catalog/blocks/hw-scribble-transition","title":"Scribble Transition","tagline":"Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears","description":"Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears","group":"transitions","section":"CSS Transitions","tags":["handwritten","transition","wipe"],"tech":[],"duration":2.2,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-scribble-transition.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-clone-wall-transition","kind":"block","href":"/catalog/blocks/mk-clone-wall-transition","title":"Text Clone Wall Transition","tagline":"Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered","description":"Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered","group":"transitions","section":"CSS Transitions","tags":["transition","typography","wipe"],"tech":[],"duration":2.4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-clone-wall-transition.json","heavy":false,"width":1920,"height":1080}},{"id":"organic-light-leak-overlay","kind":"block","href":"/catalog/blocks/organic-light-leak-overlay","title":"Organic Light Leak Overlay","tagline":"Finite CSS light-leak overlay for memory beats and motivated transitions","description":"Finite CSS light-leak overlay for memory beats and motivated transitions","group":"transitions","section":"CSS Transitions","tags":["light-leak","film","memory","transition","overlay","media-treatment-overlay"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/organic-light-leak-overlay.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-3d","kind":"block","href":"/catalog/blocks/transitions-3d","title":"3D Transitions","tagline":"Showcase of 3D perspective flip and rotate transitions","description":"Showcase of 3D perspective flip and rotate transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":11,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-3d.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-blur","kind":"block","href":"/catalog/blocks/transitions-blur","title":"Blur Transitions","tagline":"Showcase of blur-based transitions between scenes","description":"Showcase of blur-based transitions between scenes","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":20,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-blur.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-cover","kind":"block","href":"/catalog/blocks/transitions-cover","title":"Cover Transitions","tagline":"Showcase of cover/uncover slide transitions","description":"Showcase of cover/uncover slide transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":21,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-cover.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-destruction","kind":"block","href":"/catalog/blocks/transitions-destruction","title":"Destruction Transitions","tagline":"Showcase of destructive break-apart transitions","description":"Showcase of destructive break-apart transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":14,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-destruction.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-dissolve","kind":"block","href":"/catalog/blocks/transitions-dissolve","title":"Dissolve Transitions","tagline":"Showcase of dissolve and fade transitions","description":"Showcase of dissolve and fade transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":24,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-dissolve.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-distortion","kind":"block","href":"/catalog/blocks/transitions-distortion","title":"Distortion Transitions","tagline":"Showcase of warp and distortion transitions","description":"Showcase of warp and distortion transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":21,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-distortion.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-grid","kind":"block","href":"/catalog/blocks/transitions-grid","title":"Grid Transitions","tagline":"Showcase of grid-based tile transitions","description":"Showcase of grid-based tile transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":11,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-grid.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-light","kind":"block","href":"/catalog/blocks/transitions-light","title":"Light Transitions","tagline":"Showcase of light-based glow and flash transitions","description":"Showcase of light-based glow and flash transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":21,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-light.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-mechanical","kind":"block","href":"/catalog/blocks/transitions-mechanical","title":"Mechanical Transitions","tagline":"Showcase of mechanical shutter and iris transitions","description":"Showcase of mechanical shutter and iris transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-mechanical.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-other","kind":"block","href":"/catalog/blocks/transitions-other","title":"Other Transitions","tagline":"Showcase of miscellaneous creative transitions","description":"Showcase of miscellaneous creative transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":20,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-other.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-push","kind":"block","href":"/catalog/blocks/transitions-push","title":"Push Transitions","tagline":"Showcase of push and slide transitions","description":"Showcase of push and slide transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":24,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-push.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-radial","kind":"block","href":"/catalog/blocks/transitions-radial","title":"Radial Transitions","tagline":"Showcase of radial wipe and reveal transitions","description":"Showcase of radial wipe and reveal transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":20,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-radial.json","heavy":false,"width":1920,"height":1080}},{"id":"transitions-scale","kind":"block","href":"/catalog/blocks/transitions-scale","title":"Scale Transitions","tagline":"Showcase of scale and zoom transitions","description":"Showcase of scale and zoom transitions","group":"transitions","section":"CSS Transitions","tags":["transition","showcase"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/transitions-scale.json","heavy":false,"width":1920,"height":1080}},{"id":"animated-bar-chart","kind":"component","href":"/catalog/components/animated-bar-chart","title":"Animated Bar Chart","tagline":"A compact data card with deterministic bar growth and value callouts.","description":"A compact data card with deterministic bar growth and value callouts.","group":"data-charts","section":"Data","tags":["data"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-bar-chart.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/animated-bar-chart.json","heavy":false,"width":1920,"height":1080}},{"id":"ascii-render-pass","kind":"component","href":"/catalog/components/ascii-render-pass","title":"ASCII Render Pass","tagline":"A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.","description":"A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.","group":"data-charts","section":"Data","tags":["motion-primitive","experiment","texture","ascii","quantize"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ascii-render-pass.json","heavy":false,"width":1920,"height":1080}},{"id":"ascii-trail-reveal","kind":"component","href":"/catalog/components/ascii-trail-reveal","title":"ASCII Trail Reveal","tagline":"An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.","description":"An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.","group":"data-charts","section":"Data","tags":["motion-primitive","intro","reveal","ascii","trail","grid"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ascii-trail-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"bar-chart-race","kind":"block","href":"/catalog/blocks/bar-chart-race","title":"Bar Chart Race","tagline":"Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads","description":"Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads","group":"data-charts","section":"Data","tags":["data","chart","statistics","ranking"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/bar-chart-race.json","heavy":false,"width":1920,"height":1080}},{"id":"chart-story","kind":"component","href":"/catalog/components/chart-story","title":"Chart Story","tagline":"One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.","description":"One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.","group":"data-charts","section":"Data","tags":["motion-primitive","proof","stats","chart","bars","line","donut","progress","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/chart-story.json","heavy":false,"width":1920,"height":1080}},{"id":"conic-progress-ring","kind":"component","href":"/catalog/components/conic-progress-ring","title":"Conic Progress Ring","tagline":"A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.","description":"A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.","group":"data-charts","section":"Data","tags":["data","progress","ring","conic-gradient","prove","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/conic-progress-ring.json","heavy":false,"width":1920,"height":1080}},{"id":"data-chart","kind":"block","href":"/catalog/blocks/data-chart","title":"Data Chart","tagline":"Animated bar + line chart with staggered reveal, NYT-style typography, and value labels","description":"Animated bar + line chart with staggered reveal, NYT-style typography, and value labels","group":"data-charts","section":"Data","tags":["data","chart","statistics"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/data-chart.json","heavy":false,"width":1920,"height":1080}},{"id":"decline-chart","kind":"component","href":"/catalog/components/decline-chart","title":"Decline Chart","tagline":"A metric line draws downward as its value counts down and the ambient background darkens in lockstep.","description":"A metric line draws downward as its value counts down and the ambient background darkens in lockstep.","group":"data-charts","section":"Data","tags":["motion-primitive","data","chart","decline","metric","problem"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/decline-chart.json","heavy":false,"width":1920,"height":1080}},{"id":"logo-wall","kind":"component","href":"/catalog/components/logo-wall","title":"Logo Wall","tagline":"A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.","description":"A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.","group":"data-charts","section":"Data","tags":["data","logos","social-proof","stagger","prove"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/logo-wall.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-line-graph","kind":"block","href":"/catalog/blocks/mk-line-graph","title":"Minimal Line Graph","tagline":"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","description":"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","group":"data-charts","section":"Data","tags":["data-viz","chart","graph","minimal"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-line-graph.json","heavy":false,"width":1920,"height":1080}},{"id":"spain-map","kind":"block","href":"/catalog/blocks/spain-map","title":"Spain Map","tagline":"Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection","description":"Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection","group":"data-charts","section":"Data","tags":["data","map","geography","spain","europe","choropleth"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/spain-map.json","heavy":false,"width":1920,"height":1080}},{"id":"star-rating-fill","kind":"component","href":"/catalog/components/star-rating-fill","title":"Star Rating Fill","tagline":"A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.","description":"A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.","group":"data-charts","section":"Data","tags":["data","rating","stars","fractional","fill","prove"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/star-rating-fill.json","heavy":false,"width":1920,"height":1080}},{"id":"us-map","kind":"block","href":"/catalog/blocks/us-map","title":"US Map","tagline":"Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP","description":"Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP","group":"data-charts","section":"Data","tags":["data","map","geography","usa","choropleth"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/us-map.json","heavy":false,"width":1920,"height":1080}},{"id":"us-map-bubble","kind":"block","href":"/catalog/blocks/us-map-bubble","title":"US Bubble Map","tagline":"Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map","description":"Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map","group":"data-charts","section":"Data","tags":["data","map","geography","usa","bubble","cities"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/us-map-bubble.json","heavy":false,"width":1920,"height":1080}},{"id":"us-map-flow","kind":"block","href":"/catalog/blocks/us-map-flow","title":"US Flow Map","tagline":"Animated connection arcs between US cities over a base map — composable origin-destination flow visualization","description":"Animated connection arcs between US cities over a base map — composable origin-destination flow visualization","group":"data-charts","section":"Data","tags":["data","map","geography","usa","flow","connections","arcs"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/us-map-flow.json","heavy":false,"width":1920,"height":1080}},{"id":"us-map-hex","kind":"block","href":"/catalog/blocks/us-map-hex","title":"US Hex Grid Map","tagline":"Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label","description":"Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label","group":"data-charts","section":"Data","tags":["data","map","geography","usa","hexgrid","tilegrid"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/us-map-hex.json","heavy":false,"width":1920,"height":1080}},{"id":"week-in-merges","kind":"block","href":"/catalog/blocks/week-in-merges","title":"Week in Merges","tagline":"Each author's avatar bounces across their row at a speed set by how many pull requests they merged","description":"Each author's avatar bounces across their row at a speed set by how many pull requests they merged","group":"data-charts","section":"Data","tags":["data","chart","ranking","leaderboard"],"tech":[],"duration":16,"width":1080,"height":1350,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/week-in-merges.json","heavy":false,"width":1080,"height":1350}},{"id":"world-map","kind":"block","href":"/catalog/blocks/world-map","title":"World Map","tagline":"Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection","description":"Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection","group":"data-charts","section":"Data","tags":["data","map","geography","world","choropleth"],"tech":[],"duration":14,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/world-map.json","heavy":false,"width":1920,"height":1080}},{"id":"ai-chat-reveal","kind":"block","href":"/catalog/blocks/ai-chat-reveal","title":"AI Chat Reveal","tagline":"A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card","description":"A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","ai","chat","vertical","ad-template"],"tech":[],"duration":19.3333,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/ai-chat-reveal.json","heavy":false,"width":1080,"height":1920}},{"id":"app-showcase","kind":"block","href":"/catalog/blocks/app-showcase","title":"App Showcase","tagline":"Fitness app product showcase with three floating smartphone screens","description":"Fitness app product showcase with three floating smartphone screens","group":"scenes-demos","section":"Showcases","tags":["showcase","app","3d"],"tech":[],"duration":5.5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/app-showcase.json","heavy":false,"width":1920,"height":1080}},{"id":"apple-money-count","kind":"block","href":"/catalog/blocks/apple-money-count","title":"Apple Money Count","tagline":"Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.","description":"Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.","group":"scenes-demos","section":"Showcases","tags":["showcase","finance","kinetic","youtube","sfx"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/apple-money-count.json","heavy":false,"width":1920,"height":1080}},{"id":"blue-sweater-intro-video","kind":"block","href":"/catalog/blocks/blue-sweater-intro-video","title":"Blue Sweater Intro Video","tagline":"Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.","description":"Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.","group":"scenes-demos","section":"Showcases","tags":["showcase","ai","creator","sfx"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/blue-sweater-intro-video.json","heavy":false,"width":1920,"height":1080}},{"id":"camera-dolly-zoom","kind":"block","href":"/catalog/blocks/camera-dolly-zoom","title":"Dolly Zoom (Vertigo Shot)","tagline":"Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move.","description":"Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move.","group":"scenes-demos","section":"Showcases","tags":["camera","depth","3d","cinematic"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/camera-dolly-zoom.json","heavy":false,"width":1920,"height":1080}},{"id":"chatgpt-exchange","kind":"block","href":"/catalog/blocks/chatgpt-exchange","title":"ChatGPT Exchange","tagline":"A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result","description":"A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","ai","chat","vertical","ad-template"],"tech":[],"duration":14.9,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/chatgpt-exchange.json","heavy":false,"width":1080,"height":1920}},{"id":"claude-exchange","kind":"block","href":"/catalog/blocks/claude-exchange","title":"Claude Exchange","tagline":"A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions","description":"A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","ai","chat","vertical","ad-template"],"tech":[],"duration":21.4,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/claude-exchange.json","heavy":false,"width":1080,"height":1920}},{"id":"cosmic-orb","kind":"block","href":"/catalog/blocks/cosmic-orb","title":"Cosmic Orb","tagline":"An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge.","description":"An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge.","group":"scenes-demos","section":"Showcases","tags":["webgl","shader","background","showcase","3d"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/cosmic-orb.json","heavy":true,"width":1920,"height":1080}},{"id":"gallery-tunnel","kind":"block","href":"/catalog/blocks/gallery-tunnel","title":"Gallery Tunnel","tagline":"An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog.","description":"An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog.","group":"scenes-demos","section":"Showcases","tags":["webgl","3d","background","showcase","depth","loop"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/gallery-tunnel.json","heavy":false,"width":1920,"height":1080}},{"id":"heygen-avatar-promo-card","kind":"block","href":"/catalog/blocks/heygen-avatar-promo-card","title":"HeyGen Avatar Promo Card","tagline":"A portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout","description":"A portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout","group":"scenes-demos","section":"Showcases","tags":["showcase","avatar","promotion","vertical"],"tech":[],"duration":10,"width":1080,"height":1920,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/heygen-avatar-promo-card.json","heavy":false,"width":1080,"height":1920}},{"id":"message-thread-reveal","kind":"block","href":"/catalog/blocks/message-thread-reveal","title":"Message Thread Reveal","tagline":"A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message","description":"A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","chat","vertical","ad-template"],"tech":[],"duration":25.7667,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/message-thread-reveal.json","heavy":false,"width":1080,"height":1920}},{"id":"north-korea-locked-down","kind":"block","href":"/catalog/blocks/north-korea-locked-down","title":"North Korea Locked Down","tagline":"Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.","description":"Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.","group":"scenes-demos","section":"Showcases","tags":["showcase","map","annotation","youtube","kinetic"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/north-korea-locked-down.json","heavy":false,"width":1920,"height":1080}},{"id":"notes-reveal","kind":"block","href":"/catalog/blocks/notes-reveal","title":"Notes Reveal","tagline":"A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist","description":"A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","notes","typing","vertical","ad-template"],"tech":[],"duration":24.85,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/notes-reveal.json","heavy":false,"width":1080,"height":1920}},{"id":"notification-cascade","kind":"block","href":"/catalog/blocks/notification-cascade","title":"Notification Cascade","tagline":"Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card","description":"Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","notification","vertical","ad-template"],"tech":[],"duration":14,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/notification-cascade.json","heavy":false,"width":1080,"height":1920}},{"id":"nyc-paris-flight","kind":"block","href":"/catalog/blocks/nyc-paris-flight","title":"NYC Paris Flight","tagline":"Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.","description":"Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.","group":"scenes-demos","section":"Showcases","tags":["showcase","travel","map","youtube","sfx"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/nyc-paris-flight.json","heavy":false,"width":1920,"height":1080}},{"id":"oscilloscope-trace","kind":"block","href":"/catalog/blocks/oscilloscope-trace","title":"Oscilloscope Trace","tagline":"CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows","description":"CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows","group":"scenes-demos","section":"Showcases","tags":["instrument","data","showcase","retro"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/oscilloscope-trace.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/oscilloscope-trace.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/oscilloscope-trace.json","heavy":false,"width":1920,"height":1080}},{"id":"rack-focus","kind":"block","href":"/catalog/blocks/rack-focus","title":"Rack Focus","tagline":"A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables.","description":"A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables.","group":"scenes-demos","section":"Showcases","tags":["webgl","shader","camera","depth","cinematic","showcase"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/rack-focus.json","heavy":true,"width":1920,"height":1080}},{"id":"share-sheet-carousel","kind":"block","href":"/catalog/blocks/share-sheet-carousel","title":"Share-Sheet Carousel","tagline":"A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap","description":"A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","share-sheet","vertical","ad-template"],"tech":[],"duration":7.2333,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/share-sheet-carousel.json","heavy":false,"width":1080,"height":1920}},{"id":"slack-notification-ad","kind":"block","href":"/catalog/blocks/slack-notification-ad","title":"Slack Notification Ad","tagline":"A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff","description":"A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff","group":"scenes-demos","section":"Showcases","tags":["showcase","mock-ui","notification","vertical","ad-template"],"tech":[],"duration":12,"width":1080,"height":1920,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/slack-notification-ad.json","heavy":false,"width":1080,"height":1920}},{"id":"ui-3d-reveal","kind":"block","href":"/catalog/blocks/ui-3d-reveal","title":"3D UI Reveal","tagline":"Perspective 3D reveal animation for UI elements","description":"Perspective 3D reveal animation for UI elements","group":"scenes-demos","section":"Showcases","tags":["showcase","3d","reveal"],"tech":[],"duration":13,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/ui-3d-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"vfx-anamorphic-flare","kind":"block","href":"/catalog/blocks/vfx-anamorphic-flare","title":"Anamorphic Streak Flare","tagline":"A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.","description":"A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.","group":"scenes-demos","section":"Showcases","tags":["vfx","background","showcase","optical","canvas"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/vfx-anamorphic-flare.json","heavy":false,"width":1920,"height":1080}},{"id":"vpn-youtube-spot","kind":"block","href":"/catalog/blocks/vpn-youtube-spot","title":"VPN YouTube Spot","tagline":"Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.","description":"Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.","group":"scenes-demos","section":"Showcases","tags":["app","showcase","youtube","sfx"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/vpn-youtube-spot.json","heavy":false,"width":1920,"height":1080}},{"id":"browser-device-stage","kind":"component","href":"/catalog/components/browser-device-stage","title":"Browser Device Stage","tagline":"A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap.","description":"A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap.","group":"scenes-demos","section":"Product Demo","tags":["stage","product-demo","device","browser","phone","slot","chrome"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/browser-device-stage.json","heavy":false,"width":1920,"height":1080}},{"id":"code-terminal-run","kind":"component","href":"/catalog/components/code-terminal-run","title":"Code Terminal Run","tagline":"A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.","description":"A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","terminal","typing","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/code-terminal-run.json","heavy":false,"width":1920,"height":1080}},{"id":"cursor-glyph-trail","kind":"component","href":"/catalog/components/cursor-glyph-trail","title":"Cursor Glyph Trail","tagline":"An actor travels an authored path depositing small dithered glyphs at its past positions, each popping in and decaying in place, stamp rate scaling with the actor's velocity.","description":"An actor travels an authored path depositing small dithered glyphs at its past positions, each popping in and decaying in place, stamp rate scaling with the actor's velocity.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","demonstrate","trail","cursor","glyphs","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/cursor-glyph-trail.json","heavy":false,"width":1920,"height":1080}},{"id":"echo-trail","kind":"component","href":"/catalog/components/echo-trail","title":"Echo Trail","tagline":"A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest.","description":"A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","demonstrate","trail","onion-skin","ghosts","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/echo-trail.json","heavy":false,"width":1920,"height":1080}},{"id":"focus-swap","kind":"component","href":"/catalog/components/focus-swap","title":"Focus Swap","tagline":"Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.","description":"Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.","group":"scenes-demos","section":"Product Demo","tags":["effect","ui-props","focus","blur","attention","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/focus-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"icon-morph-beat","kind":"component","href":"/catalog/components/icon-morph-beat","title":"Icon Morph Beat","tagline":"An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.","description":"An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","icon","morph","state-change","completion"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/icon-morph-beat.json","heavy":false,"width":1920,"height":1080}},{"id":"native-notification-pop","kind":"component","href":"/catalog/components/native-notification-pop","title":"Native Notification Pop","tagline":"One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit.","description":"One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","overlay","notification","spring"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/native-notification-pop.json","heavy":false,"width":1920,"height":1080}},{"id":"notification-stack","kind":"component","href":"/catalog/components/notification-stack","title":"Notification Stack","tagline":"1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.","description":"1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","notification","stack","stagger"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/notification-stack.json","heavy":false,"width":1920,"height":1080}},{"id":"offset-path-traveler","kind":"component","href":"/catalog/components/offset-path-traveler","title":"Offset Path Traveler","tagline":"A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.","description":"A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","path","traveler","auto-rotate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/offset-path-traveler.json","heavy":false,"width":1920,"height":1080}},{"id":"press-ripple","kind":"component","href":"/catalog/components/press-ripple","title":"Press Ripple","tagline":"A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with ink ripple rings, then exits off-stage while the pressed state holds.","description":"A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with ink ripple rings, then exits off-stage while the pressed state holds.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","cursor","press","ripple","payoff"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/press-ripple.json","heavy":false,"width":1920,"height":1080}},{"id":"pull-to-refresh","kind":"component","href":"/catalog/components/pull-to-refresh","title":"Pull to Refresh","tagline":"A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.","description":"A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.","group":"scenes-demos","section":"Product Demo","tags":["pointer","pointers","mobile","gesture","interaction","refresh","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/pull-to-refresh.json","heavy":false,"width":1920,"height":1080}},{"id":"screen-flow-carousel","kind":"component","href":"/catalog/components/screen-flow-carousel","title":"Screen Flow Carousel","tagline":"Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults.","description":"Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults.","group":"scenes-demos","section":"Product Demo","tags":["product-demo","feature-tour","carousel","rail","slot","screens"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/screen-flow-carousel.json","heavy":false,"width":1920,"height":1080}},{"id":"segmentation-flood","kind":"component","href":"/catalog/components/segmentation-flood","title":"Segmentation Flood","tagline":"Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean.","description":"Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","ai","hud","canvas","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/segmentation-flood.json","heavy":false,"width":1920,"height":1080}},{"id":"soft-blob-touch","kind":"component","href":"/catalog/components/soft-blob-touch","title":"Soft Blob Touch","tagline":"A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.","description":"A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","material","blob","touch","grain"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/soft-blob-touch.json","heavy":false,"width":1920,"height":1080}},{"id":"spring-stack-shuffle","kind":"component","href":"/catalog/components/spring-stack-shuffle","title":"Spring Stack Shuffle","tagline":"A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved.","description":"A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","physics","stack","interruptible-spring"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/spring-stack-shuffle.json","heavy":false,"width":1920,"height":1080}},{"id":"state-chip-rail","kind":"component","href":"/catalog/components/state-chip-rail","title":"State Chip Rail","tagline":"A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state.","description":"A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","state-machine","status","chips","rail"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/state-chip-rail.json","heavy":false,"width":1920,"height":1080}},{"id":"sticky-mock-swap","kind":"component","href":"/catalog/components/sticky-mock-swap","title":"Sticky Mock Swap","tagline":"A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.","description":"A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","sticky","mock","crossfade","feature-tour"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/sticky-mock-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"telemetry-hud","kind":"component","href":"/catalog/components/telemetry-hud","title":"Telemetry HUD","tagline":"Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.","description":"Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","hud","telemetry","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/telemetry-hud.json","heavy":false,"width":1920,"height":1080}},{"id":"toggle-flip","kind":"component","href":"/catalog/components/toggle-flip","title":"Toggle Flip","tagline":"An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.","description":"An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.","group":"scenes-demos","section":"Product Demo","tags":["prop","ui-props","toggle","interaction","reference-prop","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/toggle-flip.json","heavy":false,"width":1920,"height":1080}},{"id":"tracing-beam","kind":"component","href":"/catalog/components/tracing-beam","title":"Tracing Beam","tagline":"A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.","description":"A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","attention","beam","path","spotlight"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/tracing-beam.json","heavy":false,"width":1920,"height":1080}},{"id":"typed-prompt","kind":"component","href":"/catalog/components/typed-prompt","title":"Typed Prompt","tagline":"A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.","description":"A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.","group":"scenes-demos","section":"Product Demo","tags":["motion-primitive","product-demo","typing","prompt","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/typed-prompt.json","heavy":false,"width":1920,"height":1080}},{"id":"vector-editor-rig","kind":"component","href":"/catalog/components/vector-editor-rig","title":"Vector Editor Rig","tagline":"A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.","description":"A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.","group":"scenes-demos","section":"Product Demo","tags":["prop","ui-props","demonstrate","vector","design-tool","pen-tool","bezier","app-chrome"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/vector-editor-rig.json","heavy":false,"width":1920,"height":1080}},{"id":"editorial-flash-overlay","kind":"block","href":"/catalog/blocks/editorial-flash-overlay","title":"Editorial Flash Overlay","tagline":"Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal","description":"Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal","group":"scenes-demos","section":"Social Overlays","tags":["flash","editorial","social","light","transition","overlay","media-treatment-overlay"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/editorial-flash-overlay.json","heavy":false,"width":1920,"height":1080}},{"id":"freeze-frame-dressing","kind":"block","href":"/catalog/blocks/freeze-frame-dressing","title":"Freeze-Frame Dressing","tagline":"Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject","description":"Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject","group":"scenes-demos","section":"Social Overlays","tags":["freeze-frame","cutout","scrapbook","paper","social","overlay","media-treatment-overlay"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/freeze-frame-dressing.json","heavy":false,"width":1920,"height":1080}},{"id":"instagram-follow","kind":"block","href":"/catalog/blocks/instagram-follow","title":"Instagram Follow","tagline":"Animated Instagram follow overlay with profile card and follow button","description":"Animated Instagram follow overlay with profile card and follow button","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","instagram"],"tech":[],"duration":4.5,"width":1080,"height":1920,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/instagram-follow.json","heavy":false,"width":1080,"height":1920}},{"id":"macos-notification","kind":"block","href":"/catalog/blocks/macos-notification","title":"macOS Notification","tagline":"Animated macOS-style notification banner with app icon and message","description":"Animated macOS-style notification banner with app icon and message","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","notification"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/macos-notification.json","heavy":false,"width":1920,"height":1080}},{"id":"reddit-post","kind":"block","href":"/catalog/blocks/reddit-post","title":"Reddit Post Card","tagline":"Animated Reddit post card overlay with upvotes and comments","description":"Animated Reddit post card overlay with upvotes and comments","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","reddit"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/reddit-post.json","heavy":false,"width":1920,"height":1080}},{"id":"spotify-card","kind":"block","href":"/catalog/blocks/spotify-card","title":"Spotify Now Playing","tagline":"Animated Spotify now-playing card with album art and progress bar","description":"Animated Spotify now-playing card with album art and progress bar","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","spotify"],"tech":[],"duration":5,"width":1080,"height":1920,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/spotify-card.json","heavy":false,"width":1080,"height":1920}},{"id":"thread-message-stack","kind":"block","href":"/catalog/blocks/thread-message-stack","title":"Thread Message Stack","tagline":"A source-owned editable conversation stack with arbitrary incoming and outgoing messages","description":"A source-owned editable conversation stack with arbitrary incoming and outgoing messages","group":"scenes-demos","section":"Social Overlays","tags":["social","conversation","messages"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/thread-message-stack.json","heavy":false,"width":1920,"height":1080}},{"id":"tiktok-follow","kind":"block","href":"/catalog/blocks/tiktok-follow","title":"TikTok Follow","tagline":"Animated TikTok follow overlay with profile card and follow button","description":"Animated TikTok follow overlay with profile card and follow button","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","tiktok"],"tech":[],"duration":4.5,"width":1080,"height":1920,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/tiktok-follow.json","heavy":false,"width":1080,"height":1920}},{"id":"x-post","kind":"block","href":"/catalog/blocks/x-post","title":"X Post Card","tagline":"Animated X/Twitter post card overlay with engagement metrics","description":"Animated X/Twitter post card overlay with engagement metrics","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","twitter"],"tech":[],"duration":5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/x-post.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-comment-card","kind":"block","href":"/catalog/blocks/yt-comment-card","title":"Comment Cards","tagline":"Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips","description":"Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips","group":"scenes-demos","section":"Social Overlays","tags":["social","comments","creator","overlay"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/yt-comment-card.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-lower-third","kind":"block","href":"/catalog/blocks/yt-lower-third","title":"YouTube Lower Third","tagline":"Animated YouTube subscribe lower third with avatar and channel info","description":"Animated YouTube subscribe lower third with avatar and channel info","group":"scenes-demos","section":"Social Overlays","tags":["social","overlay","youtube"],"tech":[],"duration":4.5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/yt-lower-third.json","heavy":false,"width":1920,"height":1080}},{"id":"aurora-drift","kind":"component","href":"/catalog/components/aurora-drift","title":"Aurora Drift","tagline":"Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.","description":"Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","background","aurora","gradient","ambient","loopable"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/aurora-drift.json","heavy":false,"width":1920,"height":1080}},{"id":"beat-accent","kind":"component","href":"/catalog/components/beat-accent","title":"Beat Accent","tagline":"A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.","description":"A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","effects","burst","sting","emphasize","impact"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/beat-accent.json","heavy":false,"width":1920,"height":1080}},{"id":"beat-pulse-background","kind":"component","href":"/catalog/components/beat-pulse-background","title":"Beat Pulse Background","tagline":"An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.","description":"An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","background","beat","pulse","rhythmic","reactive"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/beat-pulse-background.json","heavy":false,"width":1920,"height":1080}},{"id":"chat-thread","kind":"component","href":"/catalog/components/chat-thread","title":"Chat Thread","tagline":"The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits","description":"The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","chat","mock-ui","conversation","vertical"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/chat-thread.json","heavy":false,"width":1920,"height":1080}},{"id":"constellation-hub","kind":"component","href":"/catalog/components/constellation-hub","title":"Constellation Hub","tagline":"Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.","description":"Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","feature-tour","hub","nodes","connector","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/constellation-hub.json","heavy":false,"width":1920,"height":1080}},{"id":"count-up","kind":"component","href":"/catalog/components/count-up","title":"Count Up","tagline":"A token-native stat counter that eases between values and lands with a restrained scale pulse.","description":"A token-native stat counter that eases between values and lands with a restrained scale pulse.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","proof","stats","counter","number","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/count-up.json","heavy":false,"width":1920,"height":1080}},{"id":"cta-close","kind":"component","href":"/catalog/components/cta-close","title":"CTA Close","tagline":"A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.","description":"A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","ui-props","cta","end-card","close","ask"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/cta-close.json","heavy":false,"width":1920,"height":1080}},{"id":"cta-lockup","kind":"component","href":"/catalog/components/cta-lockup","title":"CTA Lockup","tagline":"A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.","description":"A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","ui-props","cta","end-card","lockup","ask"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/cta-lockup.json","heavy":false,"width":1920,"height":1080}},{"id":"facet-morph","kind":"component","href":"/catalog/components/facet-morph","title":"Facet Morph","tagline":"A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.","description":"A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","intro","morph","low-poly","svg","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/facet-morph.json","heavy":false,"width":1920,"height":1080}},{"id":"gesture-tap","kind":"component","href":"/catalog/components/gesture-tap","title":"Gesture Tap","tagline":"A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.","description":"A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","gesture","tap","interaction","ui-props"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/gesture-tap.json","heavy":false,"width":1920,"height":1080}},{"id":"gloss-sweep","kind":"component","href":"/catalog/components/gloss-sweep","title":"Gloss Sweep","tagline":"A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.","description":"A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","celebration","gloss","card","badge","payoff"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/gloss-sweep.json","heavy":false,"width":1920,"height":1080}},{"id":"grade-split-reveal","kind":"component","href":"/catalog/components/grade-split-reveal","title":"Grade Split Reveal","tagline":"The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match.","description":"The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match.","group":"scenes-demos","section":"Motion Scenes","tags":["color-grading","media","compare","reveal","motion-primitive","grade"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/grade-split-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"grid-card-assemble","kind":"component","href":"/catalog/components/grid-card-assemble","title":"Grid Card Assemble","tagline":"N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.","description":"N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","layout","grid","list","stagger","assemble","feature-tour"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/grid-card-assemble.json","heavy":false,"width":1920,"height":1080}},{"id":"light-sweep-pass","kind":"component","href":"/catalog/components/light-sweep-pass","title":"Light Sweep Pass","tagline":"A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty.","description":"A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","overlay","light","sweep","slots","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/light-sweep-pass.json","heavy":false,"width":1920,"height":1080}},{"id":"locked-nucleus-orbit","kind":"component","href":"/catalog/components/locked-nucleus-orbit","title":"Locked Nucleus Orbit","tagline":"A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.","description":"A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","intro","reveal","orbit","lockup","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/locked-nucleus-orbit.json","heavy":false,"width":1920,"height":1080}},{"id":"logo-sting","kind":"component","href":"/catalog/components/logo-sting","title":"Logo Sting","tagline":"A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.","description":"A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","brand","logo","sting","impact","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/logo-sting.json","heavy":false,"width":1920,"height":1080}},{"id":"marker-checklist-card","kind":"component","href":"/catalog/components/marker-checklist-card","title":"Marker Checklist Card","tagline":"A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows","description":"A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","handwritten","checklist","paper","marker"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/marker-checklist-card.json","heavy":false,"width":1920,"height":1080}},{"id":"modal-morph","kind":"component","href":"/catalog/components/modal-morph","title":"Modal Morph","tagline":"A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.","description":"A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","structure","flip","shared-element","modal","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/modal-morph.json","heavy":false,"width":1920,"height":1080}},{"id":"multi-device-splay","kind":"component","href":"/catalog/components/multi-device-splay","title":"Multi Device Splay","tagline":"Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.","description":"Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","device","phone","tablet","desktop","splay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/multi-device-splay.json","heavy":false,"width":1920,"height":1080}},{"id":"notes-typing","kind":"component","href":"/catalog/components/notes-typing","title":"Notes Typing","tagline":"The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter","description":"The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","notes","typing","mock-ui","vertical"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/notes-typing.json","heavy":false,"width":1920,"height":1080}},{"id":"outline-draw","kind":"component","href":"/catalog/components/outline-draw","title":"Outline Draw","tagline":"A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.","description":"A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","effects","outline","border","mask","proof"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/outline-draw.json","heavy":false,"width":1920,"height":1080}},{"id":"oversized-cursor","kind":"component","href":"/catalog/components/oversized-cursor","title":"Oversized Cursor","tagline":"A deliberately oversized macOS-style pointer that enters off-screen, travels to a target, clicks to ignite a visible response, then exits","description":"A deliberately oversized macOS-style pointer that enters off-screen, travels to a target, clicks to ignite a visible response, then exits","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","actor","cursor","pointer","interaction"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/oversized-cursor.json","heavy":false,"width":1920,"height":1080}},{"id":"particle-image-reveal","kind":"component","href":"/catalog/components/particle-image-reveal","title":"Particle Image Reveal","tagline":"A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.","description":"A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","intros-reveals","particles","reveal","canvas","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/particle-image-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"physical-exit","kind":"component","href":"/catalog/components/physical-exit","title":"Physical Exit","tagline":"A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.","description":"A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","exit","momentum","toss","drop","slide"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/physical-exit.json","heavy":false,"width":1920,"height":1080}},{"id":"radial-surround","kind":"component","href":"/catalog/components/radial-surround","title":"Radial Surround","tagline":"Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.","description":"Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","problem-setup","radial","ring","surround","converge"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/radial-surround.json","heavy":false,"width":1920,"height":1080}},{"id":"scroll-feed","kind":"component","href":"/catalog/components/scroll-feed","title":"Scroll Feed","tagline":"A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.","description":"A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","effects","scroll","feed","loop","agitation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/scroll-feed.json","heavy":false,"width":1920,"height":1080}},{"id":"slit-scan-reveal","kind":"component","href":"/catalog/components/slit-scan-reveal","title":"Slit Scan Reveal","tagline":"The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent.","description":"The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","time","slit-scan","canvas","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/slit-scan-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"social-proof-card","kind":"component","href":"/catalog/components/social-proof-card","title":"Social Proof Card","tagline":"The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup","description":"The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","social-proof","end-card","cta","vertical"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/social-proof-card.json","heavy":false,"width":1920,"height":1080}},{"id":"split-tilt-cards","kind":"component","href":"/catalog/components/split-tilt-cards","title":"Split Tilt Cards","tagline":"Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.","description":"Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","layout","compare","holdable","book-open","tilt","slots"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/split-tilt-cards.json","heavy":false,"width":1920,"height":1080}},{"id":"spring-pop","kind":"component","href":"/catalog/components/spring-pop","title":"Spring Pop","tagline":"A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.","description":"A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","effects","spring","overshoot","pop","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/spring-pop.json","heavy":false,"width":1920,"height":1080}},{"id":"stitched-text-draw","kind":"component","href":"/catalog/components/stitched-text-draw","title":"Stitched Text Draw","tagline":"Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter.","description":"Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","experiment","type","craft","stitch","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/stitched-text-draw.json","heavy":false,"width":1920,"height":1080}},{"id":"stop-motion-cadence","kind":"component","href":"/catalog/components/stop-motion-cadence","title":"Stop Motion Cadence","tagline":"The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames.","description":"The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","time-law","stop-motion","stepped","boil","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/stop-motion-cadence.json","heavy":false,"width":1920,"height":1080}},{"id":"svg-stroke-trace","kind":"component","href":"/catalog/components/svg-stroke-trace","title":"SVG Stroke Trace","tagline":"An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.","description":"An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","intro","reveal","svg","stroke","line-draw"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/svg-stroke-trace.json","heavy":false,"width":1920,"height":1080}},{"id":"swipe-rail","kind":"component","href":"/catalog/components/swipe-rail","title":"Swipe Rail","tagline":"A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.","description":"A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","interaction","gesture","swipe","cards","rail"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/swipe-rail.json","heavy":false,"width":1920,"height":1080}},{"id":"testimonial-proof-card","kind":"component","href":"/catalog/components/testimonial-proof-card","title":"Testimonial Proof Card","tagline":"A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.","description":"A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","proof","testimonial","quote","social-proof","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/testimonial-proof-card.json","heavy":false,"width":1920,"height":1080}},{"id":"touch-indicator","kind":"component","href":"/catalog/components/touch-indicator","title":"Touch Indicator","tagline":"A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass, causes a same-frame response, and lifts. Tap or swipe, picked by variable.","description":"A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass, causes a same-frame response, and lifts. Tap or swipe, picked by variable.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","mobile","gesture","touch","pointer"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/touch-indicator.json","heavy":false,"width":1920,"height":1080}},{"id":"trust-strip","kind":"component","href":"/catalog/components/trust-strip","title":"Trust Strip","tagline":"A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.","description":"A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","proof","trust","logo-strip","wordmarks"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/trust-strip.json","heavy":false,"width":1920,"height":1080}},{"id":"variable-font-flex","kind":"component","href":"/catalog/components/variable-font-flex","title":"Variable Font Flex","tagline":"A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.","description":"A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","experiment","type","variable-font","deterministic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/variable-font-flex.json","heavy":false,"width":1920,"height":1080}},{"id":"velocity-throw-snap","kind":"component","href":"/catalog/components/velocity-throw-snap","title":"Velocity Throw Snap","tagline":"A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.","description":"A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","feature-tour","rail","velocity","throw","snap","physics"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/velocity-throw-snap.json","heavy":false,"width":1920,"height":1080}},{"id":"whiteboard-ink","kind":"component","href":"/catalog/components/whiteboard-ink","title":"Whiteboard Ink","tagline":"A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.","description":"A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.","group":"scenes-demos","section":"Motion Scenes","tags":["motion-primitive","intro","reveal","svg","whiteboard","line-draw","slot"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/whiteboard-ink.json","heavy":false,"width":1920,"height":1080}},{"id":"arc-motion-path","kind":"component","href":"/catalog/components/arc-motion-path","title":"Arc Motion Path","tagline":"A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation.","description":"A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motionpath","gsap-plugin","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/arc-motion-path.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/arc-motion-path.json","heavy":false,"width":1920,"height":1080}},{"id":"avatar-group-hover","kind":"component","href":"/catalog/components/avatar-group-hover","title":"Avatar Group Hover","tagline":"A distance-falloff avatar group lift with bouncy hover return","description":"A distance-falloff avatar group lift with bouncy hover return","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","avatar","hover"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/avatar-group-hover.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/avatar-group-hover.json","heavy":false,"width":1920,"height":1080}},{"id":"badge-pop","kind":"component","href":"/catalog/components/badge-pop","title":"Badge Pop","tagline":"A transitions.dev-inspired notification badge pop with elastic scale and count reveal","description":"A transitions.dev-inspired notification badge pop with elastic scale and count reveal","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","badge","microinteraction"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/badge-pop.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/badge-pop.json","heavy":false,"width":1920,"height":1080}},{"id":"blur-in","kind":"component","href":"/catalog/components/blur-in","title":"Blur In","tagline":"An Operator Black word-level content reveal that resolves its own text from controlled blur","description":"An Operator Black word-level content reveal that resolves its own text from controlled blur","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","blur-in","text-effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/blur-in.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/blur-in.json","heavy":false,"width":1920,"height":1080}},{"id":"card-resize","kind":"component","href":"/catalog/components/card-resize","title":"Card Resize","tagline":"A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel","description":"A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","card","layout"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/card-resize.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/card-resize.json","heavy":false,"width":1920,"height":1080}},{"id":"chat-message","kind":"component","href":"/catalog/components/chat-message","title":"Chat Message","tagline":"One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from","description":"One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","chat","mock-ui","message"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/chat-message.json","heavy":false,"width":1920,"height":1080}},{"id":"chromatic-aberration-wipe","kind":"component","href":"/catalog/components/chromatic-aberration-wipe","title":"Chromatic Aberration Wipe","tagline":"A fast slide wipe with RGB channel split on peak frames.","description":"A fast slide wipe with RGB channel split on peak frames.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/chromatic-aberration-wipe.json","heavy":false,"width":1920,"height":1080}},{"id":"dynamic-grid","kind":"component","href":"/catalog/components/dynamic-grid","title":"Dynamic Grid","tagline":"A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes","description":"A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","background","grid","ui"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dynamic-grid.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/dynamic-grid.json","heavy":false,"width":1920,"height":1080}},{"id":"icon-swap","kind":"component","href":"/catalog/components/icon-swap","title":"Icon Swap","tagline":"A scale-and-blur icon swap primitive for toolbar and action state changes","description":"A scale-and-blur icon swap primitive for toolbar and action state changes","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","icon","swap"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/icon-swap.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/icon-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"lt-neon-border","kind":"block","href":"/catalog/blocks/lt-neon-border","title":"Neon Border","tagline":"Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role.","description":"Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role.","group":"motion-effects","section":"Motion Primitives","tags":["lower-third","glow","loop","video-primitive"],"tech":[],"duration":4.8,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lt-neon-border.json","heavy":false,"width":1920,"height":1080}},{"id":"menu-morph","kind":"component","href":"/catalog/components/menu-morph","title":"Menu Morph","tagline":"A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus","description":"A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","menu","morph"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/menu-morph.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/menu-morph.json","heavy":false,"width":1920,"height":1080}},{"id":"number-pop-in","kind":"component","href":"/catalog/components/number-pop-in","title":"Number Pop In","tagline":"A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal","description":"A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","number","pop"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-pop-in.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/number-pop-in.json","heavy":false,"width":1920,"height":1080}},{"id":"number-wheel","kind":"component","href":"/catalog/components/number-wheel","title":"Number Wheel","tagline":"A rolling digit counter primitive for metrics, prices, counts, and scoreboards","description":"A rolling digit counter primitive for metrics, prices, counts, and scoreboards","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","number","counter","data"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-wheel.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/number-wheel.json","heavy":false,"width":1920,"height":1080}},{"id":"page-slide","kind":"component","href":"/catalog/components/page-slide","title":"Page Slide","tagline":"A transitions.dev-inspired page slide primitive with outgoing and incoming panels","description":"A transitions.dev-inspired page slide primitive with outgoing and incoming panels","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","page","slide"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/page-slide.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/page-slide.json","heavy":false,"width":1920,"height":1080}},{"id":"separator","kind":"component","href":"/catalog/components/separator","title":"Separator","tagline":"A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal","description":"A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","separator","layout"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/separator.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/separator.json","heavy":false,"width":1920,"height":1080}},{"id":"sheet-spring-up","kind":"component","href":"/catalog/components/sheet-spring-up","title":"Sheet Spring-Up","tagline":"A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease","description":"A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","sheet","spring","mock-ui","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/sheet-spring-up.json","heavy":false,"width":1920,"height":1080}},{"id":"simulated-cursor","kind":"component","href":"/catalog/components/simulated-cursor","title":"Simulated Cursor","tagline":"A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos","description":"A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","cursor","ui","walkthrough"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/simulated-cursor.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/simulated-cursor.json","heavy":false,"width":1920,"height":1080}},{"id":"skeleton-reveal","kind":"component","href":"/catalog/components/skeleton-reveal","title":"Skeleton Reveal","tagline":"A skeleton loader transition that pulses, then cross-fades into content","description":"A skeleton loader transition that pulses, then cross-fades into content","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","skeleton","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/skeleton-reveal.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/skeleton-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"slot-machine-roll","kind":"component","href":"/catalog/components/slot-machine-roll","title":"Slot Machine Roll","tagline":"A vertical reel scrolls characters from one value to another.","description":"A vertical reel scrolls characters from one value to another.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/slot-machine-roll.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/slot-machine-roll.json","heavy":false,"width":1920,"height":1080}},{"id":"staggered-fade-up","kind":"component","href":"/catalog/components/staggered-fade-up","title":"Staggered Fade Up","tagline":"Words fade in and slide up one after another with configurable delay.","description":"Words fade in and slide up one after another with configurable delay.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/staggered-fade-up.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/staggered-fade-up.json","heavy":false,"width":1920,"height":1080}},{"id":"streaming-text","kind":"component","href":"/catalog/components/streaming-text","title":"Streaming Text","tagline":"Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter","description":"Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","text-effect","ai","chat"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/streaming-text.json","heavy":false,"width":1920,"height":1080}},{"id":"success-check","kind":"component","href":"/catalog/components/success-check","title":"Success Check","tagline":"A success check primitive with ring pop, path draw, and subtle rotate blur","description":"A success check primitive with ring pop, path draw, and subtle rotate blur","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","success","check"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/success-check.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/success-check.json","heavy":false,"width":1920,"height":1080}},{"id":"svg-line-draw-loader","kind":"component","href":"/catalog/components/svg-line-draw-loader","title":"SVG Line Draw Loader","tagline":"An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.","description":"An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","advanced-motion","anime-inspired","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/svg-line-draw-loader.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/svg-line-draw-loader.json","heavy":false,"width":1920,"height":1080}},{"id":"text-stagger","kind":"component","href":"/catalog/components/text-stagger","title":"Text Stagger","tagline":"A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words","description":"A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","text","stagger"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-stagger.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/text-stagger.json","heavy":false,"width":1920,"height":1080}},{"id":"text-state-swap","kind":"component","href":"/catalog/components/text-state-swap","title":"Text State Swap","tagline":"A text state swap primitive with outgoing blur and incoming lift","description":"A text state swap primitive with outgoing blur and incoming lift","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","text","swap"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-state-swap.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/text-state-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"three-orbiting-cards","kind":"component","href":"/catalog/components/three-orbiting-cards","title":"Three Orbiting Cards","tagline":"A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.","description":"A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","three-js","webgl","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/three-orbiting-cards.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/three-orbiting-cards.json","heavy":true,"width":1920,"height":1080}},{"id":"tilt-card","kind":"component","href":"/catalog/components/tilt-card","title":"Tilt Card","tagline":"A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax","description":"A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","transition-primitive","transitions-dev-port","card","tilt"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tilt-card.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/tilt-card.json","heavy":false,"width":1920,"height":1080}},{"id":"top-down-letters","kind":"component","href":"/catalog/components/top-down-letters","title":"Top-Down Letters","tagline":"Letters descend from above in a pronounced staircase with zero blur.","description":"Letters descend from above in a pronounced staircase with zero blur.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/top-down-letters.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/top-down-letters.json","heavy":false,"width":1920,"height":1080}},{"id":"typewriter","kind":"component","href":"/catalog/components/typewriter","title":"Typewriter","tagline":"Character-by-character text reveal with a deterministic blinking cursor.","description":"Character-by-character text reveal with a deterministic blinking cursor.","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","motion-primitive","typography"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/typewriter.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/typewriter.json","heavy":false,"width":1920,"height":1080}},{"id":"typing-indicator","kind":"component","href":"/catalog/components/typing-indicator","title":"Typing Indicator","tagline":"The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands","description":"The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands","group":"motion-effects","section":"Motion Primitives","tags":["video-primitive","chat","mock-ui","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/typing-indicator.json","heavy":false,"width":1920,"height":1080}},{"id":"avatar-cloud","kind":"component","href":"/catalog/components/avatar-cloud","title":"Avatar Cloud","tagline":"Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.","description":"Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.","group":"motion-effects","section":"Effects","tags":["effects","avatars","community","network","social-proof","prove"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/avatar-cloud.json","heavy":false,"width":1920,"height":1080}},{"id":"beat-timeline","kind":"component","href":"/catalog/components/beat-timeline","title":"Beat Timeline","tagline":"A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.","description":"A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.","group":"motion-effects","section":"Effects","tags":["orchestration","transitions","sequencing","bridge","timeline"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/beat-timeline.json","heavy":false,"width":1920,"height":1080}},{"id":"before-after-wipe","kind":"component","href":"/catalog/components/before-after-wipe","title":"Before After Wipe","tagline":"Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","description":"Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","group":"motion-effects","section":"Effects","tags":["prop","ui-props","compare","holdable","before-after","wipe","slots"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/before-after-wipe.json","heavy":false,"width":1920,"height":1080}},{"id":"camera-rig-depth-stack","kind":"component","href":"/catalog/components/camera-rig-depth-stack","title":"Camera Rig Depth Stack","tagline":"A 3D camera-rig-style card stack with depth, parallax, and focus shift.","description":"A 3D camera-rig-style card stack with depth, parallax, and focus shift.","group":"motion-effects","section":"Effects","tags":["advanced-motion","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/camera-rig-depth-stack.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/camera-rig-depth-stack.json","heavy":false,"width":1920,"height":1080}},{"id":"comparison-split","kind":"component","href":"/catalog/components/comparison-split","title":"Comparison Split","tagline":"Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.","description":"Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.","group":"motion-effects","section":"Effects","tags":["prop","ui-props","compare","holdable","before-after","wipe"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/comparison-split.json","heavy":false,"width":1920,"height":1080}},{"id":"confetti","kind":"component","href":"/catalog/components/confetti","title":"Confetti","tagline":"A deterministic celebration burst with seeded particles and gravity.","description":"A deterministic celebration burst with seeded particles and gravity.","group":"motion-effects","section":"Effects","tags":["effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/confetti.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/confetti.json","heavy":false,"width":1920,"height":1080}},{"id":"cut-the-curve","kind":"component","href":"/catalog/components/cut-the-curve","title":"Cut the Curve","tagline":"A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.","description":"A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.","group":"motion-effects","section":"Effects","tags":["transition","directional-cut","velocity-match","whip","bridge","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/cut-the-curve.json","heavy":false,"width":1920,"height":1080}},{"id":"device-frame-stage","kind":"component","href":"/catalog/components/device-frame-stage","title":"Device Frame Stage","tagline":"A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float","description":"A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float","group":"motion-effects","section":"Effects","tags":["prop","device","mobile","tablet","ui-props","holdable"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/device-frame-stage.json","heavy":false,"width":1920,"height":1080}},{"id":"directional-wipe","kind":"component","href":"/catalog/components/directional-wipe","title":"Directional Wipe","tagline":"A directional scene push that slides one panel over another.","description":"A directional scene push that slides one panel over another.","group":"motion-effects","section":"Effects","tags":["transition-primitive"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/directional-wipe.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/directional-wipe.json","heavy":false,"width":1920,"height":1080}},{"id":"fade-through","kind":"component","href":"/catalog/components/fade-through","title":"Fade Through","tagline":"A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer","description":"A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer","group":"motion-effects","section":"Effects","tags":["motion-primitive","transition","fade","scene"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/fade-through.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/fade-through.json","heavy":false,"width":1920,"height":1080}},{"id":"grid-pixelate-wipe","kind":"component","href":"/catalog/components/grid-pixelate-wipe","title":"Grid Pixelate Wipe","tagline":"Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes","description":"Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes","group":"motion-effects","section":"Effects","tags":["transition","wipe","grid","pixelate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/grid-pixelate-wipe.json","heavy":false,"width":1920,"height":1080}},{"id":"halftone-dissolve","kind":"component","href":"/catalog/components/halftone-dissolve","title":"Halftone Dissolve","tagline":"Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A.","description":"Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A.","group":"motion-effects","section":"Effects","tags":["motion-primitive","transition","texture","halftone","dissolve"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/halftone-dissolve.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-arrow","kind":"component","href":"/catalog/components/hw-arrow","title":"Hand-Drawn Arrow","tagline":"Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen","description":"Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen","group":"motion-effects","section":"Effects","tags":["handwritten","annotation","arrow","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/hw-arrow.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-boil","kind":"component","href":"/catalog/components/hw-boil","title":"Hand-Drawn Boil","tagline":"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, a wobbled-ellipse path generator, the boil pose control (off/calm/lively over the family-locked frameDrop), a curvature-adaptive pen-velocity ease, and the completed stroke matrix (plain/soft/sharp/spray — spray is index-seeded deterministic dots, no turbulence) with texture-safe draw-on","description":"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, a wobbled-ellipse path generator, the boil pose control (off/calm/lively over the family-locked frameDrop), a curvature-adaptive pen-velocity ease, and the completed stroke matrix (plain/soft/sharp/spray — spray is index-seeded deterministic dots, no turbulence) with texture-safe draw-on","group":"motion-effects","section":"Effects","tags":["handwritten","effect","annotation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/hw-boil.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-box-label","kind":"component","href":"/catalog/components/hw-box-label","title":"Hand-Drawn Box Label","tagline":"Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered; boils","description":"Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered; boils","group":"motion-effects","section":"Effects","tags":["handwritten","annotation","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/hw-box-label.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-callout-circle","kind":"component","href":"/catalog/components/hw-callout-circle","title":"Scribble Callout Circle","tagline":"Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash; outline and connector take the family stroke matrix (plain/soft/sharp/spray); boils","description":"Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash; outline and connector take the family stroke matrix (plain/soft/sharp/spray); boils","group":"motion-effects","section":"Effects","tags":["handwritten","annotation","callout","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/hw-callout-circle.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-underline","kind":"component","href":"/catalog/components/hw-underline","title":"Squiggle Marks","tagline":"Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on","description":"Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on","group":"motion-effects","section":"Effects","tags":["handwritten","annotation","text-treatment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/hw-underline.json","heavy":false,"width":1920,"height":1080}},{"id":"input-feedback","kind":"component","href":"/catalog/components/input-feedback","title":"Input Feedback","tagline":"A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state","description":"A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state","group":"motion-effects","section":"Effects","tags":["transition-primitive","transitions-dev-port","input","feedback"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/input-feedback.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/input-feedback.json","heavy":false,"width":1920,"height":1080}},{"id":"iris-reveal","kind":"component","href":"/catalog/components/iris-reveal","title":"Iris Reveal","tagline":"A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","description":"A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","group":"motion-effects","section":"Effects","tags":["transition","iris","circle-reveal","clip-path","bridge","slots"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/iris-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"keyframe-scrub-stack","kind":"component","href":"/catalog/components/keyframe-scrub-stack","title":"Keyframe Scrub Stack","tagline":"A keyframe-sequenced stack of cards with offset timing and easing presets.","description":"A keyframe-sequenced stack of cards with offset timing and easing presets.","group":"motion-effects","section":"Effects","tags":["advanced-motion","anime-inspired","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/keyframe-scrub-stack.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/keyframe-scrub-stack.json","heavy":false,"width":1920,"height":1080}},{"id":"match-cut","kind":"component","href":"/catalog/components/match-cut","title":"Match Cut","tagline":"A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.","description":"A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.","group":"motion-effects","section":"Effects","tags":["motion-primitive","transition","match-cut","hard-cut","continuity"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/match-cut.json","heavy":false,"width":1920,"height":1080}},{"id":"mesh-gradient-bg","kind":"component","href":"/catalog/components/mesh-gradient-bg","title":"Mesh Gradient Background","tagline":"A render-safe mesh gradient using animated radial layers.","description":"A render-safe mesh gradient using animated radial layers.","group":"motion-effects","section":"Effects","tags":["effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/mesh-gradient-bg.json","heavy":false,"width":1920,"height":1080}},{"id":"micro-transitions","kind":"component","href":"/catalog/components/micro-transitions","title":"Micro Transitions","tagline":"A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions","description":"A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions","group":"motion-effects","section":"Effects","tags":["transition-primitive","motion-primitive","transitions-dev-port","ui","transition","microinteraction"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/micro-transitions.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/micro-transitions.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-usage-arc","kind":"component","href":"/catalog/components/mk-usage-arc","title":"Hairline Arc Gauge","tagline":"Thin circular gauge that draws on while its percentage counts up; one helper call drives both","description":"Thin circular gauge that draws on while its percentage counts up; one helper call drives both","group":"motion-effects","section":"Effects","tags":["data-viz","gauge","minimal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/mk-usage-arc.json","heavy":false,"width":1920,"height":1080}},{"id":"morph-swap","kind":"component","href":"/catalog/components/morph-swap","title":"Morph Swap","tagline":"Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty.","description":"Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty.","group":"motion-effects","section":"Effects","tags":["transition","morph","swap","condense","reshape","holdable","slots"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/morph-swap.json","heavy":false,"width":1920,"height":1080}},{"id":"motion-blur","kind":"component","href":"/catalog/components/motion-blur","title":"Motion Blur","tagline":"After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the GSAP timeline at sub-frame times and averaging equal-weight additive copies of the element along its real trajectory, so translation, scale, rotation, 3D rotation and skew all drive the smear","description":"After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the GSAP timeline at sub-frame times and averaging equal-weight additive copies of the element along its real trajectory, so translation, scale, rotation, 3D rotation and skew all drive the smear","group":"motion-effects","section":"Effects","tags":["effect","motion-blur","shutter","after-effects","velocity","animation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/motion-blur.json","heavy":false,"width":1920,"height":1080}},{"id":"multiplayer-cursors","kind":"component","href":"/catalog/components/multiplayer-cursors","title":"Multiplayer Cursors","tagline":"Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.","description":"Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.","group":"motion-effects","section":"Effects","tags":["cursor","pointer","multiplayer","collaboration","presence","loop","prove"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/multiplayer-cursors.json","heavy":false,"width":1920,"height":1080}},{"id":"notification-pileup","kind":"component","href":"/catalog/components/notification-pileup","title":"Notification Pileup","tagline":"Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.","description":"Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.","group":"motion-effects","section":"Effects","tags":["notification","mobile","ui-props","overload","pileup","loop","agitate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/notification-pileup.json","heavy":false,"width":1920,"height":1080}},{"id":"onboarding-stepper-flow","kind":"component","href":"/catalog/components/onboarding-stepper-flow","title":"Onboarding Stepper Flow","tagline":"A composed onboarding flow with milestone rail, active step card, and next-action button","description":"A composed onboarding flow with milestone rail, active step card, and next-action button","group":"motion-effects","section":"Effects","tags":["ui-flow","onboarding","stepper"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/onboarding-stepper-flow.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/onboarding-stepper-flow.json","heavy":false,"width":1920,"height":1080}},{"id":"ordered-dither-pass","kind":"component","href":"/catalog/components/ordered-dither-pass","title":"Ordered Dither Pass","tagline":"Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.","description":"Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.","group":"motion-effects","section":"Effects","tags":["motion-primitive","experiment","texture","dither","transition","quantize"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ordered-dither-pass.json","heavy":false,"width":1920,"height":1080}},{"id":"overwhelm-surround","kind":"component","href":"/catalog/components/overwhelm-surround","title":"Overwhelm Surround","tagline":"Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.","description":"Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.","group":"motion-effects","section":"Effects","tags":["effects","agitate","overwhelm","pressure","notifications"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/overwhelm-surround.json","heavy":false,"width":1920,"height":1080}},{"id":"panel-reveal","kind":"component","href":"/catalog/components/panel-reveal","title":"Panel Reveal","tagline":"A panel reveal primitive with height expansion and content fade","description":"A panel reveal primitive with height expansion and content fade","group":"motion-effects","section":"Effects","tags":["transition-primitive","transitions-dev-port","panel","reveal"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/panel-reveal.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/panel-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"parallax-device-dive","kind":"component","href":"/catalog/components/parallax-device-dive","title":"Parallax Device Dive","tagline":"A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.","description":"A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.","group":"motion-effects","section":"Effects","tags":["motion-primitive","camera","device","phone","parallax","transition"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/parallax-device-dive.json","heavy":false,"width":1920,"height":1080}},{"id":"parallax-unzoom","kind":"component","href":"/catalog/components/parallax-unzoom","title":"Parallax Unzoom","tagline":"Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)","description":"Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)","group":"motion-effects","section":"Effects","tags":["transition","reveal","unzoom","parallax","grid","hero"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/parallax-unzoom.json","heavy":false,"width":1920,"height":1080}},{"id":"parallax-zoom","kind":"component","href":"/catalog/components/parallax-zoom","title":"Parallax Zoom","tagline":"Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition","description":"Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition","group":"motion-effects","section":"Effects","tags":["transition","zoom","parallax","grid","hero"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/parallax-zoom.json","heavy":false,"width":1920,"height":1080}},{"id":"rubber-band-bumper","kind":"component","href":"/catalog/components/rubber-band-bumper","title":"Rubber Band Bumper","tagline":"An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.","description":"An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.","group":"motion-effects","section":"Effects","tags":["motion-primitive","transition","rubber-band","resistance","overshoot"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/rubber-band-bumper.json","heavy":false,"width":1920,"height":1080}},{"id":"settings-toggle-flow","kind":"component","href":"/catalog/components/settings-toggle-flow","title":"Settings Toggle Flow","tagline":"A composed settings flow with preference rows, toggle switches, and active-state feedback","description":"A composed settings flow with preference rows, toggle switches, and active-state feedback","group":"motion-effects","section":"Effects","tags":["ui-flow","settings","toggle"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/settings-toggle-flow.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/settings-toggle-flow.json","heavy":false,"width":1920,"height":1080}},{"id":"shutter-slam","kind":"component","href":"/catalog/components/shutter-slam","title":"Shutter Slam","tagline":"One word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn about each axis — on the measured easing of the After Effects export the shutter model was fitted to","description":"One word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn about each axis — on the measured easing of the After Effects export the shutter model was fitted to","group":"motion-effects","section":"Effects","tags":["effect","motion-blur","shutter","after-effects","slam","animation"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shutter-slam.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/shutter-slam.json","heavy":false,"width":1920,"height":1080}},{"id":"signup-flow","kind":"component","href":"/catalog/components/signup-flow","title":"Signup Flow","tagline":"A composed signup flow with social action, email field, password field, and submit button","description":"A composed signup flow with social action, email field, password field, and submit button","group":"motion-effects","section":"Effects","tags":["ui-flow","signup","form"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/signup-flow.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/signup-flow.json","heavy":false,"width":1920,"height":1080}},{"id":"spotlight-card","kind":"component","href":"/catalog/components/spotlight-card","title":"Spotlight Card","tagline":"A card with a scripted cursor spotlight and lit border.","description":"A card with a scripted cursor spotlight and lit border.","group":"motion-effects","section":"Effects","tags":["effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spotlight-card.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/spotlight-card.json","heavy":false,"width":1920,"height":1080}},{"id":"stagger-cascade","kind":"component","href":"/catalog/components/stagger-cascade","title":"Stagger Cascade","tagline":"A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.","description":"A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.","group":"motion-effects","section":"Effects","tags":["effects","grid","stagger","entrance","exhibit"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/stagger-cascade.json","heavy":false,"width":1920,"height":1080}},{"id":"stagger-lattice","kind":"component","href":"/catalog/components/stagger-lattice","title":"Stagger Lattice","tagline":"A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames.","description":"A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames.","group":"motion-effects","section":"Effects","tags":["advanced-motion","anime-inspired","hyperframes-native"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/stagger-lattice.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/stagger-lattice.json","heavy":false,"width":1920,"height":1080}},{"id":"store-badge-lockup","kind":"component","href":"/catalog/components/store-badge-lockup","title":"Store Badge Lockup","tagline":"Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action.","description":"Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action.","group":"motion-effects","section":"Effects","tags":["prop","ui-props","mobile","store-badges","cta","ask"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/store-badge-lockup.json","heavy":false,"width":1920,"height":1080}},{"id":"svg-mask-reveal","kind":"component","href":"/catalog/components/svg-mask-reveal","title":"SVG Mask Reveal","tagline":"A soft token-colored sweep reveals media only through an editable SVG wordmark mask.","description":"A soft token-colored sweep reveals media only through an editable SVG wordmark mask.","group":"motion-effects","section":"Effects","tags":["effect","svg","mask","wordmark","reveal","exhibit"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/svg-mask-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"tabs-slide-indicator","kind":"component","href":"/catalog/components/tabs-slide-indicator","title":"Tabs Slide Indicator","tagline":"A pill indicator transition that slides between active tabs","description":"A pill indicator transition that slides between active tabs","group":"motion-effects","section":"Effects","tags":["transition-primitive","transitions-dev-port","tabs","indicator"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tabs-slide-indicator.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/tabs-slide-indicator.json","heavy":false,"width":1920,"height":1080}},{"id":"testimonial-card","kind":"component","href":"/catalog/components/testimonial-card","title":"Testimonial Card","tagline":"Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.","description":"Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.","group":"motion-effects","section":"Effects","tags":["prop","ui-props","testimonial","social-proof","quote","prove"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/testimonial-card.json","heavy":false,"width":1920,"height":1080}},{"id":"type-match-cut","kind":"component","href":"/catalog/components/type-match-cut","title":"Type Match Cut","tagline":"A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.","description":"A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.","group":"motion-effects","section":"Effects","tags":["motion-primitive","transition","typography","match-cut","continuity"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/type-match-cut.json","heavy":false,"width":1920,"height":1080}},{"id":"vignette","kind":"component","href":"/catalog/components/vignette","title":"Vignette","tagline":"Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center","description":"Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center","group":"motion-effects","section":"Effects","tags":["vignette","overlay","cinematic","effect"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/vignette.json","heavy":false,"width":1920,"height":1080}},{"id":"whip-pan-cut","kind":"component","href":"/catalog/components/whip-pan-cut","title":"Whip Pan Cut","tagline":"A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","description":"A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.","group":"motion-effects","section":"Effects","tags":["transition","whip-pan","motion-blur","velocity-match","speed-ramp","bridge","slots"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/whip-pan-cut.json","heavy":false,"width":1920,"height":1080}},{"id":"x-follow-card","kind":"component","href":"/catalog/components/x-follow-card","title":"X Follow Card","tagline":"A social follow card with avatar, handle, and follower motion.","description":"A social follow card with avatar, handle, and follower motion.","group":"motion-effects","section":"Effects","tags":["social-overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/x-follow-card.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-circle-pointer","kind":"component","href":"/catalog/components/yt-circle-pointer","title":"Pointer Circle + Countdown","tagline":"Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick","description":"Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick","group":"motion-effects","section":"Effects","tags":["annotation","countdown","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/yt-circle-pointer.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-feather-highlight","kind":"component","href":"/catalog/components/yt-feather-highlight","title":"Feathered Spotlight","tagline":"Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets","description":"Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets","group":"motion-effects","section":"Effects","tags":["highlight","spotlight","effect","overlay"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/yt-feather-highlight.json","heavy":false,"width":1920,"height":1080}},{"id":"zoom-through-transition","kind":"component","href":"/catalog/components/zoom-through-transition","title":"Zoom Through Transition","tagline":"A transition that zooms through a focal card into the next scene.","description":"A transition that zooms through a focal card into the next scene.","group":"motion-effects","section":"Effects","tags":["transition-primitive"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/zoom-through-transition.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/zoom-through-transition.json","heavy":false,"width":1920,"height":1080}},{"id":"camcorder-hud","kind":"block","href":"/catalog/blocks/camcorder-hud","title":"Camcorder HUD","tagline":"Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments","description":"Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments","group":"motion-effects","section":"Camera & 3D","tags":["camcorder","camera","recording","hud","overlay","creator","media-treatment-overlay"],"tech":[],"duration":4,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/camcorder-hud.json","heavy":false,"width":1920,"height":1080}},{"id":"camera-scan-gate","kind":"component","href":"/catalog/components/camera-scan-gate","title":"Camera Scan Gate","tagline":"A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.","description":"A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.","group":"motion-effects","section":"Camera & 3D","tags":["prop","ui-props","camera","qr","scan","recognition","interaction","demonstrate"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/camera-scan-gate.json","heavy":false,"width":1920,"height":1080}},{"id":"camera-shake","kind":"component","href":"/catalog/components/camera-shake","title":"Camera Shake","tagline":"Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe","description":"Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe","group":"motion-effects","section":"Camera & 3D","tags":["camera","shake","handheld","effect","cinematic"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/camera-shake.json","heavy":false,"width":1920,"height":1080}},{"id":"drift-hold","kind":"component","href":"/catalog/components/drift-hold","title":"Drift Hold","tagline":"A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.","description":"A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.","group":"motion-effects","section":"Camera & 3D","tags":["motion-primitive","camera","ambient","drift","hold","loopable"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/drift-hold.json","heavy":false,"width":1920,"height":1080}},{"id":"focus-rack","kind":"component","href":"/catalog/components/focus-rack","title":"Focus Rack","tagline":"Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.","description":"Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.","group":"motion-effects","section":"Camera & 3D","tags":["motion-primitive","camera","focus","focus-rack","depth","parallax","emphasize"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/focus-rack.json","heavy":false,"width":1920,"height":1080}},{"id":"pan-stations","kind":"component","href":"/catalog/components/pan-stations","title":"Pan Stations","tagline":"A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.","description":"A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.","group":"motion-effects","section":"Camera & 3D","tags":["camera","pan","stations","features","exhibit","agitate","cross-shelved"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/pan-stations.json","heavy":false,"width":1920,"height":1080}},{"id":"pull-back-reveal","kind":"component","href":"/catalog/components/pull-back-reveal","title":"Pull Back Reveal","tagline":"A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.","description":"A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.","group":"motion-effects","section":"Camera & 3D","tags":["motion-primitive","camera","pull-back","reveal","recontextualize"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/pull-back-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"push-in","kind":"component","href":"/catalog/components/push-in","title":"Push In","tagline":"A centered headline gains focus through one slow, continuous camera push and a gentle fade out.","description":"A centered headline gains focus through one slow, continuous camera push and a gentle fade out.","group":"motion-effects","section":"Camera & 3D","tags":["motion-primitive","camera","push-in","focus","emphasize","holdable"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/push-in.json","heavy":false,"width":1920,"height":1080}},{"id":"scroll-camera-story","kind":"component","href":"/catalog/components/scroll-camera-story","title":"Scroll Camera Story","tagline":"A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section.","description":"A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section.","group":"motion-effects","section":"Camera & 3D","tags":["camera","scroll","parallax","story","sections","slot","servo"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/scroll-camera-story.json","heavy":false,"width":1920,"height":1080}},{"id":"ui-focus-zoom","kind":"component","href":"/catalog/components/ui-focus-zoom","title":"UI Focus Zoom","tagline":"A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default.","description":"A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default.","group":"motion-effects","section":"Camera & 3D","tags":["camera","product-demo","zoom","focus","pan","slot","servo"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ui-focus-zoom.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-camera-move","kind":"component","href":"/catalog/components/yt-camera-move","title":"Camera Punch-In","tagline":"Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay","description":"Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay","group":"motion-effects","section":"Camera & 3D","tags":["camera","zoom","effect","creator"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/yt-camera-move.json","heavy":false,"width":1920,"height":1080}},{"id":"grain-field","kind":"component","href":"/catalog/components/grain-field","title":"Grain Field","tagline":"A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.","description":"A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.","group":"surfaces","section":"Texture","tags":["motion-primitive","background","grain","dots","texture","ambient","loopable"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/grain-field.json","heavy":false,"width":1920,"height":1080}},{"id":"grain-overlay","kind":"component","href":"/catalog/components/grain-overlay","title":"Grain Overlay","tagline":"Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition","description":"Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition","group":"surfaces","section":"Texture","tags":["texture","grain","overlay","film"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/grain-overlay.json","heavy":false,"width":1920,"height":1080}},{"id":"halftone-field","kind":"block","href":"/catalog/blocks/halftone-field","title":"Halftone Field","tagline":"A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.","description":"A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.","group":"surfaces","section":"Texture","tags":["webgl","shader","background","texture","halftone"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/halftone-field.json","heavy":true,"width":1920,"height":1080}},{"id":"ink-bleed-reveal","kind":"component","href":"/catalog/components/ink-bleed-reveal","title":"Ink Bleed Reveal","tagline":"Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.","description":"Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.","group":"surfaces","section":"Texture","tags":["motion-primitive","texture","reveal","gooey","svg-filter","deterministic","experiment"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/ink-bleed-reveal.json","heavy":false,"width":1920,"height":1080}},{"id":"texture-mask-text","kind":"component","href":"/catalog/components/texture-mask-text","title":"Texture Mask Text","tagline":"CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps","description":"CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps","group":"surfaces","section":"Texture","tags":["text","text-effect","effect","texture","mask"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text.png","video":null,"preview":{"mode":"player","source":"/public/catalog/components/texture-mask-text.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-lcd-background","kind":"block","href":"/catalog/blocks/yt-lcd-background","title":"Scanline Board Background","tagline":"Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title","description":"Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title","group":"surfaces","section":"Texture","tags":["background","texture","creator"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/yt-lcd-background.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-screen-warp","kind":"component","href":"/catalog/components/yt-screen-warp","title":"On-Screen Display Effect","tagline":"Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display","description":"Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display","group":"surfaces","section":"Texture","tags":["effect","overlay","texture"],"tech":[],"duration":null,"width":null,"height":null,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/components/yt-screen-warp.json","heavy":false,"width":1920,"height":1080}},{"id":"ios26-liquid-glass","kind":"block","href":"/catalog/blocks/ios26-liquid-glass","title":"iOS 26 Liquid Glass Home Screen","tagline":"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.","description":"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.","group":"surfaces","section":"HTML-in-Canvas","tags":["liquid-glass-html-in-canvas","webgpu","3d","iphone","ios26","notifications","gltf","html-in-canvas"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4","preview":{"mode":"video"}},{"id":"liquid-glass-notification","kind":"block","href":"/catalog/blocks/liquid-glass-notification","title":"Liquid Glass Notification","tagline":"Frosted glass notification cards floating over an aurora shader background","description":"Frosted glass notification cards floating over an aurora shader background","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","liquid-glass-html-in-canvas","webgpu"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/liquid-glass-notification.json","heavy":true,"width":1920,"height":1080}},{"id":"liquid-glass-widgets","kind":"block","href":"/catalog/blocks/liquid-glass-widgets","title":"Liquid Glass Widgets","tagline":"Frosted glass stat cards, showcase panel and pill chips over an aurora shader background","description":"Frosted glass stat cards, showcase panel and pill chips over an aurora shader background","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","liquid-glass-html-in-canvas","webgpu"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/liquid-glass-widgets.json","heavy":true,"width":1920,"height":1080}},{"id":"macos-tahoe-liquid-glass","kind":"block","href":"/catalog/blocks/macos-tahoe-liquid-glass","title":"macOS Tahoe Liquid Glass Desktop","tagline":"3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.","description":"3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","3d","macos","tahoe","gltf"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4","preview":{"mode":"video"}},{"id":"vfx-iphone-device","kind":"block","href":"/catalog/blocks/vfx-iphone-device","title":"iPhone & MacBook 3D Showcase","tagline":"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.","description":"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.","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","3d","device","iphone","macbook","gltf"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.mp4","preview":{"mode":"video"}},{"id":"vfx-liquid-background","kind":"block","href":"/catalog/blocks/vfx-liquid-background","title":"Liquid Background","tagline":"Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.","description":"Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","liquid","webgl","displacement","background"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4","preview":{"mode":"video"}},{"id":"vfx-liquid-glass","kind":"block","href":"/catalog/blocks/vfx-liquid-glass","title":"Liquid Glass","tagline":"VFX composition block","description":"VFX composition block","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","webgl"],"tech":[],"duration":20,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4","preview":{"mode":"video"}},{"id":"vfx-magnetic","kind":"block","href":"/catalog/blocks/vfx-magnetic","title":"Magnetic","tagline":"VFX composition block","description":"VFX composition block","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","webgl"],"tech":[],"duration":15,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.mp4","preview":{"mode":"video"}},{"id":"vfx-portal","kind":"block","href":"/catalog/blocks/vfx-portal","title":"Portal","tagline":"VFX composition block","description":"VFX composition block","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","webgl"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.mp4","preview":{"mode":"video"}},{"id":"vfx-shatter","kind":"block","href":"/catalog/blocks/vfx-shatter","title":"Shatter","tagline":"VFX composition block","description":"VFX composition block","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","webgl"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.mp4","preview":{"mode":"video"}},{"id":"vfx-text-cursor","kind":"block","href":"/catalog/blocks/vfx-text-cursor","title":"VFX Text Cursor","tagline":"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.","description":"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.","group":"surfaces","section":"HTML-in-Canvas","tags":["html-in-canvas","text","shader","cursor","chromatic"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/vfx-text-cursor.json","heavy":true,"width":1920,"height":1080}},{"id":"flowchart","kind":"block","href":"/catalog/blocks/flowchart","title":"Flowchart","tagline":"Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction","description":"Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction","group":"blocks","section":"Blocks","tags":["diagram","flowchart","interactive"],"tech":[],"duration":12,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/flowchart.json","heavy":false,"width":1920,"height":1080}},{"id":"flowchart-vertical","kind":"block","href":"/catalog/blocks/flowchart-vertical","title":"Flowchart Vertical","tagline":"Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction","description":"Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction","group":"blocks","section":"Blocks","tags":["diagram","flowchart","interactive","portrait"],"tech":[],"duration":12,"width":1440,"height":2560,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/flowchart-vertical.json","heavy":false,"width":1440,"height":2560}},{"id":"hw-frame","kind":"block","href":"/catalog/blocks/hw-frame","title":"Sketched Frame","tagline":"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)","description":"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)","group":"blocks","section":"Blocks","tags":["handwritten","frame","media"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-frame.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-pipeline","kind":"block","href":"/catalog/blocks/hw-pipeline","title":"Hand-Drawn Flowchart","tagline":"Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list","description":"Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list","group":"blocks","section":"Blocks","tags":["handwritten","diagram","data-viz","overlay"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-pipeline.json","heavy":false,"width":1920,"height":1080}},{"id":"hw-text-cloud","kind":"block","href":"/catalog/blocks/hw-text-cloud","title":"Speech Bubble","tagline":"Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils","description":"Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils","group":"blocks","section":"Blocks","tags":["handwritten","speech-bubble","overlay"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/hw-text-cloud.json","heavy":false,"width":1920,"height":1080}},{"id":"logo-outro","kind":"block","href":"/catalog/blocks/logo-outro","title":"Logo Outro","tagline":"Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill","description":"Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill","group":"blocks","section":"Blocks","tags":["branding","outro","logo"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png","video":"https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4","preview":{"mode":"player","source":"/public/catalog/blocks/logo-outro.json","heavy":false,"width":1920,"height":1080}},{"id":"lottie-character-walk","kind":"block","href":"/catalog/blocks/lottie-character-walk","title":"Lottie Character Walk","tagline":"A jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the stage is GSAP.","description":"A jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the stage is GSAP.","group":"blocks","section":"Blocks","tags":["character","character-animation","mascot","walk-cycle","gesture","pointing","puppet","lottie","explainer"],"tech":[],"duration":7.5,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/lottie-character-walk.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-background","kind":"block","href":"/catalog/blocks/mk-background","title":"Minimal Gradient Background","tagline":"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","description":"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","group":"blocks","section":"Blocks","tags":["background","gradient","minimal","professional","presentation"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-background.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-placeholder-grid","kind":"block","href":"/catalog/blocks/mk-placeholder-grid","title":"Rounded Media Grid","tagline":"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","description":"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","group":"blocks","section":"Blocks","tags":["placeholder","media","grid","minimal"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-placeholder-grid.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-progress-stat","kind":"block","href":"/catalog/blocks/mk-progress-stat","title":"Count-Up Stat Card","tagline":"Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes","description":"Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes","group":"blocks","section":"Blocks","tags":["data-viz","stat","minimal"],"tech":[],"duration":7,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-progress-stat.json","heavy":false,"width":1920,"height":1080}},{"id":"mk-specs-list","kind":"block","href":"/catalog/blocks/mk-specs-list","title":"Specs Checklist","tagline":"Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes","description":"Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes","group":"blocks","section":"Blocks","tags":["data-viz","list","minimal","professional"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/mk-specs-list.json","heavy":false,"width":1920,"height":1080}},{"id":"spiral-galaxy","kind":"block","href":"/catalog/blocks/spiral-galaxy","title":"Spiral Galaxy","tagline":"A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own.","description":"A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own.","group":"blocks","section":"Blocks","tags":["hero","space","particles","webgl","background"],"tech":[],"duration":10,"width":1920,"height":1080,"status":"experimental","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/spiral-galaxy.json","heavy":true,"width":1920,"height":1080}},{"id":"yt-logo-intro","kind":"block","href":"/catalog/blocks/yt-logo-intro","title":"Logo Intro Sequence","tagline":"Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion","description":"Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion","group":"blocks","section":"Blocks","tags":["logo","intro","creator"],"tech":[],"duration":6,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/yt-logo-intro.json","heavy":false,"width":1920,"height":1080}},{"id":"yt-vertical-fill","kind":"block","href":"/catalog/blocks/yt-vertical-fill","title":"Vertical Media Filler","tagline":"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)","description":"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)","group":"blocks","section":"Blocks","tags":["placeholder","vertical","media"],"tech":[],"duration":8,"width":1920,"height":1080,"status":"published","featured":1000,"poster":null,"video":null,"preview":{"mode":"player","source":"/public/catalog/blocks/yt-vertical-fill.json","heavy":false,"width":1920,"height":1080}}]}; diff --git a/lefthook.yml b/lefthook.yml index 0ad4d36dc6..8d42077b37 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -17,19 +17,6 @@ pre-commit: # enforces the same via the "Skills: manifest in sync" job). Churn-free: # the generator rewrites only when a content hash actually changed. run: bun packages/cli/scripts/gen-skills-manifest.ts && git add skills-manifest.json - catalog-index: - glob: "registry/*/*/registry-item.json" - # Rebuild the on-device search vectors when an item's searchable text - # changes, then re-stage them so registry/catalog-artifact/ never drifts - # from the registry (CI enforces the same via the "Catalog: search index - # covers the registry" job). Churn-free: identical inputs re-embed to - # identical bytes, so an unrelated registry edit leaves no diff. - # Exit 3 is "no embedding model here", which is the normal case for an - # outside contributor. Their commit must not be blocked over a 32 MB - # opt-in they were never asked to install; CI names the gap instead. - run: | - bun scripts/catalog/build-local-vectors.ts || { [ $? -eq 3 ] && exit 0; exit 1; } - git add registry/registry.json registry/catalog-artifact/local-vectors.json registry/catalog-artifact/local-vectors.bin typecheck: glob: "*.{ts,tsx}" run: cd packages/core && bunx tsc --noEmit && cd ../studio && bunx tsc --noEmit && cd ../.. && bunx tsc --noEmit -p scripts/tsconfig.json diff --git a/package.json b/package.json index 4d977649ec..6a98455ab5 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,8 @@ "check:tracked-artifacts": "node scripts/check-tracked-artifacts.mjs", "check:docs-snippet-motion": "node scripts/check-docs-snippet-motion.mjs", "check:docs-catalog": "node scripts/check-docs-catalog.mjs", - "check:catalog-drift": "node scripts/check-registry-set-delta.mjs origin/main && tsx scripts/catalog-drift.ts", + "generate:catalog": "bun scripts/generate-catalog.ts", + "check:catalog-drift": "tsx scripts/catalog-drift.ts", "verify:catalog-payloads": "tsx scripts/verify-catalog-payloads.ts", "check:workspace-contracts": "node scripts/check-workspace-contracts.mjs", "check:package-cycles": "node scripts/check-package-cycles.mjs", @@ -51,7 +52,7 @@ "player:perf": "bun run --filter @hyperframes/player perf", "format:check": "oxfmt --check .", "knip": "knip", - "test:scripts": "node --import tsx --test scripts/animejs-v4-guidance.test.mjs scripts/check-tracked-artifacts.test.mjs scripts/check-registry-set-delta.test.mjs scripts/check-no-main-deletions.test.mjs scripts/check-pr-captures.test.mjs scripts/check-docs-snippet-motion.test.mjs scripts/registry-target-paths.test.mjs scripts/check-workspace-contracts.test.mjs scripts/check-media-use-copy-parity.test.mjs scripts/check-svg-sanitize-parity.test.mjs scripts/check-media-use-svg-sanitize-generated.test.mjs scripts/check-package-cycles.test.mjs scripts/check-cli-process-ownership.test.mjs scripts/check-large-files.test.mjs scripts/package-subpaths.test.mjs scripts/validate-release-channel.test.mjs scripts/publish-workflow.test.mjs scripts/install-workspace-dependencies.test.mjs scripts/draft-changelog.test.ts scripts/set-version.test.ts scripts/release-prepare.test.ts scripts/cli-options.test.ts scripts/changelog-weekly.test.ts scripts/claude-plugin-compression.test.ts scripts/catalog-payload-assets.test.ts scripts/host-registry-assets.test.ts scripts/catalog-preview-temp.test.ts scripts/catalog-hosted-files.test.ts scripts/player-cdn-pin.test.ts scripts/studio-runtime-smoke.test.mjs scripts/verify-packed-manifests.test.mjs scripts/lint-skills.test.mjs scripts/creator-editing-recipes.test.mjs packages/gcp-cloud-run/check-dockerfile-workspaces.test.mjs packages/core/scripts/writeGeneratedFile.test.ts scripts/catalog-drift.test.ts scripts/catalog-fetch-mirror.test.ts scripts/catalog-script-inlining.test.ts scripts/catalog-detail.test.ts scripts/generate-catalog-pages.test.ts scripts/verify-catalog-payloads.test.ts scripts/registry-skill-files.test.ts scripts/creator-editing-capabilities.test.mjs scripts/generate-catalog-previews.test.ts scripts/registry-primitive-payloads.test.ts registry/components/pan-stations/pan-stations.test.mjs && vitest run scripts/catalog/ scripts/contrastRatchet.test.ts scripts/generate-catalog-payloads.test.ts", + "test:scripts": "node --import tsx --test scripts/animejs-v4-guidance.test.mjs scripts/check-tracked-artifacts.test.mjs scripts/check-registry-set-delta.test.mjs scripts/check-no-main-deletions.test.mjs scripts/check-pr-captures.test.mjs scripts/check-docs-snippet-motion.test.mjs scripts/registry-target-paths.test.mjs scripts/check-workspace-contracts.test.mjs scripts/check-media-use-copy-parity.test.mjs scripts/check-svg-sanitize-parity.test.mjs scripts/check-media-use-svg-sanitize-generated.test.mjs scripts/check-package-cycles.test.mjs scripts/check-cli-process-ownership.test.mjs scripts/check-large-files.test.mjs scripts/package-subpaths.test.mjs scripts/validate-release-channel.test.mjs scripts/publish-workflow.test.mjs scripts/install-workspace-dependencies.test.mjs scripts/draft-changelog.test.ts scripts/set-version.test.ts scripts/release-prepare.test.ts scripts/cli-options.test.ts scripts/changelog-weekly.test.ts scripts/claude-plugin-compression.test.ts scripts/catalog-payload-assets.test.ts scripts/host-registry-assets.test.ts scripts/catalog-preview-temp.test.ts scripts/catalog-hosted-files.test.ts scripts/player-cdn-pin.test.ts scripts/studio-runtime-smoke.test.mjs scripts/verify-packed-manifests.test.mjs scripts/lint-skills.test.mjs scripts/creator-editing-recipes.test.mjs packages/gcp-cloud-run/check-dockerfile-workspaces.test.mjs packages/core/scripts/writeGeneratedFile.test.ts scripts/catalog-publication.test.mjs scripts/check-catalog-source-pr.test.mjs scripts/generate-registry-items.test.ts scripts/catalog-drift.test.ts scripts/catalog-fetch-mirror.test.ts scripts/catalog-script-inlining.test.ts scripts/catalog-detail.test.ts scripts/generate-catalog-pages.test.ts scripts/verify-catalog-payloads.test.ts scripts/registry-skill-files.test.ts scripts/creator-editing-capabilities.test.mjs scripts/generate-catalog-previews.test.ts scripts/registry-primitive-payloads.test.ts registry/components/pan-stations/pan-stations.test.mjs && vitest run scripts/catalog/ scripts/contrastRatchet.test.ts scripts/generate-catalog-payloads.test.ts", "typecheck:scripts": "tsc --noEmit -p scripts/tsconfig.json", "test:skills": "node --test 'skills/**/*.test.mjs' 'packages/cli/src/media-use/**/*.test.mjs'", "generate:previews": "tsx scripts/generate-template-previews.ts", diff --git a/packages/aws-lambda/package.json b/packages/aws-lambda/package.json index 8d291ca327..1c99b0475e 100644 --- a/packages/aws-lambda/package.json +++ b/packages/aws-lambda/package.json @@ -1,6 +1,6 @@ { "name": "@hyperframes/aws-lambda", - "version": "0.8.62", + "version": "0.8.65", "description": "AWS Lambda adapter for HyperFrames distributed rendering — handler, client-side SDK, and CDK construct.", "repository": { "type": "git", diff --git a/packages/cli/package.json b/packages/cli/package.json index b77fe074e3..260f1e06d2 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@hyperframes/cli", - "version": "0.8.62", + "version": "0.8.65", "description": "HyperFrames CLI — create, preview, and render HTML video compositions", "license": "Apache-2.0", "repository": { diff --git a/packages/cli/src/commands/render.ts b/packages/cli/src/commands/render.ts index c632cc9fbb..71499db68d 100644 --- a/packages/cli/src/commands/render.ts +++ b/packages/cli/src/commands/render.ts @@ -1796,6 +1796,9 @@ function trackRenderMetrics( beginFrameNoDamageFrames: perf?.beginFrameReuse?.noDamageFrames, beginFrameHasDamageFrames: perf?.beginFrameReuse?.hasDamageFrames, deCaptureMode: perf?.drawElement?.mode, + vfxHostCount: perf?.drawElement?.vfxHostCount, + vfxCapture: perf?.drawElement?.vfxCapture, + vfxTypes: perf?.drawElement?.vfxTypes, deCompileGate: perf?.drawElement?.compileGate, deClampReason: perf?.drawElement?.clampReason, deWorkerInversion: perf?.drawElement?.workerInversion, diff --git a/packages/cli/src/server/studioServer.ts b/packages/cli/src/server/studioServer.ts index cdc6c5a313..4ac7c8dec1 100644 --- a/packages/cli/src/server/studioServer.ts +++ b/packages/cli/src/server/studioServer.ts @@ -39,6 +39,7 @@ import { fileContentVersion, getMimeType, affectsProjectSignature, + compositionsAffectedBy, type PreviewApiAdapter, thumbnailDeviceScaleFactor, type ResolvedProject, @@ -834,7 +835,14 @@ export function createStudioServer(options: StudioServerOptions): StudioServer { stream .writeSSE({ event: "file-change", - data: JSON.stringify({ path, version, projectId: project.id, ...receipt }), + data: JSON.stringify({ + path, + version, + projectId: project.id, + // Which thumbnails this write can change; null means all of them. + affectedCompositions: compositionsAffectedBy(projectDir, path), + ...receipt, + }), }) .catch(() => {}); }; diff --git a/packages/cli/src/telemetry/events.test.ts b/packages/cli/src/telemetry/events.test.ts index 0bf560dae2..37ff307162 100644 --- a/packages/cli/src/telemetry/events.test.ts +++ b/packages/cli/src/telemetry/events.test.ts @@ -588,6 +588,48 @@ describe("render telemetry events", () => { expect(props.has_lut).toBe(false); }); + it("carries the vfx chain scan's node count, capture class, and def types", () => { + trackRenderComplete({ + durationMs: 1000, + fps: 30, + quality: "high", + docker: false, + gpu: false, + vfxHostCount: 2, + vfxCapture: "self", + vfxTypes: "displacement-map,wave-warp", + }); + const props = trackEvent.mock.calls[0]?.[1] as Record; + expect(props.vfx_host_count).toBe(2); + expect(props.vfx_capture).toBe("self"); + expect(props.vfx_types).toBe("displacement-map,wave-warp"); + }); + + it("reports a zero node count and empty types rather than dropping the properties", () => { + trackRenderComplete({ + durationMs: 1000, + fps: 30, + quality: "high", + docker: false, + gpu: false, + vfxHostCount: 0, + vfxTypes: "", + }); + const props = trackEvent.mock.calls[0]?.[1] as Record; + expect(props.vfx_host_count).toBe(0); + expect(props.vfx_types).toBe(""); + // No vfx-chain host means chainCapture never ran — undefined, not "none". + expect(props.vfx_capture).toBeUndefined(); + }); + + it("omits the vfx fields entirely when the caller never resolved them", () => { + trackRenderComplete({ durationMs: 1000, fps: 30, quality: "high", docker: false, gpu: false }); + const props = trackEvent.mock.calls[0]?.[1] as Record; + expect(props.vfx_host_count).toBeUndefined(); + expect(props.vfx_capture).toBeUndefined(); + expect(props.vfx_types).toBeUndefined(); + }); + // emitStudioRenderComplete never resolves perfSummary.drawElement, only the // observability capture fields (captureAudioCount/captureRootBodyMismatch/etc), // so these must fall back to the capture value or a studio render reports none diff --git a/packages/cli/src/telemetry/events.ts b/packages/cli/src/telemetry/events.ts index 2a73edddbd..b4e019dda9 100644 --- a/packages/cli/src/telemetry/events.ts +++ b/packages/cli/src/telemetry/events.ts @@ -384,6 +384,15 @@ export function trackRenderComplete( hasLut?: boolean; rootBodyMismatch?: boolean; rootBodyDeltaPxBucket?: string; + // `data-vfx-chain` facts from the same static scan (Task 1.5's kernel-cost + // measurement's producer-side counterpart). Undefined on render paths + // with no capture session, same as the composition-element fields above. + /** Host count — one per `data-vfx-chain` attribute occurrence, regardless of its chain's node count. */ + vfxHostCount?: number; + /** Strongest enabled node's capture across every host ("none" | "self" | "backdrop", max). */ + vfxCapture?: string; + /** Sorted unique def ids across every enabled node in every chain, comma-joined. */ + vfxTypes?: string; deShortBand?: string; deParallelRouter?: string; dePreRouterWorkers?: number; @@ -503,6 +512,9 @@ export function trackRenderComplete( begin_frame_no_damage_frames: props.beginFrameNoDamageFrames, begin_frame_has_damage_frames: props.beginFrameHasDamageFrames, de_capture_mode: props.deCaptureMode, + vfx_host_count: props.vfxHostCount, + vfx_capture: props.vfxCapture, + vfx_types: props.vfxTypes, de_compile_gate: props.deCompileGate, de_clamp_reason: props.deClampReason, de_worker_inversion: directOrCapture(props.deWorkerInversion, props.captureDeWorkerInversion), diff --git a/packages/core/package.json b/packages/core/package.json index f7c2a3db8e..802aeca513 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@hyperframes/core", - "version": "0.8.62", + "version": "0.8.65", "description": "", "repository": { "type": "git", diff --git a/packages/core/src/compiler/compositionAssembly.ts b/packages/core/src/compiler/compositionAssembly.ts index 7564c30200..256ae161c4 100644 --- a/packages/core/src/compiler/compositionAssembly.ts +++ b/packages/core/src/compiler/compositionAssembly.ts @@ -29,11 +29,13 @@ const STYLE_SELECTOR = "style"; const SCRIPT_SELECTOR = "script"; /** - * `` links both paths hoist into the host document. Stylesheets carry + * Links both paths hoist into the host document. Stylesheets carry * webfonts a composition's CSS depends on; preconnects are their latency hint. */ const HOISTED_LINK_SELECTOR = 'link[rel="stylesheet"], link[rel="preconnect"]'; +export const EXTRACTED_COMPOSITION_ASSET_SELECTOR = `${STYLE_SELECTOR}, ${SCRIPT_SELECTOR}, ${HOISTED_LINK_SELECTOR}`; + /** * The compiler's nesting cap, enforced against the ancestry chain rather than a * counter so a wide tree is not penalised for a deep sibling. @@ -131,7 +133,7 @@ export interface CompositionAssemblyPlan { */ scriptSources: TElement[]; - /** `` links to hoist into the host document. */ + /** Head and content links to hoist into the host document. */ linkSources: TElement[]; /** @@ -189,7 +191,10 @@ export function planCompositionAssembly( ...toArray(assetHead?.querySelectorAll(SCRIPT_SELECTOR)), ...toArray(contentNode.querySelectorAll(SCRIPT_SELECTOR)), ], - linkSources: toArray(head?.querySelectorAll(HOISTED_LINK_SELECTOR)), + linkSources: [ + ...toArray(head?.querySelectorAll(HOISTED_LINK_SELECTOR)), + ...toArray(contentNode.querySelectorAll(HOISTED_LINK_SELECTOR)), + ], variableDefaultCarriers: [documentElement, innerRoot].filter( (carrier): carrier is TElement => carrier != null, ), diff --git a/packages/core/src/compiler/inlineSubCompositions.test.ts b/packages/core/src/compiler/inlineSubCompositions.test.ts index a05e993fab..e89d0dee88 100644 --- a/packages/core/src/compiler/inlineSubCompositions.test.ts +++ b/packages/core/src/compiler/inlineSubCompositions.test.ts @@ -68,6 +68,26 @@ describe("inlineSubCompositions – #ID selector scoping divergence", () => { expect(result.scripts).toHaveLength(0); }); + it("hoists stylesheet and preconnect links from a bare fragment", () => { + const document = makeHostDocument("intro"); + const host = document.querySelector('[data-composition-src="intro.html"]')!; + const result = inlineSubCompositions(document, [host], { + resolveHtml: () => ` + + +
Hello
`, + parseHtml: (html) => parseHTML(html).document, + }); + + expect(result.externalLinks).toEqual([ + { href: "theme.css", rel: "stylesheet", crossorigin: undefined }, + { href: "https://fonts.example", rel: "preconnect", crossorigin: "" }, + { href: "nested.css", rel: "stylesheet", crossorigin: undefined }, + ]); + expect(host.querySelectorAll('link[rel="stylesheet"]')).toHaveLength(0); + expect(host.querySelectorAll('link[rel="icon"]')).toHaveLength(1); + }); + it("passes the failure reason through to onMissingComposition", () => { const document = makeHostDocument("intro"); const host = document.querySelector('[data-composition-src="intro.html"]')!; diff --git a/packages/core/src/compiler/inlineSubCompositions.ts b/packages/core/src/compiler/inlineSubCompositions.ts index 57d42ec5d9..c0fcadb64d 100644 --- a/packages/core/src/compiler/inlineSubCompositions.ts +++ b/packages/core/src/compiler/inlineSubCompositions.ts @@ -22,8 +22,15 @@ import { wrapInlineScriptWithErrorBoundary, wrapScopedCompositionScript, } from "./compositionScoping"; -import { checkSubCompositionUsability } from "@hyperframes/parsers/sub-composition-validity"; -import { enumerateNestedCompositionHosts, planCompositionAssembly } from "./compositionAssembly"; +import { + checkSubCompositionUsability, + resolveSubCompositionContent, +} from "@hyperframes/parsers/sub-composition-validity"; +import { + enumerateNestedCompositionHosts, + planCompositionAssembly, + EXTRACTED_COMPOSITION_ASSET_SELECTOR, +} from "./compositionAssembly"; // --------------------------------------------------------------------------- // Public interface @@ -154,7 +161,7 @@ function defaultBuildScopeSelector(compId: string): string { * Inline sub-compositions into a document. For each host element in `hosts`: * * 1. Resolve the sub-composition HTML via `options.resolveHtml` - * 2. Parse it, find `