> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # AI Chat Reveal > 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 # AI Chat Reveal 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 **AI Chat Reveal** ```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
``` Copy npx hyperframes add ai-chat-reveal to the clipboard 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.md) 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
``` {/* hf:generated-footer */} Tagged `showcase` `mock-ui` `ai` `chat` `vertical` `ad-template`. Created by Miao Yang. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md)