# AI Chat Reveal Source: https://hyperframes.heygen.com/catalog/blocks/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 ```html ai-chat-reveal.html theme={null} 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 1 supporting file under `assets/`. ## Add it to your video It runs for 19.3333 seconds at 1080×1920. Paste this into your composition: ```html index.html theme={null}
``` 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 | Title in the chat header. | | | | `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. | | | | `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 | 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. | | | 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 theme={null}
``` ## Source ```html theme={null} 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
``` 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) # App Showcase Source: https://hyperframes.heygen.com/catalog/blocks/app-showcase Fitness app product showcase with three floating smartphone screens