mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
WaterrrForever
4347af3fe1
* feat(registry): add the notification-cascade block and banner-push-in component A vertical ad-template block: phone notifications land one after another on a 2.000s beat and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card carrying the HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry rise, the expo.out restack - is measured from reference footage rather than invented. The backdrop plate is a generated photograph, shipped with the item. The banner-push-in component carries the reusable arrival move on its own: one banner fades in and rises into place while everything already on screen slides up one pitch in lockstep. Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast) installed into a scratch project from a served registry. * feat(registry): add the share-sheet-carousel block and sheet-spring-up component A share sheet springs up from the bottom of the phone and cycles photographic previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s - while the blurred ground swaps behind it on the same beats, ending on an accept tap. A brand strip with the HyperFrames lockup rides the bottom of the preview, as the reference's did. The four stills are generated photographs, shipped with the item. The sheet-spring-up component carries the arrival on its own: a real spring sampled frame by frame from reference footage - up from below, 192px overshoot, 0.72s settle - shipped as the sampled table rather than an ease that approximates it. Both pass the full browser gate (WCAG AA) installed from a served registry. * feat(registry): add the typing-indicator and streaming-text components Two chat primitives extracted from reference footage of real conversations. typing-indicator is the three-dot bubble that says someone is writing: it pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha 0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An optional bounded dot wave is included for compositions that want the dots to breathe. streaming-text is not a typewriter: words arrive in the uneven bursts of a streamed AI answer, on a token rhythm measured word-by-word from the reference, each word landing grey and inking to full colour over 0.27s. The GAPS table ships in the integration note and cycles for any word count. Both demos pass the browser gate. * feat(registry): add the ai-chat-reveal block A question is typed on a rising keyboard - measured keystroke rhythm, steady caret - sent, and answered by an AI that streams its reply word by word: thinking dot on the measured alpha ramp, tokens arriving in uneven bursts, a bulleted list, then a cut to a branded closing card. The typing and streaming schedules are generated at load from the measured gap tables, so every piece of copy is a variable - question, three answer paragraphs, three bullets, and the whole closing card - while the rhythm stays the reference's. Kept at the native 750x1624 capture size so the measured keyboard geometry stays pixel-true. Passes the full browser gate (145/145 WCAG AA) installed from a served registry. * feat(registry): add the message-thread-reveal block A full text conversation plays out on a phone: bubbles popping in on their measured entries, typing indicators holding the beat, a shared link card, an emoji burst, delivered receipts, the composer typing five messages keystroke by keystroke - and the whole thread scrolling up beat by beat on the measured y-choreography until a warm closing card lands. Every message swap keeps the measured keystroke tables intact: the new copy is length-matched character for character to the reference's typed lines, so all 97 typed frames land on their original beats. The footage plate is replaced by a CSS room-and-phone-body, the link card carries a generated still, and the closing card is rebuilt around the HyperFrames lockup with its stars, proof line, and feature icons preserved. Relates to the thread-message-stack work in #3046: that PR ships a caller-payload message-stack component; this block is the complete ad-template film around the same subject. Kept as its own commit so either can move independently. Passes the full browser gate (65/65 WCAG AA) installed from a served registry. * feat(registry): add the notes-reveal block and line-reveal-list component A personal note is typed character by character in a notes app - the caret riding every letter on the measured keystroke frames, the page scrolling up on the measured settle curves as each line lands - then cuts to a paper card with a marker headline, a circled word, a ticked checklist, and the video card. New copy is length-matched line by line to the measured reveal table, so all 176 keystrokes land on their original frames. The two hand-drawn faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the reference's proprietary UI face is replaced by the system stack. The line-reveal-list component carries the paragraph rhythm on its own: lines land on the measured writing cadence that slows as the thought gets heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room with the measured scroll-settle table instead of a linear glide. Both pass the browser gate (366/366 WCAG AA for the block) installed from a served registry. * docs(catalog): publish the ten new ad-template items Regenerated pages, payloads, navigation and the flat index for the five blocks and five components added in the preceding commits. Every existing page is untouched: the diff is ten new item pages, their payload assets, and the two regenerated indexes. * chore(registry): rebuild the on-device search index for the new items * style(registry): run oxfmt over the new item sources The repo-wide format gate covers registry HTML; the staged-file hook did not reach these. Payloads and pages regenerated to match. * feat(registry): restage the five component demos as device specimens The first demos dropped each primitive onto a bare canvas, which stripped the context the moves were measured in - a dark bubble on a black frame, a sheet floating in empty gradient. Each demo now plays inside a phone on a studio ground, in the move's native habitat - lock screen, chat thread, share sheet, assistant answer, notes page - with a specimen caption naming the component and its measured numbers. Interiors are authored at 1080x1920 and scaled into the screen, so they reuse the blocks' gate-proven geometry. Timelines are unchanged. All five pass the browser gate. * refactor(registry): shelve the five ad-template films as showcases The video-primitive tag pins an item to the Motion Primitives shelf and overrides every other grouping rule - right for an atomic move, wrong for a 25-second film. The five ad-template blocks move to the Showcases shelf (Scenes & demos), where complete scenes live; the primitives shelf keeps only the moves. * refactor(registry): retire banner-push-in and line-reveal-list Reviewed against the shelf they would join and cut as duplicates. banner-push-in was the thinnest cut against the existing notification family - notification-stack already owns the arrival-plus-lockstep-shift move, mirrored. line-reveal-list was pinched from both sides: the existing line-by-line-slide owns generic staggered lines, and the incoming notes-typing scene carries the measured writing cadence and scroll-settle at scene level. Their measured tables live on inside the films they were extracted from. * feat(registry): add four scene primitives - the moments, mountable social-proof-card: the app-store close as one scene - wordmark, five stars, proof line, three feature icons, CTA capsule - in a quiet stagger. Composes with, not against, star-rating-fill / testimonial-proof-card / cta-lockup, which stay the atomic owners of their moves. marker-checklist-card: a hand-lettered paper card - marker headline, an ellipse that draws itself around one word, checklist rows whose checks draw on. The paper-and-marker sibling of mk-specs-list. chat-thread: a conversation as a scene - measured bubble pop-ins, expo lockstep shifts, typing dots holding the beat, a media placeholder. Message content is one variable: heights are measured at mount and the choreography is generated to fit. Relates to #3046's caller-payload stack; kept independent. notes-typing: the notes-app confession - lines typed on the measured human keystroke rhythm, the caret riding every landed character. The scene counterpart to typed-prompt's bare prompt line. All four follow notification-stack's mountable-scene pattern: container units, theme-contract tokens, one paused timeline registered under the literal id. All demos pass the browser gate. * docs(catalog): regenerate for the reshelved films and scene primitives Ten pages become twelve: the five films move to the Showcases shelf, the two retired components' pages are gone, and the four scene primitives get pages under Motion Scenes. Every untouched page is byte-identical. * feat(registry): bring chat-thread to film fidelity, with a per-message type switch The scene now carries everything the reference conversation carries: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt under the last sent bubble, large emoji rows, a media placeholder, and a link card with title, domain and chevron. Every message picks its type by prefix, the way marker-highlight picks a style: recv:/sent: text bubbles, emoji: a large row, img a media placeholder, card:Title~domain a link card. Heights are still measured at mount and the choreography generated, so any mix of types fits. * feat(registry): add chat-message - the atom, with its type as an enum ONE message arrives on the measured entry, growing from its sender's corner. The type is a proper enum - Received, Sent, Emoji, Image, Link card - switched on the catalog page the way marker-highlight switches its style, with the bubble tail and the Delivered receipt as their own switches. chat-thread remains the conversation-as-scene built from arrivals like this one; the pipe grammar belongs at that level, the enum belongs here. Demo cycles all five types, one at a time, with a type chip naming each. * fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences Review fixes for #3217: - Rendered composer placeholder "iMessage" -> "Message" in chat-thread, its demo, and message-thread-reveal (technique comments stay as provenance) - notes-reveal now loads gsap@3.14.2 like every other item - Licence wording names each face: Courier Prime OFL 1.1, Permanent Marker Apache-2.0 (verified against embedded name-table records) Mirrored catalog payloads and pages regenerated for the four touched items.
1 line
60 KiB
JSON
1 line
60 KiB
JSON
{"html":"<!doctype html>\n<html\n lang=\"en\"\n data-composition-variables='[\n { \"id\": \"contactName\", \"type\": \"string\", \"role\": \"content\", \"label\": \"Contact name\", \"description\": \"Name pill in the chat header; the avatar shows its first letter.\", \"default\": \"Rachel\" },\n { \"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\" },\n { \"id\": \"cardDomain\", \"type\": \"string\", \"role\": \"content\", \"label\": \"Link card domain\", \"description\": \"Domain line under the card title.\", \"default\": \"hyperframes.heygen.com\" },\n { \"id\": \"ecProof\", \"type\": \"string\", \"role\": \"content\", \"label\": \"End-card proof\", \"description\": \"Social-proof line under the stars.\", \"default\": \"12,000+ creators\" },\n { \"id\": \"ecCta\", \"type\": \"string\", \"role\": \"content\", \"label\": \"End-card CTA\", \"description\": \"Label on the closing card button.\", \"default\": \"Start rendering free\" }\n ]'\n>\n <head><base href=\"/public/catalog/items/message-thread-reveal/\">\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=1080, height=1920\" />\n <title>Message Thread Reveal</title>\n <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n <style>\n * {\n box-sizing: border-box;\n }\n body {\n margin: 0;\n background: #000;\n }\n #mtr-root {\n position: relative;\n width: 1080px;\n height: 1920px;\n overflow: hidden;\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n }\n #mtr-plate {\n position: absolute;\n inset: 0;\n background:\n radial-gradient(\n ellipse 90% 60% at 30% 20%,\n rgba(60, 230, 172, 0.1) 0%,\n rgba(60, 230, 172, 0) 60%\n ),\n linear-gradient(168deg, #23262b 0%, #17191d 55%, #101114 100%);\n }\n #mtr-phonebody {\n position: absolute;\n left: 124px;\n top: 64px;\n width: 832px;\n height: 1797px;\n border-radius: 112px;\n background: #3a3d42;\n box-shadow:\n inset 0 2px 3px rgba(255, 255, 255, 0.25),\n 0 40px 90px rgba(0, 0, 0, 0.6);\n }\n .clip {\n position: absolute;\n inset: 0;\n }\n /* ---------- phone screen ---------- */\n #mtr-screen {\n position: absolute;\n left: 140px;\n top: 80px;\n width: 800px;\n height: 1765px;\n border-radius: 100px;\n background: #000;\n overflow: hidden;\n }\n /* status bar */\n #mtr-sb-time {\n position: absolute;\n left: 88px;\n top: 57px;\n color: #fff;\n font-size: 34px;\n font-weight: 600;\n letter-spacing: 0.5px;\n }\n #mtr-sb-icons {\n position: absolute;\n left: 578px;\n top: 66px;\n }\n /* header */\n #mtr-hdr-back {\n position: absolute;\n left: 48px;\n top: 158px;\n }\n #mtr-hdr-badge {\n position: absolute;\n left: 112px;\n top: 163px;\n height: 44px;\n padding: 0 22px;\n background: #262628;\n border-radius: 22px;\n color: #fff;\n font-size: 28px;\n line-height: 44px;\n }\n #mtr-hdr-avatar {\n position: absolute;\n left: 356px;\n top: 122px;\n width: 86px;\n height: 86px;\n border-radius: 50%;\n background: #9ce474;\n color: #12300c;\n font-size: 44px;\n font-weight: 600;\n display: grid;\n place-items: center;\n }\n #mtr-hdr-name {\n position: absolute;\n left: 400px;\n top: 213px;\n transform: translateX(-50%);\n height: 46px;\n padding: 0 20px;\n background: #232325;\n border-radius: 23px;\n color: #fff;\n font-size: 29px;\n line-height: 46px;\n white-space: nowrap;\n }\n #mtr-hdr-name .chev {\n color: #8e8e93;\n font-size: 26px;\n margin-left: 8px;\n }\n #mtr-hdr-cam {\n position: absolute;\n left: 699px;\n top: 166px;\n }\n /* chat viewport */\n #mtr-chatview {\n position: absolute;\n left: 0;\n top: 265px;\n width: 800px;\n height: 1367px;\n overflow: hidden;\n }\n .item {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n visibility: hidden;\n }\n .item.recv {\n padding-left: 44px;\n text-align: left;\n }\n .item.sent {\n padding-right: 45px;\n text-align: right;\n }\n .pop {\n display: inline-block;\n position: relative;\n }\n .pop-recv {\n transform-origin: left bottom;\n }\n .pop-sent {\n transform-origin: right bottom;\n }\n /* font 32.9px: artifact-closed-loop calibration (ref m1 ink 624x32 vs shipped-render 711x36 -> x0.876;\n the earlier 37.5px also overflowed max-width). padding 28px: ref ink inset 31/30 vs rep 26. */\n .bubble {\n display: inline-block;\n position: relative;\n max-width: 720px;\n padding: 0 28px;\n height: 81px;\n line-height: 81px;\n border-radius: 40px;\n font-size: 32.9px;\n color: #fff;\n white-space: nowrap;\n text-align: left;\n }\n .bubble.recv {\n background: #242428;\n }\n .bubble.sent {\n background: #0a80f8;\n }\n /* iMessage tails (screen bg is pure black -> cover circle trick) */\n .tail-recv::before {\n content: \"\";\n position: absolute;\n left: -10px;\n bottom: 0;\n width: 26px;\n height: 26px;\n background: #242428;\n border-bottom-right-radius: 20px 18px;\n }\n .tail-recv::after {\n content: \"\";\n position: absolute;\n left: -26px;\n bottom: -2px;\n width: 20px;\n height: 30px;\n background: #000;\n border-bottom-right-radius: 16px;\n }\n .tail-sent::before {\n content: \"\";\n position: absolute;\n right: -10px;\n bottom: 0;\n width: 26px;\n height: 26px;\n background: #0a80f8;\n border-bottom-left-radius: 20px 18px;\n }\n .tail-sent::after {\n content: \"\";\n position: absolute;\n right: -26px;\n bottom: -2px;\n width: 20px;\n height: 30px;\n background: #000;\n border-bottom-left-radius: 16px;\n }\n .delivered {\n color: #8e8e93;\n font-size: 28px;\n margin-top: 12px;\n padding-right: 7px;\n text-align: right;\n }\n /* 105.5px/ls2/ml12: artifact-closed-loop (ref yellow body h92, row w304, x203 vs rep 103/383/209) */\n .emojirow {\n font-size: 105.5px;\n line-height: 140px;\n letter-spacing: 2px;\n margin-left: 12px;\n white-space: nowrap;\n color: #fff;\n }\n /* typing indicator */\n .dotswrap {\n position: relative;\n display: inline-block;\n }\n .dotsbubble {\n width: 124px;\n height: 67px;\n background: #242428;\n border-radius: 34px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n }\n .dot {\n width: 17px;\n height: 17px;\n border-radius: 50%;\n background: #8e8e93;\n display: inline-block;\n }\n .dtail1 {\n position: absolute;\n left: -2px;\n bottom: -4px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: #242428;\n }\n .dtail2 {\n position: absolute;\n left: -14px;\n bottom: -14px;\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background: #242428;\n }\n /* link card */\n .card {\n display: inline-block;\n width: 443px;\n border-radius: 36px;\n overflow: hidden;\n text-align: left;\n }\n .cardimg {\n display: block;\n width: 443px;\n height: 432px;\n object-fit: cover;\n }\n .cardmeta {\n height: 178px;\n background: #28282c;\n display: flex;\n align-items: center;\n padding: 0 18px 0 26px;\n }\n .cardtxt {\n flex: 1;\n min-width: 0;\n }\n /* 26.8/23.3px: artifact-closed-loop (ref title ink w302 vs rep 350 -> x0.863); max-width keeps the\n measured 3-line wrap 'Where Are You? Dad / Edition | A personalized / book about him' */\n .cardtitle {\n color: #fff;\n font-size: 26.8px;\n font-weight: 600;\n line-height: 34px;\n max-width: 318px;\n }\n .carddomain {\n color: #8e8e93;\n font-size: 23.3px;\n margin-top: 4px;\n }\n .cardchev {\n color: #8e8e93;\n font-size: 48px;\n padding-left: 8px;\n }\n /* input bar */\n #mtr-plusbtn {\n position: absolute;\n left: 12px;\n top: 1653px;\n width: 86px;\n height: 86px;\n border-radius: 50%;\n background: #262628;\n color: #8e8e93;\n font-size: 52px;\n font-weight: 300;\n display: grid;\n place-items: center;\n }\n #mtr-field {\n position: absolute;\n left: 124px;\n top: 1646px;\n width: 665px;\n height: 93px;\n border: 2px solid #202022;\n border-radius: 47px;\n }\n #mtr-ph {\n position: absolute;\n left: 158px;\n top: 1668px;\n color: #8e8e93;\n font-size: 35px;\n line-height: 48px;\n }\n #mtr-typedwrap {\n position: absolute;\n left: 158px;\n top: 1668px;\n width: 600px;\n height: 48px;\n white-space: pre;\n }\n .typed {\n position: absolute;\n left: 0;\n top: 0;\n visibility: hidden;\n color: #fff;\n font-size: 36px;\n line-height: 48px;\n white-space: pre;\n }\n .caret {\n display: inline-block;\n width: 4px;\n height: 42px;\n background: #0a80f8;\n vertical-align: -8px;\n margin-left: 2px;\n border-radius: 2px;\n }\n #mtr-mic {\n position: absolute;\n left: 724px;\n top: 1664px;\n }\n #mtr-sendbtn {\n position: absolute;\n left: 698px;\n top: 1660px;\n width: 54px;\n height: 54px;\n border-radius: 50%;\n background: #0a80f8;\n visibility: hidden;\n display: grid;\n place-items: center;\n }\n /* ---------- end card ---------- */\n #mtr-ec-wrap {\n position: absolute;\n inset: 0;\n background: #f9f2e7;\n font-family: Georgia, \"Times New Roman\", serif;\n }\n #mtr-ec-logo {\n position: absolute;\n left: 308px;\n top: 500px;\n width: 464px;\n height: 139px;\n }\n #mtr-ec-stars {\n position: absolute;\n left: 372px;\n top: 714px;\n width: 336px;\n display: flex;\n gap: 15px;\n }\n #mtr-ec-fam {\n position: absolute;\n left: 0;\n top: 796px;\n width: 100%;\n text-align: center;\n color: #185450;\n font-size: 35.5px;\n font-weight: 700;\n }\n .ec-icon {\n position: absolute;\n top: 934px;\n width: 140px;\n height: 140px;\n border-radius: 50%;\n background: #185450;\n display: grid;\n place-items: center;\n }\n #mtr-ec-fam {\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n }\n .ec-label {\n position: absolute;\n top: 1098px;\n width: 240px;\n text-align: center;\n color: #205048;\n font-family: Georgia, \"Times New Roman\", serif;\n font-size: 31px;\n line-height: 40px;\n }\n #mtr-ec-cta {\n position: absolute;\n left: 200px;\n top: 1298px;\n width: 680px;\n height: 118px;\n border-radius: 59px;\n background: #3ce6ac;\n color: #0d3b2b;\n font-family: Georgia, \"Times New Roman\", serif;\n font-weight: 700;\n font-size: 46px;\n display: grid;\n place-items: center;\n }\n </style>\n </head>\n <body>\n <div\n id=\"mtr-root\"\n data-composition-id=\"message-thread-reveal\"\n data-start=\"0\"\n data-width=\"1080\"\n data-height=\"1920\"\n data-duration=\"25.7667\"\n >\n <div id=\"mtr-plate\">\n <div id=\"mtr-phonebody\"></div>\n </div>\n <section\n id=\"scene-chat\"\n class=\"clip\"\n data-start=\"0\"\n data-duration=\"23.62\"\n data-track-index=\"1\"\n >\n <div id=\"mtr-screen\">\n <div id=\"mtr-sb-time\">9:41</div>\n <svg id=\"mtr-sb-icons\" width=\"86\" height=\"30\" viewBox=\"0 0 86 30\">\n <rect x=\"0\" y=\"16\" width=\"5\" height=\"9\" rx=\"1.5\" fill=\"#fff\" />\n <rect x=\"8\" y=\"12\" width=\"5\" height=\"13\" rx=\"1.5\" fill=\"#fff\" />\n <rect x=\"16\" y=\"8\" width=\"5\" height=\"17\" rx=\"1.5\" fill=\"#fff\" />\n <rect x=\"24\" y=\"4\" width=\"5\" height=\"21\" rx=\"1.5\" fill=\"#fff\" />\n <g transform=\"translate(44,2)\">\n <path\n d=\"M18 21.5 L21.5 25 L25 21.5 A5 5 0 0 0 18 21.5\"\n fill=\"#fff\"\n transform=\"translate(-10,-2)\"\n />\n <path\n d=\"M4 13 A14 14 0 0 1 23 13\"\n stroke=\"#fff\"\n stroke-width=\"4\"\n fill=\"none\"\n transform=\"translate(-2,-2)\"\n />\n <path\n d=\"M8.5 17.5 A8 8 0 0 1 18.5 17.5\"\n stroke=\"#fff\"\n stroke-width=\"4\"\n fill=\"none\"\n transform=\"translate(-2,-2)\"\n />\n </g>\n </svg>\n <svg id=\"mtr-hdr-back\" width=\"26\" height=\"48\" viewBox=\"0 0 26 48\">\n <path\n d=\"M23 3 L4 24 L23 45\"\n stroke=\"#E4E4E4\"\n stroke-width=\"6\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <div id=\"mtr-hdr-badge\">12</div>\n <div id=\"mtr-hdr-avatar\">R</div>\n <div id=\"mtr-hdr-name\">Rachel<span class=\"chev\">›</span></div>\n <svg id=\"mtr-hdr-cam\" width=\"52\" height=\"34\" viewBox=\"0 0 52 34\">\n <rect x=\"0\" y=\"1\" width=\"36\" height=\"32\" rx=\"9\" fill=\"#fff\" />\n <path d=\"M38 12 L50 4 V30 L38 22 Z\" fill=\"#fff\" />\n </svg>\n <div id=\"mtr-chatview\">\n <div\n class=\"item recv\"\n id=\"mtr-it-m1\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-recv\">\n <div class=\"bubble recv\">what r u using for the launch video??</div>\n </div>\n </div>\n <div\n class=\"item recv\"\n id=\"mtr-it-dots\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-recv\">\n <div class=\"dotswrap\">\n <div class=\"dotsbubble\">\n <span class=\"dot\"></span><span class=\"dot\"></span><span class=\"dot\"></span>\n </div>\n <div class=\"dtail1\"></div>\n <div class=\"dtail2\"></div>\n </div>\n </div>\n </div>\n <div\n class=\"item sent\"\n id=\"mtr-it-m2\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-sent\">\n <div class=\"bubble sent tail-sent\">wait look 👀</div>\n <div class=\"delivered\">Delivered</div>\n </div>\n </div>\n <div\n class=\"item sent\"\n id=\"mtr-it-m3\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-sent\">\n <div class=\"card\">\n <img class=\"cardimg\" src=\"/public/catalog/assets/b953bffd7866c96c.jpg\" alt=\"\" />\n <div class=\"cardmeta\">\n <div class=\"cardtxt\">\n <div class=\"cardtitle\">\n HyperFrames | Write HTML, render pixel-perfect video\n </div>\n <div class=\"carddomain\">hyperframes.heygen.com</div>\n </div>\n <div class=\"cardchev\">›</div>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"item recv\"\n id=\"mtr-it-m4\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-recv\"><div class=\"bubble recv\">OMG IT'S HTML</div></div>\n </div>\n <div\n class=\"item recv\"\n id=\"mtr-it-m5\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-recv\"><div class=\"emojirow\">🤯🤯🤯</div></div>\n </div>\n <div\n class=\"item sent\"\n id=\"mtr-it-m6\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-sent\">\n <div class=\"bubble sent tail-sent\">renders in 4K. no editor</div>\n <div class=\"delivered\">Delivered</div>\n </div>\n </div>\n <div\n class=\"item recv\"\n id=\"mtr-it-dots2\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-recv\">\n <div class=\"dotswrap\">\n <div class=\"dotsbubble\">\n <span class=\"dot\"></span><span class=\"dot\"></span><span class=\"dot\"></span>\n </div>\n <div class=\"dtail1\"></div>\n <div class=\"dtail2\"></div>\n </div>\n </div>\n </div>\n <div\n class=\"item recv\"\n id=\"mtr-it-m7\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-recv\">\n <div class=\"bubble recv tail-recv\">where did u find this</div>\n </div>\n </div>\n <div\n class=\"item sent\"\n id=\"mtr-it-m8\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-sent\"><div class=\"bubble sent\">on heygen</div></div>\n </div>\n <div\n class=\"item sent\"\n id=\"mtr-it-m9\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-sent\">\n <div class=\"bubble sent\">u just write plain html tags</div>\n </div>\n </div>\n <div\n class=\"item sent\"\n id=\"mtr-it-m10\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-sent\">\n <div class=\"bubble sent tail-sent\">the code is yours forever</div>\n <div class=\"delivered\">Delivered</div>\n </div>\n </div>\n <div\n class=\"item recv\"\n id=\"mtr-it-m11\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-recv\"><div class=\"bubble recv\">installing rn</div></div>\n </div>\n <div\n class=\"item recv\"\n id=\"mtr-it-m12\"\n data-layout-allow-overflow\n data-layout-allow-overlap\n data-layout-allow-occlusion\n >\n <div class=\"pop pop-recv\"><div class=\"bubble recv tail-recv\">ty bestie 💚</div></div>\n </div>\n </div>\n <div id=\"mtr-plusbtn\">+</div>\n <div id=\"mtr-field\"></div>\n <div id=\"mtr-ph\">Message</div>\n <div id=\"mtr-typedwrap\">\n <span class=\"typed\" id=\"mtr-ty-1-0\">o<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-1-1\">wa<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-1-2\">wai<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-1-3\">wait<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-1-4\">wait <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-1-5\">wait l<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-1-6\">wait lo<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-1-7\">wait loo<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-1-8\">wait look<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-1-9\">wait look <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-1-10\">wait look 👀<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-0\">r<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-1\">re<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-2\">ren<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-3\">rend<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-4\">rende<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-5\">render<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-6\">renders<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-7\">renders <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-8\">renders i<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-9\">renders in<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-10\">renders in <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-11\">renders in 4<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-12\">renders in 4K<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-13\">renders in 4K.<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-14\">renders in 4K. <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-15\">renders in 4K. n<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-16\">renders in 4K. no<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-2-17\"\n >renders in 4K. no <span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-2-18\"\n >renders in 4K. no e<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-2-19\"\n >renders in 4K. no ed<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-2-20\"\n >renders in 4K. no edi<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-2-21\"\n >renders in 4K. no edit<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-2-22\"\n >renders in 4K. no edito<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-2-23\"\n >renders in 4K. no editor<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-3-0\">o<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-3-1\">on<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-3-2\">on <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-3-3\">on h<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-3-4\">on he<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-3-5\">on hey<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-3-6\">on heyg<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-3-7\">on heyge<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-3-8\">on heygen<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-0\">u<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-1\">u <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-2\">u j<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-3\">u ju<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-4\">u jus<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-5\">u just<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-6\">u just <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-7\">u just w<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-8\">u just wr<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-9\">u just wri<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-10\">u just writ<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-11\">u just write<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-12\">u just write <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-13\">u just write p<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-14\">u just write pl<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-15\">u just write pla<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-16\">u just write plai<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-4-17\"\n >u just write plain<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-4-18\"\n >u just write plain <span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-4-19\"\n >u just write plain h<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-4-20\"\n >u just write plain ht<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-4-21\"\n >u just write plain htm<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-4-22\"\n >u just write plain html<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-4-23\"\n >u just write plain html <span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-4-24\"\n >u just write plain html t<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-4-25\"\n >u just write plain html ta<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-4-26\"\n >u just write plain html tag<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-4-27\"\n >u just write plain html tags<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-5-0\">r<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-1\">th<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-2\">the<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-3\">the <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-4\">the c<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-5\">the co<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-6\">the cod<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-7\">the code<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-8\">the code <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-9\">the code i<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-10\">the code is<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-11\">the code is <span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-12\">the code is y<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-13\">the code is yo<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-14\">the code is you<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-15\">the code is your<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-16\">the code is yours<span class=\"caret\"></span></span>\n <span class=\"typed\" id=\"mtr-ty-5-17\"\n >the code is yours <span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-5-18\"\n >the code is yours f<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-5-19\"\n >the code is yours fo<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-5-20\"\n >the code is yours for<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-5-21\"\n >the code is yours fore<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-5-22\"\n >the code is yours forev<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-5-23\"\n >the code is yours foreve<span class=\"caret\"></span\n ></span>\n <span class=\"typed\" id=\"mtr-ty-5-24\"\n >the code is yours forever<span class=\"caret\"></span\n ></span>\n </div>\n <svg id=\"mtr-mic\" width=\"26\" height=\"42\" viewBox=\"0 0 26 42\">\n <rect x=\"8\" y=\"0\" width=\"10\" height=\"22\" rx=\"5\" fill=\"#8E8E93\" />\n <path\n d=\"M2 16 A11 11 0 0 0 24 16\"\n stroke=\"#8E8E93\"\n stroke-width=\"3.5\"\n fill=\"none\"\n transform=\"translate(0,2)\"\n />\n <line x1=\"13\" y1=\"30\" x2=\"13\" y2=\"38\" stroke=\"#8E8E93\" stroke-width=\"3.5\" />\n <line x1=\"6\" y1=\"39\" x2=\"20\" y2=\"39\" stroke=\"#8E8E93\" stroke-width=\"3.5\" />\n </svg>\n <div id=\"mtr-sendbtn\">\n <svg width=\"26\" height=\"30\" viewBox=\"0 0 26 30\">\n <path\n d=\"M13 28 V4 M3 13 L13 3 L23 13\"\n stroke=\"#fff\"\n stroke-width=\"5\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </section>\n <section\n id=\"scene-end\"\n class=\"clip\"\n data-start=\"23.2567\"\n data-duration=\"2.53\"\n data-track-index=\"2\"\n style=\"z-index: 5\"\n >\n <div id=\"mtr-ec-wrap\" data-layout-allow-overlap data-layout-allow-occlusion>\n <img id=\"mtr-ec-logo\" src=\"/public/catalog/assets/dc156e7c21b47474.svg\" alt=\"HyperFrames\" />\n <div id=\"mtr-ec-stars\">\n <svg width=\"55\" height=\"53\" viewBox=\"0 0 24 23\">\n <path\n 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\"\n fill=\"#FED059\"\n />\n </svg>\n <svg width=\"55\" height=\"53\" viewBox=\"0 0 24 23\">\n <path\n 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\"\n fill=\"#FED059\"\n />\n </svg>\n <svg width=\"55\" height=\"53\" viewBox=\"0 0 24 23\">\n <path\n 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\"\n fill=\"#FED059\"\n />\n </svg>\n <svg width=\"55\" height=\"53\" viewBox=\"0 0 24 23\">\n <path\n 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\"\n fill=\"#FED059\"\n />\n </svg>\n <svg width=\"55\" height=\"53\" viewBox=\"0 0 24 23\">\n <path\n 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\"\n fill=\"#FED059\"\n />\n </svg>\n </div>\n <div id=\"mtr-ec-fam\">12,000+ creators</div>\n <div class=\"ec-icon\" style=\"left: 150px\">\n <svg width=\"58\" height=\"58\" viewBox=\"0 0 24 24\">\n <path\n 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\"\n fill=\"#F9F2E7\"\n />\n </svg>\n </div>\n <div class=\"ec-icon\" style=\"left: 470px\">\n <svg width=\"60\" height=\"56\" viewBox=\"0 0 24 22\">\n <path\n 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\"\n fill=\"#F9F2E7\"\n />\n </svg>\n </div>\n <div class=\"ec-icon\" style=\"left: 790px\">\n <svg width=\"60\" height=\"60\" viewBox=\"0 0 24 24\">\n <path\n 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\"\n fill=\"#F9F2E7\"\n />\n </svg>\n </div>\n <div class=\"ec-label\" style=\"left: 100px\">\n <div>Write</div>\n <div>plain HTML</div>\n </div>\n <div class=\"ec-label\" style=\"left: 420px\">\n <div>Render</div>\n <div>pixel-perfect</div>\n </div>\n <div class=\"ec-label\" style=\"left: 740px\">\n <div>Own</div>\n <div>every line</div>\n </div>\n <div id=\"mtr-ec-cta\">Start rendering free</div>\n </div>\n </section>\n </div>\n <script>\n window.__timelines = window.__timelines || {};\n (function () {\n \"use strict\";\n var vars =\n window.__hyperframes && typeof window.__hyperframes.getVariables === \"function\"\n ? window.__hyperframes.getVariables()\n : {};\n function text(value, fallback, max) {\n if (typeof value !== \"string\") return fallback;\n var t = value.trim();\n if (!t) return fallback;\n return t.length > max ? t.slice(0, max) : t;\n }\n var contact = text(vars.contactName, \"Rachel\", 16);\n document.getElementById(\"mtr-hdr-avatar\").textContent = contact.charAt(0).toUpperCase();\n var namePill = document.getElementById(\"mtr-hdr-name\");\n namePill.innerHTML = \"\";\n namePill.appendChild(document.createTextNode(contact));\n var chev = document.createElement(\"span\");\n chev.className = \"chev\";\n chev.textContent = \"\\u203A\";\n namePill.appendChild(chev);\n document.querySelector(\".cardtitle\").textContent = text(\n vars.cardTitle,\n \"HyperFrames | Write HTML, render pixel-perfect video\",\n 80,\n );\n document.querySelector(\".carddomain\").textContent = text(\n vars.cardDomain,\n \"hyperframes.heygen.com\",\n 40,\n );\n document.getElementById(\"mtr-ec-fam\").textContent = text(\n vars.ecProof,\n \"12,000+ creators\",\n 30,\n );\n document.getElementById(\"mtr-ec-cta\").textContent = text(\n vars.ecCta,\n \"Start rendering free\",\n 26,\n );\n })();\n // initial states applied immediately (CSS hides all .item; m1 must be live at frame 0)\n gsap.set(\"#mtr-it-m1\", { autoAlpha: 1 });\n const tl = gsap.timeline({ paused: true });\n gsap.set(\"#mtr-it-m1\", { y: 1264 });\n tl.fromTo(\n \"#mtr-it-m1 .pop\",\n { scale: 0.75, autoAlpha: 0.6 },\n { scale: 1, autoAlpha: 1, duration: 0.12, ease: \"power2.out\" },\n 0.0,\n );\n tl.set(\"#mtr-it-m1\", { autoAlpha: 1 }, 0.0);\n tl.set(\"#mtr-it-m1\", { y: 1179 }, 0.7662);\n tl.set(\"#mtr-it-dots\", { y: 1278 }, 0.7662);\n tl.fromTo(\n \"#mtr-it-dots .pop\",\n { scale: 0.6, autoAlpha: 0.4 },\n { scale: 1, autoAlpha: 1, duration: 0.1, ease: \"power2.out\" },\n 0.7662,\n );\n tl.set(\"#mtr-it-dots\", { autoAlpha: 1 }, 0.7662);\n tl.set(\"#mtr-it-m1\", { y: 1036 }, 2.9662);\n tl.set(\"#mtr-it-dots\", { y: 1135 }, 2.9662);\n tl.set(\"#mtr-it-m2\", { y: 1218 }, 2.9662);\n tl.fromTo(\n \"#mtr-it-m2 .pop\",\n { autoAlpha: 0.55 },\n { autoAlpha: 1, duration: 0.0667, ease: \"none\" },\n 2.9662,\n );\n tl.set(\"#mtr-it-m2\", { autoAlpha: 1 }, 2.9662);\n tl.set(\"#mtr-it-m1\", { y: 416 }, 3.6995);\n tl.set(\"#mtr-it-dots\", { y: 515 }, 3.6995);\n tl.set(\"#mtr-it-m2\", { y: 598 }, 3.6995);\n tl.set(\"#mtr-it-m3\", { y: 735 }, 3.6995);\n tl.fromTo(\n \"#mtr-it-m3 .pop\",\n { autoAlpha: 0.55 },\n { autoAlpha: 1, duration: 0.0667, ease: \"none\" },\n 3.6995,\n );\n tl.set(\"#mtr-it-m3\", { autoAlpha: 1 }, 3.6995);\n tl.set(\"#mtr-it-dots\", { autoAlpha: 0 }, 7.2995);\n tl.set(\"#mtr-it-m1\", { y: 400 }, 7.2995);\n tl.set(\"#mtr-it-m2\", { y: 499 }, 7.2995);\n tl.set(\"#mtr-it-m3\", { y: 636 }, 7.2995);\n tl.set(\"#mtr-it-m4\", { y: 1264 }, 7.2995);\n tl.fromTo(\n \"#mtr-it-m4 .pop\",\n { autoAlpha: 0.55 },\n { autoAlpha: 1, duration: 0.0667, ease: \"none\" },\n 7.2995,\n );\n tl.set(\"#mtr-it-m4\", { autoAlpha: 1 }, 7.2995);\n tl.set(\"#mtr-it-m1\", { y: 250 }, 8.0328);\n tl.set(\"#mtr-it-m2\", { y: 349 }, 8.0328);\n tl.set(\"#mtr-it-m3\", { y: 486 }, 8.0328);\n tl.set(\"#mtr-it-m4\", { y: 1114 }, 8.0328);\n tl.set(\"#mtr-it-m5\", { y: 1205 }, 8.0328);\n tl.fromTo(\n \"#mtr-it-m5 .pop\",\n { scale: 0.5, autoAlpha: 0.3 },\n { scale: 1, autoAlpha: 1, duration: 0.1, ease: \"power2.out\" },\n 8.0328,\n );\n tl.set(\"#mtr-it-m5\", { autoAlpha: 1 }, 8.0328);\n tl.set(\"#mtr-it-m1\", { y: 113 }, 10.5995);\n tl.set(\"#mtr-it-m2\", { y: 212 }, 10.5995);\n tl.set(\"#mtr-it-m3\", { y: 349 }, 10.5995);\n tl.set(\"#mtr-it-m4\", { y: 977 }, 10.5995);\n tl.set(\"#mtr-it-m5\", { y: 1068 }, 10.5995);\n tl.set(\"#mtr-it-m6\", { y: 1218 }, 10.5995);\n tl.fromTo(\n \"#mtr-it-m6 .pop\",\n { autoAlpha: 0.55 },\n { autoAlpha: 1, duration: 0.0667, ease: \"none\" },\n 10.5995,\n );\n tl.set(\"#mtr-it-m6\", { autoAlpha: 1 }, 10.5995);\n tl.set(\"#mtr-it-m1\", { y: 28 }, 11.3662);\n tl.set(\"#mtr-it-m2\", { y: 127 }, 11.3662);\n tl.set(\"#mtr-it-m3\", { y: 264 }, 11.3662);\n tl.set(\"#mtr-it-m4\", { y: 892 }, 11.3662);\n tl.set(\"#mtr-it-m5\", { y: 983 }, 11.3662);\n tl.set(\"#mtr-it-m6\", { y: 1133 }, 11.3662);\n tl.set(\"#mtr-it-dots2\", { y: 1278 }, 11.3662);\n tl.fromTo(\n \"#mtr-it-dots2 .pop\",\n { scale: 0.6, autoAlpha: 0.4 },\n { scale: 1, autoAlpha: 1, duration: 0.1, ease: \"power2.out\" },\n 11.3662,\n );\n tl.set(\"#mtr-it-dots2\", { autoAlpha: 1 }, 11.3662);\n tl.set(\"#mtr-it-dots2\", { autoAlpha: 0 }, 12.3662);\n tl.set(\"#mtr-it-m1\", { y: 14 }, 12.3662);\n tl.set(\"#mtr-it-m2\", { y: 113 }, 12.3662);\n tl.set(\"#mtr-it-m3\", { y: 250 }, 12.3662);\n tl.set(\"#mtr-it-m4\", { y: 878 }, 12.3662);\n tl.set(\"#mtr-it-m5\", { y: 969 }, 12.3662);\n tl.set(\"#mtr-it-m6\", { y: 1119 }, 12.3662);\n tl.set(\"#mtr-it-m7\", { y: 1264 }, 12.3662);\n tl.fromTo(\n \"#mtr-it-m7 .pop\",\n { autoAlpha: 0.55 },\n { autoAlpha: 1, duration: 0.0667, ease: \"none\" },\n 12.3662,\n );\n tl.set(\"#mtr-it-m7\", { autoAlpha: 1 }, 12.3662);\n tl.set(\"#mtr-it-m1\", { y: -85 }, 14.0662);\n tl.set(\"#mtr-it-m2\", { y: 14 }, 14.0662);\n tl.set(\"#mtr-it-m3\", { y: 151 }, 14.0662);\n tl.set(\"#mtr-it-m4\", { y: 779 }, 14.0662);\n tl.set(\"#mtr-it-m5\", { y: 870 }, 14.0662);\n tl.set(\"#mtr-it-m6\", { y: 1020 }, 14.0662);\n tl.set(\"#mtr-it-m7\", { y: 1165 }, 14.0662);\n tl.set(\"#mtr-it-m8\", { y: 1264 }, 14.0662);\n tl.fromTo(\n \"#mtr-it-m8 .pop\",\n { autoAlpha: 0.55 },\n { autoAlpha: 1, duration: 0.0667, ease: \"none\" },\n 14.0662,\n );\n tl.set(\"#mtr-it-m8\", { autoAlpha: 1 }, 14.0662);\n tl.set(\"#mtr-it-m1\", { y: -176 }, 17.0995);\n tl.set(\"#mtr-it-m2\", { y: -77 }, 17.0995);\n tl.set(\"#mtr-it-m3\", { y: 60 }, 17.0995);\n tl.set(\"#mtr-it-m4\", { y: 688 }, 17.0995);\n tl.set(\"#mtr-it-m5\", { y: 779 }, 17.0995);\n tl.set(\"#mtr-it-m6\", { y: 929 }, 17.0995);\n tl.set(\"#mtr-it-m7\", { y: 1074 }, 17.0995);\n tl.set(\"#mtr-it-m8\", { y: 1173 }, 17.0995);\n tl.set(\"#mtr-it-m9\", { y: 1264 }, 17.0995);\n tl.fromTo(\n \"#mtr-it-m9 .pop\",\n { autoAlpha: 0.55 },\n { autoAlpha: 1, duration: 0.0667, ease: \"none\" },\n 17.0995,\n );\n tl.set(\"#mtr-it-m9\", { autoAlpha: 1 }, 17.0995);\n tl.set(\"#mtr-it-m1\", { y: -313 }, 19.8995);\n tl.set(\"#mtr-it-m2\", { y: -214 }, 19.8995);\n tl.set(\"#mtr-it-m3\", { y: -77 }, 19.8995);\n tl.set(\"#mtr-it-m4\", { y: 551 }, 19.8995);\n tl.set(\"#mtr-it-m5\", { y: 642 }, 19.8995);\n tl.set(\"#mtr-it-m6\", { y: 792 }, 19.8995);\n tl.set(\"#mtr-it-m7\", { y: 937 }, 19.8995);\n tl.set(\"#mtr-it-m8\", { y: 1036 }, 19.8995);\n tl.set(\"#mtr-it-m9\", { y: 1127 }, 19.8995);\n tl.set(\"#mtr-it-m10\", { y: 1218 }, 19.8995);\n tl.fromTo(\n \"#mtr-it-m10 .pop\",\n { autoAlpha: 0.55 },\n { autoAlpha: 1, duration: 0.0667, ease: \"none\" },\n 19.8995,\n );\n tl.set(\"#mtr-it-m10\", { autoAlpha: 1 }, 19.8995);\n tl.set(\"#mtr-it-m1\", { y: -412 }, 20.6662);\n tl.set(\"#mtr-it-m2\", { y: -313 }, 20.6662);\n tl.set(\"#mtr-it-m3\", { y: -176 }, 20.6662);\n tl.set(\"#mtr-it-m4\", { y: 452 }, 20.6662);\n tl.set(\"#mtr-it-m5\", { y: 543 }, 20.6662);\n tl.set(\"#mtr-it-m6\", { y: 693 }, 20.6662);\n tl.set(\"#mtr-it-m7\", { y: 838 }, 20.6662);\n tl.set(\"#mtr-it-m8\", { y: 937 }, 20.6662);\n tl.set(\"#mtr-it-m9\", { y: 1028 }, 20.6662);\n tl.set(\"#mtr-it-m10\", { y: 1119 }, 20.6662);\n tl.set(\"#mtr-it-m11\", { y: 1264 }, 20.6662);\n tl.fromTo(\n \"#mtr-it-m11 .pop\",\n { autoAlpha: 0.55 },\n { autoAlpha: 1, duration: 0.0667, ease: \"none\" },\n 20.6662,\n );\n tl.set(\"#mtr-it-m11\", { autoAlpha: 1 }, 20.6662);\n tl.set(\"#mtr-it-m1\", { y: -503 }, 21.4328);\n tl.set(\"#mtr-it-m2\", { y: -404 }, 21.4328);\n tl.set(\"#mtr-it-m3\", { y: -267 }, 21.4328);\n tl.set(\"#mtr-it-m4\", { y: 361 }, 21.4328);\n tl.set(\"#mtr-it-m5\", { y: 452 }, 21.4328);\n tl.set(\"#mtr-it-m6\", { y: 602 }, 21.4328);\n tl.set(\"#mtr-it-m7\", { y: 747 }, 21.4328);\n tl.set(\"#mtr-it-m8\", { y: 846 }, 21.4328);\n tl.set(\"#mtr-it-m9\", { y: 937 }, 21.4328);\n tl.set(\"#mtr-it-m10\", { y: 1028 }, 21.4328);\n tl.set(\"#mtr-it-m11\", { y: 1173 }, 21.4328);\n tl.set(\"#mtr-it-m12\", { y: 1264 }, 21.4328);\n tl.fromTo(\n \"#mtr-it-m12 .pop\",\n { autoAlpha: 0.55 },\n { autoAlpha: 1, duration: 0.0667, ease: \"none\" },\n 21.4328,\n );\n tl.set(\"#mtr-it-m12\", { autoAlpha: 1 }, 21.4328);\n tl.set(\"#mtr-ph\", { autoAlpha: 0 }, 2.0328);\n tl.set(\"#mtr-mic\", { autoAlpha: 0 }, 2.0328);\n tl.set(\"#mtr-sendbtn\", { autoAlpha: 1 }, 2.0328);\n tl.set(\"#mtr-ph\", { autoAlpha: 1 }, 2.9662);\n tl.set(\"#mtr-mic\", { autoAlpha: 1 }, 2.9662);\n tl.set(\"#mtr-sendbtn\", { autoAlpha: 0 }, 2.9662);\n tl.set(\"#mtr-ty-1-0\", { autoAlpha: 1 }, 2.0328);\n tl.set(\"#mtr-ty-1-0\", { autoAlpha: 0 }, 2.0995);\n tl.set(\"#mtr-ty-1-1\", { autoAlpha: 1 }, 2.0995);\n tl.set(\"#mtr-ty-1-1\", { autoAlpha: 0 }, 2.1662);\n tl.set(\"#mtr-ty-1-2\", { autoAlpha: 1 }, 2.1662);\n tl.set(\"#mtr-ty-1-2\", { autoAlpha: 0 }, 2.2328);\n tl.set(\"#mtr-ty-1-3\", { autoAlpha: 1 }, 2.2328);\n tl.set(\"#mtr-ty-1-3\", { autoAlpha: 0 }, 2.2995);\n tl.set(\"#mtr-ty-1-4\", { autoAlpha: 1 }, 2.2995);\n tl.set(\"#mtr-ty-1-4\", { autoAlpha: 0 }, 2.3995);\n tl.set(\"#mtr-ty-1-5\", { autoAlpha: 1 }, 2.3995);\n tl.set(\"#mtr-ty-1-5\", { autoAlpha: 0 }, 2.4328);\n tl.set(\"#mtr-ty-1-6\", { autoAlpha: 1 }, 2.4328);\n tl.set(\"#mtr-ty-1-6\", { autoAlpha: 0 }, 2.4995);\n tl.set(\"#mtr-ty-1-7\", { autoAlpha: 1 }, 2.4995);\n tl.set(\"#mtr-ty-1-7\", { autoAlpha: 0 }, 2.5662);\n tl.set(\"#mtr-ty-1-8\", { autoAlpha: 1 }, 2.5662);\n tl.set(\"#mtr-ty-1-8\", { autoAlpha: 0 }, 2.5995);\n tl.set(\"#mtr-ty-1-9\", { autoAlpha: 1 }, 2.5995);\n tl.set(\"#mtr-ty-1-9\", { autoAlpha: 0 }, 2.7995);\n tl.set(\"#mtr-ty-1-10\", { autoAlpha: 1 }, 2.7995);\n tl.set(\"#mtr-ty-1-10\", { autoAlpha: 0 }, 2.9662);\n tl.set(\"#mtr-ph\", { autoAlpha: 0 }, 8.8662);\n tl.set(\"#mtr-mic\", { autoAlpha: 0 }, 8.8662);\n tl.set(\"#mtr-sendbtn\", { autoAlpha: 1 }, 8.8662);\n tl.set(\"#mtr-ph\", { autoAlpha: 1 }, 10.5995);\n tl.set(\"#mtr-mic\", { autoAlpha: 1 }, 10.5995);\n tl.set(\"#mtr-sendbtn\", { autoAlpha: 0 }, 10.5995);\n tl.set(\"#mtr-ty-2-0\", { autoAlpha: 1 }, 8.8662);\n tl.set(\"#mtr-ty-2-0\", { autoAlpha: 0 }, 8.9662);\n tl.set(\"#mtr-ty-2-1\", { autoAlpha: 1 }, 8.9662);\n tl.set(\"#mtr-ty-2-1\", { autoAlpha: 0 }, 8.9995);\n tl.set(\"#mtr-ty-2-2\", { autoAlpha: 1 }, 8.9995);\n tl.set(\"#mtr-ty-2-2\", { autoAlpha: 0 }, 9.0662);\n tl.set(\"#mtr-ty-2-3\", { autoAlpha: 1 }, 9.0662);\n tl.set(\"#mtr-ty-2-3\", { autoAlpha: 0 }, 9.1662);\n tl.set(\"#mtr-ty-2-4\", { autoAlpha: 1 }, 9.1662);\n tl.set(\"#mtr-ty-2-4\", { autoAlpha: 0 }, 9.2328);\n tl.set(\"#mtr-ty-2-5\", { autoAlpha: 1 }, 9.2328);\n tl.set(\"#mtr-ty-2-5\", { autoAlpha: 0 }, 9.2662);\n tl.set(\"#mtr-ty-2-6\", { autoAlpha: 1 }, 9.2662);\n tl.set(\"#mtr-ty-2-6\", { autoAlpha: 0 }, 9.3662);\n tl.set(\"#mtr-ty-2-7\", { autoAlpha: 1 }, 9.3662);\n tl.set(\"#mtr-ty-2-7\", { autoAlpha: 0 }, 9.3995);\n tl.set(\"#mtr-ty-2-8\", { autoAlpha: 1 }, 9.3995);\n tl.set(\"#mtr-ty-2-8\", { autoAlpha: 0 }, 9.4328);\n tl.set(\"#mtr-ty-2-9\", { autoAlpha: 1 }, 9.4328);\n tl.set(\"#mtr-ty-2-9\", { autoAlpha: 0 }, 9.5662);\n tl.set(\"#mtr-ty-2-10\", { autoAlpha: 1 }, 9.5662);\n tl.set(\"#mtr-ty-2-10\", { autoAlpha: 0 }, 9.5995);\n tl.set(\"#mtr-ty-2-11\", { autoAlpha: 1 }, 9.5995);\n tl.set(\"#mtr-ty-2-11\", { autoAlpha: 0 }, 9.6662);\n tl.set(\"#mtr-ty-2-12\", { autoAlpha: 1 }, 9.6662);\n tl.set(\"#mtr-ty-2-12\", { autoAlpha: 0 }, 9.7995);\n tl.set(\"#mtr-ty-2-13\", { autoAlpha: 1 }, 9.7995);\n tl.set(\"#mtr-ty-2-13\", { autoAlpha: 0 }, 9.8662);\n tl.set(\"#mtr-ty-2-14\", { autoAlpha: 1 }, 9.8662);\n tl.set(\"#mtr-ty-2-14\", { autoAlpha: 0 }, 9.8995);\n tl.set(\"#mtr-ty-2-15\", { autoAlpha: 1 }, 9.8995);\n tl.set(\"#mtr-ty-2-15\", { autoAlpha: 0 }, 9.9662);\n tl.set(\"#mtr-ty-2-16\", { autoAlpha: 1 }, 9.9662);\n tl.set(\"#mtr-ty-2-16\", { autoAlpha: 0 }, 9.9995);\n tl.set(\"#mtr-ty-2-17\", { autoAlpha: 1 }, 9.9995);\n tl.set(\"#mtr-ty-2-17\", { autoAlpha: 0 }, 10.0662);\n tl.set(\"#mtr-ty-2-18\", { autoAlpha: 1 }, 10.0662);\n tl.set(\"#mtr-ty-2-18\", { autoAlpha: 0 }, 10.1662);\n tl.set(\"#mtr-ty-2-19\", { autoAlpha: 1 }, 10.1662);\n tl.set(\"#mtr-ty-2-19\", { autoAlpha: 0 }, 10.2328);\n tl.set(\"#mtr-ty-2-20\", { autoAlpha: 1 }, 10.2328);\n tl.set(\"#mtr-ty-2-20\", { autoAlpha: 0 }, 10.2995);\n tl.set(\"#mtr-ty-2-21\", { autoAlpha: 1 }, 10.2995);\n tl.set(\"#mtr-ty-2-21\", { autoAlpha: 0 }, 10.3995);\n tl.set(\"#mtr-ty-2-22\", { autoAlpha: 1 }, 10.3995);\n tl.set(\"#mtr-ty-2-22\", { autoAlpha: 0 }, 10.4662);\n tl.set(\"#mtr-ty-2-23\", { autoAlpha: 1 }, 10.4662);\n tl.set(\"#mtr-ty-2-23\", { autoAlpha: 0 }, 10.5995);\n tl.set(\"#mtr-ph\", { autoAlpha: 0 }, 13.3995);\n tl.set(\"#mtr-mic\", { autoAlpha: 0 }, 13.3995);\n tl.set(\"#mtr-sendbtn\", { autoAlpha: 1 }, 13.3995);\n tl.set(\"#mtr-ph\", { autoAlpha: 1 }, 14.0662);\n tl.set(\"#mtr-mic\", { autoAlpha: 1 }, 14.0662);\n tl.set(\"#mtr-sendbtn\", { autoAlpha: 0 }, 14.0662);\n tl.set(\"#mtr-ty-3-0\", { autoAlpha: 1 }, 13.3995);\n tl.set(\"#mtr-ty-3-0\", { autoAlpha: 0 }, 13.4328);\n tl.set(\"#mtr-ty-3-1\", { autoAlpha: 1 }, 13.4328);\n tl.set(\"#mtr-ty-3-1\", { autoAlpha: 0 }, 13.4995);\n tl.set(\"#mtr-ty-3-2\", { autoAlpha: 1 }, 13.4995);\n tl.set(\"#mtr-ty-3-2\", { autoAlpha: 0 }, 13.5995);\n tl.set(\"#mtr-ty-3-3\", { autoAlpha: 1 }, 13.5995);\n tl.set(\"#mtr-ty-3-3\", { autoAlpha: 0 }, 13.6662);\n tl.set(\"#mtr-ty-3-4\", { autoAlpha: 1 }, 13.6662);\n tl.set(\"#mtr-ty-3-4\", { autoAlpha: 0 }, 13.6995);\n tl.set(\"#mtr-ty-3-5\", { autoAlpha: 1 }, 13.6995);\n tl.set(\"#mtr-ty-3-5\", { autoAlpha: 0 }, 13.7995);\n tl.set(\"#mtr-ty-3-6\", { autoAlpha: 1 }, 13.7995);\n tl.set(\"#mtr-ty-3-6\", { autoAlpha: 0 }, 13.9662);\n tl.set(\"#mtr-ty-3-7\", { autoAlpha: 1 }, 13.9662);\n tl.set(\"#mtr-ty-3-7\", { autoAlpha: 0 }, 14.0328);\n tl.set(\"#mtr-ty-3-8\", { autoAlpha: 1 }, 14.0328);\n tl.set(\"#mtr-ty-3-8\", { autoAlpha: 0 }, 14.0662);\n tl.set(\"#mtr-ph\", { autoAlpha: 0 }, 15.1662);\n tl.set(\"#mtr-mic\", { autoAlpha: 0 }, 15.1662);\n tl.set(\"#mtr-sendbtn\", { autoAlpha: 1 }, 15.1662);\n tl.set(\"#mtr-ph\", { autoAlpha: 1 }, 17.0995);\n tl.set(\"#mtr-mic\", { autoAlpha: 1 }, 17.0995);\n tl.set(\"#mtr-sendbtn\", { autoAlpha: 0 }, 17.0995);\n tl.set(\"#mtr-ty-4-0\", { autoAlpha: 1 }, 15.1662);\n tl.set(\"#mtr-ty-4-0\", { autoAlpha: 0 }, 15.1995);\n tl.set(\"#mtr-ty-4-1\", { autoAlpha: 1 }, 15.1995);\n tl.set(\"#mtr-ty-4-1\", { autoAlpha: 0 }, 15.2328);\n tl.set(\"#mtr-ty-4-2\", { autoAlpha: 1 }, 15.2328);\n tl.set(\"#mtr-ty-4-2\", { autoAlpha: 0 }, 15.2995);\n tl.set(\"#mtr-ty-4-3\", { autoAlpha: 1 }, 15.2995);\n tl.set(\"#mtr-ty-4-3\", { autoAlpha: 0 }, 15.3995);\n tl.set(\"#mtr-ty-4-4\", { autoAlpha: 1 }, 15.3995);\n tl.set(\"#mtr-ty-4-4\", { autoAlpha: 0 }, 15.4328);\n tl.set(\"#mtr-ty-4-5\", { autoAlpha: 1 }, 15.4328);\n tl.set(\"#mtr-ty-4-5\", { autoAlpha: 0 }, 15.4995);\n tl.set(\"#mtr-ty-4-6\", { autoAlpha: 1 }, 15.4995);\n tl.set(\"#mtr-ty-4-6\", { autoAlpha: 0 }, 15.5662);\n tl.set(\"#mtr-ty-4-7\", { autoAlpha: 1 }, 15.5662);\n tl.set(\"#mtr-ty-4-7\", { autoAlpha: 0 }, 15.6328);\n tl.set(\"#mtr-ty-4-8\", { autoAlpha: 1 }, 15.6328);\n tl.set(\"#mtr-ty-4-8\", { autoAlpha: 0 }, 15.6662);\n tl.set(\"#mtr-ty-4-9\", { autoAlpha: 1 }, 15.6662);\n tl.set(\"#mtr-ty-4-9\", { autoAlpha: 0 }, 15.6995);\n tl.set(\"#mtr-ty-4-10\", { autoAlpha: 1 }, 15.6995);\n tl.set(\"#mtr-ty-4-10\", { autoAlpha: 0 }, 15.7995);\n tl.set(\"#mtr-ty-4-11\", { autoAlpha: 1 }, 15.7995);\n tl.set(\"#mtr-ty-4-11\", { autoAlpha: 0 }, 15.8662);\n tl.set(\"#mtr-ty-4-12\", { autoAlpha: 1 }, 15.8662);\n tl.set(\"#mtr-ty-4-12\", { autoAlpha: 0 }, 15.8995);\n tl.set(\"#mtr-ty-4-13\", { autoAlpha: 1 }, 15.8995);\n tl.set(\"#mtr-ty-4-13\", { autoAlpha: 0 }, 16.0662);\n tl.set(\"#mtr-ty-4-14\", { autoAlpha: 1 }, 16.0662);\n tl.set(\"#mtr-ty-4-14\", { autoAlpha: 0 }, 16.0995);\n tl.set(\"#mtr-ty-4-15\", { autoAlpha: 1 }, 16.0995);\n tl.set(\"#mtr-ty-4-15\", { autoAlpha: 0 }, 16.2328);\n tl.set(\"#mtr-ty-4-16\", { autoAlpha: 1 }, 16.2328);\n tl.set(\"#mtr-ty-4-16\", { autoAlpha: 0 }, 16.2662);\n tl.set(\"#mtr-ty-4-17\", { autoAlpha: 1 }, 16.2662);\n tl.set(\"#mtr-ty-4-17\", { autoAlpha: 0 }, 16.2995);\n tl.set(\"#mtr-ty-4-18\", { autoAlpha: 1 }, 16.2995);\n tl.set(\"#mtr-ty-4-18\", { autoAlpha: 0 }, 16.3995);\n tl.set(\"#mtr-ty-4-19\", { autoAlpha: 1 }, 16.3995);\n tl.set(\"#mtr-ty-4-19\", { autoAlpha: 0 }, 16.4662);\n tl.set(\"#mtr-ty-4-20\", { autoAlpha: 1 }, 16.4662);\n tl.set(\"#mtr-ty-4-20\", { autoAlpha: 0 }, 16.4995);\n tl.set(\"#mtr-ty-4-21\", { autoAlpha: 1 }, 16.4995);\n tl.set(\"#mtr-ty-4-21\", { autoAlpha: 0 }, 16.5662);\n tl.set(\"#mtr-ty-4-22\", { autoAlpha: 1 }, 16.5662);\n tl.set(\"#mtr-ty-4-22\", { autoAlpha: 0 }, 16.6328);\n tl.set(\"#mtr-ty-4-23\", { autoAlpha: 1 }, 16.6328);\n tl.set(\"#mtr-ty-4-23\", { autoAlpha: 0 }, 16.6995);\n tl.set(\"#mtr-ty-4-24\", { autoAlpha: 1 }, 16.6995);\n tl.set(\"#mtr-ty-4-24\", { autoAlpha: 0 }, 16.7995);\n tl.set(\"#mtr-ty-4-25\", { autoAlpha: 1 }, 16.7995);\n tl.set(\"#mtr-ty-4-25\", { autoAlpha: 0 }, 16.8328);\n tl.set(\"#mtr-ty-4-26\", { autoAlpha: 1 }, 16.8328);\n tl.set(\"#mtr-ty-4-26\", { autoAlpha: 0 }, 16.8995);\n tl.set(\"#mtr-ty-4-27\", { autoAlpha: 1 }, 16.8995);\n tl.set(\"#mtr-ty-4-27\", { autoAlpha: 0 }, 17.0995);\n tl.set(\"#mtr-ph\", { autoAlpha: 0 }, 18.1662);\n tl.set(\"#mtr-mic\", { autoAlpha: 0 }, 18.1662);\n tl.set(\"#mtr-sendbtn\", { autoAlpha: 1 }, 18.1662);\n tl.set(\"#mtr-ph\", { autoAlpha: 1 }, 19.8995);\n tl.set(\"#mtr-mic\", { autoAlpha: 1 }, 19.8995);\n tl.set(\"#mtr-sendbtn\", { autoAlpha: 0 }, 19.8995);\n tl.set(\"#mtr-ty-5-0\", { autoAlpha: 1 }, 18.1662);\n tl.set(\"#mtr-ty-5-0\", { autoAlpha: 0 }, 18.2328);\n tl.set(\"#mtr-ty-5-1\", { autoAlpha: 1 }, 18.2328);\n tl.set(\"#mtr-ty-5-1\", { autoAlpha: 0 }, 18.2662);\n tl.set(\"#mtr-ty-5-2\", { autoAlpha: 1 }, 18.2662);\n tl.set(\"#mtr-ty-5-2\", { autoAlpha: 0 }, 18.3662);\n tl.set(\"#mtr-ty-5-3\", { autoAlpha: 1 }, 18.3662);\n tl.set(\"#mtr-ty-5-3\", { autoAlpha: 0 }, 18.4328);\n tl.set(\"#mtr-ty-5-4\", { autoAlpha: 1 }, 18.4328);\n tl.set(\"#mtr-ty-5-4\", { autoAlpha: 0 }, 18.4995);\n tl.set(\"#mtr-ty-5-5\", { autoAlpha: 1 }, 18.4995);\n tl.set(\"#mtr-ty-5-5\", { autoAlpha: 0 }, 18.5995);\n tl.set(\"#mtr-ty-5-6\", { autoAlpha: 1 }, 18.5995);\n tl.set(\"#mtr-ty-5-6\", { autoAlpha: 0 }, 18.6662);\n tl.set(\"#mtr-ty-5-7\", { autoAlpha: 1 }, 18.6662);\n tl.set(\"#mtr-ty-5-7\", { autoAlpha: 0 }, 18.7328);\n tl.set(\"#mtr-ty-5-8\", { autoAlpha: 1 }, 18.7328);\n tl.set(\"#mtr-ty-5-8\", { autoAlpha: 0 }, 18.7995);\n tl.set(\"#mtr-ty-5-9\", { autoAlpha: 1 }, 18.7995);\n tl.set(\"#mtr-ty-5-9\", { autoAlpha: 0 }, 18.8328);\n tl.set(\"#mtr-ty-5-10\", { autoAlpha: 1 }, 18.8328);\n tl.set(\"#mtr-ty-5-10\", { autoAlpha: 0 }, 18.9995);\n tl.set(\"#mtr-ty-5-11\", { autoAlpha: 1 }, 18.9995);\n tl.set(\"#mtr-ty-5-11\", { autoAlpha: 0 }, 19.0328);\n tl.set(\"#mtr-ty-5-12\", { autoAlpha: 1 }, 19.0328);\n tl.set(\"#mtr-ty-5-12\", { autoAlpha: 0 }, 19.0995);\n tl.set(\"#mtr-ty-5-13\", { autoAlpha: 1 }, 19.0995);\n tl.set(\"#mtr-ty-5-13\", { autoAlpha: 0 }, 19.1662);\n tl.set(\"#mtr-ty-5-14\", { autoAlpha: 1 }, 19.1662);\n tl.set(\"#mtr-ty-5-14\", { autoAlpha: 0 }, 19.1995);\n tl.set(\"#mtr-ty-5-15\", { autoAlpha: 1 }, 19.1995);\n tl.set(\"#mtr-ty-5-15\", { autoAlpha: 0 }, 19.2662);\n tl.set(\"#mtr-ty-5-16\", { autoAlpha: 1 }, 19.2662);\n tl.set(\"#mtr-ty-5-16\", { autoAlpha: 0 }, 19.3662);\n tl.set(\"#mtr-ty-5-17\", { autoAlpha: 1 }, 19.3662);\n tl.set(\"#mtr-ty-5-17\", { autoAlpha: 0 }, 19.4328);\n tl.set(\"#mtr-ty-5-18\", { autoAlpha: 1 }, 19.4328);\n tl.set(\"#mtr-ty-5-18\", { autoAlpha: 0 }, 19.4995);\n tl.set(\"#mtr-ty-5-19\", { autoAlpha: 1 }, 19.4995);\n tl.set(\"#mtr-ty-5-19\", { autoAlpha: 0 }, 19.5328);\n tl.set(\"#mtr-ty-5-20\", { autoAlpha: 1 }, 19.5328);\n tl.set(\"#mtr-ty-5-20\", { autoAlpha: 0 }, 19.5995);\n tl.set(\"#mtr-ty-5-21\", { autoAlpha: 1 }, 19.5995);\n tl.set(\"#mtr-ty-5-21\", { autoAlpha: 0 }, 19.6662);\n tl.set(\"#mtr-ty-5-22\", { autoAlpha: 1 }, 19.6662);\n tl.set(\"#mtr-ty-5-22\", { autoAlpha: 0 }, 19.7662);\n tl.set(\"#mtr-ty-5-23\", { autoAlpha: 1 }, 19.7662);\n tl.set(\"#mtr-ty-5-23\", { autoAlpha: 0 }, 19.7995);\n tl.set(\"#mtr-ty-5-24\", { autoAlpha: 1 }, 19.7995);\n tl.set(\"#mtr-ty-5-24\", { autoAlpha: 0 }, 19.8995);\n tl.set(\"#mtr-ec-wrap\", { autoAlpha: 0 }, 23.257);\n tl.fromTo(\n \"#mtr-ec-wrap\",\n { autoAlpha: 0 },\n { autoAlpha: 1, duration: 0.3, ease: \"none\" },\n 23.2667,\n );\n window.__timelines[\"message-thread-reveal\"] = tl;\n </script>\n </body>\n</html>\n"} |