--- title: "Message Thread Reveal" description: "A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message" --- import { InstallCommand } from "/snippets/install-command.jsx"; import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; ```html message-thread-reveal.html Message Thread Reveal
9:41
12
R
Rachel›
what r u using for the launch video??
wait look 👀
Delivered
HyperFrames | Write HTML, render pixel-perfect video
hyperframes.heygen.com
›
OMG IT'S HTML
🤯🤯🤯
renders in 4K. no editor
Delivered
where did u find this
on heygen
u just write plain html tags
the code is yours forever
Delivered
installing rn
ty bestie 💚
+
Message
o wa wai wait wait wait l wait lo wait loo wait look wait look wait look 👀 r re ren rend rende render renders renders renders i renders in renders in renders in 4 renders in 4K renders in 4K. renders in 4K. renders in 4K. n renders in 4K. no renders in 4K. no renders in 4K. no e renders in 4K. no ed renders in 4K. no edi renders in 4K. no edit renders in 4K. no edito renders in 4K. no editor o on on on h on he on hey on heyg on heyge on heygen u u u j u ju u jus u just u just u just w u just wr u just wri u just writ u just write u just write u just write p u just write pl u just write pla u just write plai u just write plain u just write plain u just write plain h u just write plain ht u just write plain htm u just write plain html u just write plain html u just write plain html t u just write plain html ta u just write plain html tag u just write plain html tags r th the the the c the co the cod the code the code the code i the code is the code is the code is y the code is yo the code is you the code is your the code is yours the code is yours the code is yours f the code is yours fo the code is yours for the code is yours fore the code is yours forev the code is yours foreve the code is yours forever
12,000+ creators
Write
plain HTML
Render
pixel-perfect
Own
every line
Start rendering free
``` ## Install That writes `compositions/message-thread-reveal.html`, plus 3 supporting files under `assets/`. ## Add it to your video It runs for 25.7667 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 | | --- | --- | --- | --- | | `contactName` | `Rachel` | string | Name pill in the chat header; the avatar shows its first letter. | | `questionMessage` | `what r u using for the launch video??` | string | First incoming message that establishes what the conversation is about. | | `teaserMessage` | `wait look 👀` | string | First typed outgoing reply before the shared link card. | | `cardImage` | `assets/card-image.jpg` | image | Preview image on the shared link card. | | `cardTitle` | `HyperFrames | Write HTML, render pixel-perfect video` | string | Title on the shared link card. | | `cardDomain` | `hyperframes.heygen.com` | string | Domain line under the card title. | | `reactionMessage` | `OMG IT'S HTML` | string | Incoming reaction immediately after the shared link. | | `reactionEmoji` | `🤯🤯🤯` | string | Emoji-only reaction after the shared link. | | `benefitMessage` | `renders in 4K. no editor` | string | Typed outgoing reply that names the primary benefit. | | `discoveryMessage` | `where did u find this` | string | Incoming question asking where the product was found. | | `sourceMessage` | `on heygen` | string | Typed outgoing reply naming where to find the product. | | `workflowMessage` | `u just write plain html tags` | string | Typed outgoing reply describing how the product works. | | `ownershipMessage` | `the code is yours forever` | string | Typed outgoing reply that closes the product explanation. | | `installMessage` | `installing rn` | string | Incoming message expressing intent to try the product. | | `thanksMessage` | `ty bestie 💚` | string | Final incoming message in the conversation. | | `brandLogo` | `assets/hyperframes-logo-black.svg` | image | Transparent horizontal wordmark on the closing card. | | `ecProof` | `12,000+ creators` | string | Social-proof line under the stars. | | `ecFeature1` | `Write|plain HTML` | string | First two-line benefit; use | to break the line. | | `ecFeature2` | `Render|pixel-perfect` | string | Second two-line benefit; use | to break the line. | | `ecFeature3` | `Own|every line` | string | Third two-line benefit; use | to break the line. | | `ecCta` | `Start rendering free` | string | Label on the closing card button. | 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 Message Thread Reveal
9:41
12
R
Rachel›
what r u using for the launch video??
wait look 👀
Delivered
HyperFrames | Write HTML, render pixel-perfect video
hyperframes.heygen.com
›
OMG IT'S HTML
🤯🤯🤯
renders in 4K. no editor
Delivered
where did u find this
on heygen
u just write plain html tags
the code is yours forever
Delivered
installing rn
ty bestie 💚
+
Message
o wa wai wait wait wait l wait lo wait loo wait look wait look wait look 👀 r re ren rend rende render renders renders renders i renders in renders in renders in 4 renders in 4K renders in 4K. renders in 4K. renders in 4K. n renders in 4K. no renders in 4K. no renders in 4K. no e renders in 4K. no ed renders in 4K. no edi renders in 4K. no edit renders in 4K. no edito renders in 4K. no editor o on on on h on he on hey on heyg on heyge on heygen u u u j u ju u jus u just u just u just w u just wr u just wri u just writ u just write u just write u just write p u just write pl u just write pla u just write plai u just write plain u just write plain u just write plain h u just write plain ht u just write plain htm u just write plain html u just write plain html u just write plain html t u just write plain html ta u just write plain html tag u just write plain html tags r th the the the c the co the cod the code the code the code i the code is the code is the code is y the code is yo the code is you the code is your the code is yours the code is yours the code is yours f the code is yours fo the code is yours for the code is yours fore the code is yours forev the code is yours foreve the code is yours forever
12,000+ creators
Write
plain HTML
Render
pixel-perfect
Own
every line
Start rendering free
``` {/* hf:generated-footer */} Tagged `showcase` `mock-ui` `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)