--- 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 2 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. | | `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. | | `ecProof` | `12,000+ creators` | string | Social-proof line under the stars. | | `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)