From 1e11608d443d0cadeb64b5b005d72763f1a6dccd Mon Sep 17 00:00:00 2001 From: James Date: Tue, 25 Aug 2026 05:33:50 +0000 Subject: [PATCH] fix: expose promoted template media slots --- docs/catalog/blocks/ai-chat-reveal.mdx | 27 +- docs/catalog/blocks/chatgpt-exchange.mdx | 98 ++-- docs/catalog/blocks/claude-exchange.mdx | 98 +++- .../blocks/heygen-avatar-promo-card.mdx | 114 ++++- docs/catalog/blocks/message-thread-reveal.mdx | 422 ++++++++++++++++-- docs/catalog/blocks/notes-reveal.mdx | 2 +- docs/catalog/blocks/notification-cascade.mdx | 27 +- docs/catalog/blocks/share-sheet-carousel.mdx | 117 ++++- docs/catalog/blocks/slack-notification-ad.mdx | 111 ++++- docs/public/catalog-index.json | 3 +- .../cli/src/registry/registryBlocks.test.ts | 22 +- registry/blocks/ai-chat-reveal/TEMPLATE.md | 3 +- .../blocks/ai-chat-reveal/ai-chat-reveal.html | 10 +- .../blocks/ai-chat-reveal/registry-item.json | 8 + .../registry-item.json | 2 +- .../blocks/message-thread-reveal/TEMPLATE.md | 10 +- .../message-thread-reveal.html | 200 ++++++++- .../message-thread-reveal/registry-item.json | 128 ++++++ .../blocks/notification-cascade/TEMPLATE.md | 3 +- .../notification-cascade.html | 10 +- .../notification-cascade/registry-item.json | 8 + .../blocks/share-sheet-carousel/TEMPLATE.md | 4 +- .../share-sheet-carousel/registry-item.json | 40 ++ .../share-sheet-carousel.html | 53 ++- registry/catalog-artifact/local-vectors.bin | Bin 571392 -> 571392 bytes registry/catalog-artifact/local-vectors.json | 2 +- registry/registry.json | 2 +- 27 files changed, 1336 insertions(+), 188 deletions(-) diff --git a/docs/catalog/blocks/ai-chat-reveal.mdx b/docs/catalog/blocks/ai-chat-reveal.mdx index 00630c40c5..a740ac3a0b 100644 --- a/docs/catalog/blocks/ai-chat-reveal.mdx +++ b/docs/catalog/blocks/ai-chat-reveal.mdx @@ -10,7 +10,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; previewSrc="/public/catalog/blocks/ai-chat-reveal.json" compositionId="ai-chat-reveal" compositionSrc="compositions/ai-chat-reveal.html" - variables={[{"id":"botName","type":"string","role":"content","label":"Assistant name","description":"Title in the chat header.","default":"Assistant"},{"id":"userMessage","type":"string","role":"content","label":"User message","description":"The question typed on the keyboard and sent. Around 40 characters keeps the measured pacing.","default":"How do I turn my HTML into real video?"},{"id":"answer1","type":"string","role":"content","label":"Answer paragraph 1","description":"First streamed paragraph.","default":"You do not need an editor. HyperFrames renders the HTML you already write into deterministic, pixel-perfect video."},{"id":"answer2","type":"string","role":"content","label":"Answer paragraph 2","description":"Short second beat.","default":"It is markup, not magic."},{"id":"answer3","type":"string","role":"content","label":"Answer paragraph 3","description":"Lead-in to the list.","default":"What you get out of the box:"},{"id":"bullet1","type":"string","role":"content","label":"Bullet 1","description":"First list item.","default":"A catalog of motion primitives you install and own"},{"id":"bullet2","type":"string","role":"content","label":"Bullet 2","description":"Second list item.","default":"GSAP timelines that seek to any frame"},{"id":"bullet3","type":"string","role":"content","label":"Bullet 3","description":"Third list item.","default":"4K renders from a single CLI command"},{"id":"ecHeadline","type":"string","role":"content","label":"End-card headline","description":"Closing card headline. A | breaks the line.","default":"It's not magic.|It's HTML."},{"id":"ecSub","type":"string","role":"content","label":"End-card subline","description":"Supporting sentence on the closing card.","default":"Open-source video rendering — write HTML, ship pixel-perfect video."},{"id":"ecCta","type":"string","role":"content","label":"End-card CTA","description":"Label on the closing card button.","default":"Try HyperFrames"},{"id":"ecFooter","type":"string","role":"content","label":"End-card footer","description":"Letter-spaced line at the very bottom.","default":"HYPERFRAMES.HEYGEN.COM"}]} + variables={[{"id":"botName","type":"string","role":"content","label":"Assistant name","description":"Title in the chat header.","default":"Assistant"},{"id":"userMessage","type":"string","role":"content","label":"User message","description":"The question typed on the keyboard and sent. Around 40 characters keeps the measured pacing.","default":"How do I turn my HTML into real video?"},{"id":"answer1","type":"string","role":"content","label":"Answer paragraph 1","description":"First streamed paragraph.","default":"You do not need an editor. HyperFrames renders the HTML you already write into deterministic, pixel-perfect video."},{"id":"answer2","type":"string","role":"content","label":"Answer paragraph 2","description":"Short second beat.","default":"It is markup, not magic."},{"id":"answer3","type":"string","role":"content","label":"Answer paragraph 3","description":"Lead-in to the list.","default":"What you get out of the box:"},{"id":"bullet1","type":"string","role":"content","label":"Bullet 1","description":"First list item.","default":"A catalog of motion primitives you install and own"},{"id":"bullet2","type":"string","role":"content","label":"Bullet 2","description":"Second list item.","default":"GSAP timelines that seek to any frame"},{"id":"bullet3","type":"string","role":"content","label":"Bullet 3","description":"Third list item.","default":"4K renders from a single CLI command"},{"id":"ecHeadline","type":"string","role":"content","label":"End-card headline","description":"Closing card headline. A | breaks the line.","default":"It's not magic.|It's HTML."},{"id":"ecSub","type":"string","role":"content","label":"End-card subline","description":"Supporting sentence on the closing card.","default":"Open-source video rendering — write HTML, ship pixel-perfect video."},{"id":"ecCta","type":"string","role":"content","label":"End-card CTA","description":"Label on the closing card button.","default":"Try HyperFrames"},{"id":"ecFooter","type":"string","role":"content","label":"End-card footer","description":"Letter-spaced line at the very bottom.","default":"HYPERFRAMES.HEYGEN.COM"},{"id":"brandLogo","type":"image","role":"content","label":"Brand logo","description":"Transparent logo in the closing-card header.","default":"assets/hyperframes-logo-white.svg"}]} > ```html ai-chat-reveal.html @@ -29,7 +29,8 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; { "id": "ecHeadline", "type": "string", "role": "content", "label": "End-card headline", "description": "Closing card headline. A | breaks the line.", "default": "It's not magic.|It's HTML." }, { "id": "ecSub", "type": "string", "role": "content", "label": "End-card subline", "description": "Supporting sentence on the closing card.", "default": "Open-source video rendering — write HTML, ship pixel-perfect video." }, { "id": "ecCta", "type": "string", "role": "content", "label": "End-card CTA", "description": "Label on the closing card button.", "default": "Try HyperFrames" }, - { "id": "ecFooter", "type": "string", "role": "content", "label": "End-card footer", "description": "Letter-spaced line at the very bottom.", "default": "HYPERFRAMES.HEYGEN.COM" } + { "id": "ecFooter", "type": "string", "role": "content", "label": "End-card footer", "description": "Letter-spaced line at the very bottom.", "default": "HYPERFRAMES.HEYGEN.COM" }, + { "id": "brandLogo", "type": "image", "role": "content", "label": "Brand logo", "description": "Transparent logo in the closing-card header.", "default": "assets/hyperframes-logo-white.svg" } ]' > @@ -708,7 +709,12 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; >
- + @@ -1034,7 +1040,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; -That writes `compositions/ai-chat-reveal.html`, plus 1 supporting file under `assets/`. +That writes `compositions/ai-chat-reveal.html`, plus 2 supporting files under `assets/`. ## Add it to your video @@ -1074,6 +1080,7 @@ want to change on the element: | `ecSub` | `Open-source video rendering — write HTML, ship pixel-perfect video.` | string | Supporting sentence on the closing card. | | `ecCta` | `Try HyperFrames` | string | Label on the closing card button. | | `ecFooter` | `HYPERFRAMES.HEYGEN.COM` | string | Letter-spaced line at the very bottom. | +| `brandLogo` | `assets/hyperframes-logo-white.svg` | image | Transparent logo in the closing-card header. | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: @@ -1082,7 +1089,7 @@ defaults, so this behaves exactly like the preview above until you change one:
``` @@ -1106,7 +1113,8 @@ defaults, so this behaves exactly like the preview above until you change one: { "id": "ecHeadline", "type": "string", "role": "content", "label": "End-card headline", "description": "Closing card headline. A | breaks the line.", "default": "It's not magic.|It's HTML." }, { "id": "ecSub", "type": "string", "role": "content", "label": "End-card subline", "description": "Supporting sentence on the closing card.", "default": "Open-source video rendering — write HTML, ship pixel-perfect video." }, { "id": "ecCta", "type": "string", "role": "content", "label": "End-card CTA", "description": "Label on the closing card button.", "default": "Try HyperFrames" }, - { "id": "ecFooter", "type": "string", "role": "content", "label": "End-card footer", "description": "Letter-spaced line at the very bottom.", "default": "HYPERFRAMES.HEYGEN.COM" } + { "id": "ecFooter", "type": "string", "role": "content", "label": "End-card footer", "description": "Letter-spaced line at the very bottom.", "default": "HYPERFRAMES.HEYGEN.COM" }, + { "id": "brandLogo", "type": "image", "role": "content", "label": "Brand logo", "description": "Transparent logo in the closing-card header.", "default": "assets/hyperframes-logo-white.svg" } ]' > @@ -1785,7 +1793,12 @@ defaults, so this behaves exactly like the preview above until you change one: >
- + diff --git a/docs/catalog/blocks/chatgpt-exchange.mdx b/docs/catalog/blocks/chatgpt-exchange.mdx index e43181d474..4751a0d732 100644 --- a/docs/catalog/blocks/chatgpt-exchange.mdx +++ b/docs/catalog/blocks/chatgpt-exchange.mdx @@ -16,7 +16,7 @@ import { InstallCommand } from "/snippets/install-command.jsx"; -That writes `compositions/chatgpt-exchange.html`, plus 4 supporting files under `assets/fonts/`. +That writes `compositions/chatgpt-exchange.html`, plus 5 supporting files under `assets/fonts/`. ## Add it to your video @@ -43,7 +43,34 @@ Move it in time with `data-start`. Put it on a different timeline row with ```html - + @@ -670,12 +697,16 @@ Move it in time with `data-start`. Put it on a different timeline row with