Skip to content

Commit 1e11608

Browse files
jrusso1020jrusso1020
committed
fix: expose promoted template media slots
1 parent a562946 commit 1e11608

27 files changed

Lines changed: 1336 additions & 188 deletions

‎docs/catalog/blocks/ai-chat-reveal.mdx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
1010
previewSrc="/public/catalog/blocks/ai-chat-reveal.json"
1111
compositionId="ai-chat-reveal"
1212
compositionSrc="compositions/ai-chat-reveal.html"
13-
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"}]}
13+
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"}]}
1414
>
1515

1616
```html ai-chat-reveal.html
@@ -29,7 +29,8 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
2929
{ "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." },
3030
{ "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." },
3131
{ "id": "ecCta", "type": "string", "role": "content", "label": "End-card CTA", "description": "Label on the closing card button.", "default": "Try HyperFrames" },
32-
{ "id": "ecFooter", "type": "string", "role": "content", "label": "End-card footer", "description": "Letter-spaced line at the very bottom.", "default": "HYPERFRAMES.HEYGEN.COM" }
32+
{ "id": "ecFooter", "type": "string", "role": "content", "label": "End-card footer", "description": "Letter-spaced line at the very bottom.", "default": "HYPERFRAMES.HEYGEN.COM" },
33+
{ "id": "brandLogo", "type": "image", "role": "content", "label": "Brand logo", "description": "Transparent logo in the closing-card header.", "default": "assets/hyperframes-logo-white.svg" }
3334
]'
3435
>
3536
<head>
@@ -708,7 +709,12 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
708709
>
709710
<div id="acr-endcard-inner">
710711
<div class="acr-stage">
711-
<img id="acr-eclogo" src="assets/hyperframes-logo-white.svg" alt="HyperFrames" />
712+
<img
713+
id="acr-eclogo"
714+
data-var-src="brandLogo"
715+
src="assets/hyperframes-logo-white.svg"
716+
alt="Brand logo"
717+
/>
712718
<svg id="acr-ecstar" width="80" height="80" viewBox="0 0 80 80">
713719
<g stroke="#2f6b57" stroke-width="8.5" stroke-linecap="round">
714720
<line x1="47" y1="40" x2="77" y2="40" />
@@ -1034,7 +1040,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
10341040

10351041
<InstallCommand command="npx hyperframes add ai-chat-reveal" item="ai-chat-reveal" />
10361042

1037-
That writes `compositions/ai-chat-reveal.html`, plus 1 supporting file under `assets/`.
1043+
That writes `compositions/ai-chat-reveal.html`, plus 2 supporting files under `assets/`.
10381044

10391045
## Add it to your video
10401046

@@ -1074,6 +1080,7 @@ want to change on the element:
10741080
| `ecSub` | `Open-source video rendering — write HTML, ship pixel-perfect video.` | string | Supporting sentence on the closing card. |
10751081
| `ecCta` | `Try HyperFrames` | string | Label on the closing card button. |
10761082
| `ecFooter` | `HYPERFRAMES.HEYGEN.COM` | string | Letter-spaced line at the very bottom. |
1083+
| `brandLogo` | `assets/hyperframes-logo-white.svg` | image | Transparent logo in the closing-card header. |
10771084

10781085
Set them with `data-variable-values` on the element that mounts it. These are the
10791086
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:
10821089
<div
10831090
data-composition-id="ai-chat-reveal"
10841091
data-composition-src="compositions/ai-chat-reveal.html"
1085-
data-variable-values='{"botName":"Assistant","userMessage":"How do I turn my HTML into real video?","answer1":"You do not need an editor. HyperFrames renders the HTML you already write into deterministic, pixel-perfect video.","answer2":"It is markup, not magic.","answer3":"What you get out of the box:","bullet1":"A catalog of motion primitives you install and own","bullet2":"GSAP timelines that seek to any frame","bullet3":"4K renders from a single CLI command","ecHeadline":"It's not magic.|It's HTML.","ecSub":"Open-source video rendering — write HTML, ship pixel-perfect video.","ecCta":"Try HyperFrames","ecFooter":"HYPERFRAMES.HEYGEN.COM"}'
1092+
data-variable-values='{"botName":"Assistant","userMessage":"How do I turn my HTML into real video?","answer1":"You do not need an editor. HyperFrames renders the HTML you already write into deterministic, pixel-perfect video.","answer2":"It is markup, not magic.","answer3":"What you get out of the box:","bullet1":"A catalog of motion primitives you install and own","bullet2":"GSAP timelines that seek to any frame","bullet3":"4K renders from a single CLI command","ecHeadline":"It's not magic.|It's HTML.","ecSub":"Open-source video rendering — write HTML, ship pixel-perfect video.","ecCta":"Try HyperFrames","ecFooter":"HYPERFRAMES.HEYGEN.COM","brandLogo":"assets/hyperframes-logo-white.svg"}'
10861093
></div>
10871094
```
10881095

@@ -1106,7 +1113,8 @@ defaults, so this behaves exactly like the preview above until you change one:
11061113
{ "id": "ecHeadline", "type": "string", "role": "content", "label": "End-card headline", "description": "Closing card headline. A | breaks the line.", "default": "It&#39;s not magic.|It&#39;s HTML." },
11071114
{ "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." },
11081115
{ "id": "ecCta", "type": "string", "role": "content", "label": "End-card CTA", "description": "Label on the closing card button.", "default": "Try HyperFrames" },
1109-
{ "id": "ecFooter", "type": "string", "role": "content", "label": "End-card footer", "description": "Letter-spaced line at the very bottom.", "default": "HYPERFRAMES.HEYGEN.COM" }
1116+
{ "id": "ecFooter", "type": "string", "role": "content", "label": "End-card footer", "description": "Letter-spaced line at the very bottom.", "default": "HYPERFRAMES.HEYGEN.COM" },
1117+
{ "id": "brandLogo", "type": "image", "role": "content", "label": "Brand logo", "description": "Transparent logo in the closing-card header.", "default": "assets/hyperframes-logo-white.svg" }
11101118
]'
11111119
>
11121120
<head>
@@ -1785,7 +1793,12 @@ defaults, so this behaves exactly like the preview above until you change one:
17851793
>
17861794
<div id="acr-endcard-inner">
17871795
<div class="acr-stage">
1788-
<img id="acr-eclogo" src="assets/hyperframes-logo-white.svg" alt="HyperFrames" />
1796+
<img
1797+
id="acr-eclogo"
1798+
data-var-src="brandLogo"
1799+
src="assets/hyperframes-logo-white.svg"
1800+
alt="Brand logo"
1801+
/>
17891802
<svg id="acr-ecstar" width="80" height="80" viewBox="0 0 80 80">
17901803
<g stroke="#2f6b57" stroke-width="8.5" stroke-linecap="round">
17911804
<line x1="47" y1="40" x2="77" y2="40" />

0 commit comments

Comments
 (0)