--- title: "AI Chat Reveal" description: "A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card" --- import { InstallCommand } from "/snippets/install-command.jsx"; import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; ```html ai-chat-reveal.html AI Chat Reveal
11:42
Assistant
How do I turn my HTML into real video?
Ask anything
How
Can
My
It's not magic.
It's HTML.
Open-source video rendering — write HTML, ship pixel-perfect video.
Try HyperFrames
HYPERFRAMES.HEYGEN.COM
``` ## Install That writes `compositions/ai-chat-reveal.html`, plus 2 supporting files under `assets/`. ## Add it to your video It runs for 19.3333 seconds at 1080×1920. Paste this into your composition: ```html index.html
``` Move it in time with `data-start`. Put it on a different timeline row with `data-track-index`. See [data attributes](/concepts/data-attributes) for the rest. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | --- | --- | --- | --- | | `botName` | `Assistant` | string | Name of the assistant answering in this mock chat. It belongs to the host product, never to the brand this video promotes. | | `userMessage` | `How do I turn my HTML into real video?` | string | The question typed on the keyboard and sent. Around 40 characters keeps the measured pacing. | | `answer1` | `You do not need an editor. HyperFrames renders the HTML you already write into deterministic, pixel-perfect video.` | string | First streamed paragraph. It names the brand this video promotes and says what that brand does. | | `answer2` | `It is markup, not magic.` | string | Short second beat. | | `answer3` | `What you get out of the box:` | string | Lead-in to the list. | | `bullet1` | `A catalog of motion primitives you install and own` | string | First list item. | | `bullet2` | `GSAP timelines that seek to any frame` | string | Second list item. | | `bullet3` | `4K renders from a single CLI command` | string | Third list item. | | `ecHeadline` | `It's not magic.|It's HTML.` | string | Closing card headline. A | breaks the line. | | `ecSub` | `Open-source video rendering — write HTML, ship pixel-perfect video.` | string | Positioning sentence of the brand this video promotes, on the closing card. | | `ecCta` | `Try HyperFrames` | string | Closing-card button label, which names the brand this video promotes. Use the real name of that brand. | | `ecFooter` | `HYPERFRAMES.HEYGEN.COM` | string | Domain of the brand this video promotes, letter-spaced at the very bottom. Use the real domain. | | `brandLogo` | `assets/hyperframes-logo-white.svg` | image | Transparent mark of the brand this video promotes, 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: ```html wrap
``` ## Source ```html AI Chat Reveal
11:42
Assistant
How do I turn my HTML into real video?
Ask anything
How
Can
My
It's not magic.
It's HTML.
Open-source video rendering — write HTML, ship pixel-perfect video.
Try HyperFrames
HYPERFRAMES.HEYGEN.COM
``` {/* hf:generated-footer */} Tagged `showcase` `mock-ui` `ai` `chat` `vertical` `ad-template`. Created by Miao Yang. ## Related topics - [Browse the complete Catalog](/catalog) - [Add assets and Catalog items in Studio](/studio/assets-and-blocks) - [Build a richer composition](/go-further)