docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
{
|
|
|
|
|
"$schema": "https://mintlify.com/docs.json",
|
2026-04-07 20:24:35 -07:00
|
|
|
"name": "HyperFrames",
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"theme": "aspen",
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
"colors": {
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"primary": "#16785B",
|
|
|
|
|
"light": "#3CE6AC",
|
|
|
|
|
"dark": "#16785B"
|
2026-04-07 20:24:35 -07:00
|
|
|
},
|
|
|
|
|
"background": {
|
|
|
|
|
"color": {
|
|
|
|
|
"light": "#f6f5f1",
|
|
|
|
|
"dark": "#0a0a0a"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
"fonts": {
|
|
|
|
|
"family": "Inter",
|
|
|
|
|
"heading": {
|
|
|
|
|
"family": "Inter"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
"appearance": {
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"default": "system"
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
},
|
|
|
|
|
"logo": {
|
|
|
|
|
"light": "/logo/light.svg",
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"dark": "/logo/dark.svg",
|
|
|
|
|
"href": "https://hyperframes.heygen.com/introduction"
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
},
|
2026-03-24 00:02:57 +00:00
|
|
|
"favicon": "/favicon.svg",
|
2026-03-27 23:07:14 +00:00
|
|
|
"contextual": {
|
|
|
|
|
"options": [
|
|
|
|
|
"copy",
|
|
|
|
|
"claude",
|
|
|
|
|
"cursor",
|
|
|
|
|
"vscode",
|
|
|
|
|
"windsurf",
|
|
|
|
|
"mcp",
|
|
|
|
|
{
|
|
|
|
|
"title": "Open an issue",
|
|
|
|
|
"description": "Report a bug or request a feature",
|
|
|
|
|
"icon": "github",
|
|
|
|
|
"iconType": "brands",
|
|
|
|
|
"href": "https://github.com/heygen-com/hyperframes/issues/new"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
"navigation": {
|
|
|
|
|
"tabs": [
|
|
|
|
|
{
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"tab": "Guides",
|
|
|
|
|
"icon": "book-open",
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
"groups": [
|
|
|
|
|
{
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"group": "Start here",
|
feat(skills): hyperframes-registry skill (#261)
## What
New skill `hyperframes-registry` that teaches AI coding agents how to install and wire registry blocks and components into HyperFrames compositions.
### Skill structure
```
skills/hyperframes-registry/
SKILL.md — triggers, overview, quick reference
references/
install-locations.md — default paths, hyperframes.json config
wiring-blocks.md — iframe inclusion, data attributes, positioning
wiring-components.md — snippet merging (HTML, CSS, JS, timeline)
discovery.md — manifest reading, item fields, available items table
demo-html-pattern.md — why components ship demo.html, structure conventions
examples/
add-block.md — worked example: data-chart block install + wiring
add-component.md — worked example: shimmer-sweep component install + wiring
```
## Why
Phase B of the catalog plan (PR 10). Without this skill, agents using `hyperframes add` have to guess how to wire installed items into compositions. The skill encodes the iframe/snippet patterns so agents get it right on the first attempt.
## How
- SKILL.md frontmatter triggers on: `hyperframes add`, "block", "component", `hyperframes.json`
- References cover every step: discovery, install, wiring blocks (iframe), wiring components (snippet merge), and the demo.html convention
- Two worked examples walk through complete install-to-preview workflows
- Updated CLAUDE.md skills table + trigger rules, README.md skills table, docs/packages/cli.mdx
## Test plan
- [x] `scripts/lint-skills.ts` passes (checked 4 skill files, no issues)
- [x] `oxfmt --check` passes on all markdown files
- [x] SKILL.md frontmatter has valid `name` and `description`
- [x] All reference links in SKILL.md resolve to existing files
- [x] CLAUDE.md, README.md, and docs CLI page updated with new skill
2026-04-14 16:27:24 -07:00
|
|
|
"pages": [
|
|
|
|
|
"introduction",
|
|
|
|
|
"quickstart",
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"go-further",
|
|
|
|
|
"developers/index"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Explore",
|
|
|
|
|
"pages": [
|
2026-05-09 22:23:03 +00:00
|
|
|
"examples",
|
2026-08-05 03:54:45 -07:00
|
|
|
"thirty-days",
|
fix(docs): keep the changelog and weekly archive reachable
Rames' review on #2978. Two pages left the sidebar without a redirect and
without being deleted, so they survived only as direct URLs: `docs/changelog.mdx`
and `docs/weekly-updates.mdx`.
Not deliberate, and the stack says so — #2979 upgrades `weekly-updates.mdx`,
importing DocsVideo and converting four raw <video> tags. You do not invest in
a page you meant to retire, and it carries `rss: true`, so it is a subscribable
feed. `product-updates.mdx`, which this stack adds to both the nav and the
footer, links to `/changelog` three times and `/weekly-updates` once. One of
those is advice to read the release archive before upgrading a production
workflow.
Both are back in the Explore group next to Product updates, which is where a
reader looking for "what changed" would go.
Worth naming why the verification missed it: the checker walks navigation → file,
which is why it correctly reported zero dangling entries. The file → navigation
direction — a page that exists, is not in the sidebar, and has no redirect — was
never checked, and that is exactly where these two sat.
`--check-redirects` on the existing `mint broken-links` step closes the adjacent
gap: it resolves every redirect destination, so a future restructure cannot
leave a redirect pointing at a page it removed. It does not catch the orphan
case above.
Also retargets `/guides/pipeline`. It pointed at `/concepts`, which explains how
a project is put together; the retired page was a seven-step process. `/workflows`
is the closer intent. The old step 3, "Strategy & Messaging", has no successor
anywhere in the docs — worth deciding deliberately rather than routing around.
2026-08-03 19:48:14 -07:00
|
|
|
"product-updates",
|
|
|
|
|
"weekly-updates",
|
2026-08-05 03:54:45 -07:00
|
|
|
"changelog"
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Choose where to create",
|
|
|
|
|
"pages": [
|
|
|
|
|
"guides/choose-creation-path",
|
|
|
|
|
"guides/mcp",
|
|
|
|
|
"guides/design-tools"
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
]
|
|
|
|
|
},
|
2026-07-08 23:01:47 -07:00
|
|
|
{
|
|
|
|
|
"group": "Prompt Guide",
|
|
|
|
|
"pages": [
|
|
|
|
|
"prompting/overview",
|
|
|
|
|
{
|
2026-08-04 17:43:49 -07:00
|
|
|
"group": "Level 1 — Your first video",
|
2026-07-22 09:21:23 -07:00
|
|
|
"pages": [
|
|
|
|
|
"prompting/product-launch",
|
|
|
|
|
"prompting/explainers",
|
|
|
|
|
"prompting/code-and-prs",
|
|
|
|
|
"prompting/captions-and-talking-heads",
|
|
|
|
|
"prompting/music-and-slideshows",
|
|
|
|
|
"prompting/motion-graphics"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-08-04 17:43:49 -07:00
|
|
|
"group": "Level 2 — Control",
|
2026-07-08 23:01:47 -07:00
|
|
|
"pages": [
|
|
|
|
|
"prompting/anatomy",
|
|
|
|
|
"prompting/specification-dial",
|
|
|
|
|
"prompting/vocabulary",
|
2026-07-22 09:21:23 -07:00
|
|
|
"prompting/visual-specs",
|
|
|
|
|
"prompting/examples"
|
2026-07-08 23:01:47 -07:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-08-04 17:43:49 -07:00
|
|
|
"group": "Level 3 — Life",
|
2026-07-08 23:01:47 -07:00
|
|
|
"pages": [
|
|
|
|
|
"prompting/motion",
|
2026-07-22 09:21:23 -07:00
|
|
|
"prompting/transitions"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-08-04 17:43:49 -07:00
|
|
|
"group": "Level 4 — Substance",
|
2026-07-22 09:21:23 -07:00
|
|
|
"pages": [
|
|
|
|
|
"prompting/code-blocks",
|
|
|
|
|
"prompting/data-and-maps",
|
|
|
|
|
"prompting/overlays-and-lower-thirds",
|
|
|
|
|
"prompting/captions-catalog",
|
2026-07-08 23:01:47 -07:00
|
|
|
"prompting/generated-artwork",
|
2026-07-30 22:52:36 -07:00
|
|
|
"prompting/color-grading",
|
2026-07-22 09:21:23 -07:00
|
|
|
"prompting/vfx-and-liquid-glass",
|
|
|
|
|
"prompting/runtimes-and-3d"
|
2026-07-08 23:01:47 -07:00
|
|
|
]
|
docs(prompting): add by-video-type and by-feature prompt guide pages
Adds 18 pages completing the Prompt Guide expansion (phases 2-4): six
video-type pages seeded by the verified example prompts, and twelve
feature pages giving prompting guidance for surfaces the docs implied
but never covered (transitions, caption styles, overlays, code blocks,
data/maps, VFX, rendering/output, editing existing videos, media/audio,
variables, runtimes/3D, design systems). All block/component/skill names
grounded against the catalog and skills; render pairing deferred.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-09 00:18:42 -07:00
|
|
|
},
|
|
|
|
|
{
|
2026-08-04 17:43:49 -07:00
|
|
|
"group": "Level 5 — Voice and sound",
|
docs(prompting): add by-video-type and by-feature prompt guide pages
Adds 18 pages completing the Prompt Guide expansion (phases 2-4): six
video-type pages seeded by the verified example prompts, and twelve
feature pages giving prompting guidance for surfaces the docs implied
but never covered (transitions, caption styles, overlays, code blocks,
data/maps, VFX, rendering/output, editing existing videos, media/audio,
variables, runtimes/3D, design systems). All block/component/skill names
grounded against the catalog and skills; render pairing deferred.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-09 00:18:42 -07:00
|
|
|
"pages": [
|
2026-07-22 09:21:23 -07:00
|
|
|
"prompting/media-and-audio"
|
docs(prompting): add by-video-type and by-feature prompt guide pages
Adds 18 pages completing the Prompt Guide expansion (phases 2-4): six
video-type pages seeded by the verified example prompts, and twelve
feature pages giving prompting guidance for surfaces the docs implied
but never covered (transitions, caption styles, overlays, code blocks,
data/maps, VFX, rendering/output, editing existing videos, media/audio,
variables, runtimes/3D, design systems). All block/component/skill names
grounded against the catalog and skills; render pairing deferred.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-09 00:18:42 -07:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-08-04 17:43:49 -07:00
|
|
|
"group": "Level 6 — Scale",
|
docs(prompting): add by-video-type and by-feature prompt guide pages
Adds 18 pages completing the Prompt Guide expansion (phases 2-4): six
video-type pages seeded by the verified example prompts, and twelve
feature pages giving prompting guidance for surfaces the docs implied
but never covered (transitions, caption styles, overlays, code blocks,
data/maps, VFX, rendering/output, editing existing videos, media/audio,
variables, runtimes/3D, design systems). All block/component/skill names
grounded against the catalog and skills; render pairing deferred.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-09 00:18:42 -07:00
|
|
|
"pages": [
|
2026-07-22 09:21:23 -07:00
|
|
|
"prompting/design-systems",
|
docs(prompting): add by-video-type and by-feature prompt guide pages
Adds 18 pages completing the Prompt Guide expansion (phases 2-4): six
video-type pages seeded by the verified example prompts, and twelve
feature pages giving prompting guidance for surfaces the docs implied
but never covered (transitions, caption styles, overlays, code blocks,
data/maps, VFX, rendering/output, editing existing videos, media/audio,
variables, runtimes/3D, design systems). All block/component/skill names
grounded against the catalog and skills; render pairing deferred.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-09 00:18:42 -07:00
|
|
|
"prompting/variables-and-templating",
|
2026-07-22 13:29:27 -07:00
|
|
|
"prompting/storyboards",
|
2026-07-22 09:21:23 -07:00
|
|
|
"prompting/editing-existing-videos",
|
|
|
|
|
"prompting/iterating",
|
|
|
|
|
"prompting/recreating-references",
|
|
|
|
|
"prompting/rendering-and-output",
|
|
|
|
|
"prompting/remotion-migration"
|
|
|
|
|
]
|
|
|
|
|
},
|
2026-07-22 15:23:41 -07:00
|
|
|
{
|
2026-08-04 17:43:49 -07:00
|
|
|
"group": "Level 7 — Capstone",
|
2026-07-22 15:23:41 -07:00
|
|
|
"pages": [
|
|
|
|
|
"prompting/capstone"
|
|
|
|
|
]
|
|
|
|
|
},
|
2026-07-22 09:21:23 -07:00
|
|
|
{
|
|
|
|
|
"group": "Appendix",
|
|
|
|
|
"pages": [
|
|
|
|
|
"prompting/rules-and-anti-patterns"
|
docs(prompting): add by-video-type and by-feature prompt guide pages
Adds 18 pages completing the Prompt Guide expansion (phases 2-4): six
video-type pages seeded by the verified example prompts, and twelve
feature pages giving prompting guidance for surfaces the docs implied
but never covered (transitions, caption styles, overlays, code blocks,
data/maps, VFX, rendering/output, editing existing videos, media/audio,
variables, runtimes/3D, design systems). All block/component/skill names
grounded against the catalog and skills; render pairing deferred.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-09 00:18:42 -07:00
|
|
|
]
|
2026-07-08 23:01:47 -07:00
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
{
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"group": "Workflows",
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
"pages": [
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"workflows",
|
|
|
|
|
"guides/product-launch-video",
|
|
|
|
|
"guides/faceless-explainer",
|
|
|
|
|
"guides/pr-to-video",
|
|
|
|
|
"guides/captions-and-recuts",
|
|
|
|
|
"guides/motion-graphics",
|
|
|
|
|
"guides/music-to-video",
|
|
|
|
|
"guides/slideshow",
|
|
|
|
|
"guides/general-video",
|
docs: put the ten workflows in one place, and connect the two tracks
There are ten creation workflows. The Workflows nav group held eight of them plus
`guides/export-and-share`, which is not a workflow at all — there is no such
skill, it is a finishing task. The tenth, the Remotion port, sat under
Developers > Composition, design & animation, a different tab entirely.
So: export-and-share moved to Build the project where the other task pages live,
the Remotion page moved into Workflows, and the chooser gained a tenth route. The
chooser rendered `<video>` unconditionally, which would have drawn a black
rectangle for a route with no clip — it now renders a neutral tile instead, and
custom.css styles it to the same box.
**The Prompt Guide and the workflow guides did not know about each other.** Level 1
is organised one page per workflow, and five of its six pages linked to no guide
at all. A reader learning to prompt for motion graphics never discovered
/guides/motion-graphics, and the traffic went nowhere in both directions. Each
Level 1 page now names its workflow and says what that page adds.
Four links pointed at redirects rather than the real page — /guides/claude-design,
/guides/common-mistakes, /guides/website-to-video, /guides/media-overlays. Seven
files now link to the destination directly.
Checked after: 0 broken links, 0 links via redirect.
2026-08-04 15:32:14 -07:00
|
|
|
"guides/hyperframes-vs-remotion"
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Build the project",
|
|
|
|
|
"pages": [
|
|
|
|
|
"concepts/index",
|
|
|
|
|
"guides/media",
|
2026-06-16 01:25:58 -04:00
|
|
|
"guides/video-components",
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"guides/avatar-presenter",
|
|
|
|
|
"guides/voice-and-audio",
|
2026-05-04 04:17:51 +00:00
|
|
|
"guides/remove-background",
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"guides/color-grading",
|
docs: put the ten workflows in one place, and connect the two tracks
There are ten creation workflows. The Workflows nav group held eight of them plus
`guides/export-and-share`, which is not a workflow at all — there is no such
skill, it is a finishing task. The tenth, the Remotion port, sat under
Developers > Composition, design & animation, a different tab entirely.
So: export-and-share moved to Build the project where the other task pages live,
the Remotion page moved into Workflows, and the chooser gained a tenth route. The
chooser rendered `<video>` unconditionally, which would have drawn a black
rectangle for a route with no clip — it now renders a neutral tile instead, and
custom.css styles it to the same box.
**The Prompt Guide and the workflow guides did not know about each other.** Level 1
is organised one page per workflow, and five of its six pages linked to no guide
at all. A reader learning to prompt for motion graphics never discovered
/guides/motion-graphics, and the traffic went nowhere in both directions. Each
Level 1 page now names its workflow and says what that page adds.
Four links pointed at redirects rather than the real page — /guides/claude-design,
/guides/common-mistakes, /guides/website-to-video, /guides/media-overlays. Seven
files now link to the destination directly.
Checked after: 0 broken links, 0 links via redirect.
2026-08-04 15:32:14 -07:00
|
|
|
"guides/media-effects",
|
|
|
|
|
"guides/export-and-share"
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Help",
|
|
|
|
|
"pages": [
|
|
|
|
|
"help",
|
docs: document feedback collection — cadence, data, opt-out (#1111)
* docs: document feedback collection — cadence, data, opt-out
Adds guides/feedback.mdx covering: when CLI and Studio prompts
appear (render cadence, session cadence), what data is collected
(PostHog survey fields, doctor_summary shape), what is not
collected, the hyperframes feedback command for manual/agent
submission, agent runtime detection and structured hint,
config file fields, and all opt-out paths (HYPERFRAMES_NO_TELEMETRY,
DO_NOT_TRACK, CI guard, --quiet).
Also adds hyperframes feedback command entry to packages/cli.mdx
(Utilities tab, alongside telemetry) and registers guides/feedback
in the docs.json nav.
— Magi
* docs(feedback): fix cadence, agent env vars, docker gate, telemetry scope, why-we-ask
- Cadence: 1st/16th/31st (not 15th/30th/45th) per actual code
- Agent vars: CLAUDECODE/CLAUDE_CODE_ENTRYPOINT, CODEX_THREAD_ID/CODEX_CI,
TERM_PROGRAM=cursor, Copilot value checks; add Hermes/openclaw/Pi
- Remove docker gate claim (non-TTY only, not docker-specific)
- Telemetry disable only suppresses CLI prompt, not Studio bar
- Add why-we-ask opening section
- Remove Studio 'skip' action (CLI-only); fix 'counter resets' phrasing
- Fix 'values never read' — Cursor and Copilot do value comparisons
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* docs(feedback): remove invented Studio opt-out flags; document localStorage workaround
VITE_HYPERFRAMES_FEEDBACK_INTERVAL=0 falls through to default (n > 0 guard).
VITE_HYPERFRAMES_FEEDBACK feature flag doesn't exist. Bar is mounted
unconditionally. Document the localStorage key workaround instead and
note that a proper flag is a follow-up to hf#1101.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* docs(feedback): fix localStorage workaround — only lastPromptedAt needs to be large
Setting both keys to the same value just delays 10 sessions before the bar
reappears. Setting only lastPromptedAt to 9999999 keeps count - lastAt
negative indefinitely.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(studio): add VITE_HYPERFRAMES_NO_FEEDBACK build-time disable flag
Sets isFeedbackDisabled() guard in shouldShowFeedback() — when
VITE_HYPERFRAMES_NO_FEEDBACK=1, bar never shows regardless of session count.
Updates docs to document the flag and remove the localStorage workaround.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-28 15:53:18 -04:00
|
|
|
"guides/troubleshooting",
|
|
|
|
|
"guides/feedback"
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
]
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"tab": "Studio",
|
|
|
|
|
"icon": "palette",
|
|
|
|
|
"groups": [
|
|
|
|
|
{
|
|
|
|
|
"group": "Start in Studio",
|
|
|
|
|
"pages": [
|
|
|
|
|
"studio/index",
|
|
|
|
|
"studio/storyboard"
|
|
|
|
|
]
|
2026-05-20 01:07:25 +00:00
|
|
|
},
|
|
|
|
|
{
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"group": "Edit",
|
2026-05-20 01:07:25 +00:00
|
|
|
"pages": [
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"studio/canvas",
|
|
|
|
|
"studio/timeline",
|
|
|
|
|
"studio/animation",
|
|
|
|
|
"studio/captions"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Build and reuse",
|
|
|
|
|
"pages": [
|
|
|
|
|
"studio/assets-and-blocks",
|
|
|
|
|
"studio/variables",
|
|
|
|
|
"studio/slideshows"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Finish and recover",
|
|
|
|
|
"pages": [
|
|
|
|
|
"studio/export",
|
|
|
|
|
"studio/troubleshooting"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Reference",
|
|
|
|
|
"pages": [
|
|
|
|
|
"studio/source",
|
|
|
|
|
"studio/shortcuts"
|
2026-05-20 01:07:25 +00:00
|
|
|
]
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
feat(skills): hyperframes-registry skill (#261)
## What
New skill `hyperframes-registry` that teaches AI coding agents how to install and wire registry blocks and components into HyperFrames compositions.
### Skill structure
```
skills/hyperframes-registry/
SKILL.md — triggers, overview, quick reference
references/
install-locations.md — default paths, hyperframes.json config
wiring-blocks.md — iframe inclusion, data attributes, positioning
wiring-components.md — snippet merging (HTML, CSS, JS, timeline)
discovery.md — manifest reading, item fields, available items table
demo-html-pattern.md — why components ship demo.html, structure conventions
examples/
add-block.md — worked example: data-chart block install + wiring
add-component.md — worked example: shimmer-sweep component install + wiring
```
## Why
Phase B of the catalog plan (PR 10). Without this skill, agents using `hyperframes add` have to guess how to wire installed items into compositions. The skill encodes the iframe/snippet patterns so agents get it right on the first attempt.
## How
- SKILL.md frontmatter triggers on: `hyperframes add`, "block", "component", `hyperframes.json`
- References cover every step: discovery, install, wiring blocks (iframe), wiring components (snippet merge), and the demo.html convention
- Two worked examples walk through complete install-to-preview workflows
- Updated CLAUDE.md skills table + trigger rules, README.md skills table, docs/packages/cli.mdx
## Test plan
- [x] `scripts/lint-skills.ts` passes (checked 4 skill files, no issues)
- [x] `oxfmt --check` passes on all markdown files
- [x] SKILL.md frontmatter has valid `name` and `description`
- [x] All reference links in SKILL.md resolve to existing files
- [x] CLAUDE.md, README.md, and docs CLI page updated with new skill
2026-04-14 16:27:24 -07:00
|
|
|
{
|
|
|
|
|
"tab": "Catalog",
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"icon": "grid-2",
|
feat(skills): hyperframes-registry skill (#261)
## What
New skill `hyperframes-registry` that teaches AI coding agents how to install and wire registry blocks and components into HyperFrames compositions.
### Skill structure
```
skills/hyperframes-registry/
SKILL.md — triggers, overview, quick reference
references/
install-locations.md — default paths, hyperframes.json config
wiring-blocks.md — iframe inclusion, data attributes, positioning
wiring-components.md — snippet merging (HTML, CSS, JS, timeline)
discovery.md — manifest reading, item fields, available items table
demo-html-pattern.md — why components ship demo.html, structure conventions
examples/
add-block.md — worked example: data-chart block install + wiring
add-component.md — worked example: shimmer-sweep component install + wiring
```
## Why
Phase B of the catalog plan (PR 10). Without this skill, agents using `hyperframes add` have to guess how to wire installed items into compositions. The skill encodes the iframe/snippet patterns so agents get it right on the first attempt.
## How
- SKILL.md frontmatter triggers on: `hyperframes add`, "block", "component", `hyperframes.json`
- References cover every step: discovery, install, wiring blocks (iframe), wiring components (snippet merge), and the demo.html convention
- Two worked examples walk through complete install-to-preview workflows
- Updated CLAUDE.md skills table + trigger rules, README.md skills table, docs/packages/cli.mdx
## Test plan
- [x] `scripts/lint-skills.ts` passes (checked 4 skill files, no issues)
- [x] `oxfmt --check` passes on all markdown files
- [x] SKILL.md frontmatter has valid `name` and `description`
- [x] All reference links in SKILL.md resolve to existing files
- [x] CLAUDE.md, README.md, and docs CLI page updated with new skill
2026-04-14 16:27:24 -07:00
|
|
|
"groups": [
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
{
|
|
|
|
|
"group": "Overview",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/index"
|
|
|
|
|
]
|
|
|
|
|
},
|
feat(registry): add Code Animations catalog section (9 blocks, incl. GPU)
Adds a Code Animations catalog section — 9 self-contained, installable blocks:
morph, snippet-flight, typing, diff, highlight, scroll (DOM/GSAP) and 3d-extrude,
shader-dissolve, particle-assemble (WebGL). Each block ships only its own effect and
renders deterministically (paused GSAP timeline seeked per frame, seeded RNG, no
render-time data fetch). Wires the catalog nav, registry.json, a new code-animation
Studio category, and preview assets.
2026-06-15 21:32:45 -04:00
|
|
|
{
|
2026-08-10 19:12:27 -04:00
|
|
|
"group": "Text & captions",
|
feat(registry): add Code Animations catalog section (9 blocks, incl. GPU)
Adds a Code Animations catalog section — 9 self-contained, installable blocks:
morph, snippet-flight, typing, diff, highlight, scroll (DOM/GSAP) and 3d-extrude,
shader-dissolve, particle-assemble (WebGL). Each block ships only its own effect and
renders deterministically (paused GSAP timeline seeked per frame, seeded RNG, no
render-time data fetch). Wires the catalog nav, registry.json, a new code-animation
Studio category, and preview assets.
2026-06-15 21:32:45 -04:00
|
|
|
"pages": [
|
2026-08-10 19:12:27 -04:00
|
|
|
{
|
|
|
|
|
"group": "Captions",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/components/caption-camera-follow",
|
|
|
|
|
"catalog/components/caption-clip-wipe",
|
|
|
|
|
"catalog/components/caption-editorial-emphasis",
|
|
|
|
|
"catalog/components/caption-emoji-pop",
|
|
|
|
|
"catalog/components/caption-glitch-rgb",
|
|
|
|
|
"catalog/components/caption-gradient-fill",
|
|
|
|
|
"catalog/components/caption-highlight",
|
|
|
|
|
"catalog/components/caption-kinetic-slam",
|
|
|
|
|
"catalog/components/caption-matrix-decode",
|
|
|
|
|
"catalog/components/caption-neon-accent",
|
|
|
|
|
"catalog/components/caption-neon-glow",
|
|
|
|
|
"catalog/components/caption-parallax-layers",
|
|
|
|
|
"catalog/components/caption-particle-burst",
|
|
|
|
|
"catalog/components/caption-pill-karaoke",
|
|
|
|
|
"catalog/components/caption-texture",
|
|
|
|
|
"catalog/components/caption-weight-shift",
|
|
|
|
|
"catalog/blocks/mk-callout-highlight"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Typography & Text",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/components/blur-out-up",
|
|
|
|
|
"catalog/components/bottom-up-letters",
|
|
|
|
|
"catalog/components/caption-blend-difference",
|
|
|
|
|
"catalog/components/char-slam-explode",
|
|
|
|
|
"catalog/components/focus-blur-resolve",
|
|
|
|
|
"catalog/components/headline-slam",
|
|
|
|
|
"catalog/blocks/hw-path-text",
|
|
|
|
|
"catalog/blocks/hw-title",
|
|
|
|
|
"catalog/components/inline-highlight",
|
|
|
|
|
"catalog/components/kinetic-type-swap",
|
|
|
|
|
"catalog/components/line-by-line-slide",
|
|
|
|
|
"catalog/components/line-swap",
|
|
|
|
|
"catalog/components/logo-brand-close",
|
|
|
|
|
"catalog/components/marker-highlight",
|
|
|
|
|
"catalog/components/matrix-decode",
|
|
|
|
|
"catalog/components/mk-emphasis-type",
|
|
|
|
|
"catalog/components/morph-text",
|
|
|
|
|
"catalog/components/particle-text-dissolve",
|
|
|
|
|
"catalog/components/per-word-crossfade",
|
|
|
|
|
"catalog/components/per-word-rise",
|
|
|
|
|
"catalog/components/perspective-marquee",
|
|
|
|
|
"catalog/components/rgb-glitch-text",
|
|
|
|
|
"catalog/components/scan-band",
|
|
|
|
|
"catalog/components/scramble-reveal",
|
|
|
|
|
"catalog/components/shared-axis-y",
|
|
|
|
|
"catalog/components/shared-axis-z",
|
|
|
|
|
"catalog/components/shimmer-sweep",
|
|
|
|
|
"catalog/components/soft-blur-in",
|
|
|
|
|
"catalog/blocks/split-flap-board",
|
|
|
|
|
"catalog/components/strikethrough-replace",
|
|
|
|
|
"catalog/components/text-shimmer",
|
|
|
|
|
"catalog/components/ticker-takeover",
|
|
|
|
|
"catalog/components/titlecard-calm",
|
|
|
|
|
"catalog/components/titlecard-lockup",
|
|
|
|
|
"catalog/components/tracking-in",
|
|
|
|
|
"catalog/components/variable-axis-type",
|
|
|
|
|
"catalog/components/vox-annotate",
|
|
|
|
|
"catalog/blocks/weight-wave",
|
|
|
|
|
"catalog/components/wordmark-tiles",
|
|
|
|
|
"catalog/blocks/yt-prism-title"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Lower Thirds",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/blocks/lower-third-bild",
|
|
|
|
|
"catalog/blocks/lt-accent-underline",
|
|
|
|
|
"catalog/blocks/lt-bold-block",
|
|
|
|
|
"catalog/blocks/lt-clean-bar",
|
|
|
|
|
"catalog/blocks/lt-color-block",
|
|
|
|
|
"catalog/blocks/lt-dark-card",
|
|
|
|
|
"catalog/blocks/lt-kicker-name",
|
|
|
|
|
"catalog/blocks/lt-mask-reveal",
|
|
|
|
|
"catalog/blocks/lt-side-rule",
|
|
|
|
|
"catalog/blocks/lt-soft-pill",
|
|
|
|
|
"catalog/blocks/lt-stack-bars",
|
|
|
|
|
"catalog/blocks/news-ticker"
|
|
|
|
|
]
|
|
|
|
|
}
|
2026-08-10 18:46:03 -04:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-08-10 19:12:27 -04:00
|
|
|
"group": "Code",
|
feat(skills): hyperframes-registry skill (#261)
## What
New skill `hyperframes-registry` that teaches AI coding agents how to install and wire registry blocks and components into HyperFrames compositions.
### Skill structure
```
skills/hyperframes-registry/
SKILL.md — triggers, overview, quick reference
references/
install-locations.md — default paths, hyperframes.json config
wiring-blocks.md — iframe inclusion, data attributes, positioning
wiring-components.md — snippet merging (HTML, CSS, JS, timeline)
discovery.md — manifest reading, item fields, available items table
demo-html-pattern.md — why components ship demo.html, structure conventions
examples/
add-block.md — worked example: data-chart block install + wiring
add-component.md — worked example: shimmer-sweep component install + wiring
```
## Why
Phase B of the catalog plan (PR 10). Without this skill, agents using `hyperframes add` have to guess how to wire installed items into compositions. The skill encodes the iframe/snippet patterns so agents get it right on the first attempt.
## How
- SKILL.md frontmatter triggers on: `hyperframes add`, "block", "component", `hyperframes.json`
- References cover every step: discovery, install, wiring blocks (iframe), wiring components (snippet merge), and the demo.html convention
- Two worked examples walk through complete install-to-preview workflows
- Updated CLAUDE.md skills table + trigger rules, README.md skills table, docs/packages/cli.mdx
## Test plan
- [x] `scripts/lint-skills.ts` passes (checked 4 skill files, no issues)
- [x] `oxfmt --check` passes on all markdown files
- [x] SKILL.md frontmatter has valid `name` and `description`
- [x] All reference links in SKILL.md resolve to existing files
- [x] CLAUDE.md, README.md, and docs CLI page updated with new skill
2026-04-14 16:27:24 -07:00
|
|
|
"pages": [
|
2026-08-10 19:12:27 -04:00
|
|
|
{
|
|
|
|
|
"group": "Code Animations",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/blocks/code-3d-extrude",
|
|
|
|
|
"catalog/blocks/code-diff",
|
|
|
|
|
"catalog/blocks/code-highlight",
|
|
|
|
|
"catalog/blocks/code-morph",
|
|
|
|
|
"catalog/blocks/code-particle-assemble",
|
|
|
|
|
"catalog/blocks/code-scroll",
|
|
|
|
|
"catalog/blocks/code-shader-dissolve",
|
|
|
|
|
"catalog/blocks/code-snippet-flight",
|
|
|
|
|
"catalog/blocks/code-typing",
|
|
|
|
|
"catalog/components/terminal-simulator"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Code Snippets",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-basic",
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-clear-dark",
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-clear-light",
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-grass",
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-homebrew",
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-man-page",
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-novel",
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-ocean",
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-pro",
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-red-sands",
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-silver-aerogel",
|
|
|
|
|
"catalog/blocks/code-snippet-apple-terminal-solid-colors",
|
|
|
|
|
"catalog/blocks/code-snippet-dark-2026",
|
|
|
|
|
"catalog/blocks/code-snippet-dark-modern",
|
|
|
|
|
"catalog/blocks/code-snippet-dark-plus",
|
|
|
|
|
"catalog/blocks/code-snippet-high-contrast",
|
|
|
|
|
"catalog/blocks/code-snippet-high-contrast-light",
|
|
|
|
|
"catalog/blocks/code-snippet-light-2026",
|
|
|
|
|
"catalog/blocks/code-snippet-light-modern",
|
|
|
|
|
"catalog/blocks/code-snippet-light-plus",
|
|
|
|
|
"catalog/blocks/code-snippet-monokai",
|
|
|
|
|
"catalog/blocks/code-snippet-solarized-light",
|
|
|
|
|
"catalog/blocks/code-snippet-visual-studio-dark",
|
|
|
|
|
"catalog/blocks/code-snippet-visual-studio-light"
|
|
|
|
|
]
|
|
|
|
|
}
|
2026-08-10 18:46:03 -04:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-08-10 19:12:27 -04:00
|
|
|
"group": "Transitions",
|
2026-08-10 18:46:03 -04:00
|
|
|
"pages": [
|
2026-08-10 19:12:27 -04:00
|
|
|
{
|
|
|
|
|
"group": "Shader Transitions",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/blocks/chromatic-radial-split",
|
|
|
|
|
"catalog/blocks/cinematic-zoom",
|
|
|
|
|
"catalog/blocks/cross-warp-morph",
|
|
|
|
|
"catalog/blocks/domain-warp-dissolve",
|
|
|
|
|
"catalog/blocks/flash-through-white",
|
|
|
|
|
"catalog/blocks/glitch",
|
|
|
|
|
"catalog/blocks/gravitational-lens",
|
|
|
|
|
"catalog/blocks/light-leak",
|
|
|
|
|
"catalog/blocks/ridged-burn",
|
|
|
|
|
"catalog/blocks/ripple-waves",
|
|
|
|
|
"catalog/blocks/sdf-iris",
|
|
|
|
|
"catalog/blocks/swirl-vortex",
|
|
|
|
|
"catalog/blocks/thermal-distortion",
|
|
|
|
|
"catalog/blocks/whip-pan"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "CSS Transitions",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/blocks/beat-freeze-cut",
|
|
|
|
|
"catalog/blocks/hw-scribble-transition",
|
|
|
|
|
"catalog/blocks/mk-clone-wall-transition",
|
|
|
|
|
"catalog/blocks/organic-light-leak-overlay",
|
|
|
|
|
"catalog/blocks/transitions-3d",
|
|
|
|
|
"catalog/blocks/transitions-blur",
|
|
|
|
|
"catalog/blocks/transitions-cover",
|
|
|
|
|
"catalog/blocks/transitions-destruction",
|
|
|
|
|
"catalog/blocks/transitions-dissolve",
|
|
|
|
|
"catalog/blocks/transitions-distortion",
|
|
|
|
|
"catalog/blocks/transitions-grid",
|
|
|
|
|
"catalog/blocks/transitions-light",
|
|
|
|
|
"catalog/blocks/transitions-mechanical",
|
|
|
|
|
"catalog/blocks/transitions-other",
|
|
|
|
|
"catalog/blocks/transitions-push",
|
|
|
|
|
"catalog/blocks/transitions-radial",
|
|
|
|
|
"catalog/blocks/transitions-scale"
|
|
|
|
|
]
|
|
|
|
|
}
|
2026-08-10 18:46:03 -04:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-08-10 19:12:27 -04:00
|
|
|
"group": "Data & charts",
|
2026-08-10 18:46:03 -04:00
|
|
|
"pages": [
|
2026-08-10 19:12:27 -04:00
|
|
|
{
|
|
|
|
|
"group": "Data",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/components/animated-bar-chart",
|
|
|
|
|
"catalog/components/ascii-render-pass",
|
|
|
|
|
"catalog/components/ascii-trail-reveal",
|
|
|
|
|
"catalog/blocks/bar-chart-race",
|
|
|
|
|
"catalog/components/chart-story",
|
|
|
|
|
"catalog/components/conic-progress-ring",
|
|
|
|
|
"catalog/blocks/data-chart",
|
|
|
|
|
"catalog/components/decline-chart",
|
|
|
|
|
"catalog/components/logo-wall",
|
|
|
|
|
"catalog/blocks/mk-line-graph",
|
|
|
|
|
"catalog/blocks/spain-map",
|
|
|
|
|
"catalog/components/star-rating-fill",
|
|
|
|
|
"catalog/blocks/us-map",
|
|
|
|
|
"catalog/blocks/us-map-bubble",
|
|
|
|
|
"catalog/blocks/us-map-flow",
|
|
|
|
|
"catalog/blocks/us-map-hex",
|
|
|
|
|
"catalog/blocks/world-map"
|
|
|
|
|
]
|
|
|
|
|
}
|
2026-08-10 18:46:03 -04:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-08-10 19:12:27 -04:00
|
|
|
"group": "Scenes & demos",
|
2026-08-10 18:46:03 -04:00
|
|
|
"pages": [
|
2026-08-10 19:12:27 -04:00
|
|
|
{
|
|
|
|
|
"group": "Showcases",
|
|
|
|
|
"pages": [
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/blocks/ai-chat-reveal",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/blocks/app-showcase",
|
|
|
|
|
"catalog/blocks/apple-money-count",
|
|
|
|
|
"catalog/blocks/blue-sweater-intro-video",
|
|
|
|
|
"catalog/blocks/camera-dolly-zoom",
|
2026-08-12 11:59:34 -07:00
|
|
|
"catalog/blocks/chatgpt-exchange",
|
|
|
|
|
"catalog/blocks/claude-exchange",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/blocks/cosmic-orb",
|
|
|
|
|
"catalog/blocks/gallery-tunnel",
|
2026-08-14 23:07:41 -07:00
|
|
|
"catalog/blocks/heygen-avatar-promo-card",
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/blocks/message-thread-reveal",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/blocks/north-korea-locked-down",
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/blocks/notes-reveal",
|
|
|
|
|
"catalog/blocks/notification-cascade",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/blocks/nyc-paris-flight",
|
|
|
|
|
"catalog/blocks/oscilloscope-trace",
|
|
|
|
|
"catalog/blocks/rack-focus",
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/blocks/share-sheet-carousel",
|
2026-08-14 23:07:41 -07:00
|
|
|
"catalog/blocks/slack-notification-ad",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/blocks/ui-3d-reveal",
|
|
|
|
|
"catalog/blocks/vfx-anamorphic-flare",
|
|
|
|
|
"catalog/blocks/vpn-youtube-spot"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Product Demo",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/components/browser-device-stage",
|
|
|
|
|
"catalog/components/code-terminal-run",
|
|
|
|
|
"catalog/components/cursor-glyph-trail",
|
|
|
|
|
"catalog/components/echo-trail",
|
|
|
|
|
"catalog/components/focus-swap",
|
|
|
|
|
"catalog/components/icon-morph-beat",
|
|
|
|
|
"catalog/components/native-notification-pop",
|
|
|
|
|
"catalog/components/notification-stack",
|
|
|
|
|
"catalog/components/offset-path-traveler",
|
|
|
|
|
"catalog/components/press-ripple",
|
|
|
|
|
"catalog/components/pull-to-refresh",
|
|
|
|
|
"catalog/components/screen-flow-carousel",
|
|
|
|
|
"catalog/components/segmentation-flood",
|
|
|
|
|
"catalog/components/soft-blob-touch",
|
|
|
|
|
"catalog/components/spring-stack-shuffle",
|
|
|
|
|
"catalog/components/state-chip-rail",
|
|
|
|
|
"catalog/components/sticky-mock-swap",
|
|
|
|
|
"catalog/components/telemetry-hud",
|
|
|
|
|
"catalog/components/toggle-flip",
|
|
|
|
|
"catalog/components/tracing-beam",
|
|
|
|
|
"catalog/components/typed-prompt",
|
|
|
|
|
"catalog/components/vector-editor-rig"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Social Overlays",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/blocks/editorial-flash-overlay",
|
|
|
|
|
"catalog/blocks/freeze-frame-dressing",
|
|
|
|
|
"catalog/blocks/instagram-follow",
|
|
|
|
|
"catalog/blocks/macos-notification",
|
|
|
|
|
"catalog/blocks/reddit-post",
|
|
|
|
|
"catalog/blocks/spotify-card",
|
|
|
|
|
"catalog/blocks/thread-message-stack",
|
|
|
|
|
"catalog/blocks/tiktok-follow",
|
|
|
|
|
"catalog/blocks/x-post",
|
|
|
|
|
"catalog/blocks/yt-comment-card",
|
|
|
|
|
"catalog/blocks/yt-lower-third"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Motion Scenes",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/components/aurora-drift",
|
|
|
|
|
"catalog/components/beat-accent",
|
|
|
|
|
"catalog/components/beat-pulse-background",
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/components/chat-thread",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/components/constellation-hub",
|
|
|
|
|
"catalog/components/count-up",
|
|
|
|
|
"catalog/components/cta-close",
|
|
|
|
|
"catalog/components/cta-lockup",
|
|
|
|
|
"catalog/components/facet-morph",
|
|
|
|
|
"catalog/components/gesture-tap",
|
|
|
|
|
"catalog/components/gloss-sweep",
|
|
|
|
|
"catalog/components/grade-split-reveal",
|
|
|
|
|
"catalog/components/grid-card-assemble",
|
|
|
|
|
"catalog/components/light-sweep-pass",
|
|
|
|
|
"catalog/components/locked-nucleus-orbit",
|
|
|
|
|
"catalog/components/logo-sting",
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/components/marker-checklist-card",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/components/modal-morph",
|
|
|
|
|
"catalog/components/multi-device-splay",
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/components/notes-typing",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/components/outline-draw",
|
|
|
|
|
"catalog/components/oversized-cursor",
|
|
|
|
|
"catalog/components/particle-image-reveal",
|
|
|
|
|
"catalog/components/physical-exit",
|
|
|
|
|
"catalog/components/radial-surround",
|
|
|
|
|
"catalog/components/scroll-feed",
|
|
|
|
|
"catalog/components/slit-scan-reveal",
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/components/social-proof-card",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/components/split-tilt-cards",
|
|
|
|
|
"catalog/components/spring-pop",
|
|
|
|
|
"catalog/components/stitched-text-draw",
|
|
|
|
|
"catalog/components/stop-motion-cadence",
|
|
|
|
|
"catalog/components/svg-stroke-trace",
|
|
|
|
|
"catalog/components/swipe-rail",
|
|
|
|
|
"catalog/components/testimonial-proof-card",
|
|
|
|
|
"catalog/components/touch-indicator",
|
|
|
|
|
"catalog/components/trust-strip",
|
|
|
|
|
"catalog/components/variable-font-flex",
|
|
|
|
|
"catalog/components/velocity-throw-snap",
|
|
|
|
|
"catalog/components/whiteboard-ink"
|
|
|
|
|
]
|
|
|
|
|
}
|
2026-08-10 18:46:03 -04:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-08-10 19:12:27 -04:00
|
|
|
"group": "Motion & effects",
|
2026-08-10 18:46:03 -04:00
|
|
|
"pages": [
|
2026-08-10 19:12:27 -04:00
|
|
|
{
|
|
|
|
|
"group": "Motion Primitives",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/components/arc-motion-path",
|
|
|
|
|
"catalog/components/avatar-group-hover",
|
|
|
|
|
"catalog/components/badge-pop",
|
|
|
|
|
"catalog/components/blur-in",
|
|
|
|
|
"catalog/components/card-resize",
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/components/chat-message",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/components/chromatic-aberration-wipe",
|
|
|
|
|
"catalog/components/dynamic-grid",
|
|
|
|
|
"catalog/components/icon-swap",
|
|
|
|
|
"catalog/blocks/lt-neon-border",
|
|
|
|
|
"catalog/components/menu-morph",
|
|
|
|
|
"catalog/components/number-pop-in",
|
|
|
|
|
"catalog/components/number-wheel",
|
|
|
|
|
"catalog/components/page-slide",
|
|
|
|
|
"catalog/components/separator",
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/components/sheet-spring-up",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/components/simulated-cursor",
|
|
|
|
|
"catalog/components/skeleton-reveal",
|
|
|
|
|
"catalog/components/slot-machine-roll",
|
|
|
|
|
"catalog/components/staggered-fade-up",
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/components/streaming-text",
|
2026-08-10 19:12:27 -04:00
|
|
|
"catalog/components/success-check",
|
|
|
|
|
"catalog/components/svg-line-draw-loader",
|
|
|
|
|
"catalog/components/text-stagger",
|
|
|
|
|
"catalog/components/text-state-swap",
|
|
|
|
|
"catalog/components/three-orbiting-cards",
|
|
|
|
|
"catalog/components/tilt-card",
|
|
|
|
|
"catalog/components/top-down-letters",
|
feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)
* feat(registry): add the notification-cascade block and banner-push-in component
A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.
The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.
Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.
* feat(registry): add the share-sheet-carousel block and sheet-spring-up component
A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.
The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.
Both pass the full browser gate (WCAG AA) installed from a served registry.
* feat(registry): add the typing-indicator and streaming-text components
Two chat primitives extracted from reference footage of real conversations.
typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.
streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.
Both demos pass the browser gate.
* feat(registry): add the ai-chat-reveal block
A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.
The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.
Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.
* feat(registry): add the message-thread-reveal block
A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.
Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.
Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.
Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.
* feat(registry): add the notes-reveal block and line-reveal-list component
A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.
The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.
Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.
* docs(catalog): publish the ten new ad-template items
Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.
* chore(registry): rebuild the on-device search index for the new items
* style(registry): run oxfmt over the new item sources
The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.
* feat(registry): restage the five component demos as device specimens
The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.
* refactor(registry): shelve the five ad-template films as showcases
The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.
* refactor(registry): retire banner-push-in and line-reveal-list
Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.
* feat(registry): add four scene primitives - the moments, mountable
social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.
marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.
chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.
notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.
All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.
* docs(catalog): regenerate for the reshelved films and scene primitives
Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.
* feat(registry): bring chat-thread to film fidelity, with a per-message type switch
The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.
Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.
* feat(registry): add chat-message - the atom, with its type as an enum
ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.
* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences
Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
Permanent Marker Apache-2.0 (verified against embedded name-table records)
Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-12 04:03:42 +08:00
|
|
|
"catalog/components/typewriter",
|
|
|
|
|
"catalog/components/typing-indicator"
|
2026-08-10 19:12:27 -04:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Effects",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/components/avatar-cloud",
|
|
|
|
|
"catalog/components/beat-timeline",
|
|
|
|
|
"catalog/components/before-after-wipe",
|
|
|
|
|
"catalog/components/camera-rig-depth-stack",
|
|
|
|
|
"catalog/components/checkout-flow",
|
|
|
|
|
"catalog/components/comparison-split",
|
|
|
|
|
"catalog/components/confetti",
|
|
|
|
|
"catalog/components/cut-the-curve",
|
|
|
|
|
"catalog/components/device-frame-stage",
|
|
|
|
|
"catalog/components/directional-wipe",
|
|
|
|
|
"catalog/components/fade-through",
|
|
|
|
|
"catalog/components/grid-pixelate-wipe",
|
|
|
|
|
"catalog/components/halftone-dissolve",
|
|
|
|
|
"catalog/components/hw-arrow",
|
|
|
|
|
"catalog/components/hw-boil",
|
|
|
|
|
"catalog/components/hw-box-label",
|
|
|
|
|
"catalog/components/hw-callout-circle",
|
|
|
|
|
"catalog/components/hw-underline",
|
|
|
|
|
"catalog/components/input-feedback",
|
|
|
|
|
"catalog/components/iris-reveal",
|
|
|
|
|
"catalog/components/keyframe-scrub-stack",
|
|
|
|
|
"catalog/components/match-cut",
|
|
|
|
|
"catalog/components/mesh-gradient-bg",
|
|
|
|
|
"catalog/components/micro-transitions",
|
|
|
|
|
"catalog/components/mk-usage-arc",
|
|
|
|
|
"catalog/components/morph-swap",
|
|
|
|
|
"catalog/components/motion-blur",
|
|
|
|
|
"catalog/components/multiplayer-cursors",
|
|
|
|
|
"catalog/components/notification-pileup",
|
|
|
|
|
"catalog/components/onboarding-stepper-flow",
|
|
|
|
|
"catalog/components/ordered-dither-pass",
|
|
|
|
|
"catalog/components/overwhelm-surround",
|
|
|
|
|
"catalog/components/panel-reveal",
|
|
|
|
|
"catalog/components/parallax-device-dive",
|
|
|
|
|
"catalog/components/parallax-unzoom",
|
|
|
|
|
"catalog/components/parallax-zoom",
|
|
|
|
|
"catalog/components/rubber-band-bumper",
|
|
|
|
|
"catalog/components/settings-toggle-flow",
|
|
|
|
|
"catalog/components/signup-flow",
|
|
|
|
|
"catalog/components/spotlight-card",
|
|
|
|
|
"catalog/components/stagger-cascade",
|
|
|
|
|
"catalog/components/stagger-lattice",
|
|
|
|
|
"catalog/components/store-badge-lockup",
|
|
|
|
|
"catalog/components/svg-mask-reveal",
|
|
|
|
|
"catalog/components/tabs-slide-indicator",
|
|
|
|
|
"catalog/components/testimonial-card",
|
|
|
|
|
"catalog/components/type-match-cut",
|
|
|
|
|
"catalog/components/vignette",
|
|
|
|
|
"catalog/components/whip-pan-cut",
|
|
|
|
|
"catalog/components/x-follow-card",
|
|
|
|
|
"catalog/components/yt-circle-pointer",
|
|
|
|
|
"catalog/components/yt-feather-highlight",
|
|
|
|
|
"catalog/components/zoom-through-transition"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Camera & 3D",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/blocks/camcorder-hud",
|
|
|
|
|
"catalog/components/camera-scan-gate",
|
|
|
|
|
"catalog/components/camera-shake",
|
|
|
|
|
"catalog/components/drift-hold",
|
|
|
|
|
"catalog/components/focus-rack",
|
|
|
|
|
"catalog/components/pan-stations",
|
|
|
|
|
"catalog/components/pull-back-reveal",
|
|
|
|
|
"catalog/components/push-in",
|
|
|
|
|
"catalog/components/scroll-camera-story",
|
|
|
|
|
"catalog/components/ui-focus-zoom",
|
|
|
|
|
"catalog/components/yt-camera-move"
|
|
|
|
|
]
|
|
|
|
|
}
|
2026-08-10 18:46:03 -04:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
2026-08-10 19:12:27 -04:00
|
|
|
"group": "Surfaces",
|
2026-08-10 18:46:03 -04:00
|
|
|
"pages": [
|
2026-08-10 19:12:27 -04:00
|
|
|
{
|
|
|
|
|
"group": "Texture",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/components/grain-field",
|
|
|
|
|
"catalog/components/grain-overlay",
|
|
|
|
|
"catalog/blocks/halftone-field",
|
|
|
|
|
"catalog/components/ink-bleed-reveal",
|
|
|
|
|
"catalog/components/texture-mask-text",
|
|
|
|
|
"catalog/blocks/yt-lcd-background",
|
|
|
|
|
"catalog/components/yt-screen-warp"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "HTML-in-Canvas",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/blocks/ios26-liquid-glass",
|
|
|
|
|
"catalog/blocks/liquid-glass-context-menu",
|
|
|
|
|
"catalog/blocks/liquid-glass-media-controls",
|
|
|
|
|
"catalog/blocks/liquid-glass-notification",
|
|
|
|
|
"catalog/blocks/liquid-glass-widgets",
|
|
|
|
|
"catalog/blocks/macos-tahoe-liquid-glass",
|
|
|
|
|
"catalog/blocks/vfx-iphone-device",
|
|
|
|
|
"catalog/blocks/vfx-liquid-background",
|
|
|
|
|
"catalog/blocks/vfx-liquid-glass",
|
|
|
|
|
"catalog/blocks/vfx-magnetic",
|
|
|
|
|
"catalog/blocks/vfx-portal",
|
|
|
|
|
"catalog/blocks/vfx-shatter",
|
|
|
|
|
"catalog/blocks/vfx-text-cursor"
|
|
|
|
|
]
|
|
|
|
|
}
|
2026-06-07 10:55:13 -07:00
|
|
|
]
|
|
|
|
|
},
|
feat(registry): seed transition blocks — 14 shader + 14 CSS showcase (#270)
## What
Add 28 transition blocks from the Hyperframe Template Structure catalog, bringing the registry to 53 total items.
### Shader transitions (14 blocks, WebGL, 4s each)
`domain-warp-dissolve`, `ridged-burn`, `whip-pan`, `sdf-iris`, `ripple-waves`, `gravitational-lens`, `cinematic-zoom`, `chromatic-radial-split`, `glitch`, `swirl-vortex`, `thermal-distortion`, `flash-through-white`, `cross-warp-morph`, `light-leak`
### CSS transition showcases (14 blocks, various durations)
`transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-destruction`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-other`, `transitions-push`, `transitions-radial`, `transitions-scale`, `transitions-shader`
## Why
Phase D content accumulation. Transitions are the most-requested category for the catalog.
## How
- Shader transitions extracted from `shader-showcase.zip`, each a standalone HTML with WebGL shaders
- CSS transitions extracted from `showcase-bundle.zip`, each a standalone showcase page
- All tagged with `transition` + `shader` or `showcase` for catalog grouping
- Preview thumbnails generated for all 28 blocks
- Catalog pages + index regenerated
## Test plan
- [x] All 28 blocks produce preview thumbnails
- [x] `registry-item.json` validates for all blocks
- [x] Catalog pages generated (45 total items in catalog-index.json)
- [x] `oxfmt --check` passes
2026-04-14 16:32:27 -07:00
|
|
|
{
|
docs: rebuild the catalog generator, and show what background removal and HDR do
**The catalog generator destroys hand-written documentation on every run.** It
does `rmSync(dir, { recursive: true })` on both catalog folders before
regenerating, so any section a human added to a generated page is deleted the
next time anyone runs it. There is now a carry-forward pass that reads those
sections off the existing pages first and re-emits any heading the template does
not own. Note this prevents future loss only — the earlier regeneration in this
stack already removed what was there, and it is recoverable from git if wanted.
It was also clobbering `docs.json`: rebuilding the Catalog tab dropped its icon
and unlinked `catalog/index.mdx` from the sidebar entirely.
And 27 of 36 component pages told the reader to "see the comment header in the
file" when no such header exists. The generator reads the file now and only says
it when true.
On presentation: 1,365 table rows across 168 pages became 0. `## Details` was a
table whose rows were "Type: Block" and the duration; `## Files` was three
columns where most items have exactly one file. Both are one sentence now. The
preview leads the page instead of sitting under title, description, tags, a
warning and a credit — four of which Mintlify already renders from frontmatter.
**Two guides that showed nothing now show the thing.** Background removal plays a
real cutout with the matte magnified at the hair edge and at a shoulder a plant
overlapped, because those are where matting fails. HDR is the honest one: you
cannot show HDR brightness on an SDR page, so it shows the `ffprobe` verdict and
a measured round-trip — 4000 nits authored, 4012 back out — and says on screen
for all 26 seconds that it is not simulating anything.
Both films were checked before publishing: no black or frozen stretches, and read
at the real 590px docs column width rather than full size. Nav after regeneration:
307 pages, 0 dangling, 0 redirect collisions.
2026-08-04 02:03:29 -07:00
|
|
|
"group": "Blocks",
|
feat(registry): seed transition blocks — 14 shader + 14 CSS showcase (#270)
## What
Add 28 transition blocks from the Hyperframe Template Structure catalog, bringing the registry to 53 total items.
### Shader transitions (14 blocks, WebGL, 4s each)
`domain-warp-dissolve`, `ridged-burn`, `whip-pan`, `sdf-iris`, `ripple-waves`, `gravitational-lens`, `cinematic-zoom`, `chromatic-radial-split`, `glitch`, `swirl-vortex`, `thermal-distortion`, `flash-through-white`, `cross-warp-morph`, `light-leak`
### CSS transition showcases (14 blocks, various durations)
`transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-destruction`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-other`, `transitions-push`, `transitions-radial`, `transitions-scale`, `transitions-shader`
## Why
Phase D content accumulation. Transitions are the most-requested category for the catalog.
## How
- Shader transitions extracted from `shader-showcase.zip`, each a standalone HTML with WebGL shaders
- CSS transitions extracted from `showcase-bundle.zip`, each a standalone showcase page
- All tagged with `transition` + `shader` or `showcase` for catalog grouping
- Preview thumbnails generated for all 28 blocks
- Catalog pages + index regenerated
## Test plan
- [x] All 28 blocks produce preview thumbnails
- [x] `registry-item.json` validates for all blocks
- [x] Catalog pages generated (45 total items in catalog-index.json)
- [x] `oxfmt --check` passes
2026-04-14 16:32:27 -07:00
|
|
|
"pages": [
|
2026-08-10 19:12:27 -04:00
|
|
|
{
|
|
|
|
|
"group": "Blocks",
|
|
|
|
|
"pages": [
|
|
|
|
|
"catalog/blocks/flowchart",
|
|
|
|
|
"catalog/blocks/flowchart-vertical",
|
|
|
|
|
"catalog/blocks/hw-frame",
|
|
|
|
|
"catalog/blocks/hw-pipeline",
|
|
|
|
|
"catalog/blocks/hw-text-cloud",
|
|
|
|
|
"catalog/blocks/logo-outro",
|
|
|
|
|
"catalog/blocks/mk-background",
|
|
|
|
|
"catalog/blocks/mk-placeholder-grid",
|
|
|
|
|
"catalog/blocks/mk-progress-stat",
|
|
|
|
|
"catalog/blocks/mk-specs-list",
|
|
|
|
|
"catalog/blocks/spiral-galaxy",
|
|
|
|
|
"catalog/blocks/yt-logo-intro",
|
|
|
|
|
"catalog/blocks/yt-vertical-fill"
|
|
|
|
|
]
|
|
|
|
|
}
|
feat(registry): add code snippet blocks with VS Code workbench (#1113)
* feat(registry): add VS Code theme visualizer example
Full VS Code workbench recreation with per-character typing animation
across 12 built-in themes. Includes activity bar, sidebar, tabs,
editor with line-by-line cursor tracking, terminal panel, and status
bar — all driven by official VS Code theme JSON files.
Themes: Dark Modern, Dark 2026, Dark+, Light Modern, Light 2026,
Light+, Visual Studio Dark, Visual Studio Light, High Contrast,
High Contrast Light, Solarized Light, Monokai.
Includes build scripts to regenerate compositions from theme JSON.
* feat(registry): add 12 code snippet blocks for hyperframes add code
Individual blocks for each VS Code built-in theme, all tagged "code"
so `npx hyperframes add code` installs the full set.
Each block is a self-contained VS Code workbench with per-character
typing animation, activity bar, sidebar, tabs, terminal, and status
bar driven by official theme JSON data.
* docs: add mdx pages for code snippet blocks and example
- 12 block doc pages under catalog/blocks/code-snippet-*
- "Code Snippets" nav group in docs.json
- vscode-theme-visualizer entry in examples.mdx
* docs: revert examples.mdx — code snippets belong in catalog only
* docs: drop redundant 'Code Snippet' prefix from sidebar titles
* docs: add video previews to code snippet catalog pages
* style: format HTML, CSS, and MJS files for CI
* fix: address review feedback — build pipeline, LICENSE, dead code, nav order
1. Build script now regenerates both example compositions AND published
blocks in registry/blocks/code-snippet-*/, keeping them in sync.
2. Add MIT LICENSE for vendored VS Code theme JSONs (microsoft/vscode).
3. Remove dead `chars` variable from runtime, build script, all blocks,
and all example compositions.
4. Alphabetize Code Snippets nav group in docs.json to match catalog
convention.
* style: format all build-generated files (render-entries, CSS, index)
2026-05-28 16:02:44 -04:00
|
|
|
]
|
feat(registry): seed transition blocks — 14 shader + 14 CSS showcase (#270)
## What
Add 28 transition blocks from the Hyperframe Template Structure catalog, bringing the registry to 53 total items.
### Shader transitions (14 blocks, WebGL, 4s each)
`domain-warp-dissolve`, `ridged-burn`, `whip-pan`, `sdf-iris`, `ripple-waves`, `gravitational-lens`, `cinematic-zoom`, `chromatic-radial-split`, `glitch`, `swirl-vortex`, `thermal-distortion`, `flash-through-white`, `cross-warp-morph`, `light-leak`
### CSS transition showcases (14 blocks, various durations)
`transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-destruction`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-other`, `transitions-push`, `transitions-radial`, `transitions-scale`, `transitions-shader`
## Why
Phase D content accumulation. Transitions are the most-requested category for the catalog.
## How
- Shader transitions extracted from `shader-showcase.zip`, each a standalone HTML with WebGL shaders
- CSS transitions extracted from `showcase-bundle.zip`, each a standalone showcase page
- All tagged with `transition` + `shader` or `showcase` for catalog grouping
- Preview thumbnails generated for all 28 blocks
- Catalog pages + index regenerated
## Test plan
- [x] All 28 blocks produce preview thumbnails
- [x] `registry-item.json` validates for all blocks
- [x] Catalog pages generated (45 total items in catalog-index.json)
- [x] `oxfmt --check` passes
2026-04-14 16:32:27 -07:00
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"tab": "Developers",
|
|
|
|
|
"icon": "code",
|
feat(registry): seed transition blocks — 14 shader + 14 CSS showcase (#270)
## What
Add 28 transition blocks from the Hyperframe Template Structure catalog, bringing the registry to 53 total items.
### Shader transitions (14 blocks, WebGL, 4s each)
`domain-warp-dissolve`, `ridged-burn`, `whip-pan`, `sdf-iris`, `ripple-waves`, `gravitational-lens`, `cinematic-zoom`, `chromatic-radial-split`, `glitch`, `swirl-vortex`, `thermal-distortion`, `flash-through-white`, `cross-warp-morph`, `light-leak`
### CSS transition showcases (14 blocks, various durations)
`transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-destruction`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-other`, `transitions-push`, `transitions-radial`, `transitions-scale`, `transitions-shader`
## Why
Phase D content accumulation. Transitions are the most-requested category for the catalog.
## How
- Shader transitions extracted from `shader-showcase.zip`, each a standalone HTML with WebGL shaders
- CSS transitions extracted from `showcase-bundle.zip`, each a standalone showcase page
- All tagged with `transition` + `shader` or `showcase` for catalog grouping
- Preview thumbnails generated for all 28 blocks
- Catalog pages + index regenerated
## Test plan
- [x] All 28 blocks produce preview thumbnails
- [x] `registry-item.json` validates for all blocks
- [x] Catalog pages generated (45 total items in catalog-index.json)
- [x] `oxfmt --check` passes
2026-04-14 16:32:27 -07:00
|
|
|
"groups": [
|
|
|
|
|
{
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"group": "Start here",
|
feat(registry): seed transition blocks — 14 shader + 14 CSS showcase (#270)
## What
Add 28 transition blocks from the Hyperframe Template Structure catalog, bringing the registry to 53 total items.
### Shader transitions (14 blocks, WebGL, 4s each)
`domain-warp-dissolve`, `ridged-burn`, `whip-pan`, `sdf-iris`, `ripple-waves`, `gravitational-lens`, `cinematic-zoom`, `chromatic-radial-split`, `glitch`, `swirl-vortex`, `thermal-distortion`, `flash-through-white`, `cross-warp-morph`, `light-leak`
### CSS transition showcases (14 blocks, various durations)
`transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-destruction`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-other`, `transitions-push`, `transitions-radial`, `transitions-scale`, `transitions-shader`
## Why
Phase D content accumulation. Transitions are the most-requested category for the catalog.
## How
- Shader transitions extracted from `shader-showcase.zip`, each a standalone HTML with WebGL shaders
- CSS transitions extracted from `showcase-bundle.zip`, each a standalone showcase page
- All tagged with `transition` + `shader` or `showcase` for catalog grouping
- Preview thumbnails generated for all 28 blocks
- Catalog pages + index regenerated
## Test plan
- [x] All 28 blocks produce preview thumbnails
- [x] `registry-item.json` validates for all blocks
- [x] Catalog pages generated (45 total items in catalog-index.json)
- [x] `oxfmt --check` passes
2026-04-14 16:32:27 -07:00
|
|
|
"pages": [
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"developers/overview"
|
feat(registry): seed transition blocks — 14 shader + 14 CSS showcase (#270)
## What
Add 28 transition blocks from the Hyperframe Template Structure catalog, bringing the registry to 53 total items.
### Shader transitions (14 blocks, WebGL, 4s each)
`domain-warp-dissolve`, `ridged-burn`, `whip-pan`, `sdf-iris`, `ripple-waves`, `gravitational-lens`, `cinematic-zoom`, `chromatic-radial-split`, `glitch`, `swirl-vortex`, `thermal-distortion`, `flash-through-white`, `cross-warp-morph`, `light-leak`
### CSS transition showcases (14 blocks, various durations)
`transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-destruction`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-other`, `transitions-push`, `transitions-radial`, `transitions-scale`, `transitions-shader`
## Why
Phase D content accumulation. Transitions are the most-requested category for the catalog.
## How
- Shader transitions extracted from `shader-showcase.zip`, each a standalone HTML with WebGL shaders
- CSS transitions extracted from `showcase-bundle.zip`, each a standalone showcase page
- All tagged with `transition` + `shader` or `showcase` for catalog grouping
- Preview thumbnails generated for all 28 blocks
- Catalog pages + index regenerated
## Test plan
- [x] All 28 blocks produce preview thumbnails
- [x] `registry-item.json` validates for all blocks
- [x] Catalog pages generated (45 total items in catalog-index.json)
- [x] `oxfmt --check` passes
2026-04-14 16:32:27 -07:00
|
|
|
]
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
},
|
docs(sdk): comprehensive SDK reference + guides (#1817)
* docs(sdk): comprehensive SDK reference + guides
Adds a dedicated SDK tab to the Mintlify docs documenting the entire
@hyperframes/sdk surface, verified against source:
Reference (6 pages):
- openComposition + OpenCompositionOptions
- Composition (every typed method, query, selection, dispatch/batch/can,
events, serialize, override mode, lifecycle)
- Edit Operations (all 33 EditOp variants for dispatch/can/batch)
- Types (every exported type + constants)
- Adapters (PersistAdapter/PreviewAdapter + memory/fs/headless/iframe factories)
- Utilities & Constants (history, persist-queue, document utils, origins, errors)
Guides (7) + Overview + Quickstart:
- querying-and-editing, timing-and-animation, undo-redo-and-patches,
persistence, embedded-override-mode, canvas-integration, editing-affordances
The existing packages/sdk.mdx stays as the package card and now links the
new SDK tab. editing-affordances documents the @hyperframes/sdk/editing
subpath shipping in #1814 (flagged with a version Note).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* docs(sdk): address PR review feedback
Correctness fixes from PR #1817 review (Miga + Rames):
- types.mdx: FindQuery.text is a substring match (String.includes), not exact
- persistence.mdx: import PersistAdapter/PersistVersionEntry/PersistErrorEvent
from @hyperframes/sdk (no @hyperframes/sdk/adapters/types export exists)
- open-composition.mdx: createHeadlessAdapter is a PreviewAdapter, not a persist
adapter; PersistAdapter is exported from @hyperframes/sdk (no /adapters subpath)
- types.mdx / adapters.mdx: note KeyframeSpec, ElementAtPointResult, DraftProps
are structural shapes, not barrel exports (no import to copy)
- overview.mdx: drop leaked authoring meta-comment
- timing-and-animation.mdx: getElementTimings is keyed by scopedId
- embedded-override-mode.mdx: history is already off by default in embedded mode
- editing-affordances.mdx: /editing subpath is merged; soften the version note
- querying-and-editing.mdx: bare id only resolves top-level; use find() for
sub-composition leaves
- canvas-integration.mdx + persistence.mdx: explain the comp closure forward-ref
and the fs-adapter subpath (tree-shaking) asymmetry
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 14:45:54 -07:00
|
|
|
{
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"group": "Command line",
|
docs(sdk): comprehensive SDK reference + guides (#1817)
* docs(sdk): comprehensive SDK reference + guides
Adds a dedicated SDK tab to the Mintlify docs documenting the entire
@hyperframes/sdk surface, verified against source:
Reference (6 pages):
- openComposition + OpenCompositionOptions
- Composition (every typed method, query, selection, dispatch/batch/can,
events, serialize, override mode, lifecycle)
- Edit Operations (all 33 EditOp variants for dispatch/can/batch)
- Types (every exported type + constants)
- Adapters (PersistAdapter/PreviewAdapter + memory/fs/headless/iframe factories)
- Utilities & Constants (history, persist-queue, document utils, origins, errors)
Guides (7) + Overview + Quickstart:
- querying-and-editing, timing-and-animation, undo-redo-and-patches,
persistence, embedded-override-mode, canvas-integration, editing-affordances
The existing packages/sdk.mdx stays as the package card and now links the
new SDK tab. editing-affordances documents the @hyperframes/sdk/editing
subpath shipping in #1814 (flagged with a version Note).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* docs(sdk): address PR review feedback
Correctness fixes from PR #1817 review (Miga + Rames):
- types.mdx: FindQuery.text is a substring match (String.includes), not exact
- persistence.mdx: import PersistAdapter/PersistVersionEntry/PersistErrorEvent
from @hyperframes/sdk (no @hyperframes/sdk/adapters/types export exists)
- open-composition.mdx: createHeadlessAdapter is a PreviewAdapter, not a persist
adapter; PersistAdapter is exported from @hyperframes/sdk (no /adapters subpath)
- types.mdx / adapters.mdx: note KeyframeSpec, ElementAtPointResult, DraftProps
are structural shapes, not barrel exports (no import to copy)
- overview.mdx: drop leaked authoring meta-comment
- timing-and-animation.mdx: getElementTimings is keyed by scopedId
- embedded-override-mode.mdx: history is already off by default in embedded mode
- editing-affordances.mdx: /editing subpath is merged; soften the version note
- querying-and-editing.mdx: bare id only resolves top-level; use find() for
sub-composition leaves
- canvas-integration.mdx + persistence.mdx: explain the comp closure forward-ref
and the fs-adapter subpath (tree-shaking) asymmetry
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 14:45:54 -07:00
|
|
|
"pages": [
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"developers/cli",
|
|
|
|
|
"packages/cli",
|
|
|
|
|
"packages/lint"
|
docs(sdk): comprehensive SDK reference + guides (#1817)
* docs(sdk): comprehensive SDK reference + guides
Adds a dedicated SDK tab to the Mintlify docs documenting the entire
@hyperframes/sdk surface, verified against source:
Reference (6 pages):
- openComposition + OpenCompositionOptions
- Composition (every typed method, query, selection, dispatch/batch/can,
events, serialize, override mode, lifecycle)
- Edit Operations (all 33 EditOp variants for dispatch/can/batch)
- Types (every exported type + constants)
- Adapters (PersistAdapter/PreviewAdapter + memory/fs/headless/iframe factories)
- Utilities & Constants (history, persist-queue, document utils, origins, errors)
Guides (7) + Overview + Quickstart:
- querying-and-editing, timing-and-animation, undo-redo-and-patches,
persistence, embedded-override-mode, canvas-integration, editing-affordances
The existing packages/sdk.mdx stays as the package card and now links the
new SDK tab. editing-affordances documents the @hyperframes/sdk/editing
subpath shipping in #1814 (flagged with a version Note).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* docs(sdk): address PR review feedback
Correctness fixes from PR #1817 review (Miga + Rames):
- types.mdx: FindQuery.text is a substring match (String.includes), not exact
- persistence.mdx: import PersistAdapter/PersistVersionEntry/PersistErrorEvent
from @hyperframes/sdk (no @hyperframes/sdk/adapters/types export exists)
- open-composition.mdx: createHeadlessAdapter is a PreviewAdapter, not a persist
adapter; PersistAdapter is exported from @hyperframes/sdk (no /adapters subpath)
- types.mdx / adapters.mdx: note KeyframeSpec, ElementAtPointResult, DraftProps
are structural shapes, not barrel exports (no import to copy)
- overview.mdx: drop leaked authoring meta-comment
- timing-and-animation.mdx: getElementTimings is keyed by scopedId
- embedded-override-mode.mdx: history is already off by default in embedded mode
- editing-affordances.mdx: /editing subpath is merged; soften the version note
- querying-and-editing.mdx: bare id only resolves top-level; use find() for
sub-composition leaves
- canvas-integration.mdx + persistence.mdx: explain the comp closure forward-ref
and the fs-adapter subpath (tree-shaking) asymmetry
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 14:45:54 -07:00
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"group": "SDK guides",
|
docs(sdk): comprehensive SDK reference + guides (#1817)
* docs(sdk): comprehensive SDK reference + guides
Adds a dedicated SDK tab to the Mintlify docs documenting the entire
@hyperframes/sdk surface, verified against source:
Reference (6 pages):
- openComposition + OpenCompositionOptions
- Composition (every typed method, query, selection, dispatch/batch/can,
events, serialize, override mode, lifecycle)
- Edit Operations (all 33 EditOp variants for dispatch/can/batch)
- Types (every exported type + constants)
- Adapters (PersistAdapter/PreviewAdapter + memory/fs/headless/iframe factories)
- Utilities & Constants (history, persist-queue, document utils, origins, errors)
Guides (7) + Overview + Quickstart:
- querying-and-editing, timing-and-animation, undo-redo-and-patches,
persistence, embedded-override-mode, canvas-integration, editing-affordances
The existing packages/sdk.mdx stays as the package card and now links the
new SDK tab. editing-affordances documents the @hyperframes/sdk/editing
subpath shipping in #1814 (flagged with a version Note).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* docs(sdk): address PR review feedback
Correctness fixes from PR #1817 review (Miga + Rames):
- types.mdx: FindQuery.text is a substring match (String.includes), not exact
- persistence.mdx: import PersistAdapter/PersistVersionEntry/PersistErrorEvent
from @hyperframes/sdk (no @hyperframes/sdk/adapters/types export exists)
- open-composition.mdx: createHeadlessAdapter is a PreviewAdapter, not a persist
adapter; PersistAdapter is exported from @hyperframes/sdk (no /adapters subpath)
- types.mdx / adapters.mdx: note KeyframeSpec, ElementAtPointResult, DraftProps
are structural shapes, not barrel exports (no import to copy)
- overview.mdx: drop leaked authoring meta-comment
- timing-and-animation.mdx: getElementTimings is keyed by scopedId
- embedded-override-mode.mdx: history is already off by default in embedded mode
- editing-affordances.mdx: /editing subpath is merged; soften the version note
- querying-and-editing.mdx: bare id only resolves top-level; use find() for
sub-composition leaves
- canvas-integration.mdx + persistence.mdx: explain the comp closure forward-ref
and the fs-adapter subpath (tree-shaking) asymmetry
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 14:45:54 -07:00
|
|
|
"pages": [
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"sdk/quickstart",
|
docs(sdk): comprehensive SDK reference + guides (#1817)
* docs(sdk): comprehensive SDK reference + guides
Adds a dedicated SDK tab to the Mintlify docs documenting the entire
@hyperframes/sdk surface, verified against source:
Reference (6 pages):
- openComposition + OpenCompositionOptions
- Composition (every typed method, query, selection, dispatch/batch/can,
events, serialize, override mode, lifecycle)
- Edit Operations (all 33 EditOp variants for dispatch/can/batch)
- Types (every exported type + constants)
- Adapters (PersistAdapter/PreviewAdapter + memory/fs/headless/iframe factories)
- Utilities & Constants (history, persist-queue, document utils, origins, errors)
Guides (7) + Overview + Quickstart:
- querying-and-editing, timing-and-animation, undo-redo-and-patches,
persistence, embedded-override-mode, canvas-integration, editing-affordances
The existing packages/sdk.mdx stays as the package card and now links the
new SDK tab. editing-affordances documents the @hyperframes/sdk/editing
subpath shipping in #1814 (flagged with a version Note).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* docs(sdk): address PR review feedback
Correctness fixes from PR #1817 review (Miga + Rames):
- types.mdx: FindQuery.text is a substring match (String.includes), not exact
- persistence.mdx: import PersistAdapter/PersistVersionEntry/PersistErrorEvent
from @hyperframes/sdk (no @hyperframes/sdk/adapters/types export exists)
- open-composition.mdx: createHeadlessAdapter is a PreviewAdapter, not a persist
adapter; PersistAdapter is exported from @hyperframes/sdk (no /adapters subpath)
- types.mdx / adapters.mdx: note KeyframeSpec, ElementAtPointResult, DraftProps
are structural shapes, not barrel exports (no import to copy)
- overview.mdx: drop leaked authoring meta-comment
- timing-and-animation.mdx: getElementTimings is keyed by scopedId
- embedded-override-mode.mdx: history is already off by default in embedded mode
- editing-affordances.mdx: /editing subpath is merged; soften the version note
- querying-and-editing.mdx: bare id only resolves top-level; use find() for
sub-composition leaves
- canvas-integration.mdx + persistence.mdx: explain the comp closure forward-ref
and the fs-adapter subpath (tree-shaking) asymmetry
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 14:45:54 -07:00
|
|
|
"sdk/guides/querying-and-editing",
|
|
|
|
|
"sdk/guides/timing-and-animation",
|
|
|
|
|
"sdk/guides/undo-redo-and-patches",
|
|
|
|
|
"sdk/guides/persistence",
|
|
|
|
|
"sdk/guides/embedded-override-mode",
|
|
|
|
|
"sdk/guides/canvas-integration",
|
|
|
|
|
"sdk/guides/editing-affordances"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"group": "SDK reference",
|
docs(sdk): comprehensive SDK reference + guides (#1817)
* docs(sdk): comprehensive SDK reference + guides
Adds a dedicated SDK tab to the Mintlify docs documenting the entire
@hyperframes/sdk surface, verified against source:
Reference (6 pages):
- openComposition + OpenCompositionOptions
- Composition (every typed method, query, selection, dispatch/batch/can,
events, serialize, override mode, lifecycle)
- Edit Operations (all 33 EditOp variants for dispatch/can/batch)
- Types (every exported type + constants)
- Adapters (PersistAdapter/PreviewAdapter + memory/fs/headless/iframe factories)
- Utilities & Constants (history, persist-queue, document utils, origins, errors)
Guides (7) + Overview + Quickstart:
- querying-and-editing, timing-and-animation, undo-redo-and-patches,
persistence, embedded-override-mode, canvas-integration, editing-affordances
The existing packages/sdk.mdx stays as the package card and now links the
new SDK tab. editing-affordances documents the @hyperframes/sdk/editing
subpath shipping in #1814 (flagged with a version Note).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* docs(sdk): address PR review feedback
Correctness fixes from PR #1817 review (Miga + Rames):
- types.mdx: FindQuery.text is a substring match (String.includes), not exact
- persistence.mdx: import PersistAdapter/PersistVersionEntry/PersistErrorEvent
from @hyperframes/sdk (no @hyperframes/sdk/adapters/types export exists)
- open-composition.mdx: createHeadlessAdapter is a PreviewAdapter, not a persist
adapter; PersistAdapter is exported from @hyperframes/sdk (no /adapters subpath)
- types.mdx / adapters.mdx: note KeyframeSpec, ElementAtPointResult, DraftProps
are structural shapes, not barrel exports (no import to copy)
- overview.mdx: drop leaked authoring meta-comment
- timing-and-animation.mdx: getElementTimings is keyed by scopedId
- embedded-override-mode.mdx: history is already off by default in embedded mode
- editing-affordances.mdx: /editing subpath is merged; soften the version note
- querying-and-editing.mdx: bare id only resolves top-level; use find() for
sub-composition leaves
- canvas-integration.mdx + persistence.mdx: explain the comp closure forward-ref
and the fs-adapter subpath (tree-shaking) asymmetry
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 14:45:54 -07:00
|
|
|
"pages": [
|
|
|
|
|
"sdk/reference/open-composition",
|
|
|
|
|
"sdk/reference/composition",
|
|
|
|
|
"sdk/reference/edit-operations",
|
|
|
|
|
"sdk/reference/types",
|
|
|
|
|
"sdk/reference/adapters",
|
|
|
|
|
"sdk/reference/utilities"
|
|
|
|
|
]
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
},
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
{
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"group": "Composition, design & animation",
|
feat(skills): hyperframes-registry skill (#261)
## What
New skill `hyperframes-registry` that teaches AI coding agents how to install and wire registry blocks and components into HyperFrames compositions.
### Skill structure
```
skills/hyperframes-registry/
SKILL.md — triggers, overview, quick reference
references/
install-locations.md — default paths, hyperframes.json config
wiring-blocks.md — iframe inclusion, data attributes, positioning
wiring-components.md — snippet merging (HTML, CSS, JS, timeline)
discovery.md — manifest reading, item fields, available items table
demo-html-pattern.md — why components ship demo.html, structure conventions
examples/
add-block.md — worked example: data-chart block install + wiring
add-component.md — worked example: shimmer-sweep component install + wiring
```
## Why
Phase B of the catalog plan (PR 10). Without this skill, agents using `hyperframes add` have to guess how to wire installed items into compositions. The skill encodes the iframe/snippet patterns so agents get it right on the first attempt.
## How
- SKILL.md frontmatter triggers on: `hyperframes add`, "block", "component", `hyperframes.json`
- References cover every step: discovery, install, wiring blocks (iframe), wiring components (snippet merge), and the demo.html convention
- Two worked examples walk through complete install-to-preview workflows
- Updated CLAUDE.md skills table + trigger rules, README.md skills table, docs/packages/cli.mdx
## Test plan
- [x] `scripts/lint-skills.ts` passes (checked 4 skill files, no issues)
- [x] `oxfmt --check` passes on all markdown files
- [x] SKILL.md frontmatter has valid `name` and `description`
- [x] All reference links in SKILL.md resolve to existing files
- [x] CLAUDE.md, README.md, and docs CLI page updated with new skill
2026-04-14 16:27:24 -07:00
|
|
|
"pages": [
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"concepts/compositions",
|
|
|
|
|
"concepts/variables",
|
|
|
|
|
"concepts/data-attributes",
|
|
|
|
|
"guides/gsap-animation",
|
|
|
|
|
"concepts/frame-adapters",
|
|
|
|
|
"concepts/determinism",
|
|
|
|
|
"guides/html-in-canvas",
|
|
|
|
|
"guides/figma"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Composition reference",
|
|
|
|
|
"pages": [
|
|
|
|
|
"reference/html-schema",
|
|
|
|
|
"reference/color-grading"
|
feat(skills): hyperframes-registry skill (#261)
## What
New skill `hyperframes-registry` that teaches AI coding agents how to install and wire registry blocks and components into HyperFrames compositions.
### Skill structure
```
skills/hyperframes-registry/
SKILL.md — triggers, overview, quick reference
references/
install-locations.md — default paths, hyperframes.json config
wiring-blocks.md — iframe inclusion, data attributes, positioning
wiring-components.md — snippet merging (HTML, CSS, JS, timeline)
discovery.md — manifest reading, item fields, available items table
demo-html-pattern.md — why components ship demo.html, structure conventions
examples/
add-block.md — worked example: data-chart block install + wiring
add-component.md — worked example: shimmer-sweep component install + wiring
```
## Why
Phase B of the catalog plan (PR 10). Without this skill, agents using `hyperframes add` have to guess how to wire installed items into compositions. The skill encodes the iframe/snippet patterns so agents get it right on the first attempt.
## How
- SKILL.md frontmatter triggers on: `hyperframes add`, "block", "component", `hyperframes.json`
- References cover every step: discovery, install, wiring blocks (iframe), wiring components (snippet merge), and the demo.html convention
- Two worked examples walk through complete install-to-preview workflows
- Updated CLAUDE.md skills table + trigger rules, README.md skills table, docs/packages/cli.mdx
## Test plan
- [x] `scripts/lint-skills.ts` passes (checked 4 skill files, no issues)
- [x] `oxfmt --check` passes on all markdown files
- [x] SKILL.md frontmatter has valid `name` and `description`
- [x] All reference links in SKILL.md resolve to existing files
- [x] CLAUDE.md, README.md, and docs CLI page updated with new skill
2026-04-14 16:27:24 -07:00
|
|
|
]
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
},
|
|
|
|
|
{
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"group": "Rendering paths",
|
|
|
|
|
"pages": [
|
|
|
|
|
"guides/rendering",
|
|
|
|
|
"deploy/overview",
|
|
|
|
|
"deploy/cloud",
|
|
|
|
|
"guides/deploy"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Cloud infrastructure",
|
|
|
|
|
"pages": [
|
|
|
|
|
"deploy/aws-lambda",
|
|
|
|
|
"deploy/gcp-cloud-run",
|
|
|
|
|
"deploy/templates-on-lambda",
|
|
|
|
|
"deploy/migrating-to-hyperframes-lambda",
|
|
|
|
|
"packages/aws-lambda",
|
|
|
|
|
"packages/gcp-cloud-run"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Advanced rendering",
|
|
|
|
|
"pages": [
|
|
|
|
|
"guides/4k-rendering",
|
|
|
|
|
"guides/hdr",
|
|
|
|
|
"guides/performance"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Packages",
|
|
|
|
|
"pages": [
|
|
|
|
|
"packages/core",
|
|
|
|
|
"packages/parsers",
|
|
|
|
|
"packages/studio-server",
|
|
|
|
|
"packages/sdk",
|
|
|
|
|
"packages/engine",
|
|
|
|
|
"packages/player",
|
|
|
|
|
"packages/producer",
|
|
|
|
|
"packages/shader-transitions",
|
|
|
|
|
"packages/studio"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Agent setup",
|
|
|
|
|
"pages": [
|
|
|
|
|
"guides/authentication",
|
|
|
|
|
"guides/skills"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"group": "Contributing & community",
|
feat(skills): hyperframes-registry skill (#261)
## What
New skill `hyperframes-registry` that teaches AI coding agents how to install and wire registry blocks and components into HyperFrames compositions.
### Skill structure
```
skills/hyperframes-registry/
SKILL.md — triggers, overview, quick reference
references/
install-locations.md — default paths, hyperframes.json config
wiring-blocks.md — iframe inclusion, data attributes, positioning
wiring-components.md — snippet merging (HTML, CSS, JS, timeline)
discovery.md — manifest reading, item fields, available items table
demo-html-pattern.md — why components ship demo.html, structure conventions
examples/
add-block.md — worked example: data-chart block install + wiring
add-component.md — worked example: shimmer-sweep component install + wiring
```
## Why
Phase B of the catalog plan (PR 10). Without this skill, agents using `hyperframes add` have to guess how to wire installed items into compositions. The skill encodes the iframe/snippet patterns so agents get it right on the first attempt.
## How
- SKILL.md frontmatter triggers on: `hyperframes add`, "block", "component", `hyperframes.json`
- References cover every step: discovery, install, wiring blocks (iframe), wiring components (snippet merge), and the demo.html convention
- Two worked examples walk through complete install-to-preview workflows
- Updated CLAUDE.md skills table + trigger rules, README.md skills table, docs/packages/cli.mdx
## Test plan
- [x] `scripts/lint-skills.ts` passes (checked 4 skill files, no issues)
- [x] `oxfmt --check` passes on all markdown files
- [x] SKILL.md frontmatter has valid `name` and `description`
- [x] All reference links in SKILL.md resolve to existing files
- [x] CLAUDE.md, README.md, and docs CLI page updated with new skill
2026-04-14 16:27:24 -07:00
|
|
|
"pages": [
|
|
|
|
|
"contributing",
|
2026-05-10 01:38:05 +00:00
|
|
|
"contributing/catalog",
|
2026-04-25 06:04:10 +02:00
|
|
|
"contributing/release-channels",
|
2026-06-02 18:51:16 -04:00
|
|
|
"contributing/changelog-process",
|
refactor(studio): contexts, PropertyPanel split, duration fix, perf (#748)
* feat(studio): add manual DOM editing inspector (#466)
* fix: stabilize studio preview and runtime sync
* fix: pass selector through timeline thumbnails
* feat: add studio timeline editing
* fix: disambiguate timeline edit targets
* fix: stop timeline auto-scroll in fit mode
* feat: use percentage-based timeline zoom
* fix: sync timeline playhead on zoom changes
* fix: reset timeline scroll when returning to fit
* feat(studio): add manual DOM editing inspector
* docs: update studio manual dom editing guide
* feat(studio): add image asset picker for fills
* feat(studio): add inline image uploads for fills
* fix(studio): use real file input for image fill uploads
* fix(studio): restore toast plumbing after rebase
* fix(studio): explain in-app upload limitation
* fix(studio): reuse asset-tab upload pattern in fills
* feat(studio): refine manual design inspector
* fix(studio): polish manual design inspector
* fix(studio): keep color picker in viewport
* fix(studio): clarify color picker selection
* docs: update manual DOM editing guide
* fix(studio): keep gradient color picker open
* fix(studio): scope text color to text layers
* fix(studio): add agent fallback for immovable layers
* fix(studio): address manual editing review feedback
* fix(studio): make local font selection reliable
* fix(studio): improve dom picking and thumbnails
* fix(studio): copy absolute paths in agent prompts
* fix(studio): prevent timeline track cutoff
* fix: copy Studio agent prompts in Safari
* fix(studio): hold canvas movement from inspector
* feat(studio): add persistent undo redo (#537)
Studio manual editing and timeline editing mutate project files directly, but those edits had no reliable undo/redo path. Before releasing manual editing, users need a way to recover from visual property changes, source-editor saves, timeline moves/resizes/deletes, and timeline asset drops.
The history also needs to survive a page refresh. A refresh should not erase the only way back from a bad manual edit.
- Adds a persistent per-project edit-history model for file snapshots.
- Stores undo/redo stacks in IndexedDB so history survives Studio refreshes.
- Records source editor saves, manual DOM edits, and timeline mutations.
- Adds toolbar undo/redo buttons with standard keyboard shortcuts: `Cmd/Ctrl+Z`, `Cmd/Ctrl+Shift+Z`, and `Ctrl+Y`.
- Validates current file hashes before applying undo/redo so external file changes do not silently overwrite newer content.
- Keeps history available in memory if IndexedDB persistence fails during a session.
- Adds focused unit coverage for the pure history model, storage adapter, controller/hook behavior, and project-file save helper.
Studio previously treated every editor mutation as an immediate file write. Manual DOM editing, timeline updates, and source-editor saves each had separate write paths, so there was no common transaction boundary where Studio could capture the file contents before and after an edit.
Undo/redo needed to sit above those write paths as a file-level transaction system: capture changed files before saving, write the new contents, persist the history entry by project, then apply undo/redo only when the current file content still matches the expected snapshot.
- `bun --filter @hyperframes/studio test src/utils/editHistory.test.ts src/utils/editHistoryStorage.test.ts src/hooks/usePersistentEditHistory.test.ts src/utils/studioFileHistory.test.ts` -> 4 files pass, 15 tests pass
- `bun --filter @hyperframes/studio test` -> 26 files pass, 289 tests pass
- `bun --filter @hyperframes/studio typecheck`
- `bunx oxlint packages/studio/src/App.tsx packages/studio/src/icons/SystemIcons.tsx packages/studio/src/hooks/usePersistentEditHistory.ts packages/studio/src/hooks/usePersistentEditHistory.test.ts packages/studio/src/utils/editHistory.ts packages/studio/src/utils/editHistory.test.ts packages/studio/src/utils/editHistoryStorage.ts packages/studio/src/utils/editHistoryStorage.test.ts packages/studio/src/utils/studioFileHistory.ts packages/studio/src/utils/studioFileHistory.test.ts` -> 0 warnings, 0 errors
- `bunx oxfmt --check packages/studio/src/App.tsx packages/studio/src/icons/SystemIcons.tsx packages/studio/src/hooks/usePersistentEditHistory.ts packages/studio/src/hooks/usePersistentEditHistory.test.ts packages/studio/src/utils/editHistory.ts packages/studio/src/utils/editHistory.test.ts packages/studio/src/utils/editHistoryStorage.ts packages/studio/src/utils/editHistoryStorage.test.ts packages/studio/src/utils/studioFileHistory.ts packages/studio/src/utils/studioFileHistory.test.ts`
- `git diff --check`
- `bun run --filter @hyperframes/core build:hyperframes-runtime` before commit hook, because the clean worktree needed the ignored runtime-inline artifact for typecheck
- Lefthook pre-commit -> lint, format, typecheck pass
- Lefthook commit-msg -> commitlint pass
- Started Studio locally at `http://127.0.0.1:5190/#project/undo-redo-sample`.
- Used `agent-browser` to select a preview element in the Inspector and change `#hero-card` from `left: 220px` to `left: 260px`.
- Refreshed Studio and verified Undo stayed enabled.
- Clicked Undo and verified the project file returned to `left: 220px`; clicked Redo and verified the inline `left: 260px` returned.
- Used `agent-browser` to drag the `side-card` timeline clip, refreshed Studio, then verified Undo restored the previous timeline attributes and Redo reapplied the timeline move.
- Recorded the tested undo/redo flow with `agent-browser`: `qa-artifacts/studio-undo-redo-2026-04-28/studio-undo-redo-flow.webm`.
- Local screenshots and recordings are kept under `qa-artifacts/studio-undo-redo-2026-04-28/` and are intentionally not committed.
- The scratch Studio project used for browser proof is local-only under `packages/studio/data/projects/undo-redo-sample/` and is intentionally not committed.
- The PR intentionally excludes the earlier PRD/TDD planning notes under `docs/superpowers/`; those remain local-only per request.
* fix: align Studio capture with preview (#595)
Studio frame capture could fail for projects mounted outside the repo when the project id came from an encoded hash route. A project like `Notion Showcase` loaded as `#project/Notion%20Showcase`, but the capture URL encoded that already-encoded value again, producing `/api/projects/Notion%2520Showcase/...` and a 404.
While validating the fix by seeking through the preview, capture also diverged from the visible player for nested compositions because the thumbnail route sought raw timelines instead of the same player seek path used by Studio preview.
- Decodes project ids when reading Studio `#project/...` routes and centralizes project hash/API path construction.
- Keeps API URLs encoded exactly once, including project names with spaces, literal `%`, reserved characters, and unicode.
- Updates Studio thumbnail capture to prefer `window.__player.seek(t)` and only fall back to raw timeline seeking for standalone pages.
- Preserves explicit `t=0` thumbnail requests instead of falling back to `0.5` seconds.
- Adds preview-regression CI coverage for Studio routing, frame capture URL construction, thumbnail seeking, and core thumbnail seek parsing.
Studio treated the hash route segment as the canonical project id even when the browser had already percent-encoded it. `buildFrameCaptureUrl` then encoded that string again, so a decoded project directory name and the capture API path no longer matched.
The preview/capture mismatch was a separate seek-path issue: the visible Studio preview seeks through the HyperFrames player, which maps global time into nested composition time. The capture route bypassed that layer and paused all registered timelines at the same global time.
The zero-second capture case came from parsing `t` with a truthiness fallback, so `parseFloat("0") || 0.5` became `0.5`.
- `bun run --cwd packages/studio test -- vite.thumbnail.test.ts src/utils/projectRouting.test.ts src/utils/frameCapture.test.ts`
- `bun run --cwd packages/core test -- src/studio-api/routes/thumbnail.test.ts`
- `bunx oxfmt --check .github/workflows/preview-regression.yml packages/studio/vite.thumbnail.ts packages/studio/vite.thumbnail.test.ts packages/studio/vite.config.ts packages/studio/src/utils/projectRouting.ts packages/studio/src/utils/projectRouting.test.ts packages/studio/src/utils/frameCapture.ts packages/studio/src/App.tsx packages/core/src/studio-api/routes/thumbnail.ts packages/core/src/studio-api/routes/thumbnail.test.ts`
- `bunx oxlint .github/workflows/preview-regression.yml packages/studio/vite.thumbnail.ts packages/studio/vite.thumbnail.test.ts packages/studio/vite.config.ts packages/studio/src/utils/projectRouting.ts packages/studio/src/utils/projectRouting.test.ts packages/studio/src/utils/frameCapture.ts packages/studio/src/App.tsx packages/core/src/studio-api/routes/thumbnail.ts packages/core/src/studio-api/routes/thumbnail.test.ts`
- `bun run --cwd packages/studio typecheck`
- `bun run --cwd packages/core build:hyperframes-runtime`
- `bun run --cwd packages/core typecheck`
- `git diff --check`
Pre-commit also reran lint, format, and typecheck successfully for the committed files.
Using `agent-browser`, I mounted `/Users/miguel07code/Downloads/Notion Showcase` into Studio's project data and opened:
```text
http://127.0.0.1:5197/#project/Notion%20Showcase
```
Before the fix, Capture requested `/api/projects/Notion%2520Showcase/thumbnail/index.html?...` and Studio showed `Capture failed`.
After the fix, I sought the preview to `0s`, `2s`, `10s`, and `18s`, captured each frame, and compared the visible preview crop against the capture output. The capture URLs all used `Notion%20Showcase`, not `Notion%2520Showcase`, and no failure toast appeared.
Mean pixel diffs for preview vs capture were:
- `0s`: `0.0`
- `2s`: `0.8641`
- `10s`: `0.3496`
- `18s`: `0.2309`
The small non-zero diffs are raster/antialias-level differences after resizing the capture to the preview crop dimensions.
- Browser screenshots, comparison sheets, network logs, and the `agent-browser` recording are local-only under `qa-artifacts/capture-button/` and are not committed.
- The local Notion Showcase project mount is an ignored symlink under `packages/studio/data/projects/` and is not committed.
- Thumbnail cache versions were bumped so stale captures generated with the old seek behavior are not reused.
* feat: persist studio manual edits via manifest
* fix(studio): stabilize manual edit manifest rendering
* fix(studio): allow master canvas layer selection
* fix(studio): scale master edits in source coordinates
* fix(studio): reapply manual edits during playback
* fix(studio): keep rotation edit base stable
* feat(studio): highlight hovered canvas target
* fix(studio): drag hovered canvas targets immediately
* fix(studio): rotate manual edits around center
* fix(studio): keep rotate handle aligned while dragging
* fix(studio): allow small rotation adjustments
* fix(studio): match rotate handle size to resize handle
* fix(studio): connect rotate handle line to selection
* feat(studio): reset selected manual edits
* fix(studio): route inspector geometry through manual edits
* feat: add studio group repositioning
* fix: preserve studio group selections
* fix: seed additive studio selection groups
* fix: select studio groups on pointerdown
* fix: harden studio group overlay events
* fix: address studio manual edit review feedback
* fix: apply nested manual edits in drilled previews
* fix: commit drag offsets from gesture math
* fix: persist manual preview edits on refresh
* fix: harden manual edit refresh apply
* fix: share manual edit render runtime
* chore: release v0.5.0-alpha.15
* feat(core): add studio animation preview APIs
* feat(studio): add alpha editor layer inspector
* chore: release v0.6.0-alpha.1
* feat(studio): enable inspector panels by default
* fix(studio): keep motion panel opt-in
* chore: release v0.6.0-alpha.2
* feat: auto-open timeline clip layers
* feat: show composition loading in studio
* feat: disable Studio timeline while composition loads
* chore: ignore .claude directory
* chore: release v0.6.0-alpha.3
* feat(studio): simplify inspector selection ux
* fix(studio): keep notion preview playback moving
* fix(studio): handle raster inspector clicks
* fix(studio): stale selection, rotation control, design panel polish
Fixes and improvements based on power-user testing feedback:
1. Fix stale selection after style edits — handleDomStyleCommit now
calls refreshDomEditSelectionFromPreview after persisting, matching
every other commit handler. Without this, the PropertyPanel showed
frozen computedStyles after color/radius/shadow edits, making it
look like editing "didn't work." Also adds error handling around
the persist call.
2. Add rotation field to the Design panel Layout section — reads the
current rotation angle from the manual edit manifest and commits
via the existing handleDomRotationCommit handler.
3. Enable motion panel by default — STUDIO_MOTION_PANEL_ENABLED now
defaults to true so the Motion tab is discoverable without env vars.
4. Color controls only when element has color — fill color section now
only shows when the element has an explicit non-transparent
background-color. Text color shows only when the element has a
color style. Prevents showing color pickers on elements where
color edits have no visible effect.
5. Exclude canvas from selection — added "canvas" to
DOM_LAYER_IGNORED_TAGS so canvas elements are not selectable in the
preview or listed in the layer panel.
6. Multi-selection feedback — shows "N elements selected" with
guidance instead of the generic empty state when multiple elements
are selected.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): prevent browser launch timeout from crashing dev server
The shared Puppeteer browser pool in getSharedBrowser() could throw a
30s TimeoutError during launch. This error propagated as an uncaught
rejection and killed the vite process, even though generateThumbnail
had its own try/catch — the browser launch promise rejected outside
that scope. Now getSharedBrowser itself catches launch failures and
returns null, so thumbnails degrade gracefully instead of crashing.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): revert motion panel default to false
Motion panel stays opt-in via env var per product direction. Only
the Design panel is enabled by default.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): prevent read-only property crash in manual edit wrappers
The seek/play/applyAfter wrapper functions in manualEdits.ts crashed
with "Cannot set property X which has only a getter" when the player
or timeline objects define seek/play as getter-only properties. This
prevented ALL manual edits (position, rotation, size) from persisting
to disk — the error thrown during applyCurrentStudioManualEditsToPreview
aborted the save queue.
Wrapped all three property assignments in try/catch so wrapping
gracefully degrades when the target object is non-configurable.
Verified: position edit (X=42px) now persists to
.hyperframes/studio-manual-edits.json and survives page refresh.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix: alpha preview e2e fixes — exports, init templates, EPIPE crash
Three bugs found via automated e2e testing of the v0.6.0-alpha preview:
1. core: add missing package.json export specifiers for
studio-api/manual-edits-render-script and
studio-api/studio-motion-render-script — the alpha.3 npm publish
failed because the studio build could not resolve these sub-paths.
2. cli: fix init --example creating empty projects — tsup leaves empty
template directories in dist/ during the build, causing
existsSync(templateDir) to return true and skip the remote fetch
fallback. Now checks for index.html inside the dir instead.
3. engine: fix unhandled EPIPE crash in streaming encoder — ffmpeg
stdin/stdout had no error handlers, so a write after the ffmpeg
process exits throws an uncaught error that crashes the process.
Verified with 8 consecutive e2e iterations (424 test runs, 0 flaky).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): thumbnail crash, feature defaults, multi-select UX, fps selector
Power-user audit fixes for the alpha studio:
- vite.config.ts: wrap thumbnail generation in try/catch so Puppeteer
TimeoutError doesn't crash the entire vite dev server as an uncaught
rejection. Close the page on error to prevent browser session leaks.
- manualEditingAvailability.ts: enable motion panel and manual canvas
drag editing by default (were both false, undiscoverable without
knowing the env vars).
- PropertyPanel.tsx: show "N elements selected" feedback when multiple
elements are selected instead of the generic "Select an element"
empty state.
- RenderQueue.tsx + App.tsx: add FPS selector (24/30/60) to the render
export bar instead of hardcoding 30fps. Pass the user's choice
through to startRender.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* chore: release v0.6.0-alpha.4
* fix(runtime): update clock duration when root timeline is late-bound
Compositions with external sub-compositions (like apple-presentation
with 7 slides) load child compositions via fetch(). The root GSAP
timeline is only bound after all external compositions finish loading,
but the TransportClock duration was only set during initial setup.
When bindRootTimelineIfAvailable runs after the external compositions
load, it captures the root timeline but never updates the clock.
player.getDuration() continues returning 0, so the player's probe
interval never fires the 'ready' event, and the Studio shows "Loading
composition" indefinitely.
Now bindRootTimelineIfAvailable updates clock.setDuration when the
root timeline is late-bound. Guarded with try/catch for the early call
site where clock is not yet initialized (temporal dead zone).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): block element selection while composition is loading
Prevent users from selecting elements in the preview while the
composition is still loading (showing "Loading composition" overlay).
Selection and hover highlighting are suppressed until the player fires
the ready event.
Also reverts motion panel and manual drag editing defaults to false —
these were accidentally set to true during the PR #693 merge.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* chore: release v0.6.0-alpha.5
* chore: release v0.6.0-alpha.6
* fix(runtime): remove per-tick timeline.pause() that causes audio stutter
The seekRuntimeTimeline helper added timeline.pause() before every
totalTime() seek. During transport-driven playback, this runs 60 times
per second, causing GSAP to cascade pause events to media elements on
every frame. The result: audio plays/stops/plays/stops in a stutter
pattern.
The captured root timeline is already paused once in player.play() —
the TransportClock drives it via totalTime(t) which keeps it paused.
The extra per-tick pause() was redundant for the root timeline but
actively harmful for media sync.
Fix: restore the original inline seek for the captured timeline
(totalTime without pause), keep seekRuntimeTimeline with pause() only
for standalone child timelines where explicit pause control is needed.
Also fixes rebase artifact: missing PropertyPanel props in App.tsx.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* chore: release v0.6.0-alpha.7
* fix(studio): restore text field handlers lost in rebase
Restores handleDomAddTextField and handleDomRemoveTextField that were
dropped when resolving App.tsx conflicts during the main→next rebase.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* chore: release v0.6.0-alpha.8
* fix(runtime): comprehensive audio stutter fix
Three changes that together caused audio play/stop/play/stop stutter
during transport-driven playback:
1. seekRuntimeTimeline called timeline.pause() before every totalTime()
seek, 60x per second. GSAP cascades pause to media elements on every
frame. Fix: restore original inline seek for the captured timeline
(totalTime without pause). The timeline is already paused once in
player.play(). seekRuntimeTimeline with pause() remains only for
standalone child timelines.
2. player.play() removed the !tl guard, allowing play without a
captured timeline. But getSafeTimelineDurationSeconds(null) returns
0, so the clock has no duration → immediately reaches end → stops →
restarts. Fix: when no timeline provides duration, fall back to the
root composition element's data-duration attribute.
3. Audio source attachment added networkState guard that could cause
the clock to flicker between audio-source and monotonic timing
on transient media states. Fix: keep !rawEl.error guard (prevents
errored audio from freezing the clock) but drop the networkState
check.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(runtime): skip drift corrections on playing video elements
Seeking a playing video resets the browser's decoder pipeline, causing
a ~150ms freeze while it re-buffers. During that freeze the monotonic
clock advances, drift grows, and strict sync fires another seek —
creating a perpetual stutter loop (176 seek events / 8s observed on
the apple-presentation composition).
Skip strict and force drift corrections for playing video elements;
only hard sync (>0.5s catastrophic drift) warrants the decoder-reset
cost. Audio elements are unaffected and retain the full correction
tiers.
Also propagate the asset-loading overlay state to the timeline so
controls are disabled during "Preparing preview assets", matching the
existing behavior for the initial composition loading overlay.
* chore: release v0.6.0-alpha.9
* feat(studio): consolidate keyboard shortcuts into single handler
Move all window-level keyboard shortcuts from 4 separate files into
one `handleAppKeyDown` listener in App.tsx:
- Shift+T: toggle timeline (was App.tsx, separate useMountEffect)
- Cmd/Ctrl+Z: undo (was App.tsx, separate useEffect)
- Cmd/Ctrl+Shift+Z: redo (was App.tsx, separate useEffect)
- Cmd/Ctrl+1: sidebar Compositions tab (was LeftSidebar.tsx)
- Cmd/Ctrl+2: sidebar Assets tab (was LeftSidebar.tsx)
- Delete/Backspace: remove selected element (was Timeline.tsx)
LeftSidebar exposes a ref handle for tab switching. Timeline watches
selectedElement becoming null to clean up popover/range UI state.
History hotkey kept as named function for iframe forwarding.
Playback shortcuts (Space, J/K/L, arrows) and caption nudge remain
in their component hooks — tightly coupled to component state.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): sidebar tab overflow + hot-reload double-refresh
1. Sidebar tabs: use equal 1fr columns, shorter "Comps" label, truncate
on overflow, tighter padding. Fixes tabs clipping outside the rounded
pill at narrow sidebar widths.
2. Hot reload: set domEditSaveTimestampRef before every save-then-refresh
path (source editor, timeline move/resize/delete, asset drop). The
file-change watcher already checks this timestamp and suppresses
echoed events — but source editor saves and timeline operations
weren't setting it, causing a double refreshKey increment that could
leave the player in a non-playable state.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): delete key removes preview-selected elements
The consolidated keyboard handler only checked selectedElementId
(timeline clips). When a user selected a child element in the
preview via the inspector, selectedElementId was null because
the element didn't correspond to a top-level timeline clip, so
Delete/Backspace did nothing.
Add handleDomEditElementDelete that removes the element referenced
by the current domEditSelection via the remove-element mutation
API. The Delete key handler now falls through from timeline
selection to DOM edit selection.
* fix(studio): remove unused deleteInFlightRef from Timeline
Leftover from moving Delete handling to the consolidated
keyboard handler in App.tsx. Also suppress pre-existing
exhaustive-deps warning on the intentional every-render
selection-change watcher.
* fix(studio): forward all keyboard shortcuts to preview iframe
The consolidated handleAppKeyDown was only added to the parent
window. When focus was inside the preview iframe (after clicking
an element), keydown events didn't reach the parent, so Delete
and other shortcuts didn't fire.
Replace the per-function iframe forwarding (handleTimelineToggleHotkey
only) with the full app-level handler via a ref-stable wrapper.
All app shortcuts (Delete, Undo/Redo, Shift+T, Cmd+1/2) now work
from within the preview iframe.
* fix(core): search inside <template> content when removing elements
linkedom's document.querySelectorAll does not traverse <template>
content. Elements in template-based compositions (like .title-word,
.bullet-text) were invisible to the removal logic, so delete
returned changed: false and the element survived the reload.
Fall back to template.querySelectorAll when the document-level
query returns no matches. Uses template.querySelectorAll directly
(not template.content.querySelectorAll) because removing from
the content DocumentFragment doesn't update the serialized output.
* fix(studio): suppress loading overlay on hot-reload
Only show the composition loading overlay on the first iframe load.
Hot-reloads (source editor save, timeline edits, element delete)
no longer flash the full-screen loading state.
* fix(studio): reorder design panel, fix stroke height, rename Blending
- Move Text section to the top of the panel (before Layout)
- Remove Selection Colors section
- Rename "Blending" to "Transparency"
- Fix stroke Width/Style height mismatch by making SelectField
use inline label layout matching MetricField
* fix(studio): prevent panel scroll when wheel-adjusting metric inputs
React registers onWheel passively, so preventDefault had no effect
on the parent scroll container. Replace with a native wheel listener
(passive: false) that blocks both default scroll and propagation.
* chore: release v0.6.0-alpha.10
* chore: release v0.6.0-alpha.11
* fix(studio): clean next alpha inspector artifacts
* chore: release v0.6.0-alpha.12
* fix(studio,player,core): eliminate double audio and manifest polling loop (#722)
Three bugs that compound in Studio preview:
1. **Double audio on pause/resume**: syncRuntimeMedia played audio through
the HTML <audio> element while WebAudioTransport simultaneously played
the same source through AudioBufferSourceNode. Fixed by passing
webAudio.isActive() as outputMuted so HTML elements stay muted when
Web Audio owns playback. Also removed the priorMuted restore in
stopAll() which raced with the next play cycle.
2. **Manifest polling loop**: applyStudioManualEditsToPreview and
applyStudioMotionToPreview unconditionally fetched from disk on every
call, even without forceFromDisk. The runtime posts state messages
every frame via postMessage, triggering React re-renders that re-invoked
these functions ~60x/second. Fixed by returning early when no disk read
is requested, and using refs instead of callbacks in useEffect deps.
3. **Parent proxy double-play**: the player web component created parent-frame
audio proxies even when the runtime bridge was available, causing two
audio sources on autoplay-blocked promotion. Fixed by skipping proxy
creation when _hasRuntimeBridge returns true, and synchronously muting
iframe media on promotion to close the async race window.
Also fixes pre-existing ResolutionPreset type missing square variants.
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): improve font picker and text property controls (#736)
- Line height and letter-spacing: convert from free-text to select with presets
- Font style: remove oblique (browser falls back to italic), keep normal/italic
- Font weight: detect available weights via document.fonts.check(), add labels
- Font source: local fonts matching Google catalog tagged as Google
- Font list: balanced per-source caps prevent any source from being cut off
- Sort order: Google fonts rank before Local so curated fonts appear first
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): inspector visibility, undo/redo blinking, and preview caching
Inspector picks invisible elements when an ancestor has GSAP-set opacity: 0
because CSS opacity is not inherited — getComputedStyle on the child still
returns 1. Walk the ancestor chain in the picker, domEditing, and overlay
visibility checks to catch this.
Also:
- Containers with all-invisible children are no longer selectable
- Selection/hover overlay hides during playback and while loading
- Undo/redo no longer double-refreshes (echo suppression for all file writes)
- Undo/redo reloads iframe in-place instead of recreating the Player,
preserving shader transition cache
- Preview routes return ETag + Cache-Control headers; composition HTML uses
project signature for conditional 304, binary assets use mtime+size
- Loading overlay deferred 400ms so cached loads never flash it
* fix(studio): remove timeline inspector buttons, enable manual dragging
Remove the eye icon (inspector) and image icon (thumbnail toggle) from timeline
clips. The timeline layer inspector feature and all supporting code is removed.
Enable manual dragging in the preview by default. Add scrub-to-drag on X/Y/W/H
fields in the design panel. Hide the Radius section when the element has no
visible background. Fix pre-existing ResolutionPreset type for square presets.
* chore: release v0.6.0-alpha.13
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): add rotation field, inline element drag, fix manifest load regression (#743)
- Add rotation (R) field to geometry row (X, Y, W, H, R) in property panel.
Goes through manifest via handleDomRotationCommit, resettable with Reset Edits.
- Auto-promote display:inline elements to inline-block when dragged so
translate works on inline spans.
- Fix regression from polling fix: iframe load now passes readFromDiskFirst
to load manifest from disk, so Reset Edits finds existing entries.
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* refactor(studio): decompose App.tsx monolith (4297 → 567 lines) (#741)
* refactor(studio): decompose App.tsx from 4297 to 567 lines
Break the monolithic StudioApp component into focused modules:
Hooks (12 new):
- usePanelLayout: resizable/collapsible panel state
- useFileManager: file tree, CRUD, uploads, derived lists
- useManifestPersistence: manual edit + motion manifest save queue
- useTimelineEditing: clip move/resize/delete/drop handlers
- useDomEditSession: DOM selection, style/text commits, preview interaction
- useAppHotkeys: keyboard shortcuts, undo/redo, iframe hotkey sync
- useCaptionDetection: auto-detect caption compositions
- useRenderClipContent: timeline clip thumbnail rendering
- useConsoleErrorCapture: preview iframe console error capture
- useFrameCapture: frame capture download flow
- useLintModal: lint execution and modal state
- useCompositionDimensions: stage-size message listener
Components (6 new):
- AskAgentModal: agent prompt modal
- StudioHeader: toolbar with undo/redo, capture, inspector toggle
- StudioLeftSidebar: file tree + code editor (handles collapsed state)
- StudioPreviewArea: NLELayout + overlays + caption timeline
- StudioRightPanel: Design/Motion/Renders tab panel
- TimelineToolbar: zoom controls + timeline toggle
Utilities (4 new):
- studioHelpers: types, path helpers, DOM utilities
- studioPreviewHelpers: preview pointer/player interaction
- domEditHelpers: selection group algebra
- studioFontHelpers: font injection + @font-face management
Also removes dead timeline layer inspector code (eye icon, thumbnail
toggle, layer panel) that was disabled behind a feature flag.
* feat(studio): add Layer (z-index) field to design panel
Adds a scrub-enabled "Layer" field below the W/H inputs in the Layout
section. Available for all elements regardless of style editing
capability since z-index is fundamental to composition stacking order.
* docs: architecture spec for studio domain contexts, hook split, and file-size lint
* docs: implementation plan for studio contexts, hook split, and file-size lint
* refactor(studio): consolidate duplicate helpers in useDomEditSession
Remove ~370 lines of helper functions that were copied into the hook
instead of imported. All removed functions already exist in the
canonical utility files (studioHelpers, studioFontHelpers,
studioPreviewHelpers, domEditHelpers). Also removes the duplicate
local type definitions for RightPanelTab, AgentModalAnchorPoint, and
PreviewLocalPointer, and drops now-unused imports (googleFontStylesheetUrl,
importedFontFaceCss, resolveVisualDomEditSelectionTarget, DomEditViewport).
Temporarily excludes useDomEditSession.ts from the 500 LOC file-size
check until Tasks 3-5 split it into focused hooks.
* refactor(studio): extract useDomSelection from useDomEditSession
* refactor(studio): extract useAskAgentModal from useDomEditSession
* refactor(studio): extract usePreviewInteraction from useDomEditSession
* refactor(studio): extract useDomEditCommits, useDomEditSession now thin orchestrator
Split the 897-line useDomEditSession into focused hooks:
- useDomEditCommits (439 LOC): manifest commits (path offset, box size,
rotation, manual edits reset, motion), persist operations, element delete,
font asset resolution
- useDomEditTextCommits (329 LOC): style/text/text-field commits
- useDomEditSession (339 LOC): thin orchestrator wiring selection, agent
modal, preview interaction, and commit hooks
All files now under 500 LOC limit. Removed the temporary lefthook
filesize exclusion for useDomEditSession.
* feat(studio): add 4 domain contexts (PanelLayout, FileManager, DomEdit, Studio)
Create context providers that wrap hook return values for prop-drilling
elimination. Each context destructures and reconstructs the value inside
useMemo so exhaustive-deps is satisfied and re-renders are minimized.
Not yet wired into App.tsx — that comes in a follow-up.
* refactor(studio): wire domain contexts, eliminate prop drilling in 4 components
Wire StudioProvider, PanelLayoutProvider, FileManagerProvider, and
DomEditProvider in App.tsx. Migrate StudioHeader, StudioLeftSidebar,
StudioPreviewArea, and StudioRightPanel to consume contexts instead
of props.
Prop counts reduced:
- StudioHeader: 13 -> 6
- StudioLeftSidebar: 19 -> 4
- StudioPreviewArea: 37 -> 11
- StudioRightPanel: 39 -> 3
Net: -118 lines, 108 props removed from call sites.
* chore: upgrade to React 19
Upgrade react and react-dom from 18.3 to 19.2.6 across the workspace.
Add resolutions/overrides in root package.json to prevent peer
dependency pins (e.g. @phosphor-icons/react) from pulling React 18.
Regenerate bun.lock.
This enables the React 19 context syntax (<Context value={...}>)
used by the new domain contexts.
* fix(studio): refresh preview after z-index change so stacking updates visually
* fix(studio): remove duplicate duration override causing oscillation
The timeline message handler set the duration twice: once via
processTimelineMessage and once via a raw durationInFrames override.
When drilled into a sub-composition, these could disagree, causing
the duration to oscillate after element deletion.
* fix(studio): use in-place iframe reload after clip delete, remove confirm dialogs
Two changes to fix duration oscillation after deleting a timeline clip:
1. Replace setRefreshKey (full Player remount) with in-place
iframe.contentWindow.location.reload() after deleting a clip.
The full remount triggered a chaotic re-probing cycle with multiple
duration sources (adapter, manifest, postMessage) fighting each
other, causing the timeline to oscillate between durations.
In-place reload preserves the Player web component and its state.
2. Remove window.confirm dialogs from both timeline clip delete and
DOM element delete. Undo is available so the confirmation adds
friction without value.
* chore: gitignore docs/superpowers
* feat(studio): add favicon
* perf(studio): skip no-op state updates in timeline sync
syncTimelineElements was called 60+ times per page load, each time
triggering setElements/setDuration/setTimelineReady even when nothing
changed. This caused massive re-render churn and memory usage.
Add early-return guards to skip updates when values haven't changed.
Also fixes the duration oscillation after element delete.
* refactor(studio): split PropertyPanel.tsx (3126 LOC) into 8 focused modules
The monolithic PropertyPanel.tsx exceeded the 500 LOC filesize limit.
Split into cohesive modules by responsibility:
- propertyPanelHelpers.ts (401) — pure utility functions, shared types/constants
- propertyPanelPrimitives.tsx (357) — CommitField, MetricField, DetailField,
SliderControl, SegmentedControl, SelectField, Section
- propertyPanelColor.tsx (371) — ColorField, ColorSlider
- propertyPanelFill.tsx (421) — ImageFillField, GradientField, asset path helpers
- propertyPanelFont.tsx (455) — FontFamilyField + font catalog helpers
- propertyPanelSections.tsx (453) — TextSection, TextFieldEditor, text controls
- propertyPanelStyleSections.tsx (411) — StyleSections (stroke, effects, clip, fill)
- PropertyPanel.tsx (347) — main component, LayerTree, re-exports for consumers
All re-exports from PropertyPanel.tsx preserved for backwards compatibility.
No behavioral changes — pure structural split.
* fix(studio): use in-place iframe reload for all timeline operations
Replace setRefreshKey with in-place iframe reload for move, resize,
and asset drop — matching delete which was already fixed. Prevents
the Player remount probe cycle that causes duration oscillation.
* perf(studio): replace 5s polling loop with event-driven adapter init
The Player's onIframeLoad used a setInterval polling loop (25 attempts
× 200ms = 5 seconds) to detect when the runtime's __player/__timeline
globals appeared. Each poll that missed triggered wasted work, and
multiple duration sources fighting during the probe cycle caused
oscillation bugs.
Replace with event-driven initialization:
1. Fast path: try initializeAdapter() immediately (works for in-place
reloads where the adapter is already present)
2. If not ready, listen for the runtime's "state"/"timeline" postMessage
signals and initialize on the first one
3. Single 5s timeout as safety net (replaces 25 interval ticks)
This eliminates the polling overhead, reduces setDuration/setElements
calls to exactly 1 per load, and makes the Player responsive within
one frame of the runtime being ready instead of up to 200ms later.
* fix(studio): prevent duration oscillation after element delete
Two fixes for the duration display oscillating between sub-composition
and master durations after deleting an element in the preview:
1. Clear store elements before iframe reload in handleDomEditElementDelete.
Without this, stale pre-delete elements remain in the store and cause
mergeTimelineElementsPreservingDowngrades to alternate between REPLACE
and PRESERVE modes as the element count fluctuates.
2. Add 500ms cooldown on enrichMissingCompositions after timeline messages.
The "state" handler was calling enrichMissingCompositions every ~80ms,
which added extra elements from GSAP timelines. These fought with the
authoritative element list from "timeline" messages (~333ms), creating
a feedback loop where element count oscillated and triggered alternating
merge strategies with different durations.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): single reloadPreview as source of truth for preview refresh
Create reloadPreview() in App.tsx that encapsulates the correct
behavior (in-place iframe reload with setRefreshKey fallback). Pass it
as the sole refresh mechanism to hooks, removing direct setRefreshKey
access from useTimelineEditing and useDomEditCommits.
---------
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* refactor(studio): decompose App.tsx from 4297 to 567 lines
Break the monolithic StudioApp component into focused modules:
Hooks (12 new):
- usePanelLayout: resizable/collapsible panel state
- useFileManager: file tree, CRUD, uploads, derived lists
- useManifestPersistence: manual edit + motion manifest save queue
- useTimelineEditing: clip move/resize/delete/drop handlers
- useDomEditSession: DOM selection, style/text commits, preview interaction
- useAppHotkeys: keyboard shortcuts, undo/redo, iframe hotkey sync
- useCaptionDetection: auto-detect caption compositions
- useRenderClipContent: timeline clip thumbnail rendering
- useConsoleErrorCapture: preview iframe console error capture
- useFrameCapture: frame capture download flow
- useLintModal: lint execution and modal state
- useCompositionDimensions: stage-size message listener
Components (6 new):
- AskAgentModal: agent prompt modal
- StudioHeader: toolbar with undo/redo, capture, inspector toggle
- StudioLeftSidebar: file tree + code editor (handles collapsed state)
- StudioPreviewArea: NLELayout + overlays + caption timeline
- StudioRightPanel: Design/Motion/Renders tab panel
- TimelineToolbar: zoom controls + timeline toggle
Utilities (4 new):
- studioHelpers: types, path helpers, DOM utilities
- studioPreviewHelpers: preview pointer/player interaction
- domEditHelpers: selection group algebra
- studioFontHelpers: font injection + @font-face management
Also removes dead timeline layer inspector code (eye icon, thumbnail
toggle, layer panel) that was disabled behind a feature flag.
* docs: architecture spec for studio domain contexts, hook split, and file-size lint
* docs: implementation plan for studio contexts, hook split, and file-size lint
* refactor(studio): consolidate duplicate helpers in useDomEditSession
Remove ~370 lines of helper functions that were copied into the hook
instead of imported. All removed functions already exist in the
canonical utility files (studioHelpers, studioFontHelpers,
studioPreviewHelpers, domEditHelpers). Also removes the duplicate
local type definitions for RightPanelTab, AgentModalAnchorPoint, and
PreviewLocalPointer, and drops now-unused imports (googleFontStylesheetUrl,
importedFontFaceCss, resolveVisualDomEditSelectionTarget, DomEditViewport).
Temporarily excludes useDomEditSession.ts from the 500 LOC file-size
check until Tasks 3-5 split it into focused hooks.
* refactor(studio): extract useDomSelection from useDomEditSession
* refactor(studio): extract useAskAgentModal from useDomEditSession
* refactor(studio): extract usePreviewInteraction from useDomEditSession
* refactor(studio): extract useDomEditCommits, useDomEditSession now thin orchestrator
Split the 897-line useDomEditSession into focused hooks:
- useDomEditCommits (439 LOC): manifest commits (path offset, box size,
rotation, manual edits reset, motion), persist operations, element delete,
font asset resolution
- useDomEditTextCommits (329 LOC): style/text/text-field commits
- useDomEditSession (339 LOC): thin orchestrator wiring selection, agent
modal, preview interaction, and commit hooks
All files now under 500 LOC limit. Removed the temporary lefthook
filesize exclusion for useDomEditSession.
* refactor(studio): wire domain contexts, eliminate prop drilling in 4 components
Wire StudioProvider, PanelLayoutProvider, FileManagerProvider, and
DomEditProvider in App.tsx. Migrate StudioHeader, StudioLeftSidebar,
StudioPreviewArea, and StudioRightPanel to consume contexts instead
of props.
Prop counts reduced:
- StudioHeader: 13 -> 6
- StudioLeftSidebar: 19 -> 4
- StudioPreviewArea: 37 -> 11
- StudioRightPanel: 39 -> 3
Net: -118 lines, 108 props removed from call sites.
* fix(studio): refresh preview after z-index change so stacking updates visually
* fix(studio): remove duplicate duration override causing oscillation
The timeline message handler set the duration twice: once via
processTimelineMessage and once via a raw durationInFrames override.
When drilled into a sub-composition, these could disagree, causing
the duration to oscillate after element deletion.
* fix(studio): use in-place iframe reload after clip delete, remove confirm dialogs
Two changes to fix duration oscillation after deleting a timeline clip:
1. Replace setRefreshKey (full Player remount) with in-place
iframe.contentWindow.location.reload() after deleting a clip.
The full remount triggered a chaotic re-probing cycle with multiple
duration sources (adapter, manifest, postMessage) fighting each
other, causing the timeline to oscillate between durations.
In-place reload preserves the Player web component and its state.
2. Remove window.confirm dialogs from both timeline clip delete and
DOM element delete. Undo is available so the confirmation adds
friction without value.
* chore: gitignore docs/superpowers
* perf(studio): skip no-op state updates in timeline sync
syncTimelineElements was called 60+ times per page load, each time
triggering setElements/setDuration/setTimelineReady even when nothing
changed. This caused massive re-render churn and memory usage.
Add early-return guards to skip updates when values haven't changed.
Also fixes the duration oscillation after element delete.
* refactor(studio): split PropertyPanel.tsx (3126 LOC) into 8 focused modules
The monolithic PropertyPanel.tsx exceeded the 500 LOC filesize limit.
Split into cohesive modules by responsibility:
- propertyPanelHelpers.ts (401) — pure utility functions, shared types/constants
- propertyPanelPrimitives.tsx (357) — CommitField, MetricField, DetailField,
SliderControl, SegmentedControl, SelectField, Section
- propertyPanelColor.tsx (371) — ColorField, ColorSlider
- propertyPanelFill.tsx (421) — ImageFillField, GradientField, asset path helpers
- propertyPanelFont.tsx (455) — FontFamilyField + font catalog helpers
- propertyPanelSections.tsx (453) — TextSection, TextFieldEditor, text controls
- propertyPanelStyleSections.tsx (411) — StyleSections (stroke, effects, clip, fill)
- PropertyPanel.tsx (347) — main component, LayerTree, re-exports for consumers
All re-exports from PropertyPanel.tsx preserved for backwards compatibility.
No behavioral changes — pure structural split.
* fix(studio): use in-place iframe reload for all timeline operations
Replace setRefreshKey with in-place iframe reload for move, resize,
and asset drop — matching delete which was already fixed. Prevents
the Player remount probe cycle that causes duration oscillation.
* perf(studio): replace 5s polling loop with event-driven adapter init
The Player's onIframeLoad used a setInterval polling loop (25 attempts
× 200ms = 5 seconds) to detect when the runtime's __player/__timeline
globals appeared. Each poll that missed triggered wasted work, and
multiple duration sources fighting during the probe cycle caused
oscillation bugs.
Replace with event-driven initialization:
1. Fast path: try initializeAdapter() immediately (works for in-place
reloads where the adapter is already present)
2. If not ready, listen for the runtime's "state"/"timeline" postMessage
signals and initialize on the first one
3. Single 5s timeout as safety net (replaces 25 interval ticks)
This eliminates the polling overhead, reduces setDuration/setElements
calls to exactly 1 per load, and makes the Player responsive within
one frame of the runtime being ready instead of up to 200ms later.
* fix(studio): prevent duration oscillation after element delete
Two fixes for the duration display oscillating between sub-composition
and master durations after deleting an element in the preview:
1. Clear store elements before iframe reload in handleDomEditElementDelete.
Without this, stale pre-delete elements remain in the store and cause
mergeTimelineElementsPreservingDowngrades to alternate between REPLACE
and PRESERVE modes as the element count fluctuates.
2. Add 500ms cooldown on enrichMissingCompositions after timeline messages.
The "state" handler was calling enrichMissingCompositions every ~80ms,
which added extra elements from GSAP timelines. These fought with the
authoritative element list from "timeline" messages (~333ms), creating
a feedback loop where element count oscillated and triggered alternating
merge strategies with different durations.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(studio): single reloadPreview as source of truth for preview refresh
Create reloadPreview() in App.tsx that encapsulates the correct
behavior (in-place iframe reload with setRefreshKey fallback). Pass it
as the sole refresh mechanism to hooks, removing direct setRefreshKey
access from useTimelineEditing and useDomEditCommits.
* fix: resolve lint errors from rebase (unused imports, duplicate declarations)
* fix: prefix unused probeResult variable
* fix: restore renderOrchestrator.ts from origin/next (rebase conflict artifact)
* fix: resolve rebase conflicts by using main's producer and next's studio/player
* fix: restore rebase-conflicted files from origin/next
* fix: use 'load' instead of 'networkidle0' for Puppeteer waitUntil (type compatibility)
* fix: restore webAudioTransport.ts from main (test compatibility)
---------
Co-authored-by: Vance Ingalls <vance@heygen.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-05-12 20:18:52 +02:00
|
|
|
"contributing/testing-local-changes",
|
feat(cli): attach canary cohort to telemetry, harden canary tests, document
Follow-up to the canary primitive.
Telemetry: every event now carries a `canaries` property listing the cohorts
the install is enrolled in, attached in `trackEvent` so it lands on ALL
events rather than renders only — a staged rollout is only as useful as the
ability to split any metric by cohort. Resolved after the shouldTrack guard,
so opted-out installs never pay for it, and omitted entirely (not null or "")
when the install is in no canary, since PostHog treats those as real values.
Test hardening, after validating the shipped code against 60k synthetic and
101 real fleet install ids:
- Pin FNV-1a against canonical vectors, AND assert the shipped canaryBucket
actually uses that hash. Without the second assertion the first is
tautological — it would only prove the test's own copy is correct while
canary.ts drifted to a different hash, silently reshuffling every live
cohort. Fault-injection confirms only this assertion catches a hash change;
the distribution tests stay green because a perturbed hash is still
well-distributed.
- Tighten the share test from a 0.6x-1.4x band to +/-1 percentage point.
Measured error was 0.16pp at n=60k, so the old band would have passed a
badly skewed hash.
- Add chi-square uniformity across all 100 buckets (chi2 89.0 vs 148.2
critical at p=0.001). A lumpy hash yields roughly the right total share
while overloading some buckets, so the share test alone cannot catch it.
- Assert N concurrent canaries enrol binomially rather than in lockstep:
8 canaries at 10% put ~43% of installs in none and zero in all eight,
matching binomial(8, 0.1). Correlated slices would put ~10% in all eight.
Also verified 88,443 of 88,448 fleet install ids are well-formed UUIDs; the
5 that are not fail closed, which is the intended direction.
Docs: docs/contributing/canary-rollouts.mdx, registered in docs.json (an
unregistered page is invisible in the nav).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-07-28 06:00:37 -07:00
|
|
|
"contributing/canary-rollouts",
|
2026-05-01 22:56:32 +00:00
|
|
|
"community/adopters"
|
|
|
|
|
]
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
"footer": {
|
|
|
|
|
"socials": {
|
docs: add the Studio section, workflow guides, and section hubs
Adds the pages the rebuilt navigation is organised around, and moves the sidebar
onto that structure. Every entry points at a file that exists after this commit;
nothing is rewritten or removed yet, and no redirect is claimed yet.
- Studio (13 pages) — the editor had no section of its own
- One guide per creation workflow, matching the shipped agent skills
- Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help,
Go further, Product updates, 30 Days of HyperFrames
Pages a later commit retires drop out of the sidebar here but still exist and
still resolve, so the site stays navigable at this commit.
Incidentally fixes a link to /concepts from the Lambda migration guide that is
broken on main today — the destination did not exist.
2026-08-03 16:40:22 -07:00
|
|
|
"github": "https://github.com/heygen-com/hyperframes",
|
|
|
|
|
"x": "https://x.com/HeyGen",
|
|
|
|
|
"instagram": "https://www.instagram.com/heygen_official/"
|
|
|
|
|
},
|
|
|
|
|
"links": [
|
|
|
|
|
{
|
|
|
|
|
"header": "Explore",
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"label": "Introduction",
|
|
|
|
|
"href": "/introduction"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Make your first video",
|
|
|
|
|
"href": "/quickstart"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Examples",
|
|
|
|
|
"href": "/examples"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"header": "Build",
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"label": "Studio",
|
|
|
|
|
"href": "/studio"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Catalog",
|
|
|
|
|
"href": "/catalog"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Developers",
|
|
|
|
|
"href": "/developers/overview"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"header": "Resources",
|
|
|
|
|
"items": [
|
|
|
|
|
{
|
|
|
|
|
"label": "Product updates",
|
|
|
|
|
"href": "/product-updates"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "Playground",
|
|
|
|
|
"href": "https://www.hyperframes.dev/"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"label": "GitHub",
|
|
|
|
|
"href": "https://github.com/heygen-com/hyperframes"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
"navbar": {
|
|
|
|
|
"links": [
|
|
|
|
|
{
|
|
|
|
|
"type": "github",
|
|
|
|
|
"href": "https://github.com/heygen-com/hyperframes"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"primary": {
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "Playground",
|
|
|
|
|
"href": "https://www.hyperframes.dev/"
|
docs: add Mintlify documentation site
Set up /docs directory with docs.json config, HeyGen branding (logo, favicon,
#7559FF purple), and 18 MDX pages covering:
- Getting started (introduction, quickstart)
- Concepts (compositions, data attributes, frame adapters, determinism)
- Guides (GSAP animation, templates, rendering, common mistakes, troubleshooting)
- Package docs (core, engine, producer, studio, CLI)
- Reference (HTML schema) and contributing guide
Content adapted from existing repo docs (core/docs/, cli/src/docs/, README).
Validated with `mint validate` and `mint broken-links`.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 22:39:08 +00:00
|
|
|
}
|
2026-07-08 23:01:47 -07:00
|
|
|
},
|
|
|
|
|
"redirects": [
|
2026-08-03 16:40:41 -07:00
|
|
|
{
|
|
|
|
|
"source": "/guides",
|
|
|
|
|
"destination": "/introduction"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/showcase",
|
|
|
|
|
"destination": "/examples"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/launch-videos",
|
|
|
|
|
"destination": "/examples"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/claude-design",
|
|
|
|
|
"destination": "/guides/design-tools"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/open-design",
|
|
|
|
|
"destination": "/guides/design-tools"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/common-mistakes",
|
|
|
|
|
"destination": "/guides/troubleshooting"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/create-with-agent",
|
|
|
|
|
"destination": "/workflows"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/choose-your-path",
|
|
|
|
|
"destination": "/workflows"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/help",
|
|
|
|
|
"destination": "/help"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/project-tour",
|
|
|
|
|
"destination": "/concepts"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/media-overlays",
|
|
|
|
|
"destination": "/catalog"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/common-questions",
|
|
|
|
|
"destination": "/help"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/contributing/studio-manual-dom-editing",
|
|
|
|
|
"destination": "/studio/canvas"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/video-editor-cheatsheet",
|
|
|
|
|
"destination": "/studio/shortcuts"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/timeline-editing",
|
|
|
|
|
"destination": "/studio/timeline"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/website-to-video",
|
|
|
|
|
"destination": "/guides/product-launch-video"
|
|
|
|
|
},
|
2026-07-08 23:01:47 -07:00
|
|
|
{
|
|
|
|
|
"source": "/guides/prompting",
|
2026-07-30 04:54:27 -07:00
|
|
|
"destination": "/prompting/overview",
|
|
|
|
|
"permanent": true
|
2026-08-03 16:40:41 -07:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/pipeline",
|
fix(docs): keep the changelog and weekly archive reachable
Rames' review on #2978. Two pages left the sidebar without a redirect and
without being deleted, so they survived only as direct URLs: `docs/changelog.mdx`
and `docs/weekly-updates.mdx`.
Not deliberate, and the stack says so — #2979 upgrades `weekly-updates.mdx`,
importing DocsVideo and converting four raw <video> tags. You do not invest in
a page you meant to retire, and it carries `rss: true`, so it is a subscribable
feed. `product-updates.mdx`, which this stack adds to both the nav and the
footer, links to `/changelog` three times and `/weekly-updates` once. One of
those is advice to read the release archive before upgrading a production
workflow.
Both are back in the Explore group next to Product updates, which is where a
reader looking for "what changed" would go.
Worth naming why the verification missed it: the checker walks navigation → file,
which is why it correctly reported zero dangling entries. The file → navigation
direction — a page that exists, is not in the sidebar, and has no redirect — was
never checked, and that is exactly where these two sat.
`--check-redirects` on the existing `mint broken-links` step closes the adjacent
gap: it resolves every redirect destination, so a future restructure cannot
leave a redirect pointing at a page it removed. It does not catch the orphan
case above.
Also retargets `/guides/pipeline`. It pointed at `/concepts`, which explains how
a project is put together; the retired page was a seven-step process. `/workflows`
is the closer intent. The old step 3, "Strategy & Messaging", has no successor
anywhere in the docs — worth deciding deliberately rather than routing around.
2026-08-03 19:48:14 -07:00
|
|
|
"destination": "/workflows",
|
2026-08-03 16:40:41 -07:00
|
|
|
"permanent": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/quality-checklist",
|
|
|
|
|
"destination": "/guides/export-and-share",
|
|
|
|
|
"permanent": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/publish-and-share",
|
|
|
|
|
"destination": "/guides/export-and-share",
|
|
|
|
|
"permanent": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/antigravity",
|
|
|
|
|
"destination": "/guides/skills",
|
|
|
|
|
"permanent": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/copilot-cli",
|
|
|
|
|
"destination": "/guides/skills",
|
|
|
|
|
"permanent": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/studio/tour",
|
|
|
|
|
"destination": "/studio",
|
|
|
|
|
"permanent": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/studio/layers",
|
|
|
|
|
"destination": "/studio/canvas",
|
|
|
|
|
"permanent": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/studio/design",
|
|
|
|
|
"destination": "/studio/canvas",
|
|
|
|
|
"permanent": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/keyframes",
|
|
|
|
|
"destination": "/studio/animation",
|
|
|
|
|
"permanent": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/studio/lint-and-agent",
|
|
|
|
|
"destination": "/studio/source",
|
|
|
|
|
"permanent": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/guides/transcribe-and-caption",
|
|
|
|
|
"destination": "/guides/voice-and-audio",
|
|
|
|
|
"permanent": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "/sdk/overview",
|
|
|
|
|
"destination": "/sdk/quickstart",
|
|
|
|
|
"permanent": true
|
2026-07-08 23:01:47 -07:00
|
|
|
}
|
|
|
|
|
]
|
2026-07-30 04:54:27 -07:00
|
|
|
}
|