---
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";

<VariablesExplorer
  previewSrc="/public/catalog/blocks/message-thread-reveal.json"
  compositionId="message-thread-reveal"
  compositionSrc="compositions/message-thread-reveal.html"
  variables={[{"id":"contactName","type":"string","role":"content","label":"Contact name","description":"Name pill in the chat header; the avatar shows its first letter.","default":"Rachel"},{"id":"questionMessage","type":"string","role":"content","label":"Opening question","description":"First incoming message that establishes what the conversation is about.","default":"what r u using for the launch video??"},{"id":"teaserMessage","type":"string","role":"content","label":"Teaser reply","description":"First typed outgoing reply before the shared link card.","default":"wait look 👀"},{"id":"cardImage","type":"image","role":"content","label":"Link card image","description":"Preview image on the shared link card.","default":"assets/card-image.jpg"},{"id":"cardTitle","type":"string","role":"content","label":"Link card title","description":"Title on the shared link card.","default":"HyperFrames | Write HTML, render pixel-perfect video"},{"id":"cardDomain","type":"string","role":"content","label":"Link card domain","description":"Domain line under the card title.","default":"hyperframes.heygen.com"},{"id":"reactionMessage","type":"string","role":"content","label":"Link reaction","description":"Incoming reaction immediately after the shared link.","default":"OMG IT'S HTML"},{"id":"reactionEmoji","type":"string","role":"content","label":"Reaction emoji","description":"Emoji-only reaction after the shared link.","default":"🤯🤯🤯"},{"id":"benefitMessage","type":"string","role":"content","label":"Benefit reply","description":"Typed outgoing reply that names the primary benefit.","default":"renders in 4K. no editor"},{"id":"discoveryMessage","type":"string","role":"content","label":"Discovery question","description":"Incoming question asking where the product was found.","default":"where did u find this"},{"id":"sourceMessage","type":"string","role":"content","label":"Source reply","description":"Typed outgoing reply naming where to find the product.","default":"on heygen"},{"id":"workflowMessage","type":"string","role":"content","label":"Workflow reply","description":"Typed outgoing reply describing how the product works.","default":"u just write plain html tags"},{"id":"ownershipMessage","type":"string","role":"content","label":"Ownership reply","description":"Typed outgoing reply that closes the product explanation.","default":"the code is yours forever"},{"id":"installMessage","type":"string","role":"content","label":"Intent reply","description":"Incoming message expressing intent to try the product.","default":"installing rn"},{"id":"thanksMessage","type":"string","role":"content","label":"Closing reply","description":"Final incoming message in the conversation.","default":"ty bestie 💚"},{"id":"brandLogo","type":"image","role":"content","label":"Brand logo","description":"Transparent horizontal wordmark on the closing card.","default":"assets/hyperframes-logo-black.svg"},{"id":"ecProof","type":"string","role":"content","label":"End-card proof","description":"Social-proof line under the stars.","default":"12,000+ creators"},{"id":"ecFeature1","type":"string","role":"content","label":"End-card feature 1","description":"First two-line benefit; use | to break the line.","default":"Write|plain HTML"},{"id":"ecFeature2","type":"string","role":"content","label":"End-card feature 2","description":"Second two-line benefit; use | to break the line.","default":"Render|pixel-perfect"},{"id":"ecFeature3","type":"string","role":"content","label":"End-card feature 3","description":"Third two-line benefit; use | to break the line.","default":"Own|every line"},{"id":"ecCta","type":"string","role":"content","label":"End-card CTA","description":"Label on the closing card button.","default":"Start rendering free"}]}
>

```html message-thread-reveal.html
<!doctype html>
<html
  lang="en"
  data-composition-variables='[
    { "id": "contactName", "type": "string", "role": "content", "label": "Contact name", "description": "Name pill in the chat header; the avatar shows its first letter.", "default": "Rachel" },
    { "id": "questionMessage", "type": "string", "role": "content", "label": "Opening question", "description": "First incoming message that establishes what the conversation is about.", "default": "what r u using for the launch video??" },
    { "id": "teaserMessage", "type": "string", "role": "content", "label": "Teaser reply", "description": "First typed outgoing reply before the shared link card.", "default": "wait look 👀" },
    { "id": "cardImage", "type": "image", "role": "content", "label": "Link card image", "description": "Preview image on the shared link card.", "default": "assets/card-image.jpg" },
    { "id": "cardTitle", "type": "string", "role": "content", "label": "Link card title", "description": "Title on the shared link card.", "default": "HyperFrames | Write HTML, render pixel-perfect video" },
    { "id": "cardDomain", "type": "string", "role": "content", "label": "Link card domain", "description": "Domain line under the card title.", "default": "hyperframes.heygen.com" },
    { "id": "reactionMessage", "type": "string", "role": "content", "label": "Link reaction", "description": "Incoming reaction immediately after the shared link.", "default": "OMG IT&#39;S HTML" },
    { "id": "reactionEmoji", "type": "string", "role": "content", "label": "Reaction emoji", "description": "Emoji-only reaction after the shared link.", "default": "🤯🤯🤯" },
    { "id": "benefitMessage", "type": "string", "role": "content", "label": "Benefit reply", "description": "Typed outgoing reply that names the primary benefit.", "default": "renders in 4K. no editor" },
    { "id": "discoveryMessage", "type": "string", "role": "content", "label": "Discovery question", "description": "Incoming question asking where the product was found.", "default": "where did u find this" },
    { "id": "sourceMessage", "type": "string", "role": "content", "label": "Source reply", "description": "Typed outgoing reply naming where to find the product.", "default": "on heygen" },
    { "id": "workflowMessage", "type": "string", "role": "content", "label": "Workflow reply", "description": "Typed outgoing reply describing how the product works.", "default": "u just write plain html tags" },
    { "id": "ownershipMessage", "type": "string", "role": "content", "label": "Ownership reply", "description": "Typed outgoing reply that closes the product explanation.", "default": "the code is yours forever" },
    { "id": "installMessage", "type": "string", "role": "content", "label": "Intent reply", "description": "Incoming message expressing intent to try the product.", "default": "installing rn" },
    { "id": "thanksMessage", "type": "string", "role": "content", "label": "Closing reply", "description": "Final incoming message in the conversation.", "default": "ty bestie 💚" },
    { "id": "brandLogo", "type": "image", "role": "content", "label": "Brand logo", "description": "Transparent horizontal wordmark on the closing card.", "default": "assets/hyperframes-logo-black.svg" },
    { "id": "ecProof", "type": "string", "role": "content", "label": "End-card proof", "description": "Social-proof line under the stars.", "default": "12,000+ creators" },
    { "id": "ecFeature1", "type": "string", "role": "content", "label": "End-card feature 1", "description": "First two-line benefit; use | to break the line.", "default": "Write|plain HTML" },
    { "id": "ecFeature2", "type": "string", "role": "content", "label": "End-card feature 2", "description": "Second two-line benefit; use | to break the line.", "default": "Render|pixel-perfect" },
    { "id": "ecFeature3", "type": "string", "role": "content", "label": "End-card feature 3", "description": "Third two-line benefit; use | to break the line.", "default": "Own|every line" },
    { "id": "ecCta", "type": "string", "role": "content", "label": "End-card CTA", "description": "Label on the closing card button.", "default": "Start rendering free" }
  ]'
>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1080, height=1920" />
    <title>Message Thread Reveal</title>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: #000;
      }
      #mtr-root {
        position: relative;
        width: 1080px;
        height: 1920px;
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      }
      #mtr-plate {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 90% 60% at 30% 20%,
            rgba(60, 230, 172, 0.1) 0%,
            rgba(60, 230, 172, 0) 60%
          ),
          linear-gradient(168deg, #23262b 0%, #17191d 55%, #101114 100%);
      }
      #mtr-phonebody {
        position: absolute;
        left: 124px;
        top: 64px;
        width: 832px;
        height: 1797px;
        border-radius: 112px;
        background: #3a3d42;
        box-shadow:
          inset 0 2px 3px rgba(255, 255, 255, 0.25),
          0 40px 90px rgba(0, 0, 0, 0.6);
      }
      .clip {
        position: absolute;
        inset: 0;
      }
      /* ---------- phone screen ---------- */
      #mtr-screen {
        position: absolute;
        left: 140px;
        top: 80px;
        width: 800px;
        height: 1765px;
        border-radius: 100px;
        background: #000;
        overflow: hidden;
      }
      /* status bar */
      #mtr-sb-time {
        position: absolute;
        left: 88px;
        top: 57px;
        color: #fff;
        font-size: 34px;
        font-weight: 600;
        letter-spacing: 0.5px;
      }
      #mtr-sb-icons {
        position: absolute;
        left: 578px;
        top: 66px;
      }
      /* header */
      #mtr-hdr-back {
        position: absolute;
        left: 48px;
        top: 158px;
      }
      #mtr-hdr-badge {
        position: absolute;
        left: 112px;
        top: 163px;
        height: 44px;
        padding: 0 22px;
        background: #262628;
        border-radius: 22px;
        color: #fff;
        font-size: 28px;
        line-height: 44px;
      }
      #mtr-hdr-avatar {
        position: absolute;
        left: 356px;
        top: 122px;
        width: 86px;
        height: 86px;
        border-radius: 50%;
        background: #9ce474;
        color: #12300c;
        font-size: 44px;
        font-weight: 600;
        display: grid;
        place-items: center;
      }
      #mtr-hdr-name {
        position: absolute;
        left: 400px;
        top: 213px;
        transform: translateX(-50%);
        height: 46px;
        padding: 0 20px;
        background: #232325;
        border-radius: 23px;
        color: #fff;
        font-size: 29px;
        line-height: 46px;
        white-space: nowrap;
      }
      #mtr-hdr-name .chev {
        color: #8e8e93;
        font-size: 26px;
        margin-left: 8px;
      }
      #mtr-hdr-cam {
        position: absolute;
        left: 699px;
        top: 166px;
      }
      /* chat viewport */
      #mtr-chatview {
        position: absolute;
        left: 0;
        top: 265px;
        width: 800px;
        height: 1367px;
        overflow: hidden;
      }
      .item {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        visibility: hidden;
      }
      .item.recv {
        padding-left: 44px;
        text-align: left;
      }
      .item.sent {
        padding-right: 45px;
        text-align: right;
      }
      .pop {
        display: inline-block;
        position: relative;
      }
      .pop-recv {
        transform-origin: left bottom;
      }
      .pop-sent {
        transform-origin: right bottom;
      }
      /* font 32.9px: artifact-closed-loop calibration (ref m1 ink 624x32 vs shipped-render 711x36 -> x0.876;
     the earlier 37.5px also overflowed max-width). padding 28px: ref ink inset 31/30 vs rep 26. */
      .bubble {
        display: inline-block;
        position: relative;
        max-width: 720px;
        padding: 0 28px;
        height: 81px;
        line-height: 81px;
        border-radius: 40px;
        font-size: 32.9px;
        color: #fff;
        white-space: nowrap;
        text-align: left;
      }
      .bubble.recv {
        background: #242428;
      }
      .bubble.sent {
        background: #0a80f8;
      }
      /* iMessage tails (screen bg is pure black -> cover circle trick) */
      .tail-recv::before {
        content: "";
        position: absolute;
        left: -10px;
        bottom: 0;
        width: 26px;
        height: 26px;
        background: #242428;
        border-bottom-right-radius: 20px 18px;
      }
      .tail-recv::after {
        content: "";
        position: absolute;
        left: -26px;
        bottom: -2px;
        width: 20px;
        height: 30px;
        background: #000;
        border-bottom-right-radius: 16px;
      }
      .tail-sent::before {
        content: "";
        position: absolute;
        right: -10px;
        bottom: 0;
        width: 26px;
        height: 26px;
        background: #0a80f8;
        border-bottom-left-radius: 20px 18px;
      }
      .tail-sent::after {
        content: "";
        position: absolute;
        right: -26px;
        bottom: -2px;
        width: 20px;
        height: 30px;
        background: #000;
        border-bottom-left-radius: 16px;
      }
      .delivered {
        color: #8e8e93;
        font-size: 28px;
        margin-top: 12px;
        padding-right: 7px;
        text-align: right;
      }
      /* 105.5px/ls2/ml12: artifact-closed-loop (ref yellow body h92, row w304, x203 vs rep 103/383/209) */
      .emojirow {
        font-size: 105.5px;
        line-height: 140px;
        letter-spacing: 2px;
        margin-left: 12px;
        white-space: nowrap;
        color: #fff;
      }
      /* typing indicator */
      .dotswrap {
        position: relative;
        display: inline-block;
      }
      .dotsbubble {
        width: 124px;
        height: 67px;
        background: #242428;
        border-radius: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      .dot {
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: #8e8e93;
        display: inline-block;
      }
      .dtail1 {
        position: absolute;
        left: -2px;
        bottom: -4px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #242428;
      }
      .dtail2 {
        position: absolute;
        left: -14px;
        bottom: -14px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #242428;
      }
      /* link card */
      .card {
        display: inline-block;
        width: 443px;
        border-radius: 36px;
        overflow: hidden;
        text-align: left;
      }
      .cardimg {
        display: block;
        width: 443px;
        height: 432px;
        object-fit: cover;
      }
      .cardmeta {
        height: 178px;
        background: #28282c;
        display: flex;
        align-items: center;
        padding: 0 18px 0 26px;
      }
      .cardtxt {
        flex: 1;
        min-width: 0;
      }
      /* 26.8/23.3px: artifact-closed-loop (ref title ink w302 vs rep 350 -> x0.863); max-width keeps the
     measured 3-line wrap 'Where Are You? Dad / Edition | A personalized / book about him' */
      .cardtitle {
        color: #fff;
        font-size: 26.8px;
        font-weight: 600;
        line-height: 34px;
        max-width: 318px;
      }
      .carddomain {
        color: #8e8e93;
        font-size: 23.3px;
        margin-top: 4px;
      }
      .cardchev {
        color: #8e8e93;
        font-size: 48px;
        padding-left: 8px;
      }
      /* input bar */
      #mtr-plusbtn {
        position: absolute;
        left: 12px;
        top: 1653px;
        width: 86px;
        height: 86px;
        border-radius: 50%;
        background: #262628;
        color: #8e8e93;
        font-size: 52px;
        font-weight: 300;
        display: grid;
        place-items: center;
      }
      #mtr-field {
        position: absolute;
        left: 124px;
        top: 1646px;
        width: 665px;
        height: 93px;
        border: 2px solid #202022;
        border-radius: 47px;
      }
      #mtr-ph {
        position: absolute;
        left: 158px;
        top: 1668px;
        color: #8e8e93;
        font-size: 35px;
        line-height: 48px;
      }
      #mtr-typedwrap {
        position: absolute;
        left: 158px;
        top: 1668px;
        width: 600px;
        height: 48px;
        white-space: pre;
      }
      .typed {
        position: absolute;
        left: 0;
        top: 0;
        visibility: hidden;
        color: #fff;
        font-size: 36px;
        line-height: 48px;
        white-space: pre;
      }
      .caret {
        display: inline-block;
        width: 4px;
        height: 42px;
        background: #0a80f8;
        vertical-align: -8px;
        margin-left: 2px;
        border-radius: 2px;
      }
      #mtr-mic {
        position: absolute;
        left: 724px;
        top: 1664px;
      }
      #mtr-sendbtn {
        position: absolute;
        left: 698px;
        top: 1660px;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #0a80f8;
        visibility: hidden;
        display: grid;
        place-items: center;
      }
      /* ---------- end card ---------- */
      #mtr-ec-wrap {
        position: absolute;
        inset: 0;
        background: #f9f2e7;
        font-family: Georgia, "Times New Roman", serif;
      }
      #mtr-ec-logo {
        position: absolute;
        left: 308px;
        top: 500px;
        width: 464px;
        height: 139px;
      }
      #mtr-ec-stars {
        position: absolute;
        left: 372px;
        top: 714px;
        width: 336px;
        display: flex;
        gap: 15px;
      }
      #mtr-ec-fam {
        position: absolute;
        left: 0;
        top: 796px;
        width: 100%;
        text-align: center;
        color: #185450;
        font-size: 35.5px;
        font-weight: 700;
      }
      .ec-icon {
        position: absolute;
        top: 934px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: #185450;
        display: grid;
        place-items: center;
      }
      #mtr-ec-fam {
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      }
      .ec-label {
        position: absolute;
        top: 1098px;
        width: 240px;
        text-align: center;
        color: #205048;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 31px;
        line-height: 40px;
      }
      #mtr-ec-cta {
        position: absolute;
        left: 200px;
        top: 1298px;
        width: 680px;
        height: 118px;
        border-radius: 59px;
        background: #3ce6ac;
        color: #0d3b2b;
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 700;
        font-size: 46px;
        display: grid;
        place-items: center;
      }
    </style>
  </head>
  <body>
    <div
      id="mtr-root"
      data-composition-id="message-thread-reveal"
      data-start="0"
      data-width="1080"
      data-height="1920"
      data-duration="25.7667"
    >
      <div id="mtr-plate">
        <div id="mtr-phonebody"></div>
      </div>
      <section
        id="scene-chat"
        class="clip"
        data-start="0"
        data-duration="23.62"
        data-track-index="1"
      >
        <div id="mtr-screen">
          <div id="mtr-sb-time">9:41</div>
          <svg id="mtr-sb-icons" width="86" height="30" viewBox="0 0 86 30">
            <rect x="0" y="16" width="5" height="9" rx="1.5" fill="#fff" />
            <rect x="8" y="12" width="5" height="13" rx="1.5" fill="#fff" />
            <rect x="16" y="8" width="5" height="17" rx="1.5" fill="#fff" />
            <rect x="24" y="4" width="5" height="21" rx="1.5" fill="#fff" />
            <g transform="translate(44,2)">
              <path
                d="M18 21.5 L21.5 25 L25 21.5 A5 5 0 0 0 18 21.5"
                fill="#fff"
                transform="translate(-10,-2)"
              />
              <path
                d="M4 13 A14 14 0 0 1 23 13"
                stroke="#fff"
                stroke-width="4"
                fill="none"
                transform="translate(-2,-2)"
              />
              <path
                d="M8.5 17.5 A8 8 0 0 1 18.5 17.5"
                stroke="#fff"
                stroke-width="4"
                fill="none"
                transform="translate(-2,-2)"
              />
            </g>
          </svg>
          <svg id="mtr-hdr-back" width="26" height="48" viewBox="0 0 26 48">
            <path
              d="M23 3 L4 24 L23 45"
              stroke="#E4E4E4"
              stroke-width="6"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <div id="mtr-hdr-badge">12</div>
          <div id="mtr-hdr-avatar">R</div>
          <div id="mtr-hdr-name">Rachel<span class="chev">›</span></div>
          <svg id="mtr-hdr-cam" width="52" height="34" viewBox="0 0 52 34">
            <rect x="0" y="1" width="36" height="32" rx="9" fill="#fff" />
            <path d="M38 12 L50 4 V30 L38 22 Z" fill="#fff" />
          </svg>
          <div id="mtr-chatview">
            <div
              class="item recv"
              id="mtr-it-m1"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="bubble recv"
                  id="mtr-message-question"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  what r u using for the launch video??
                </div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-dots"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div class="dotswrap">
                  <div class="dotsbubble">
                    <span class="dot"></span><span class="dot"></span><span class="dot"></span>
                  </div>
                  <div class="dtail1"></div>
                  <div class="dtail2"></div>
                </div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m2"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div
                  class="bubble sent tail-sent"
                  id="mtr-message-teaser"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  wait look 👀
                </div>
                <div class="delivered">Delivered</div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m3"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div class="card">
                  <img
                    class="cardimg"
                    data-var-src="cardImage"
                    src="assets/card-image.jpg"
                    alt=""
                  />
                  <div class="cardmeta">
                    <div class="cardtxt">
                      <div class="cardtitle">
                        HyperFrames | Write HTML, render pixel-perfect video
                      </div>
                      <div class="carddomain">hyperframes.heygen.com</div>
                    </div>
                    <div class="cardchev">›</div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-m4"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="bubble recv"
                  id="mtr-message-reaction"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  OMG IT&#39;S HTML
                </div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-m5"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="emojirow"
                  id="mtr-message-emoji"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  🤯🤯🤯
                </div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m6"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div
                  class="bubble sent tail-sent"
                  id="mtr-message-benefit"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  renders in 4K. no editor
                </div>
                <div class="delivered">Delivered</div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-dots2"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div class="dotswrap">
                  <div class="dotsbubble">
                    <span class="dot"></span><span class="dot"></span><span class="dot"></span>
                  </div>
                  <div class="dtail1"></div>
                  <div class="dtail2"></div>
                </div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-m7"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="bubble recv tail-recv"
                  id="mtr-message-discovery"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  where did u find this
                </div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m8"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div
                  class="bubble sent"
                  id="mtr-message-source"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  on heygen
                </div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m9"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div
                  class="bubble sent"
                  id="mtr-message-workflow"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  u just write plain html tags
                </div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m10"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div
                  class="bubble sent tail-sent"
                  id="mtr-message-ownership"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  the code is yours forever
                </div>
                <div class="delivered">Delivered</div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-m11"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="bubble recv"
                  id="mtr-message-install"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  installing rn
                </div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-m12"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="bubble recv tail-recv"
                  id="mtr-message-thanks"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  ty bestie 💚
                </div>
              </div>
            </div>
          </div>
          <div id="mtr-plusbtn">+</div>
          <div id="mtr-field"></div>
          <div id="mtr-ph">Message</div>
          <div id="mtr-typedwrap">
            <span class="typed" id="mtr-ty-1-0">o<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-1">wa<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-2">wai<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-3">wait<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-4">wait <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-5">wait l<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-6">wait lo<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-7">wait loo<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-8">wait look<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-9">wait look <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-10">wait look 👀<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-0">r<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-1">re<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-2">ren<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-3">rend<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-4">rende<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-5">render<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-6">renders<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-7">renders <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-8">renders i<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-9">renders in<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-10">renders in <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-11">renders in 4<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-12">renders in 4K<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-13">renders in 4K.<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-14">renders in 4K. <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-15">renders in 4K. n<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-16">renders in 4K. no<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-17"
              >renders in 4K. no <span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-18"
              >renders in 4K. no e<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-19"
              >renders in 4K. no ed<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-20"
              >renders in 4K. no edi<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-21"
              >renders in 4K. no edit<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-22"
              >renders in 4K. no edito<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-23"
              >renders in 4K. no editor<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-3-0">o<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-1">on<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-2">on <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-3">on h<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-4">on he<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-5">on hey<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-6">on heyg<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-7">on heyge<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-8">on heygen<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-0">u<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-1">u <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-2">u j<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-3">u ju<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-4">u jus<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-5">u just<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-6">u just <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-7">u just w<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-8">u just wr<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-9">u just wri<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-10">u just writ<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-11">u just write<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-12">u just write <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-13">u just write p<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-14">u just write pl<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-15">u just write pla<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-16">u just write plai<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-17"
              >u just write plain<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-18"
              >u just write plain <span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-19"
              >u just write plain h<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-20"
              >u just write plain ht<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-21"
              >u just write plain htm<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-22"
              >u just write plain html<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-23"
              >u just write plain html <span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-24"
              >u just write plain html t<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-25"
              >u just write plain html ta<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-26"
              >u just write plain html tag<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-27"
              >u just write plain html tags<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-0">r<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-1">th<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-2">the<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-3">the <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-4">the c<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-5">the co<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-6">the cod<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-7">the code<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-8">the code <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-9">the code i<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-10">the code is<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-11">the code is <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-12">the code is y<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-13">the code is yo<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-14">the code is you<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-15">the code is your<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-16">the code is yours<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-17"
              >the code is yours <span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-18"
              >the code is yours f<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-19"
              >the code is yours fo<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-20"
              >the code is yours for<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-21"
              >the code is yours fore<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-22"
              >the code is yours forev<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-23"
              >the code is yours foreve<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-24"
              >the code is yours forever<span class="caret"></span
            ></span>
          </div>
          <svg id="mtr-mic" width="26" height="42" viewBox="0 0 26 42">
            <rect x="8" y="0" width="10" height="22" rx="5" fill="#8E8E93" />
            <path
              d="M2 16 A11 11 0 0 0 24 16"
              stroke="#8E8E93"
              stroke-width="3.5"
              fill="none"
              transform="translate(0,2)"
            />
            <line x1="13" y1="30" x2="13" y2="38" stroke="#8E8E93" stroke-width="3.5" />
            <line x1="6" y1="39" x2="20" y2="39" stroke="#8E8E93" stroke-width="3.5" />
          </svg>
          <div id="mtr-sendbtn">
            <svg width="26" height="30" viewBox="0 0 26 30">
              <path
                d="M13 28 V4 M3 13 L13 3 L23 13"
                stroke="#fff"
                stroke-width="5"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
        </div>
      </section>
      <section
        id="scene-end"
        class="clip"
        data-start="23.2567"
        data-duration="2.53"
        data-track-index="2"
        style="z-index: 5"
      >
        <div id="mtr-ec-wrap" data-layout-allow-overlap data-layout-allow-occlusion>
          <img
            id="mtr-ec-logo"
            data-var-src="brandLogo"
            src="assets/hyperframes-logo-black.svg"
            alt="Brand logo"
          />
          <div id="mtr-ec-stars">
            <svg width="55" height="53" viewBox="0 0 24 23">
              <path
                d="M12 0 L15 8.2 L23.4 8.2 L16.6 13.4 L19.2 21.8 L12 16.8 L4.8 21.8 L7.4 13.4 L0.6 8.2 L9 8.2 Z"
                fill="#FED059"
              />
            </svg>
            <svg width="55" height="53" viewBox="0 0 24 23">
              <path
                d="M12 0 L15 8.2 L23.4 8.2 L16.6 13.4 L19.2 21.8 L12 16.8 L4.8 21.8 L7.4 13.4 L0.6 8.2 L9 8.2 Z"
                fill="#FED059"
              />
            </svg>
            <svg width="55" height="53" viewBox="0 0 24 23">
              <path
                d="M12 0 L15 8.2 L23.4 8.2 L16.6 13.4 L19.2 21.8 L12 16.8 L4.8 21.8 L7.4 13.4 L0.6 8.2 L9 8.2 Z"
                fill="#FED059"
              />
            </svg>
            <svg width="55" height="53" viewBox="0 0 24 23">
              <path
                d="M12 0 L15 8.2 L23.4 8.2 L16.6 13.4 L19.2 21.8 L12 16.8 L4.8 21.8 L7.4 13.4 L0.6 8.2 L9 8.2 Z"
                fill="#FED059"
              />
            </svg>
            <svg width="55" height="53" viewBox="0 0 24 23">
              <path
                d="M12 0 L15 8.2 L23.4 8.2 L16.6 13.4 L19.2 21.8 L12 16.8 L4.8 21.8 L7.4 13.4 L0.6 8.2 L9 8.2 Z"
                fill="#FED059"
              />
            </svg>
          </div>
          <div id="mtr-ec-fam">12,000+ creators</div>
          <div class="ec-icon" style="left: 150px">
            <svg width="58" height="58" viewBox="0 0 24 24">
              <path
                d="M3 17.2 V21 h3.8 L18 9.8 l-3.8-3.8 L3 17.2 Z M20.7 7.1 c0.4-0.4 0.4-1 0-1.4 l-2.4-2.4 c-0.4-0.4-1-0.4-1.4 0 l-1.8 1.8 3.8 3.8 1.8-1.8 Z"
                fill="#F9F2E7"
              />
            </svg>
          </div>
          <div class="ec-icon" style="left: 470px">
            <svg width="60" height="56" viewBox="0 0 24 22">
              <path
                d="M12 21 C12 21 1 14.4 1 7.6 C1 3.9 3.9 1 7.5 1 C9.4 1 11.1 1.9 12 3.3 C12.9 1.9 14.6 1 16.5 1 C20.1 1 23 3.9 23 7.6 C23 14.4 12 21 12 21 Z"
                fill="#F9F2E7"
              />
            </svg>
          </div>
          <div class="ec-icon" style="left: 790px">
            <svg width="60" height="60" viewBox="0 0 24 24">
              <path
                d="M12 2 C6.5 2 2 6.5 2 12 s4.5 10 10 10 c0.9 0 1.6-0.7 1.6-1.6 0-0.4-0.2-0.8-0.4-1.1 -0.3-0.3-0.4-0.7-0.4-1.1 0-0.9 0.7-1.6 1.6-1.6 h1.9 c3.1 0 5.7-2.6 5.7-5.7 C22 7 17.5 2 12 2 Z M6.5 12 c-0.8 0-1.5-0.7-1.5-1.5 S5.7 9 6.5 9 8 9.7 8 10.5 7.3 12 6.5 12 Z M9.5 8 C8.7 8 8 7.3 8 6.5 S8.7 5 9.5 5 s1.5 0.7 1.5 1.5 S10.3 8 9.5 8 Z M14.5 8 c-0.8 0-1.5-0.7-1.5-1.5 S13.7 5 14.5 5 16 5.7 16 6.5 15.3 8 14.5 8 Z M17.5 12 c-0.8 0-1.5-0.7-1.5-1.5 S16.7 9 17.5 9 19 9.7 19 10.5 18.3 12 17.5 12 Z"
                fill="#F9F2E7"
              />
            </svg>
          </div>
          <div class="ec-label" id="mtr-ec-feature-1" style="left: 100px">
            <div>Write</div>
            <div>plain HTML</div>
          </div>
          <div class="ec-label" id="mtr-ec-feature-2" style="left: 420px">
            <div>Render</div>
            <div>pixel-perfect</div>
          </div>
          <div class="ec-label" id="mtr-ec-feature-3" style="left: 740px">
            <div>Own</div>
            <div>every line</div>
          </div>
          <div id="mtr-ec-cta">Start rendering free</div>
        </div>
      </section>
    </div>
    <script>
      window.__timelines = window.__timelines || {};
      (function () {
        "use strict";
        var vars =
          window.__hyperframes && typeof window.__hyperframes.getVariables === "function"
            ? window.__hyperframes.getVariables()
            : {};
        function text(value, fallback, max) {
          if (typeof value !== "string") return fallback;
          var t = value.trim();
          if (!t) return fallback;
          return t.length > max ? t.slice(0, max) : t;
        }
        var contact = text(vars.contactName, "Rachel", 16);
        document.getElementById("mtr-hdr-avatar").textContent = contact.charAt(0).toUpperCase();
        var namePill = document.getElementById("mtr-hdr-name");
        namePill.innerHTML = "";
        namePill.appendChild(document.createTextNode(contact));
        var chev = document.createElement("span");
        chev.className = "chev";
        chev.textContent = "\u203A";
        namePill.appendChild(chev);
        function setText(id, value) {
          document.getElementById(id).textContent = value;
        }
        function setTyped(group, value) {
          var frames = Array.from(document.querySelectorAll('[id^="mtr-ty-' + group + '-"]')).sort(
            function (a, b) {
              return Number(a.id.split("-").pop()) - Number(b.id.split("-").pop());
            },
          );
          var characters = Array.from(value);
          frames.forEach(function (frame, index) {
            var prefixLength = Math.max(
              1,
              Math.ceil((characters.length * (index + 1)) / frames.length),
            );
            var textNode = Array.from(frame.childNodes).find(function (node) {
              return node.nodeType === 3;
            });
            if (textNode) textNode.nodeValue = characters.slice(0, prefixLength).join("");
          });
        }
        function setTwoLines(id, value) {
          var lines = value.split("|").slice(0, 2);
          var container = document.getElementById(id);
          Array.from(container.children).forEach(function (line, index) {
            line.textContent = lines[index] || lines[0] || "";
          });
        }
        var teaserMessage = text(vars.teaserMessage, "wait look 👀", 20);
        var benefitMessage = text(vars.benefitMessage, "renders in 4K. no editor", 32);
        var sourceMessage = text(vars.sourceMessage, "on heygen", 20);
        var workflowMessage = text(vars.workflowMessage, "u just write plain html tags", 34);
        var ownershipMessage = text(vars.ownershipMessage, "the code is yours forever", 32);
        setText(
          "mtr-message-question",
          text(vars.questionMessage, "what r u using for the launch video??", 46),
        );
        setText("mtr-message-teaser", teaserMessage);
        setText("mtr-message-reaction", text(vars.reactionMessage, "OMG IT'S HTML", 24));
        setText("mtr-message-emoji", text(vars.reactionEmoji, "🤯🤯🤯", 12));
        setText("mtr-message-benefit", benefitMessage);
        setText("mtr-message-discovery", text(vars.discoveryMessage, "where did u find this", 28));
        setText("mtr-message-source", sourceMessage);
        setText("mtr-message-workflow", workflowMessage);
        setText("mtr-message-ownership", ownershipMessage);
        setText("mtr-message-install", text(vars.installMessage, "installing rn", 20));
        setText("mtr-message-thanks", text(vars.thanksMessage, "ty bestie 💚", 20));
        setTyped(1, teaserMessage);
        setTyped(2, benefitMessage);
        setTyped(3, sourceMessage);
        setTyped(4, workflowMessage);
        setTyped(5, ownershipMessage);
        document.querySelector(".cardtitle").textContent = text(
          vars.cardTitle,
          "HyperFrames | Write HTML, render pixel-perfect video",
          80,
        );
        document.querySelector(".carddomain").textContent = text(
          vars.cardDomain,
          "hyperframes.heygen.com",
          40,
        );
        document.getElementById("mtr-ec-fam").textContent = text(
          vars.ecProof,
          "12,000+ creators",
          30,
        );
        setTwoLines("mtr-ec-feature-1", text(vars.ecFeature1, "Write|plain HTML", 32));
        setTwoLines("mtr-ec-feature-2", text(vars.ecFeature2, "Render|pixel-perfect", 32));
        setTwoLines("mtr-ec-feature-3", text(vars.ecFeature3, "Own|every line", 32));
        document.getElementById("mtr-ec-cta").textContent = text(
          vars.ecCta,
          "Start rendering free",
          26,
        );
      })();
      // initial states applied immediately (CSS hides all .item; m1 must be live at frame 0)
      gsap.set("#mtr-it-m1", { autoAlpha: 1 });
      const tl = gsap.timeline({ paused: true });
      gsap.set("#mtr-it-m1", { y: 1264 });
      tl.fromTo(
        "#mtr-it-m1 .pop",
        { scale: 0.75, autoAlpha: 0.6 },
        { scale: 1, autoAlpha: 1, duration: 0.12, ease: "power2.out" },
        0.0,
      );
      tl.set("#mtr-it-m1", { autoAlpha: 1 }, 0.0);
      tl.set("#mtr-it-m1", { y: 1179 }, 0.7662);
      tl.set("#mtr-it-dots", { y: 1278 }, 0.7662);
      tl.fromTo(
        "#mtr-it-dots .pop",
        { scale: 0.6, autoAlpha: 0.4 },
        { scale: 1, autoAlpha: 1, duration: 0.1, ease: "power2.out" },
        0.7662,
      );
      tl.set("#mtr-it-dots", { autoAlpha: 1 }, 0.7662);
      tl.set("#mtr-it-m1", { y: 1036 }, 2.9662);
      tl.set("#mtr-it-dots", { y: 1135 }, 2.9662);
      tl.set("#mtr-it-m2", { y: 1218 }, 2.9662);
      tl.fromTo(
        "#mtr-it-m2 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        2.9662,
      );
      tl.set("#mtr-it-m2", { autoAlpha: 1 }, 2.9662);
      tl.set("#mtr-it-m1", { y: 416 }, 3.6995);
      tl.set("#mtr-it-dots", { y: 515 }, 3.6995);
      tl.set("#mtr-it-m2", { y: 598 }, 3.6995);
      tl.set("#mtr-it-m3", { y: 735 }, 3.6995);
      tl.fromTo(
        "#mtr-it-m3 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        3.6995,
      );
      tl.set("#mtr-it-m3", { autoAlpha: 1 }, 3.6995);
      tl.set("#mtr-it-dots", { autoAlpha: 0 }, 7.2995);
      tl.set("#mtr-it-m1", { y: 400 }, 7.2995);
      tl.set("#mtr-it-m2", { y: 499 }, 7.2995);
      tl.set("#mtr-it-m3", { y: 636 }, 7.2995);
      tl.set("#mtr-it-m4", { y: 1264 }, 7.2995);
      tl.fromTo(
        "#mtr-it-m4 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        7.2995,
      );
      tl.set("#mtr-it-m4", { autoAlpha: 1 }, 7.2995);
      tl.set("#mtr-it-m1", { y: 250 }, 8.0328);
      tl.set("#mtr-it-m2", { y: 349 }, 8.0328);
      tl.set("#mtr-it-m3", { y: 486 }, 8.0328);
      tl.set("#mtr-it-m4", { y: 1114 }, 8.0328);
      tl.set("#mtr-it-m5", { y: 1205 }, 8.0328);
      tl.fromTo(
        "#mtr-it-m5 .pop",
        { scale: 0.5, autoAlpha: 0.3 },
        { scale: 1, autoAlpha: 1, duration: 0.1, ease: "power2.out" },
        8.0328,
      );
      tl.set("#mtr-it-m5", { autoAlpha: 1 }, 8.0328);
      tl.set("#mtr-it-m1", { y: 113 }, 10.5995);
      tl.set("#mtr-it-m2", { y: 212 }, 10.5995);
      tl.set("#mtr-it-m3", { y: 349 }, 10.5995);
      tl.set("#mtr-it-m4", { y: 977 }, 10.5995);
      tl.set("#mtr-it-m5", { y: 1068 }, 10.5995);
      tl.set("#mtr-it-m6", { y: 1218 }, 10.5995);
      tl.fromTo(
        "#mtr-it-m6 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        10.5995,
      );
      tl.set("#mtr-it-m6", { autoAlpha: 1 }, 10.5995);
      tl.set("#mtr-it-m1", { y: 28 }, 11.3662);
      tl.set("#mtr-it-m2", { y: 127 }, 11.3662);
      tl.set("#mtr-it-m3", { y: 264 }, 11.3662);
      tl.set("#mtr-it-m4", { y: 892 }, 11.3662);
      tl.set("#mtr-it-m5", { y: 983 }, 11.3662);
      tl.set("#mtr-it-m6", { y: 1133 }, 11.3662);
      tl.set("#mtr-it-dots2", { y: 1278 }, 11.3662);
      tl.fromTo(
        "#mtr-it-dots2 .pop",
        { scale: 0.6, autoAlpha: 0.4 },
        { scale: 1, autoAlpha: 1, duration: 0.1, ease: "power2.out" },
        11.3662,
      );
      tl.set("#mtr-it-dots2", { autoAlpha: 1 }, 11.3662);
      tl.set("#mtr-it-dots2", { autoAlpha: 0 }, 12.3662);
      tl.set("#mtr-it-m1", { y: 14 }, 12.3662);
      tl.set("#mtr-it-m2", { y: 113 }, 12.3662);
      tl.set("#mtr-it-m3", { y: 250 }, 12.3662);
      tl.set("#mtr-it-m4", { y: 878 }, 12.3662);
      tl.set("#mtr-it-m5", { y: 969 }, 12.3662);
      tl.set("#mtr-it-m6", { y: 1119 }, 12.3662);
      tl.set("#mtr-it-m7", { y: 1264 }, 12.3662);
      tl.fromTo(
        "#mtr-it-m7 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        12.3662,
      );
      tl.set("#mtr-it-m7", { autoAlpha: 1 }, 12.3662);
      tl.set("#mtr-it-m1", { y: -85 }, 14.0662);
      tl.set("#mtr-it-m2", { y: 14 }, 14.0662);
      tl.set("#mtr-it-m3", { y: 151 }, 14.0662);
      tl.set("#mtr-it-m4", { y: 779 }, 14.0662);
      tl.set("#mtr-it-m5", { y: 870 }, 14.0662);
      tl.set("#mtr-it-m6", { y: 1020 }, 14.0662);
      tl.set("#mtr-it-m7", { y: 1165 }, 14.0662);
      tl.set("#mtr-it-m8", { y: 1264 }, 14.0662);
      tl.fromTo(
        "#mtr-it-m8 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        14.0662,
      );
      tl.set("#mtr-it-m8", { autoAlpha: 1 }, 14.0662);
      tl.set("#mtr-it-m1", { y: -176 }, 17.0995);
      tl.set("#mtr-it-m2", { y: -77 }, 17.0995);
      tl.set("#mtr-it-m3", { y: 60 }, 17.0995);
      tl.set("#mtr-it-m4", { y: 688 }, 17.0995);
      tl.set("#mtr-it-m5", { y: 779 }, 17.0995);
      tl.set("#mtr-it-m6", { y: 929 }, 17.0995);
      tl.set("#mtr-it-m7", { y: 1074 }, 17.0995);
      tl.set("#mtr-it-m8", { y: 1173 }, 17.0995);
      tl.set("#mtr-it-m9", { y: 1264 }, 17.0995);
      tl.fromTo(
        "#mtr-it-m9 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        17.0995,
      );
      tl.set("#mtr-it-m9", { autoAlpha: 1 }, 17.0995);
      tl.set("#mtr-it-m1", { y: -313 }, 19.8995);
      tl.set("#mtr-it-m2", { y: -214 }, 19.8995);
      tl.set("#mtr-it-m3", { y: -77 }, 19.8995);
      tl.set("#mtr-it-m4", { y: 551 }, 19.8995);
      tl.set("#mtr-it-m5", { y: 642 }, 19.8995);
      tl.set("#mtr-it-m6", { y: 792 }, 19.8995);
      tl.set("#mtr-it-m7", { y: 937 }, 19.8995);
      tl.set("#mtr-it-m8", { y: 1036 }, 19.8995);
      tl.set("#mtr-it-m9", { y: 1127 }, 19.8995);
      tl.set("#mtr-it-m10", { y: 1218 }, 19.8995);
      tl.fromTo(
        "#mtr-it-m10 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        19.8995,
      );
      tl.set("#mtr-it-m10", { autoAlpha: 1 }, 19.8995);
      tl.set("#mtr-it-m1", { y: -412 }, 20.6662);
      tl.set("#mtr-it-m2", { y: -313 }, 20.6662);
      tl.set("#mtr-it-m3", { y: -176 }, 20.6662);
      tl.set("#mtr-it-m4", { y: 452 }, 20.6662);
      tl.set("#mtr-it-m5", { y: 543 }, 20.6662);
      tl.set("#mtr-it-m6", { y: 693 }, 20.6662);
      tl.set("#mtr-it-m7", { y: 838 }, 20.6662);
      tl.set("#mtr-it-m8", { y: 937 }, 20.6662);
      tl.set("#mtr-it-m9", { y: 1028 }, 20.6662);
      tl.set("#mtr-it-m10", { y: 1119 }, 20.6662);
      tl.set("#mtr-it-m11", { y: 1264 }, 20.6662);
      tl.fromTo(
        "#mtr-it-m11 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        20.6662,
      );
      tl.set("#mtr-it-m11", { autoAlpha: 1 }, 20.6662);
      tl.set("#mtr-it-m1", { y: -503 }, 21.4328);
      tl.set("#mtr-it-m2", { y: -404 }, 21.4328);
      tl.set("#mtr-it-m3", { y: -267 }, 21.4328);
      tl.set("#mtr-it-m4", { y: 361 }, 21.4328);
      tl.set("#mtr-it-m5", { y: 452 }, 21.4328);
      tl.set("#mtr-it-m6", { y: 602 }, 21.4328);
      tl.set("#mtr-it-m7", { y: 747 }, 21.4328);
      tl.set("#mtr-it-m8", { y: 846 }, 21.4328);
      tl.set("#mtr-it-m9", { y: 937 }, 21.4328);
      tl.set("#mtr-it-m10", { y: 1028 }, 21.4328);
      tl.set("#mtr-it-m11", { y: 1173 }, 21.4328);
      tl.set("#mtr-it-m12", { y: 1264 }, 21.4328);
      tl.fromTo(
        "#mtr-it-m12 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        21.4328,
      );
      tl.set("#mtr-it-m12", { autoAlpha: 1 }, 21.4328);
      tl.set("#mtr-ph", { autoAlpha: 0 }, 2.0328);
      tl.set("#mtr-mic", { autoAlpha: 0 }, 2.0328);
      tl.set("#mtr-sendbtn", { autoAlpha: 1 }, 2.0328);
      tl.set("#mtr-ph", { autoAlpha: 1 }, 2.9662);
      tl.set("#mtr-mic", { autoAlpha: 1 }, 2.9662);
      tl.set("#mtr-sendbtn", { autoAlpha: 0 }, 2.9662);
      tl.set("#mtr-ty-1-0", { autoAlpha: 1 }, 2.0328);
      tl.set("#mtr-ty-1-0", { autoAlpha: 0 }, 2.0995);
      tl.set("#mtr-ty-1-1", { autoAlpha: 1 }, 2.0995);
      tl.set("#mtr-ty-1-1", { autoAlpha: 0 }, 2.1662);
      tl.set("#mtr-ty-1-2", { autoAlpha: 1 }, 2.1662);
      tl.set("#mtr-ty-1-2", { autoAlpha: 0 }, 2.2328);
      tl.set("#mtr-ty-1-3", { autoAlpha: 1 }, 2.2328);
      tl.set("#mtr-ty-1-3", { autoAlpha: 0 }, 2.2995);
      tl.set("#mtr-ty-1-4", { autoAlpha: 1 }, 2.2995);
      tl.set("#mtr-ty-1-4", { autoAlpha: 0 }, 2.3995);
      tl.set("#mtr-ty-1-5", { autoAlpha: 1 }, 2.3995);
      tl.set("#mtr-ty-1-5", { autoAlpha: 0 }, 2.4328);
      tl.set("#mtr-ty-1-6", { autoAlpha: 1 }, 2.4328);
      tl.set("#mtr-ty-1-6", { autoAlpha: 0 }, 2.4995);
      tl.set("#mtr-ty-1-7", { autoAlpha: 1 }, 2.4995);
      tl.set("#mtr-ty-1-7", { autoAlpha: 0 }, 2.5662);
      tl.set("#mtr-ty-1-8", { autoAlpha: 1 }, 2.5662);
      tl.set("#mtr-ty-1-8", { autoAlpha: 0 }, 2.5995);
      tl.set("#mtr-ty-1-9", { autoAlpha: 1 }, 2.5995);
      tl.set("#mtr-ty-1-9", { autoAlpha: 0 }, 2.7995);
      tl.set("#mtr-ty-1-10", { autoAlpha: 1 }, 2.7995);
      tl.set("#mtr-ty-1-10", { autoAlpha: 0 }, 2.9662);
      tl.set("#mtr-ph", { autoAlpha: 0 }, 8.8662);
      tl.set("#mtr-mic", { autoAlpha: 0 }, 8.8662);
      tl.set("#mtr-sendbtn", { autoAlpha: 1 }, 8.8662);
      tl.set("#mtr-ph", { autoAlpha: 1 }, 10.5995);
      tl.set("#mtr-mic", { autoAlpha: 1 }, 10.5995);
      tl.set("#mtr-sendbtn", { autoAlpha: 0 }, 10.5995);
      tl.set("#mtr-ty-2-0", { autoAlpha: 1 }, 8.8662);
      tl.set("#mtr-ty-2-0", { autoAlpha: 0 }, 8.9662);
      tl.set("#mtr-ty-2-1", { autoAlpha: 1 }, 8.9662);
      tl.set("#mtr-ty-2-1", { autoAlpha: 0 }, 8.9995);
      tl.set("#mtr-ty-2-2", { autoAlpha: 1 }, 8.9995);
      tl.set("#mtr-ty-2-2", { autoAlpha: 0 }, 9.0662);
      tl.set("#mtr-ty-2-3", { autoAlpha: 1 }, 9.0662);
      tl.set("#mtr-ty-2-3", { autoAlpha: 0 }, 9.1662);
      tl.set("#mtr-ty-2-4", { autoAlpha: 1 }, 9.1662);
      tl.set("#mtr-ty-2-4", { autoAlpha: 0 }, 9.2328);
      tl.set("#mtr-ty-2-5", { autoAlpha: 1 }, 9.2328);
      tl.set("#mtr-ty-2-5", { autoAlpha: 0 }, 9.2662);
      tl.set("#mtr-ty-2-6", { autoAlpha: 1 }, 9.2662);
      tl.set("#mtr-ty-2-6", { autoAlpha: 0 }, 9.3662);
      tl.set("#mtr-ty-2-7", { autoAlpha: 1 }, 9.3662);
      tl.set("#mtr-ty-2-7", { autoAlpha: 0 }, 9.3995);
      tl.set("#mtr-ty-2-8", { autoAlpha: 1 }, 9.3995);
      tl.set("#mtr-ty-2-8", { autoAlpha: 0 }, 9.4328);
      tl.set("#mtr-ty-2-9", { autoAlpha: 1 }, 9.4328);
      tl.set("#mtr-ty-2-9", { autoAlpha: 0 }, 9.5662);
      tl.set("#mtr-ty-2-10", { autoAlpha: 1 }, 9.5662);
      tl.set("#mtr-ty-2-10", { autoAlpha: 0 }, 9.5995);
      tl.set("#mtr-ty-2-11", { autoAlpha: 1 }, 9.5995);
      tl.set("#mtr-ty-2-11", { autoAlpha: 0 }, 9.6662);
      tl.set("#mtr-ty-2-12", { autoAlpha: 1 }, 9.6662);
      tl.set("#mtr-ty-2-12", { autoAlpha: 0 }, 9.7995);
      tl.set("#mtr-ty-2-13", { autoAlpha: 1 }, 9.7995);
      tl.set("#mtr-ty-2-13", { autoAlpha: 0 }, 9.8662);
      tl.set("#mtr-ty-2-14", { autoAlpha: 1 }, 9.8662);
      tl.set("#mtr-ty-2-14", { autoAlpha: 0 }, 9.8995);
      tl.set("#mtr-ty-2-15", { autoAlpha: 1 }, 9.8995);
      tl.set("#mtr-ty-2-15", { autoAlpha: 0 }, 9.9662);
      tl.set("#mtr-ty-2-16", { autoAlpha: 1 }, 9.9662);
      tl.set("#mtr-ty-2-16", { autoAlpha: 0 }, 9.9995);
      tl.set("#mtr-ty-2-17", { autoAlpha: 1 }, 9.9995);
      tl.set("#mtr-ty-2-17", { autoAlpha: 0 }, 10.0662);
      tl.set("#mtr-ty-2-18", { autoAlpha: 1 }, 10.0662);
      tl.set("#mtr-ty-2-18", { autoAlpha: 0 }, 10.1662);
      tl.set("#mtr-ty-2-19", { autoAlpha: 1 }, 10.1662);
      tl.set("#mtr-ty-2-19", { autoAlpha: 0 }, 10.2328);
      tl.set("#mtr-ty-2-20", { autoAlpha: 1 }, 10.2328);
      tl.set("#mtr-ty-2-20", { autoAlpha: 0 }, 10.2995);
      tl.set("#mtr-ty-2-21", { autoAlpha: 1 }, 10.2995);
      tl.set("#mtr-ty-2-21", { autoAlpha: 0 }, 10.3995);
      tl.set("#mtr-ty-2-22", { autoAlpha: 1 }, 10.3995);
      tl.set("#mtr-ty-2-22", { autoAlpha: 0 }, 10.4662);
      tl.set("#mtr-ty-2-23", { autoAlpha: 1 }, 10.4662);
      tl.set("#mtr-ty-2-23", { autoAlpha: 0 }, 10.5995);
      tl.set("#mtr-ph", { autoAlpha: 0 }, 13.3995);
      tl.set("#mtr-mic", { autoAlpha: 0 }, 13.3995);
      tl.set("#mtr-sendbtn", { autoAlpha: 1 }, 13.3995);
      tl.set("#mtr-ph", { autoAlpha: 1 }, 14.0662);
      tl.set("#mtr-mic", { autoAlpha: 1 }, 14.0662);
      tl.set("#mtr-sendbtn", { autoAlpha: 0 }, 14.0662);
      tl.set("#mtr-ty-3-0", { autoAlpha: 1 }, 13.3995);
      tl.set("#mtr-ty-3-0", { autoAlpha: 0 }, 13.4328);
      tl.set("#mtr-ty-3-1", { autoAlpha: 1 }, 13.4328);
      tl.set("#mtr-ty-3-1", { autoAlpha: 0 }, 13.4995);
      tl.set("#mtr-ty-3-2", { autoAlpha: 1 }, 13.4995);
      tl.set("#mtr-ty-3-2", { autoAlpha: 0 }, 13.5995);
      tl.set("#mtr-ty-3-3", { autoAlpha: 1 }, 13.5995);
      tl.set("#mtr-ty-3-3", { autoAlpha: 0 }, 13.6662);
      tl.set("#mtr-ty-3-4", { autoAlpha: 1 }, 13.6662);
      tl.set("#mtr-ty-3-4", { autoAlpha: 0 }, 13.6995);
      tl.set("#mtr-ty-3-5", { autoAlpha: 1 }, 13.6995);
      tl.set("#mtr-ty-3-5", { autoAlpha: 0 }, 13.7995);
      tl.set("#mtr-ty-3-6", { autoAlpha: 1 }, 13.7995);
      tl.set("#mtr-ty-3-6", { autoAlpha: 0 }, 13.9662);
      tl.set("#mtr-ty-3-7", { autoAlpha: 1 }, 13.9662);
      tl.set("#mtr-ty-3-7", { autoAlpha: 0 }, 14.0328);
      tl.set("#mtr-ty-3-8", { autoAlpha: 1 }, 14.0328);
      tl.set("#mtr-ty-3-8", { autoAlpha: 0 }, 14.0662);
      tl.set("#mtr-ph", { autoAlpha: 0 }, 15.1662);
      tl.set("#mtr-mic", { autoAlpha: 0 }, 15.1662);
      tl.set("#mtr-sendbtn", { autoAlpha: 1 }, 15.1662);
      tl.set("#mtr-ph", { autoAlpha: 1 }, 17.0995);
      tl.set("#mtr-mic", { autoAlpha: 1 }, 17.0995);
      tl.set("#mtr-sendbtn", { autoAlpha: 0 }, 17.0995);
      tl.set("#mtr-ty-4-0", { autoAlpha: 1 }, 15.1662);
      tl.set("#mtr-ty-4-0", { autoAlpha: 0 }, 15.1995);
      tl.set("#mtr-ty-4-1", { autoAlpha: 1 }, 15.1995);
      tl.set("#mtr-ty-4-1", { autoAlpha: 0 }, 15.2328);
      tl.set("#mtr-ty-4-2", { autoAlpha: 1 }, 15.2328);
      tl.set("#mtr-ty-4-2", { autoAlpha: 0 }, 15.2995);
      tl.set("#mtr-ty-4-3", { autoAlpha: 1 }, 15.2995);
      tl.set("#mtr-ty-4-3", { autoAlpha: 0 }, 15.3995);
      tl.set("#mtr-ty-4-4", { autoAlpha: 1 }, 15.3995);
      tl.set("#mtr-ty-4-4", { autoAlpha: 0 }, 15.4328);
      tl.set("#mtr-ty-4-5", { autoAlpha: 1 }, 15.4328);
      tl.set("#mtr-ty-4-5", { autoAlpha: 0 }, 15.4995);
      tl.set("#mtr-ty-4-6", { autoAlpha: 1 }, 15.4995);
      tl.set("#mtr-ty-4-6", { autoAlpha: 0 }, 15.5662);
      tl.set("#mtr-ty-4-7", { autoAlpha: 1 }, 15.5662);
      tl.set("#mtr-ty-4-7", { autoAlpha: 0 }, 15.6328);
      tl.set("#mtr-ty-4-8", { autoAlpha: 1 }, 15.6328);
      tl.set("#mtr-ty-4-8", { autoAlpha: 0 }, 15.6662);
      tl.set("#mtr-ty-4-9", { autoAlpha: 1 }, 15.6662);
      tl.set("#mtr-ty-4-9", { autoAlpha: 0 }, 15.6995);
      tl.set("#mtr-ty-4-10", { autoAlpha: 1 }, 15.6995);
      tl.set("#mtr-ty-4-10", { autoAlpha: 0 }, 15.7995);
      tl.set("#mtr-ty-4-11", { autoAlpha: 1 }, 15.7995);
      tl.set("#mtr-ty-4-11", { autoAlpha: 0 }, 15.8662);
      tl.set("#mtr-ty-4-12", { autoAlpha: 1 }, 15.8662);
      tl.set("#mtr-ty-4-12", { autoAlpha: 0 }, 15.8995);
      tl.set("#mtr-ty-4-13", { autoAlpha: 1 }, 15.8995);
      tl.set("#mtr-ty-4-13", { autoAlpha: 0 }, 16.0662);
      tl.set("#mtr-ty-4-14", { autoAlpha: 1 }, 16.0662);
      tl.set("#mtr-ty-4-14", { autoAlpha: 0 }, 16.0995);
      tl.set("#mtr-ty-4-15", { autoAlpha: 1 }, 16.0995);
      tl.set("#mtr-ty-4-15", { autoAlpha: 0 }, 16.2328);
      tl.set("#mtr-ty-4-16", { autoAlpha: 1 }, 16.2328);
      tl.set("#mtr-ty-4-16", { autoAlpha: 0 }, 16.2662);
      tl.set("#mtr-ty-4-17", { autoAlpha: 1 }, 16.2662);
      tl.set("#mtr-ty-4-17", { autoAlpha: 0 }, 16.2995);
      tl.set("#mtr-ty-4-18", { autoAlpha: 1 }, 16.2995);
      tl.set("#mtr-ty-4-18", { autoAlpha: 0 }, 16.3995);
      tl.set("#mtr-ty-4-19", { autoAlpha: 1 }, 16.3995);
      tl.set("#mtr-ty-4-19", { autoAlpha: 0 }, 16.4662);
      tl.set("#mtr-ty-4-20", { autoAlpha: 1 }, 16.4662);
      tl.set("#mtr-ty-4-20", { autoAlpha: 0 }, 16.4995);
      tl.set("#mtr-ty-4-21", { autoAlpha: 1 }, 16.4995);
      tl.set("#mtr-ty-4-21", { autoAlpha: 0 }, 16.5662);
      tl.set("#mtr-ty-4-22", { autoAlpha: 1 }, 16.5662);
      tl.set("#mtr-ty-4-22", { autoAlpha: 0 }, 16.6328);
      tl.set("#mtr-ty-4-23", { autoAlpha: 1 }, 16.6328);
      tl.set("#mtr-ty-4-23", { autoAlpha: 0 }, 16.6995);
      tl.set("#mtr-ty-4-24", { autoAlpha: 1 }, 16.6995);
      tl.set("#mtr-ty-4-24", { autoAlpha: 0 }, 16.7995);
      tl.set("#mtr-ty-4-25", { autoAlpha: 1 }, 16.7995);
      tl.set("#mtr-ty-4-25", { autoAlpha: 0 }, 16.8328);
      tl.set("#mtr-ty-4-26", { autoAlpha: 1 }, 16.8328);
      tl.set("#mtr-ty-4-26", { autoAlpha: 0 }, 16.8995);
      tl.set("#mtr-ty-4-27", { autoAlpha: 1 }, 16.8995);
      tl.set("#mtr-ty-4-27", { autoAlpha: 0 }, 17.0995);
      tl.set("#mtr-ph", { autoAlpha: 0 }, 18.1662);
      tl.set("#mtr-mic", { autoAlpha: 0 }, 18.1662);
      tl.set("#mtr-sendbtn", { autoAlpha: 1 }, 18.1662);
      tl.set("#mtr-ph", { autoAlpha: 1 }, 19.8995);
      tl.set("#mtr-mic", { autoAlpha: 1 }, 19.8995);
      tl.set("#mtr-sendbtn", { autoAlpha: 0 }, 19.8995);
      tl.set("#mtr-ty-5-0", { autoAlpha: 1 }, 18.1662);
      tl.set("#mtr-ty-5-0", { autoAlpha: 0 }, 18.2328);
      tl.set("#mtr-ty-5-1", { autoAlpha: 1 }, 18.2328);
      tl.set("#mtr-ty-5-1", { autoAlpha: 0 }, 18.2662);
      tl.set("#mtr-ty-5-2", { autoAlpha: 1 }, 18.2662);
      tl.set("#mtr-ty-5-2", { autoAlpha: 0 }, 18.3662);
      tl.set("#mtr-ty-5-3", { autoAlpha: 1 }, 18.3662);
      tl.set("#mtr-ty-5-3", { autoAlpha: 0 }, 18.4328);
      tl.set("#mtr-ty-5-4", { autoAlpha: 1 }, 18.4328);
      tl.set("#mtr-ty-5-4", { autoAlpha: 0 }, 18.4995);
      tl.set("#mtr-ty-5-5", { autoAlpha: 1 }, 18.4995);
      tl.set("#mtr-ty-5-5", { autoAlpha: 0 }, 18.5995);
      tl.set("#mtr-ty-5-6", { autoAlpha: 1 }, 18.5995);
      tl.set("#mtr-ty-5-6", { autoAlpha: 0 }, 18.6662);
      tl.set("#mtr-ty-5-7", { autoAlpha: 1 }, 18.6662);
      tl.set("#mtr-ty-5-7", { autoAlpha: 0 }, 18.7328);
      tl.set("#mtr-ty-5-8", { autoAlpha: 1 }, 18.7328);
      tl.set("#mtr-ty-5-8", { autoAlpha: 0 }, 18.7995);
      tl.set("#mtr-ty-5-9", { autoAlpha: 1 }, 18.7995);
      tl.set("#mtr-ty-5-9", { autoAlpha: 0 }, 18.8328);
      tl.set("#mtr-ty-5-10", { autoAlpha: 1 }, 18.8328);
      tl.set("#mtr-ty-5-10", { autoAlpha: 0 }, 18.9995);
      tl.set("#mtr-ty-5-11", { autoAlpha: 1 }, 18.9995);
      tl.set("#mtr-ty-5-11", { autoAlpha: 0 }, 19.0328);
      tl.set("#mtr-ty-5-12", { autoAlpha: 1 }, 19.0328);
      tl.set("#mtr-ty-5-12", { autoAlpha: 0 }, 19.0995);
      tl.set("#mtr-ty-5-13", { autoAlpha: 1 }, 19.0995);
      tl.set("#mtr-ty-5-13", { autoAlpha: 0 }, 19.1662);
      tl.set("#mtr-ty-5-14", { autoAlpha: 1 }, 19.1662);
      tl.set("#mtr-ty-5-14", { autoAlpha: 0 }, 19.1995);
      tl.set("#mtr-ty-5-15", { autoAlpha: 1 }, 19.1995);
      tl.set("#mtr-ty-5-15", { autoAlpha: 0 }, 19.2662);
      tl.set("#mtr-ty-5-16", { autoAlpha: 1 }, 19.2662);
      tl.set("#mtr-ty-5-16", { autoAlpha: 0 }, 19.3662);
      tl.set("#mtr-ty-5-17", { autoAlpha: 1 }, 19.3662);
      tl.set("#mtr-ty-5-17", { autoAlpha: 0 }, 19.4328);
      tl.set("#mtr-ty-5-18", { autoAlpha: 1 }, 19.4328);
      tl.set("#mtr-ty-5-18", { autoAlpha: 0 }, 19.4995);
      tl.set("#mtr-ty-5-19", { autoAlpha: 1 }, 19.4995);
      tl.set("#mtr-ty-5-19", { autoAlpha: 0 }, 19.5328);
      tl.set("#mtr-ty-5-20", { autoAlpha: 1 }, 19.5328);
      tl.set("#mtr-ty-5-20", { autoAlpha: 0 }, 19.5995);
      tl.set("#mtr-ty-5-21", { autoAlpha: 1 }, 19.5995);
      tl.set("#mtr-ty-5-21", { autoAlpha: 0 }, 19.6662);
      tl.set("#mtr-ty-5-22", { autoAlpha: 1 }, 19.6662);
      tl.set("#mtr-ty-5-22", { autoAlpha: 0 }, 19.7662);
      tl.set("#mtr-ty-5-23", { autoAlpha: 1 }, 19.7662);
      tl.set("#mtr-ty-5-23", { autoAlpha: 0 }, 19.7995);
      tl.set("#mtr-ty-5-24", { autoAlpha: 1 }, 19.7995);
      tl.set("#mtr-ty-5-24", { autoAlpha: 0 }, 19.8995);
      tl.set("#mtr-ec-wrap", { autoAlpha: 0 }, 23.257);
      tl.fromTo(
        "#mtr-ec-wrap",
        { autoAlpha: 0 },
        { autoAlpha: 1, duration: 0.3, ease: "none" },
        23.2667,
      );
      window.__timelines["message-thread-reveal"] = tl;
    </script>
  </body>
</html>
```

</VariablesExplorer>

## Install

<InstallCommand command="npx hyperframes add message-thread-reveal" item="message-thread-reveal" />

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
<div
  data-composition-id="message-thread-reveal"
  data-composition-src="compositions/message-thread-reveal.html"
  data-start="0"
  data-duration="25.7667"
  data-track-index="1"
  data-width="1080"
  data-height="1920"
></div>
```

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
<div
  data-composition-id="message-thread-reveal"
  data-composition-src="compositions/message-thread-reveal.html"
  data-variable-values='{"contactName":"Rachel","questionMessage":"what r u using for the launch video??","teaserMessage":"wait look 👀","cardImage":"assets/card-image.jpg","cardTitle":"HyperFrames | Write HTML, render pixel-perfect video","cardDomain":"hyperframes.heygen.com","reactionMessage":"OMG IT'S HTML","reactionEmoji":"🤯🤯🤯","benefitMessage":"renders in 4K. no editor","discoveryMessage":"where did u find this","sourceMessage":"on heygen","workflowMessage":"u just write plain html tags","ownershipMessage":"the code is yours forever","installMessage":"installing rn","thanksMessage":"ty bestie 💚","brandLogo":"assets/hyperframes-logo-black.svg","ecProof":"12,000+ creators","ecFeature1":"Write|plain HTML","ecFeature2":"Render|pixel-perfect","ecFeature3":"Own|every line","ecCta":"Start rendering free"}'
></div>
```

## Source

<Accordion title={`message-thread-reveal.html`}>

```html
<!doctype html>
<html
  lang="en"
  data-composition-variables='[
    { "id": "contactName", "type": "string", "role": "content", "label": "Contact name", "description": "Name pill in the chat header; the avatar shows its first letter.", "default": "Rachel" },
    { "id": "questionMessage", "type": "string", "role": "content", "label": "Opening question", "description": "First incoming message that establishes what the conversation is about.", "default": "what r u using for the launch video??" },
    { "id": "teaserMessage", "type": "string", "role": "content", "label": "Teaser reply", "description": "First typed outgoing reply before the shared link card.", "default": "wait look 👀" },
    { "id": "cardImage", "type": "image", "role": "content", "label": "Link card image", "description": "Preview image on the shared link card.", "default": "assets/card-image.jpg" },
    { "id": "cardTitle", "type": "string", "role": "content", "label": "Link card title", "description": "Title on the shared link card.", "default": "HyperFrames | Write HTML, render pixel-perfect video" },
    { "id": "cardDomain", "type": "string", "role": "content", "label": "Link card domain", "description": "Domain line under the card title.", "default": "hyperframes.heygen.com" },
    { "id": "reactionMessage", "type": "string", "role": "content", "label": "Link reaction", "description": "Incoming reaction immediately after the shared link.", "default": "OMG IT&#39;S HTML" },
    { "id": "reactionEmoji", "type": "string", "role": "content", "label": "Reaction emoji", "description": "Emoji-only reaction after the shared link.", "default": "🤯🤯🤯" },
    { "id": "benefitMessage", "type": "string", "role": "content", "label": "Benefit reply", "description": "Typed outgoing reply that names the primary benefit.", "default": "renders in 4K. no editor" },
    { "id": "discoveryMessage", "type": "string", "role": "content", "label": "Discovery question", "description": "Incoming question asking where the product was found.", "default": "where did u find this" },
    { "id": "sourceMessage", "type": "string", "role": "content", "label": "Source reply", "description": "Typed outgoing reply naming where to find the product.", "default": "on heygen" },
    { "id": "workflowMessage", "type": "string", "role": "content", "label": "Workflow reply", "description": "Typed outgoing reply describing how the product works.", "default": "u just write plain html tags" },
    { "id": "ownershipMessage", "type": "string", "role": "content", "label": "Ownership reply", "description": "Typed outgoing reply that closes the product explanation.", "default": "the code is yours forever" },
    { "id": "installMessage", "type": "string", "role": "content", "label": "Intent reply", "description": "Incoming message expressing intent to try the product.", "default": "installing rn" },
    { "id": "thanksMessage", "type": "string", "role": "content", "label": "Closing reply", "description": "Final incoming message in the conversation.", "default": "ty bestie 💚" },
    { "id": "brandLogo", "type": "image", "role": "content", "label": "Brand logo", "description": "Transparent horizontal wordmark on the closing card.", "default": "assets/hyperframes-logo-black.svg" },
    { "id": "ecProof", "type": "string", "role": "content", "label": "End-card proof", "description": "Social-proof line under the stars.", "default": "12,000+ creators" },
    { "id": "ecFeature1", "type": "string", "role": "content", "label": "End-card feature 1", "description": "First two-line benefit; use | to break the line.", "default": "Write|plain HTML" },
    { "id": "ecFeature2", "type": "string", "role": "content", "label": "End-card feature 2", "description": "Second two-line benefit; use | to break the line.", "default": "Render|pixel-perfect" },
    { "id": "ecFeature3", "type": "string", "role": "content", "label": "End-card feature 3", "description": "Third two-line benefit; use | to break the line.", "default": "Own|every line" },
    { "id": "ecCta", "type": "string", "role": "content", "label": "End-card CTA", "description": "Label on the closing card button.", "default": "Start rendering free" }
  ]'
>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1080, height=1920" />
    <title>Message Thread Reveal</title>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: #000;
      }
      #mtr-root {
        position: relative;
        width: 1080px;
        height: 1920px;
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      }
      #mtr-plate {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 90% 60% at 30% 20%,
            rgba(60, 230, 172, 0.1) 0%,
            rgba(60, 230, 172, 0) 60%
          ),
          linear-gradient(168deg, #23262b 0%, #17191d 55%, #101114 100%);
      }
      #mtr-phonebody {
        position: absolute;
        left: 124px;
        top: 64px;
        width: 832px;
        height: 1797px;
        border-radius: 112px;
        background: #3a3d42;
        box-shadow:
          inset 0 2px 3px rgba(255, 255, 255, 0.25),
          0 40px 90px rgba(0, 0, 0, 0.6);
      }
      .clip {
        position: absolute;
        inset: 0;
      }
      /* ---------- phone screen ---------- */
      #mtr-screen {
        position: absolute;
        left: 140px;
        top: 80px;
        width: 800px;
        height: 1765px;
        border-radius: 100px;
        background: #000;
        overflow: hidden;
      }
      /* status bar */
      #mtr-sb-time {
        position: absolute;
        left: 88px;
        top: 57px;
        color: #fff;
        font-size: 34px;
        font-weight: 600;
        letter-spacing: 0.5px;
      }
      #mtr-sb-icons {
        position: absolute;
        left: 578px;
        top: 66px;
      }
      /* header */
      #mtr-hdr-back {
        position: absolute;
        left: 48px;
        top: 158px;
      }
      #mtr-hdr-badge {
        position: absolute;
        left: 112px;
        top: 163px;
        height: 44px;
        padding: 0 22px;
        background: #262628;
        border-radius: 22px;
        color: #fff;
        font-size: 28px;
        line-height: 44px;
      }
      #mtr-hdr-avatar {
        position: absolute;
        left: 356px;
        top: 122px;
        width: 86px;
        height: 86px;
        border-radius: 50%;
        background: #9ce474;
        color: #12300c;
        font-size: 44px;
        font-weight: 600;
        display: grid;
        place-items: center;
      }
      #mtr-hdr-name {
        position: absolute;
        left: 400px;
        top: 213px;
        transform: translateX(-50%);
        height: 46px;
        padding: 0 20px;
        background: #232325;
        border-radius: 23px;
        color: #fff;
        font-size: 29px;
        line-height: 46px;
        white-space: nowrap;
      }
      #mtr-hdr-name .chev {
        color: #8e8e93;
        font-size: 26px;
        margin-left: 8px;
      }
      #mtr-hdr-cam {
        position: absolute;
        left: 699px;
        top: 166px;
      }
      /* chat viewport */
      #mtr-chatview {
        position: absolute;
        left: 0;
        top: 265px;
        width: 800px;
        height: 1367px;
        overflow: hidden;
      }
      .item {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        visibility: hidden;
      }
      .item.recv {
        padding-left: 44px;
        text-align: left;
      }
      .item.sent {
        padding-right: 45px;
        text-align: right;
      }
      .pop {
        display: inline-block;
        position: relative;
      }
      .pop-recv {
        transform-origin: left bottom;
      }
      .pop-sent {
        transform-origin: right bottom;
      }
      /* font 32.9px: artifact-closed-loop calibration (ref m1 ink 624x32 vs shipped-render 711x36 -> x0.876;
     the earlier 37.5px also overflowed max-width). padding 28px: ref ink inset 31/30 vs rep 26. */
      .bubble {
        display: inline-block;
        position: relative;
        max-width: 720px;
        padding: 0 28px;
        height: 81px;
        line-height: 81px;
        border-radius: 40px;
        font-size: 32.9px;
        color: #fff;
        white-space: nowrap;
        text-align: left;
      }
      .bubble.recv {
        background: #242428;
      }
      .bubble.sent {
        background: #0a80f8;
      }
      /* iMessage tails (screen bg is pure black -> cover circle trick) */
      .tail-recv::before {
        content: "";
        position: absolute;
        left: -10px;
        bottom: 0;
        width: 26px;
        height: 26px;
        background: #242428;
        border-bottom-right-radius: 20px 18px;
      }
      .tail-recv::after {
        content: "";
        position: absolute;
        left: -26px;
        bottom: -2px;
        width: 20px;
        height: 30px;
        background: #000;
        border-bottom-right-radius: 16px;
      }
      .tail-sent::before {
        content: "";
        position: absolute;
        right: -10px;
        bottom: 0;
        width: 26px;
        height: 26px;
        background: #0a80f8;
        border-bottom-left-radius: 20px 18px;
      }
      .tail-sent::after {
        content: "";
        position: absolute;
        right: -26px;
        bottom: -2px;
        width: 20px;
        height: 30px;
        background: #000;
        border-bottom-left-radius: 16px;
      }
      .delivered {
        color: #8e8e93;
        font-size: 28px;
        margin-top: 12px;
        padding-right: 7px;
        text-align: right;
      }
      /* 105.5px/ls2/ml12: artifact-closed-loop (ref yellow body h92, row w304, x203 vs rep 103/383/209) */
      .emojirow {
        font-size: 105.5px;
        line-height: 140px;
        letter-spacing: 2px;
        margin-left: 12px;
        white-space: nowrap;
        color: #fff;
      }
      /* typing indicator */
      .dotswrap {
        position: relative;
        display: inline-block;
      }
      .dotsbubble {
        width: 124px;
        height: 67px;
        background: #242428;
        border-radius: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      .dot {
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: #8e8e93;
        display: inline-block;
      }
      .dtail1 {
        position: absolute;
        left: -2px;
        bottom: -4px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #242428;
      }
      .dtail2 {
        position: absolute;
        left: -14px;
        bottom: -14px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #242428;
      }
      /* link card */
      .card {
        display: inline-block;
        width: 443px;
        border-radius: 36px;
        overflow: hidden;
        text-align: left;
      }
      .cardimg {
        display: block;
        width: 443px;
        height: 432px;
        object-fit: cover;
      }
      .cardmeta {
        height: 178px;
        background: #28282c;
        display: flex;
        align-items: center;
        padding: 0 18px 0 26px;
      }
      .cardtxt {
        flex: 1;
        min-width: 0;
      }
      /* 26.8/23.3px: artifact-closed-loop (ref title ink w302 vs rep 350 -> x0.863); max-width keeps the
     measured 3-line wrap 'Where Are You? Dad / Edition | A personalized / book about him' */
      .cardtitle {
        color: #fff;
        font-size: 26.8px;
        font-weight: 600;
        line-height: 34px;
        max-width: 318px;
      }
      .carddomain {
        color: #8e8e93;
        font-size: 23.3px;
        margin-top: 4px;
      }
      .cardchev {
        color: #8e8e93;
        font-size: 48px;
        padding-left: 8px;
      }
      /* input bar */
      #mtr-plusbtn {
        position: absolute;
        left: 12px;
        top: 1653px;
        width: 86px;
        height: 86px;
        border-radius: 50%;
        background: #262628;
        color: #8e8e93;
        font-size: 52px;
        font-weight: 300;
        display: grid;
        place-items: center;
      }
      #mtr-field {
        position: absolute;
        left: 124px;
        top: 1646px;
        width: 665px;
        height: 93px;
        border: 2px solid #202022;
        border-radius: 47px;
      }
      #mtr-ph {
        position: absolute;
        left: 158px;
        top: 1668px;
        color: #8e8e93;
        font-size: 35px;
        line-height: 48px;
      }
      #mtr-typedwrap {
        position: absolute;
        left: 158px;
        top: 1668px;
        width: 600px;
        height: 48px;
        white-space: pre;
      }
      .typed {
        position: absolute;
        left: 0;
        top: 0;
        visibility: hidden;
        color: #fff;
        font-size: 36px;
        line-height: 48px;
        white-space: pre;
      }
      .caret {
        display: inline-block;
        width: 4px;
        height: 42px;
        background: #0a80f8;
        vertical-align: -8px;
        margin-left: 2px;
        border-radius: 2px;
      }
      #mtr-mic {
        position: absolute;
        left: 724px;
        top: 1664px;
      }
      #mtr-sendbtn {
        position: absolute;
        left: 698px;
        top: 1660px;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #0a80f8;
        visibility: hidden;
        display: grid;
        place-items: center;
      }
      /* ---------- end card ---------- */
      #mtr-ec-wrap {
        position: absolute;
        inset: 0;
        background: #f9f2e7;
        font-family: Georgia, "Times New Roman", serif;
      }
      #mtr-ec-logo {
        position: absolute;
        left: 308px;
        top: 500px;
        width: 464px;
        height: 139px;
      }
      #mtr-ec-stars {
        position: absolute;
        left: 372px;
        top: 714px;
        width: 336px;
        display: flex;
        gap: 15px;
      }
      #mtr-ec-fam {
        position: absolute;
        left: 0;
        top: 796px;
        width: 100%;
        text-align: center;
        color: #185450;
        font-size: 35.5px;
        font-weight: 700;
      }
      .ec-icon {
        position: absolute;
        top: 934px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: #185450;
        display: grid;
        place-items: center;
      }
      #mtr-ec-fam {
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      }
      .ec-label {
        position: absolute;
        top: 1098px;
        width: 240px;
        text-align: center;
        color: #205048;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 31px;
        line-height: 40px;
      }
      #mtr-ec-cta {
        position: absolute;
        left: 200px;
        top: 1298px;
        width: 680px;
        height: 118px;
        border-radius: 59px;
        background: #3ce6ac;
        color: #0d3b2b;
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 700;
        font-size: 46px;
        display: grid;
        place-items: center;
      }
    </style>
  </head>
  <body>
    <div
      id="mtr-root"
      data-composition-id="message-thread-reveal"
      data-start="0"
      data-width="1080"
      data-height="1920"
      data-duration="25.7667"
    >
      <div id="mtr-plate">
        <div id="mtr-phonebody"></div>
      </div>
      <section
        id="scene-chat"
        class="clip"
        data-start="0"
        data-duration="23.62"
        data-track-index="1"
      >
        <div id="mtr-screen">
          <div id="mtr-sb-time">9:41</div>
          <svg id="mtr-sb-icons" width="86" height="30" viewBox="0 0 86 30">
            <rect x="0" y="16" width="5" height="9" rx="1.5" fill="#fff" />
            <rect x="8" y="12" width="5" height="13" rx="1.5" fill="#fff" />
            <rect x="16" y="8" width="5" height="17" rx="1.5" fill="#fff" />
            <rect x="24" y="4" width="5" height="21" rx="1.5" fill="#fff" />
            <g transform="translate(44,2)">
              <path
                d="M18 21.5 L21.5 25 L25 21.5 A5 5 0 0 0 18 21.5"
                fill="#fff"
                transform="translate(-10,-2)"
              />
              <path
                d="M4 13 A14 14 0 0 1 23 13"
                stroke="#fff"
                stroke-width="4"
                fill="none"
                transform="translate(-2,-2)"
              />
              <path
                d="M8.5 17.5 A8 8 0 0 1 18.5 17.5"
                stroke="#fff"
                stroke-width="4"
                fill="none"
                transform="translate(-2,-2)"
              />
            </g>
          </svg>
          <svg id="mtr-hdr-back" width="26" height="48" viewBox="0 0 26 48">
            <path
              d="M23 3 L4 24 L23 45"
              stroke="#E4E4E4"
              stroke-width="6"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <div id="mtr-hdr-badge">12</div>
          <div id="mtr-hdr-avatar">R</div>
          <div id="mtr-hdr-name">Rachel<span class="chev">›</span></div>
          <svg id="mtr-hdr-cam" width="52" height="34" viewBox="0 0 52 34">
            <rect x="0" y="1" width="36" height="32" rx="9" fill="#fff" />
            <path d="M38 12 L50 4 V30 L38 22 Z" fill="#fff" />
          </svg>
          <div id="mtr-chatview">
            <div
              class="item recv"
              id="mtr-it-m1"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="bubble recv"
                  id="mtr-message-question"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  what r u using for the launch video??
                </div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-dots"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div class="dotswrap">
                  <div class="dotsbubble">
                    <span class="dot"></span><span class="dot"></span><span class="dot"></span>
                  </div>
                  <div class="dtail1"></div>
                  <div class="dtail2"></div>
                </div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m2"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div
                  class="bubble sent tail-sent"
                  id="mtr-message-teaser"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  wait look 👀
                </div>
                <div class="delivered">Delivered</div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m3"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div class="card">
                  <img
                    class="cardimg"
                    data-var-src="cardImage"
                    src="assets/card-image.jpg"
                    alt=""
                  />
                  <div class="cardmeta">
                    <div class="cardtxt">
                      <div class="cardtitle">
                        HyperFrames | Write HTML, render pixel-perfect video
                      </div>
                      <div class="carddomain">hyperframes.heygen.com</div>
                    </div>
                    <div class="cardchev">›</div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-m4"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="bubble recv"
                  id="mtr-message-reaction"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  OMG IT&#39;S HTML
                </div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-m5"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="emojirow"
                  id="mtr-message-emoji"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  🤯🤯🤯
                </div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m6"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div
                  class="bubble sent tail-sent"
                  id="mtr-message-benefit"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  renders in 4K. no editor
                </div>
                <div class="delivered">Delivered</div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-dots2"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div class="dotswrap">
                  <div class="dotsbubble">
                    <span class="dot"></span><span class="dot"></span><span class="dot"></span>
                  </div>
                  <div class="dtail1"></div>
                  <div class="dtail2"></div>
                </div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-m7"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="bubble recv tail-recv"
                  id="mtr-message-discovery"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  where did u find this
                </div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m8"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div
                  class="bubble sent"
                  id="mtr-message-source"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  on heygen
                </div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m9"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div
                  class="bubble sent"
                  id="mtr-message-workflow"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  u just write plain html tags
                </div>
              </div>
            </div>
            <div
              class="item sent"
              id="mtr-it-m10"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-sent">
                <div
                  class="bubble sent tail-sent"
                  id="mtr-message-ownership"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  the code is yours forever
                </div>
                <div class="delivered">Delivered</div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-m11"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="bubble recv"
                  id="mtr-message-install"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  installing rn
                </div>
              </div>
            </div>
            <div
              class="item recv"
              id="mtr-it-m12"
              data-layout-allow-overflow
              data-layout-allow-overlap
              data-layout-allow-occlusion
            >
              <div class="pop pop-recv">
                <div
                  class="bubble recv tail-recv"
                  id="mtr-message-thanks"
                  data-layout-allow-overlap
                  data-layout-allow-occlusion
                >
                  ty bestie 💚
                </div>
              </div>
            </div>
          </div>
          <div id="mtr-plusbtn">+</div>
          <div id="mtr-field"></div>
          <div id="mtr-ph">Message</div>
          <div id="mtr-typedwrap">
            <span class="typed" id="mtr-ty-1-0">o<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-1">wa<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-2">wai<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-3">wait<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-4">wait <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-5">wait l<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-6">wait lo<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-7">wait loo<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-8">wait look<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-9">wait look <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-1-10">wait look 👀<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-0">r<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-1">re<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-2">ren<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-3">rend<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-4">rende<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-5">render<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-6">renders<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-7">renders <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-8">renders i<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-9">renders in<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-10">renders in <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-11">renders in 4<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-12">renders in 4K<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-13">renders in 4K.<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-14">renders in 4K. <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-15">renders in 4K. n<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-16">renders in 4K. no<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-2-17"
              >renders in 4K. no <span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-18"
              >renders in 4K. no e<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-19"
              >renders in 4K. no ed<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-20"
              >renders in 4K. no edi<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-21"
              >renders in 4K. no edit<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-22"
              >renders in 4K. no edito<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-2-23"
              >renders in 4K. no editor<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-3-0">o<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-1">on<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-2">on <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-3">on h<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-4">on he<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-5">on hey<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-6">on heyg<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-7">on heyge<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-3-8">on heygen<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-0">u<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-1">u <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-2">u j<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-3">u ju<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-4">u jus<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-5">u just<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-6">u just <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-7">u just w<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-8">u just wr<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-9">u just wri<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-10">u just writ<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-11">u just write<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-12">u just write <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-13">u just write p<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-14">u just write pl<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-15">u just write pla<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-16">u just write plai<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-4-17"
              >u just write plain<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-18"
              >u just write plain <span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-19"
              >u just write plain h<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-20"
              >u just write plain ht<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-21"
              >u just write plain htm<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-22"
              >u just write plain html<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-23"
              >u just write plain html <span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-24"
              >u just write plain html t<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-25"
              >u just write plain html ta<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-26"
              >u just write plain html tag<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-4-27"
              >u just write plain html tags<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-0">r<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-1">th<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-2">the<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-3">the <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-4">the c<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-5">the co<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-6">the cod<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-7">the code<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-8">the code <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-9">the code i<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-10">the code is<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-11">the code is <span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-12">the code is y<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-13">the code is yo<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-14">the code is you<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-15">the code is your<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-16">the code is yours<span class="caret"></span></span>
            <span class="typed" id="mtr-ty-5-17"
              >the code is yours <span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-18"
              >the code is yours f<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-19"
              >the code is yours fo<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-20"
              >the code is yours for<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-21"
              >the code is yours fore<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-22"
              >the code is yours forev<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-23"
              >the code is yours foreve<span class="caret"></span
            ></span>
            <span class="typed" id="mtr-ty-5-24"
              >the code is yours forever<span class="caret"></span
            ></span>
          </div>
          <svg id="mtr-mic" width="26" height="42" viewBox="0 0 26 42">
            <rect x="8" y="0" width="10" height="22" rx="5" fill="#8E8E93" />
            <path
              d="M2 16 A11 11 0 0 0 24 16"
              stroke="#8E8E93"
              stroke-width="3.5"
              fill="none"
              transform="translate(0,2)"
            />
            <line x1="13" y1="30" x2="13" y2="38" stroke="#8E8E93" stroke-width="3.5" />
            <line x1="6" y1="39" x2="20" y2="39" stroke="#8E8E93" stroke-width="3.5" />
          </svg>
          <div id="mtr-sendbtn">
            <svg width="26" height="30" viewBox="0 0 26 30">
              <path
                d="M13 28 V4 M3 13 L13 3 L23 13"
                stroke="#fff"
                stroke-width="5"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
        </div>
      </section>
      <section
        id="scene-end"
        class="clip"
        data-start="23.2567"
        data-duration="2.53"
        data-track-index="2"
        style="z-index: 5"
      >
        <div id="mtr-ec-wrap" data-layout-allow-overlap data-layout-allow-occlusion>
          <img
            id="mtr-ec-logo"
            data-var-src="brandLogo"
            src="assets/hyperframes-logo-black.svg"
            alt="Brand logo"
          />
          <div id="mtr-ec-stars">
            <svg width="55" height="53" viewBox="0 0 24 23">
              <path
                d="M12 0 L15 8.2 L23.4 8.2 L16.6 13.4 L19.2 21.8 L12 16.8 L4.8 21.8 L7.4 13.4 L0.6 8.2 L9 8.2 Z"
                fill="#FED059"
              />
            </svg>
            <svg width="55" height="53" viewBox="0 0 24 23">
              <path
                d="M12 0 L15 8.2 L23.4 8.2 L16.6 13.4 L19.2 21.8 L12 16.8 L4.8 21.8 L7.4 13.4 L0.6 8.2 L9 8.2 Z"
                fill="#FED059"
              />
            </svg>
            <svg width="55" height="53" viewBox="0 0 24 23">
              <path
                d="M12 0 L15 8.2 L23.4 8.2 L16.6 13.4 L19.2 21.8 L12 16.8 L4.8 21.8 L7.4 13.4 L0.6 8.2 L9 8.2 Z"
                fill="#FED059"
              />
            </svg>
            <svg width="55" height="53" viewBox="0 0 24 23">
              <path
                d="M12 0 L15 8.2 L23.4 8.2 L16.6 13.4 L19.2 21.8 L12 16.8 L4.8 21.8 L7.4 13.4 L0.6 8.2 L9 8.2 Z"
                fill="#FED059"
              />
            </svg>
            <svg width="55" height="53" viewBox="0 0 24 23">
              <path
                d="M12 0 L15 8.2 L23.4 8.2 L16.6 13.4 L19.2 21.8 L12 16.8 L4.8 21.8 L7.4 13.4 L0.6 8.2 L9 8.2 Z"
                fill="#FED059"
              />
            </svg>
          </div>
          <div id="mtr-ec-fam">12,000+ creators</div>
          <div class="ec-icon" style="left: 150px">
            <svg width="58" height="58" viewBox="0 0 24 24">
              <path
                d="M3 17.2 V21 h3.8 L18 9.8 l-3.8-3.8 L3 17.2 Z M20.7 7.1 c0.4-0.4 0.4-1 0-1.4 l-2.4-2.4 c-0.4-0.4-1-0.4-1.4 0 l-1.8 1.8 3.8 3.8 1.8-1.8 Z"
                fill="#F9F2E7"
              />
            </svg>
          </div>
          <div class="ec-icon" style="left: 470px">
            <svg width="60" height="56" viewBox="0 0 24 22">
              <path
                d="M12 21 C12 21 1 14.4 1 7.6 C1 3.9 3.9 1 7.5 1 C9.4 1 11.1 1.9 12 3.3 C12.9 1.9 14.6 1 16.5 1 C20.1 1 23 3.9 23 7.6 C23 14.4 12 21 12 21 Z"
                fill="#F9F2E7"
              />
            </svg>
          </div>
          <div class="ec-icon" style="left: 790px">
            <svg width="60" height="60" viewBox="0 0 24 24">
              <path
                d="M12 2 C6.5 2 2 6.5 2 12 s4.5 10 10 10 c0.9 0 1.6-0.7 1.6-1.6 0-0.4-0.2-0.8-0.4-1.1 -0.3-0.3-0.4-0.7-0.4-1.1 0-0.9 0.7-1.6 1.6-1.6 h1.9 c3.1 0 5.7-2.6 5.7-5.7 C22 7 17.5 2 12 2 Z M6.5 12 c-0.8 0-1.5-0.7-1.5-1.5 S5.7 9 6.5 9 8 9.7 8 10.5 7.3 12 6.5 12 Z M9.5 8 C8.7 8 8 7.3 8 6.5 S8.7 5 9.5 5 s1.5 0.7 1.5 1.5 S10.3 8 9.5 8 Z M14.5 8 c-0.8 0-1.5-0.7-1.5-1.5 S13.7 5 14.5 5 16 5.7 16 6.5 15.3 8 14.5 8 Z M17.5 12 c-0.8 0-1.5-0.7-1.5-1.5 S16.7 9 17.5 9 19 9.7 19 10.5 18.3 12 17.5 12 Z"
                fill="#F9F2E7"
              />
            </svg>
          </div>
          <div class="ec-label" id="mtr-ec-feature-1" style="left: 100px">
            <div>Write</div>
            <div>plain HTML</div>
          </div>
          <div class="ec-label" id="mtr-ec-feature-2" style="left: 420px">
            <div>Render</div>
            <div>pixel-perfect</div>
          </div>
          <div class="ec-label" id="mtr-ec-feature-3" style="left: 740px">
            <div>Own</div>
            <div>every line</div>
          </div>
          <div id="mtr-ec-cta">Start rendering free</div>
        </div>
      </section>
    </div>
    <script>
      window.__timelines = window.__timelines || {};
      (function () {
        "use strict";
        var vars =
          window.__hyperframes && typeof window.__hyperframes.getVariables === "function"
            ? window.__hyperframes.getVariables()
            : {};
        function text(value, fallback, max) {
          if (typeof value !== "string") return fallback;
          var t = value.trim();
          if (!t) return fallback;
          return t.length > max ? t.slice(0, max) : t;
        }
        var contact = text(vars.contactName, "Rachel", 16);
        document.getElementById("mtr-hdr-avatar").textContent = contact.charAt(0).toUpperCase();
        var namePill = document.getElementById("mtr-hdr-name");
        namePill.innerHTML = "";
        namePill.appendChild(document.createTextNode(contact));
        var chev = document.createElement("span");
        chev.className = "chev";
        chev.textContent = "\u203A";
        namePill.appendChild(chev);
        function setText(id, value) {
          document.getElementById(id).textContent = value;
        }
        function setTyped(group, value) {
          var frames = Array.from(document.querySelectorAll('[id^="mtr-ty-' + group + '-"]')).sort(
            function (a, b) {
              return Number(a.id.split("-").pop()) - Number(b.id.split("-").pop());
            },
          );
          var characters = Array.from(value);
          frames.forEach(function (frame, index) {
            var prefixLength = Math.max(
              1,
              Math.ceil((characters.length * (index + 1)) / frames.length),
            );
            var textNode = Array.from(frame.childNodes).find(function (node) {
              return node.nodeType === 3;
            });
            if (textNode) textNode.nodeValue = characters.slice(0, prefixLength).join("");
          });
        }
        function setTwoLines(id, value) {
          var lines = value.split("|").slice(0, 2);
          var container = document.getElementById(id);
          Array.from(container.children).forEach(function (line, index) {
            line.textContent = lines[index] || lines[0] || "";
          });
        }
        var teaserMessage = text(vars.teaserMessage, "wait look 👀", 20);
        var benefitMessage = text(vars.benefitMessage, "renders in 4K. no editor", 32);
        var sourceMessage = text(vars.sourceMessage, "on heygen", 20);
        var workflowMessage = text(vars.workflowMessage, "u just write plain html tags", 34);
        var ownershipMessage = text(vars.ownershipMessage, "the code is yours forever", 32);
        setText(
          "mtr-message-question",
          text(vars.questionMessage, "what r u using for the launch video??", 46),
        );
        setText("mtr-message-teaser", teaserMessage);
        setText("mtr-message-reaction", text(vars.reactionMessage, "OMG IT'S HTML", 24));
        setText("mtr-message-emoji", text(vars.reactionEmoji, "🤯🤯🤯", 12));
        setText("mtr-message-benefit", benefitMessage);
        setText("mtr-message-discovery", text(vars.discoveryMessage, "where did u find this", 28));
        setText("mtr-message-source", sourceMessage);
        setText("mtr-message-workflow", workflowMessage);
        setText("mtr-message-ownership", ownershipMessage);
        setText("mtr-message-install", text(vars.installMessage, "installing rn", 20));
        setText("mtr-message-thanks", text(vars.thanksMessage, "ty bestie 💚", 20));
        setTyped(1, teaserMessage);
        setTyped(2, benefitMessage);
        setTyped(3, sourceMessage);
        setTyped(4, workflowMessage);
        setTyped(5, ownershipMessage);
        document.querySelector(".cardtitle").textContent = text(
          vars.cardTitle,
          "HyperFrames | Write HTML, render pixel-perfect video",
          80,
        );
        document.querySelector(".carddomain").textContent = text(
          vars.cardDomain,
          "hyperframes.heygen.com",
          40,
        );
        document.getElementById("mtr-ec-fam").textContent = text(
          vars.ecProof,
          "12,000+ creators",
          30,
        );
        setTwoLines("mtr-ec-feature-1", text(vars.ecFeature1, "Write|plain HTML", 32));
        setTwoLines("mtr-ec-feature-2", text(vars.ecFeature2, "Render|pixel-perfect", 32));
        setTwoLines("mtr-ec-feature-3", text(vars.ecFeature3, "Own|every line", 32));
        document.getElementById("mtr-ec-cta").textContent = text(
          vars.ecCta,
          "Start rendering free",
          26,
        );
      })();
      // initial states applied immediately (CSS hides all .item; m1 must be live at frame 0)
      gsap.set("#mtr-it-m1", { autoAlpha: 1 });
      const tl = gsap.timeline({ paused: true });
      gsap.set("#mtr-it-m1", { y: 1264 });
      tl.fromTo(
        "#mtr-it-m1 .pop",
        { scale: 0.75, autoAlpha: 0.6 },
        { scale: 1, autoAlpha: 1, duration: 0.12, ease: "power2.out" },
        0.0,
      );
      tl.set("#mtr-it-m1", { autoAlpha: 1 }, 0.0);
      tl.set("#mtr-it-m1", { y: 1179 }, 0.7662);
      tl.set("#mtr-it-dots", { y: 1278 }, 0.7662);
      tl.fromTo(
        "#mtr-it-dots .pop",
        { scale: 0.6, autoAlpha: 0.4 },
        { scale: 1, autoAlpha: 1, duration: 0.1, ease: "power2.out" },
        0.7662,
      );
      tl.set("#mtr-it-dots", { autoAlpha: 1 }, 0.7662);
      tl.set("#mtr-it-m1", { y: 1036 }, 2.9662);
      tl.set("#mtr-it-dots", { y: 1135 }, 2.9662);
      tl.set("#mtr-it-m2", { y: 1218 }, 2.9662);
      tl.fromTo(
        "#mtr-it-m2 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        2.9662,
      );
      tl.set("#mtr-it-m2", { autoAlpha: 1 }, 2.9662);
      tl.set("#mtr-it-m1", { y: 416 }, 3.6995);
      tl.set("#mtr-it-dots", { y: 515 }, 3.6995);
      tl.set("#mtr-it-m2", { y: 598 }, 3.6995);
      tl.set("#mtr-it-m3", { y: 735 }, 3.6995);
      tl.fromTo(
        "#mtr-it-m3 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        3.6995,
      );
      tl.set("#mtr-it-m3", { autoAlpha: 1 }, 3.6995);
      tl.set("#mtr-it-dots", { autoAlpha: 0 }, 7.2995);
      tl.set("#mtr-it-m1", { y: 400 }, 7.2995);
      tl.set("#mtr-it-m2", { y: 499 }, 7.2995);
      tl.set("#mtr-it-m3", { y: 636 }, 7.2995);
      tl.set("#mtr-it-m4", { y: 1264 }, 7.2995);
      tl.fromTo(
        "#mtr-it-m4 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        7.2995,
      );
      tl.set("#mtr-it-m4", { autoAlpha: 1 }, 7.2995);
      tl.set("#mtr-it-m1", { y: 250 }, 8.0328);
      tl.set("#mtr-it-m2", { y: 349 }, 8.0328);
      tl.set("#mtr-it-m3", { y: 486 }, 8.0328);
      tl.set("#mtr-it-m4", { y: 1114 }, 8.0328);
      tl.set("#mtr-it-m5", { y: 1205 }, 8.0328);
      tl.fromTo(
        "#mtr-it-m5 .pop",
        { scale: 0.5, autoAlpha: 0.3 },
        { scale: 1, autoAlpha: 1, duration: 0.1, ease: "power2.out" },
        8.0328,
      );
      tl.set("#mtr-it-m5", { autoAlpha: 1 }, 8.0328);
      tl.set("#mtr-it-m1", { y: 113 }, 10.5995);
      tl.set("#mtr-it-m2", { y: 212 }, 10.5995);
      tl.set("#mtr-it-m3", { y: 349 }, 10.5995);
      tl.set("#mtr-it-m4", { y: 977 }, 10.5995);
      tl.set("#mtr-it-m5", { y: 1068 }, 10.5995);
      tl.set("#mtr-it-m6", { y: 1218 }, 10.5995);
      tl.fromTo(
        "#mtr-it-m6 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        10.5995,
      );
      tl.set("#mtr-it-m6", { autoAlpha: 1 }, 10.5995);
      tl.set("#mtr-it-m1", { y: 28 }, 11.3662);
      tl.set("#mtr-it-m2", { y: 127 }, 11.3662);
      tl.set("#mtr-it-m3", { y: 264 }, 11.3662);
      tl.set("#mtr-it-m4", { y: 892 }, 11.3662);
      tl.set("#mtr-it-m5", { y: 983 }, 11.3662);
      tl.set("#mtr-it-m6", { y: 1133 }, 11.3662);
      tl.set("#mtr-it-dots2", { y: 1278 }, 11.3662);
      tl.fromTo(
        "#mtr-it-dots2 .pop",
        { scale: 0.6, autoAlpha: 0.4 },
        { scale: 1, autoAlpha: 1, duration: 0.1, ease: "power2.out" },
        11.3662,
      );
      tl.set("#mtr-it-dots2", { autoAlpha: 1 }, 11.3662);
      tl.set("#mtr-it-dots2", { autoAlpha: 0 }, 12.3662);
      tl.set("#mtr-it-m1", { y: 14 }, 12.3662);
      tl.set("#mtr-it-m2", { y: 113 }, 12.3662);
      tl.set("#mtr-it-m3", { y: 250 }, 12.3662);
      tl.set("#mtr-it-m4", { y: 878 }, 12.3662);
      tl.set("#mtr-it-m5", { y: 969 }, 12.3662);
      tl.set("#mtr-it-m6", { y: 1119 }, 12.3662);
      tl.set("#mtr-it-m7", { y: 1264 }, 12.3662);
      tl.fromTo(
        "#mtr-it-m7 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        12.3662,
      );
      tl.set("#mtr-it-m7", { autoAlpha: 1 }, 12.3662);
      tl.set("#mtr-it-m1", { y: -85 }, 14.0662);
      tl.set("#mtr-it-m2", { y: 14 }, 14.0662);
      tl.set("#mtr-it-m3", { y: 151 }, 14.0662);
      tl.set("#mtr-it-m4", { y: 779 }, 14.0662);
      tl.set("#mtr-it-m5", { y: 870 }, 14.0662);
      tl.set("#mtr-it-m6", { y: 1020 }, 14.0662);
      tl.set("#mtr-it-m7", { y: 1165 }, 14.0662);
      tl.set("#mtr-it-m8", { y: 1264 }, 14.0662);
      tl.fromTo(
        "#mtr-it-m8 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        14.0662,
      );
      tl.set("#mtr-it-m8", { autoAlpha: 1 }, 14.0662);
      tl.set("#mtr-it-m1", { y: -176 }, 17.0995);
      tl.set("#mtr-it-m2", { y: -77 }, 17.0995);
      tl.set("#mtr-it-m3", { y: 60 }, 17.0995);
      tl.set("#mtr-it-m4", { y: 688 }, 17.0995);
      tl.set("#mtr-it-m5", { y: 779 }, 17.0995);
      tl.set("#mtr-it-m6", { y: 929 }, 17.0995);
      tl.set("#mtr-it-m7", { y: 1074 }, 17.0995);
      tl.set("#mtr-it-m8", { y: 1173 }, 17.0995);
      tl.set("#mtr-it-m9", { y: 1264 }, 17.0995);
      tl.fromTo(
        "#mtr-it-m9 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        17.0995,
      );
      tl.set("#mtr-it-m9", { autoAlpha: 1 }, 17.0995);
      tl.set("#mtr-it-m1", { y: -313 }, 19.8995);
      tl.set("#mtr-it-m2", { y: -214 }, 19.8995);
      tl.set("#mtr-it-m3", { y: -77 }, 19.8995);
      tl.set("#mtr-it-m4", { y: 551 }, 19.8995);
      tl.set("#mtr-it-m5", { y: 642 }, 19.8995);
      tl.set("#mtr-it-m6", { y: 792 }, 19.8995);
      tl.set("#mtr-it-m7", { y: 937 }, 19.8995);
      tl.set("#mtr-it-m8", { y: 1036 }, 19.8995);
      tl.set("#mtr-it-m9", { y: 1127 }, 19.8995);
      tl.set("#mtr-it-m10", { y: 1218 }, 19.8995);
      tl.fromTo(
        "#mtr-it-m10 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        19.8995,
      );
      tl.set("#mtr-it-m10", { autoAlpha: 1 }, 19.8995);
      tl.set("#mtr-it-m1", { y: -412 }, 20.6662);
      tl.set("#mtr-it-m2", { y: -313 }, 20.6662);
      tl.set("#mtr-it-m3", { y: -176 }, 20.6662);
      tl.set("#mtr-it-m4", { y: 452 }, 20.6662);
      tl.set("#mtr-it-m5", { y: 543 }, 20.6662);
      tl.set("#mtr-it-m6", { y: 693 }, 20.6662);
      tl.set("#mtr-it-m7", { y: 838 }, 20.6662);
      tl.set("#mtr-it-m8", { y: 937 }, 20.6662);
      tl.set("#mtr-it-m9", { y: 1028 }, 20.6662);
      tl.set("#mtr-it-m10", { y: 1119 }, 20.6662);
      tl.set("#mtr-it-m11", { y: 1264 }, 20.6662);
      tl.fromTo(
        "#mtr-it-m11 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        20.6662,
      );
      tl.set("#mtr-it-m11", { autoAlpha: 1 }, 20.6662);
      tl.set("#mtr-it-m1", { y: -503 }, 21.4328);
      tl.set("#mtr-it-m2", { y: -404 }, 21.4328);
      tl.set("#mtr-it-m3", { y: -267 }, 21.4328);
      tl.set("#mtr-it-m4", { y: 361 }, 21.4328);
      tl.set("#mtr-it-m5", { y: 452 }, 21.4328);
      tl.set("#mtr-it-m6", { y: 602 }, 21.4328);
      tl.set("#mtr-it-m7", { y: 747 }, 21.4328);
      tl.set("#mtr-it-m8", { y: 846 }, 21.4328);
      tl.set("#mtr-it-m9", { y: 937 }, 21.4328);
      tl.set("#mtr-it-m10", { y: 1028 }, 21.4328);
      tl.set("#mtr-it-m11", { y: 1173 }, 21.4328);
      tl.set("#mtr-it-m12", { y: 1264 }, 21.4328);
      tl.fromTo(
        "#mtr-it-m12 .pop",
        { autoAlpha: 0.55 },
        { autoAlpha: 1, duration: 0.0667, ease: "none" },
        21.4328,
      );
      tl.set("#mtr-it-m12", { autoAlpha: 1 }, 21.4328);
      tl.set("#mtr-ph", { autoAlpha: 0 }, 2.0328);
      tl.set("#mtr-mic", { autoAlpha: 0 }, 2.0328);
      tl.set("#mtr-sendbtn", { autoAlpha: 1 }, 2.0328);
      tl.set("#mtr-ph", { autoAlpha: 1 }, 2.9662);
      tl.set("#mtr-mic", { autoAlpha: 1 }, 2.9662);
      tl.set("#mtr-sendbtn", { autoAlpha: 0 }, 2.9662);
      tl.set("#mtr-ty-1-0", { autoAlpha: 1 }, 2.0328);
      tl.set("#mtr-ty-1-0", { autoAlpha: 0 }, 2.0995);
      tl.set("#mtr-ty-1-1", { autoAlpha: 1 }, 2.0995);
      tl.set("#mtr-ty-1-1", { autoAlpha: 0 }, 2.1662);
      tl.set("#mtr-ty-1-2", { autoAlpha: 1 }, 2.1662);
      tl.set("#mtr-ty-1-2", { autoAlpha: 0 }, 2.2328);
      tl.set("#mtr-ty-1-3", { autoAlpha: 1 }, 2.2328);
      tl.set("#mtr-ty-1-3", { autoAlpha: 0 }, 2.2995);
      tl.set("#mtr-ty-1-4", { autoAlpha: 1 }, 2.2995);
      tl.set("#mtr-ty-1-4", { autoAlpha: 0 }, 2.3995);
      tl.set("#mtr-ty-1-5", { autoAlpha: 1 }, 2.3995);
      tl.set("#mtr-ty-1-5", { autoAlpha: 0 }, 2.4328);
      tl.set("#mtr-ty-1-6", { autoAlpha: 1 }, 2.4328);
      tl.set("#mtr-ty-1-6", { autoAlpha: 0 }, 2.4995);
      tl.set("#mtr-ty-1-7", { autoAlpha: 1 }, 2.4995);
      tl.set("#mtr-ty-1-7", { autoAlpha: 0 }, 2.5662);
      tl.set("#mtr-ty-1-8", { autoAlpha: 1 }, 2.5662);
      tl.set("#mtr-ty-1-8", { autoAlpha: 0 }, 2.5995);
      tl.set("#mtr-ty-1-9", { autoAlpha: 1 }, 2.5995);
      tl.set("#mtr-ty-1-9", { autoAlpha: 0 }, 2.7995);
      tl.set("#mtr-ty-1-10", { autoAlpha: 1 }, 2.7995);
      tl.set("#mtr-ty-1-10", { autoAlpha: 0 }, 2.9662);
      tl.set("#mtr-ph", { autoAlpha: 0 }, 8.8662);
      tl.set("#mtr-mic", { autoAlpha: 0 }, 8.8662);
      tl.set("#mtr-sendbtn", { autoAlpha: 1 }, 8.8662);
      tl.set("#mtr-ph", { autoAlpha: 1 }, 10.5995);
      tl.set("#mtr-mic", { autoAlpha: 1 }, 10.5995);
      tl.set("#mtr-sendbtn", { autoAlpha: 0 }, 10.5995);
      tl.set("#mtr-ty-2-0", { autoAlpha: 1 }, 8.8662);
      tl.set("#mtr-ty-2-0", { autoAlpha: 0 }, 8.9662);
      tl.set("#mtr-ty-2-1", { autoAlpha: 1 }, 8.9662);
      tl.set("#mtr-ty-2-1", { autoAlpha: 0 }, 8.9995);
      tl.set("#mtr-ty-2-2", { autoAlpha: 1 }, 8.9995);
      tl.set("#mtr-ty-2-2", { autoAlpha: 0 }, 9.0662);
      tl.set("#mtr-ty-2-3", { autoAlpha: 1 }, 9.0662);
      tl.set("#mtr-ty-2-3", { autoAlpha: 0 }, 9.1662);
      tl.set("#mtr-ty-2-4", { autoAlpha: 1 }, 9.1662);
      tl.set("#mtr-ty-2-4", { autoAlpha: 0 }, 9.2328);
      tl.set("#mtr-ty-2-5", { autoAlpha: 1 }, 9.2328);
      tl.set("#mtr-ty-2-5", { autoAlpha: 0 }, 9.2662);
      tl.set("#mtr-ty-2-6", { autoAlpha: 1 }, 9.2662);
      tl.set("#mtr-ty-2-6", { autoAlpha: 0 }, 9.3662);
      tl.set("#mtr-ty-2-7", { autoAlpha: 1 }, 9.3662);
      tl.set("#mtr-ty-2-7", { autoAlpha: 0 }, 9.3995);
      tl.set("#mtr-ty-2-8", { autoAlpha: 1 }, 9.3995);
      tl.set("#mtr-ty-2-8", { autoAlpha: 0 }, 9.4328);
      tl.set("#mtr-ty-2-9", { autoAlpha: 1 }, 9.4328);
      tl.set("#mtr-ty-2-9", { autoAlpha: 0 }, 9.5662);
      tl.set("#mtr-ty-2-10", { autoAlpha: 1 }, 9.5662);
      tl.set("#mtr-ty-2-10", { autoAlpha: 0 }, 9.5995);
      tl.set("#mtr-ty-2-11", { autoAlpha: 1 }, 9.5995);
      tl.set("#mtr-ty-2-11", { autoAlpha: 0 }, 9.6662);
      tl.set("#mtr-ty-2-12", { autoAlpha: 1 }, 9.6662);
      tl.set("#mtr-ty-2-12", { autoAlpha: 0 }, 9.7995);
      tl.set("#mtr-ty-2-13", { autoAlpha: 1 }, 9.7995);
      tl.set("#mtr-ty-2-13", { autoAlpha: 0 }, 9.8662);
      tl.set("#mtr-ty-2-14", { autoAlpha: 1 }, 9.8662);
      tl.set("#mtr-ty-2-14", { autoAlpha: 0 }, 9.8995);
      tl.set("#mtr-ty-2-15", { autoAlpha: 1 }, 9.8995);
      tl.set("#mtr-ty-2-15", { autoAlpha: 0 }, 9.9662);
      tl.set("#mtr-ty-2-16", { autoAlpha: 1 }, 9.9662);
      tl.set("#mtr-ty-2-16", { autoAlpha: 0 }, 9.9995);
      tl.set("#mtr-ty-2-17", { autoAlpha: 1 }, 9.9995);
      tl.set("#mtr-ty-2-17", { autoAlpha: 0 }, 10.0662);
      tl.set("#mtr-ty-2-18", { autoAlpha: 1 }, 10.0662);
      tl.set("#mtr-ty-2-18", { autoAlpha: 0 }, 10.1662);
      tl.set("#mtr-ty-2-19", { autoAlpha: 1 }, 10.1662);
      tl.set("#mtr-ty-2-19", { autoAlpha: 0 }, 10.2328);
      tl.set("#mtr-ty-2-20", { autoAlpha: 1 }, 10.2328);
      tl.set("#mtr-ty-2-20", { autoAlpha: 0 }, 10.2995);
      tl.set("#mtr-ty-2-21", { autoAlpha: 1 }, 10.2995);
      tl.set("#mtr-ty-2-21", { autoAlpha: 0 }, 10.3995);
      tl.set("#mtr-ty-2-22", { autoAlpha: 1 }, 10.3995);
      tl.set("#mtr-ty-2-22", { autoAlpha: 0 }, 10.4662);
      tl.set("#mtr-ty-2-23", { autoAlpha: 1 }, 10.4662);
      tl.set("#mtr-ty-2-23", { autoAlpha: 0 }, 10.5995);
      tl.set("#mtr-ph", { autoAlpha: 0 }, 13.3995);
      tl.set("#mtr-mic", { autoAlpha: 0 }, 13.3995);
      tl.set("#mtr-sendbtn", { autoAlpha: 1 }, 13.3995);
      tl.set("#mtr-ph", { autoAlpha: 1 }, 14.0662);
      tl.set("#mtr-mic", { autoAlpha: 1 }, 14.0662);
      tl.set("#mtr-sendbtn", { autoAlpha: 0 }, 14.0662);
      tl.set("#mtr-ty-3-0", { autoAlpha: 1 }, 13.3995);
      tl.set("#mtr-ty-3-0", { autoAlpha: 0 }, 13.4328);
      tl.set("#mtr-ty-3-1", { autoAlpha: 1 }, 13.4328);
      tl.set("#mtr-ty-3-1", { autoAlpha: 0 }, 13.4995);
      tl.set("#mtr-ty-3-2", { autoAlpha: 1 }, 13.4995);
      tl.set("#mtr-ty-3-2", { autoAlpha: 0 }, 13.5995);
      tl.set("#mtr-ty-3-3", { autoAlpha: 1 }, 13.5995);
      tl.set("#mtr-ty-3-3", { autoAlpha: 0 }, 13.6662);
      tl.set("#mtr-ty-3-4", { autoAlpha: 1 }, 13.6662);
      tl.set("#mtr-ty-3-4", { autoAlpha: 0 }, 13.6995);
      tl.set("#mtr-ty-3-5", { autoAlpha: 1 }, 13.6995);
      tl.set("#mtr-ty-3-5", { autoAlpha: 0 }, 13.7995);
      tl.set("#mtr-ty-3-6", { autoAlpha: 1 }, 13.7995);
      tl.set("#mtr-ty-3-6", { autoAlpha: 0 }, 13.9662);
      tl.set("#mtr-ty-3-7", { autoAlpha: 1 }, 13.9662);
      tl.set("#mtr-ty-3-7", { autoAlpha: 0 }, 14.0328);
      tl.set("#mtr-ty-3-8", { autoAlpha: 1 }, 14.0328);
      tl.set("#mtr-ty-3-8", { autoAlpha: 0 }, 14.0662);
      tl.set("#mtr-ph", { autoAlpha: 0 }, 15.1662);
      tl.set("#mtr-mic", { autoAlpha: 0 }, 15.1662);
      tl.set("#mtr-sendbtn", { autoAlpha: 1 }, 15.1662);
      tl.set("#mtr-ph", { autoAlpha: 1 }, 17.0995);
      tl.set("#mtr-mic", { autoAlpha: 1 }, 17.0995);
      tl.set("#mtr-sendbtn", { autoAlpha: 0 }, 17.0995);
      tl.set("#mtr-ty-4-0", { autoAlpha: 1 }, 15.1662);
      tl.set("#mtr-ty-4-0", { autoAlpha: 0 }, 15.1995);
      tl.set("#mtr-ty-4-1", { autoAlpha: 1 }, 15.1995);
      tl.set("#mtr-ty-4-1", { autoAlpha: 0 }, 15.2328);
      tl.set("#mtr-ty-4-2", { autoAlpha: 1 }, 15.2328);
      tl.set("#mtr-ty-4-2", { autoAlpha: 0 }, 15.2995);
      tl.set("#mtr-ty-4-3", { autoAlpha: 1 }, 15.2995);
      tl.set("#mtr-ty-4-3", { autoAlpha: 0 }, 15.3995);
      tl.set("#mtr-ty-4-4", { autoAlpha: 1 }, 15.3995);
      tl.set("#mtr-ty-4-4", { autoAlpha: 0 }, 15.4328);
      tl.set("#mtr-ty-4-5", { autoAlpha: 1 }, 15.4328);
      tl.set("#mtr-ty-4-5", { autoAlpha: 0 }, 15.4995);
      tl.set("#mtr-ty-4-6", { autoAlpha: 1 }, 15.4995);
      tl.set("#mtr-ty-4-6", { autoAlpha: 0 }, 15.5662);
      tl.set("#mtr-ty-4-7", { autoAlpha: 1 }, 15.5662);
      tl.set("#mtr-ty-4-7", { autoAlpha: 0 }, 15.6328);
      tl.set("#mtr-ty-4-8", { autoAlpha: 1 }, 15.6328);
      tl.set("#mtr-ty-4-8", { autoAlpha: 0 }, 15.6662);
      tl.set("#mtr-ty-4-9", { autoAlpha: 1 }, 15.6662);
      tl.set("#mtr-ty-4-9", { autoAlpha: 0 }, 15.6995);
      tl.set("#mtr-ty-4-10", { autoAlpha: 1 }, 15.6995);
      tl.set("#mtr-ty-4-10", { autoAlpha: 0 }, 15.7995);
      tl.set("#mtr-ty-4-11", { autoAlpha: 1 }, 15.7995);
      tl.set("#mtr-ty-4-11", { autoAlpha: 0 }, 15.8662);
      tl.set("#mtr-ty-4-12", { autoAlpha: 1 }, 15.8662);
      tl.set("#mtr-ty-4-12", { autoAlpha: 0 }, 15.8995);
      tl.set("#mtr-ty-4-13", { autoAlpha: 1 }, 15.8995);
      tl.set("#mtr-ty-4-13", { autoAlpha: 0 }, 16.0662);
      tl.set("#mtr-ty-4-14", { autoAlpha: 1 }, 16.0662);
      tl.set("#mtr-ty-4-14", { autoAlpha: 0 }, 16.0995);
      tl.set("#mtr-ty-4-15", { autoAlpha: 1 }, 16.0995);
      tl.set("#mtr-ty-4-15", { autoAlpha: 0 }, 16.2328);
      tl.set("#mtr-ty-4-16", { autoAlpha: 1 }, 16.2328);
      tl.set("#mtr-ty-4-16", { autoAlpha: 0 }, 16.2662);
      tl.set("#mtr-ty-4-17", { autoAlpha: 1 }, 16.2662);
      tl.set("#mtr-ty-4-17", { autoAlpha: 0 }, 16.2995);
      tl.set("#mtr-ty-4-18", { autoAlpha: 1 }, 16.2995);
      tl.set("#mtr-ty-4-18", { autoAlpha: 0 }, 16.3995);
      tl.set("#mtr-ty-4-19", { autoAlpha: 1 }, 16.3995);
      tl.set("#mtr-ty-4-19", { autoAlpha: 0 }, 16.4662);
      tl.set("#mtr-ty-4-20", { autoAlpha: 1 }, 16.4662);
      tl.set("#mtr-ty-4-20", { autoAlpha: 0 }, 16.4995);
      tl.set("#mtr-ty-4-21", { autoAlpha: 1 }, 16.4995);
      tl.set("#mtr-ty-4-21", { autoAlpha: 0 }, 16.5662);
      tl.set("#mtr-ty-4-22", { autoAlpha: 1 }, 16.5662);
      tl.set("#mtr-ty-4-22", { autoAlpha: 0 }, 16.6328);
      tl.set("#mtr-ty-4-23", { autoAlpha: 1 }, 16.6328);
      tl.set("#mtr-ty-4-23", { autoAlpha: 0 }, 16.6995);
      tl.set("#mtr-ty-4-24", { autoAlpha: 1 }, 16.6995);
      tl.set("#mtr-ty-4-24", { autoAlpha: 0 }, 16.7995);
      tl.set("#mtr-ty-4-25", { autoAlpha: 1 }, 16.7995);
      tl.set("#mtr-ty-4-25", { autoAlpha: 0 }, 16.8328);
      tl.set("#mtr-ty-4-26", { autoAlpha: 1 }, 16.8328);
      tl.set("#mtr-ty-4-26", { autoAlpha: 0 }, 16.8995);
      tl.set("#mtr-ty-4-27", { autoAlpha: 1 }, 16.8995);
      tl.set("#mtr-ty-4-27", { autoAlpha: 0 }, 17.0995);
      tl.set("#mtr-ph", { autoAlpha: 0 }, 18.1662);
      tl.set("#mtr-mic", { autoAlpha: 0 }, 18.1662);
      tl.set("#mtr-sendbtn", { autoAlpha: 1 }, 18.1662);
      tl.set("#mtr-ph", { autoAlpha: 1 }, 19.8995);
      tl.set("#mtr-mic", { autoAlpha: 1 }, 19.8995);
      tl.set("#mtr-sendbtn", { autoAlpha: 0 }, 19.8995);
      tl.set("#mtr-ty-5-0", { autoAlpha: 1 }, 18.1662);
      tl.set("#mtr-ty-5-0", { autoAlpha: 0 }, 18.2328);
      tl.set("#mtr-ty-5-1", { autoAlpha: 1 }, 18.2328);
      tl.set("#mtr-ty-5-1", { autoAlpha: 0 }, 18.2662);
      tl.set("#mtr-ty-5-2", { autoAlpha: 1 }, 18.2662);
      tl.set("#mtr-ty-5-2", { autoAlpha: 0 }, 18.3662);
      tl.set("#mtr-ty-5-3", { autoAlpha: 1 }, 18.3662);
      tl.set("#mtr-ty-5-3", { autoAlpha: 0 }, 18.4328);
      tl.set("#mtr-ty-5-4", { autoAlpha: 1 }, 18.4328);
      tl.set("#mtr-ty-5-4", { autoAlpha: 0 }, 18.4995);
      tl.set("#mtr-ty-5-5", { autoAlpha: 1 }, 18.4995);
      tl.set("#mtr-ty-5-5", { autoAlpha: 0 }, 18.5995);
      tl.set("#mtr-ty-5-6", { autoAlpha: 1 }, 18.5995);
      tl.set("#mtr-ty-5-6", { autoAlpha: 0 }, 18.6662);
      tl.set("#mtr-ty-5-7", { autoAlpha: 1 }, 18.6662);
      tl.set("#mtr-ty-5-7", { autoAlpha: 0 }, 18.7328);
      tl.set("#mtr-ty-5-8", { autoAlpha: 1 }, 18.7328);
      tl.set("#mtr-ty-5-8", { autoAlpha: 0 }, 18.7995);
      tl.set("#mtr-ty-5-9", { autoAlpha: 1 }, 18.7995);
      tl.set("#mtr-ty-5-9", { autoAlpha: 0 }, 18.8328);
      tl.set("#mtr-ty-5-10", { autoAlpha: 1 }, 18.8328);
      tl.set("#mtr-ty-5-10", { autoAlpha: 0 }, 18.9995);
      tl.set("#mtr-ty-5-11", { autoAlpha: 1 }, 18.9995);
      tl.set("#mtr-ty-5-11", { autoAlpha: 0 }, 19.0328);
      tl.set("#mtr-ty-5-12", { autoAlpha: 1 }, 19.0328);
      tl.set("#mtr-ty-5-12", { autoAlpha: 0 }, 19.0995);
      tl.set("#mtr-ty-5-13", { autoAlpha: 1 }, 19.0995);
      tl.set("#mtr-ty-5-13", { autoAlpha: 0 }, 19.1662);
      tl.set("#mtr-ty-5-14", { autoAlpha: 1 }, 19.1662);
      tl.set("#mtr-ty-5-14", { autoAlpha: 0 }, 19.1995);
      tl.set("#mtr-ty-5-15", { autoAlpha: 1 }, 19.1995);
      tl.set("#mtr-ty-5-15", { autoAlpha: 0 }, 19.2662);
      tl.set("#mtr-ty-5-16", { autoAlpha: 1 }, 19.2662);
      tl.set("#mtr-ty-5-16", { autoAlpha: 0 }, 19.3662);
      tl.set("#mtr-ty-5-17", { autoAlpha: 1 }, 19.3662);
      tl.set("#mtr-ty-5-17", { autoAlpha: 0 }, 19.4328);
      tl.set("#mtr-ty-5-18", { autoAlpha: 1 }, 19.4328);
      tl.set("#mtr-ty-5-18", { autoAlpha: 0 }, 19.4995);
      tl.set("#mtr-ty-5-19", { autoAlpha: 1 }, 19.4995);
      tl.set("#mtr-ty-5-19", { autoAlpha: 0 }, 19.5328);
      tl.set("#mtr-ty-5-20", { autoAlpha: 1 }, 19.5328);
      tl.set("#mtr-ty-5-20", { autoAlpha: 0 }, 19.5995);
      tl.set("#mtr-ty-5-21", { autoAlpha: 1 }, 19.5995);
      tl.set("#mtr-ty-5-21", { autoAlpha: 0 }, 19.6662);
      tl.set("#mtr-ty-5-22", { autoAlpha: 1 }, 19.6662);
      tl.set("#mtr-ty-5-22", { autoAlpha: 0 }, 19.7662);
      tl.set("#mtr-ty-5-23", { autoAlpha: 1 }, 19.7662);
      tl.set("#mtr-ty-5-23", { autoAlpha: 0 }, 19.7995);
      tl.set("#mtr-ty-5-24", { autoAlpha: 1 }, 19.7995);
      tl.set("#mtr-ty-5-24", { autoAlpha: 0 }, 19.8995);
      tl.set("#mtr-ec-wrap", { autoAlpha: 0 }, 23.257);
      tl.fromTo(
        "#mtr-ec-wrap",
        { autoAlpha: 0 },
        { autoAlpha: 1, duration: 0.3, ease: "none" },
        23.2667,
      );
      window.__timelines["message-thread-reveal"] = tl;
    </script>
  </body>
</html>
```

</Accordion>

{/* 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)
