mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 16:42:27 +00:00
WaterrrForever
254fe4bd8a
* feat(registry): say what a promoted template's slots mean, not where they sit
Every declaration described its slot by position — appName was "small credit in the corner
of every banner" — and every editing contract described the supplied brand only by what it
may not touch, chatgpt-exchange going as far as "only the subject discussed inside the
conversation". An agent filling those slots has nothing telling it that the video is an
advertisement for that brand, and remixes shipped with an invented brand instead of the
real one.
Adds `portrays` to the 35 identity-bearing variables across seven templates: what the slot
stands for, as a list, kept orthogonal to `role` (which says which aspect of the
composition a knob affects, not what a value means to a viewer). Rewrites those variables'
descriptions to state meaning, and gives every TEMPLATE.md the affirmative sentence it was
missing. notes-reveal now records honestly that it declares no identity slot at all, which
is why a remix of it cannot carry a brand.
`portrays` is optional metadata: rendering ignores it, the promoted contract still projects
{id, type, role}, and packages that predate it keep working. Variable ids, types, roles,
labels, and defaults are untouched, so installs and renders see the same contract.
* feat(notes-reveal): give the template somewhere to say whose ad it is
This was the one promoted template that declared no identity slot at all, and the
previous commit could only record that honestly. A remix of it could not name the
advertiser, could not carry its domain, and had nowhere to place its mark — so the
ad it produced was unattributable no matter how good the copy was.
The closing card ends at y=1708, leaving 212px of dotted scene. A sign-off strip
lives there: `brandLogo` (portrays subject_logo) above `brandDomain` (portrays
subject_domain), in the card's own plum and Courier Prime. Putting it outside the
card means the hand-lettered headline and the checklist keep the geometry they were
designed with — verified by `hyperframes check`, which reports the same 0 errors and
the same warning counts as origin/main, with one more contrast check (367/367 AA).
No name slot: this template has no text slot that can hold a bare brand name.
`cardTop`'s marker line continues into the fixed words "OF ONE FILE", and a name set
beside a wordmark reads twice — rendering it proved that before this was committed.
The mark plus the domain carry the attribution, which is what the other end-card
templates do.
Rendered to check rather than assumed: the packaged default reads as the HyperFrames
wordmark over hyperframes.heygen.com, and a resolved symbol mark (Notion's cube over
notion.com) sits correctly in the same strip.
* fix(notes-reveal): make the note the ad, and stop the headline leaving the card
Three defects, all visible in the reported gamma remix.
The seven body lines carried their characters as pre-split `<span class="ch">`
elements so the reveal animation could address them by id. That made the note
permanently unwritable: 46% of the 24.9s runtime, and the only place the note
says anything, was fixed copy about making videos with HyperFrames -- shipped
inside an advertisement for a Dutch DIY chain. The spans are now built at
runtime from seven declared variables, keeping the same ids, so the animation
is untouched and the copy is the brand's.
`cardMid` and `cardBottom` ("OF", "ONE FILE") were literals with no variable at
all, so a remix could only ever change the first of the card's three lines.
Every text slot sat at a fixed left edge on one line, guarded only by a
character cap -- the wrong unit. `cardTop` allowed 12 characters; "THE POWER"
(9) fits and "CREATE DECKS" (12) does not, which is why both reported gamma
remixes shipped with the closing headline over the edge of the card. Slots are
now fitted to their box at render time, shrinking type only as far as needed and
never past the designed size. The card headlines also carried
`data-layout-allow-overflow`, switching off the one check that would have caught
it; those waivers are gone. The note's title and body keep theirs, because
`#note-body` is translated across the whole scene and leaves the canvas by
design.
Timing is preserved rather than regenerated: each body line is revealed inside
the frame window the packaged rhythm already used, so `JUMPS` and the hand-tuned
`SCROLLS` curves stay valid and the composition is still 24.867s for any length
of copy. A line whose length matches the packaged copy keeps its rhythm frame
for frame.
Verified: rendered with the packaged defaults, SSIM 1.000000 across all 746
frames against the previous template -- the design is bit-identical. Rendered
with the gamma values that overflowed, and with a stress set of long and
one-word values: both stay inside the card and the note, both still 24.867s.
`hyperframes check` passes, with layout warnings down from 28 to 8 and no new
issue class. Note that `check` takes no variable values, so it guards the
template's defaults and the fit is what guards a remix.
* fix(notes-reveal): make the fit floor and the character caps agree
A cap that admits a string still too wide at the floor font size puts the text
back outside its box -- the exact bug the fit was added for. With the floor at
0.6 and the title cap at 40, a 40-character title still overflowed `#note-body`
by 30px, because "Things nobody told me" is 21 characters and 900px at 88px, so
42.9px per character, and 40 characters need to reach about 0.45 of the design
size to fit.
Floor to 0.45 and the caps in: titles 34, body lines 52, cardTop and cardBottom
16. Every cap is now satisfiable with room to spare, and the common case stays
far from the floor.
Found by probing all eight promoted templates with values about 1.8x the length
of their packaged defaults, which is the length a real remix produces; short
sentinel values only ever prove a slot is wired.
Defaults are unaffected: SSIM 1.000000 across all 746 frames, still 24.867s,
`hyperframes check` still passes.
* fix(exchange): scroll the composer to follow the caret
`prompt` is an editable slot in both templates, but `.comp-text` is a
fixed-width single line with `white-space: pre` inside a composer that clips,
and the packaged prompt already reaches the mic -- it has no headroom at all.
A longer prompt therefore slid under the mic and the send button and lost its
tail, with the caret hidden behind them: the remix read as having typed into
nowhere, cut mid-word.
Both now scroll the typed text left to keep the caret in view, the way a real
single-line input does, on the very per-character times the reveal already uses.
The limit is measured to the opaque round button rather than the mic, because the
packaged prompt's caret already sits 2px past the mic's left edge in
chatgpt-exchange -- measuring to the mic would scroll the packaged composition.
Shrink-to-fit was the other option and it is worse: with no headroom it shrinks
the packaged prompt too, and it still cannot absorb a prompt twice as long
without unreadable type. It was tried, measured, and dropped.
A prompt that fits emits no keyframes and the element is never handed to GSAP at
all -- even a zero translate stamps a transform, which changes how the text
rasterizes.
claude-exchange puts this inside its existing `build()`, which already re-runs on
`document.fonts.ready`, so it measures the final font. chatgpt-exchange builds
once, so its scroll keyframes are kept in a list and rebuilt on the same event.
Verified on the packaged defaults: claude-exchange SSIM 1.000000 across 1284
frames. chatgpt-exchange is not frame-deterministic -- rendering it twice
unchanged gives 0.999959 with 249 frames under 0.9999, and before-vs-after gives
0.999967 with the same 249 -- so the change sits inside its own noise. Durations
unchanged at 14.9s and 21.4s. `hyperframes check` reports byte-identical results
to the unchanged templates.
* fix(notes-reveal): fit the checklist cells instead of counting their characters
The three checklist rows were the only text slots with no width fit, so
their character cap was doing the job a measurement should: it was set to 8
because that was the widest the packaged strings needed, and a gamma.com
remix delivered "DIRECT MEE" and rendered "DIRECT M".
Fit the labels and values like every other text slot -- dividing the
label's scaleX(0.86) back out of its column, since fitWidth measures the
untransformed width -- and return the cap to a backstop at 18.
"DIRECT MEE" needs no shrink at all: it ends at x=694 against a tick at
x=715, so the truncation was never about room. Measured: the packaged
defaults still render at their authored 44px and 50px, and all three values
clear the tick.
* fix(chatgpt-exchange): nest the caret scroll so its rebuild can be undone
`tl.to()` returns the TIMELINE, not the tween it created, so `caretScrollTweens`
held 49 references to the master timeline. The fonts-ready rebuild then called
`.kill()` on the master timeline 49 times and re-added its keyframes on top of
the ones it meant to replace. Measured with an overflowing prompt:
master timeline detached from the global timeline (tl.parent -> null)
scroll tweens on #cge-typed: 49 before the rebuild, 98 after
49 timestamps left with two competing tweens on the same property
GSAP's `Animation.kill()` interrupts and detaches rather than killing children,
so the composition kept rendering under an explicit seek -- which is why the
packaged-defaults SSIM check passed and never saw this. It is still wrong: the
timeline is off the ticker, and the stale keyframes were measured against the
fallback font.
Only an overflowing prompt reaches it, i.e. exactly the remix the scroll exists
for. The packaged prompt emits no steps, so nothing is created and nothing is
killed.
Now one nested child timeline holds the steps: a real object that can be killed
and replaced, and killing it cannot reach `tl`. Children sit at the same absolute
times and the nest is added at 0, so the motion is unchanged.
Verified: overflowing prompt holds at 49 scroll tweens across the rebuild with no
duplicated timestamps and the timeline stays attached. Packaged defaults against
the pre-feature baseline -- SSIM 0.999998 over 894 frames, 13 frames below
0.9999 against a 249-frame noise floor for this template, duration 14.9s
unchanged.
Found by Magi in review of #3562.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
* feat(lint): catch a timeline's return value being treated as a tween
Magi asked for a regression that makes the caret-scroll failure unable to return.
A render fixture cannot be that guard, and neither can a unit test. Both were
measured before choosing this:
- The unit-test DOM has no layout. In happy-dom `getBoundingClientRect()` is
{left: 0, width: 0} and offsetWidth/offsetLeft are 0, so the template's own
guard computes limit = -8 and returns before collecting a single keyframe,
whatever the prompt length. `document.fonts` does not exist there either, so
the rebuild never runs. Both preconditions are unreachable -- the test would
pass on the broken code and the fixed code alike. Rames flagged this; verified.
- A render fixture would not fail either. Rendering the long prompt through the
real pipeline on the broken vs fixed template gives SSIM 0.999994 over 894
frames with ZERO frames below 0.999. The renderer drives the composition by
explicit seek, and the duplicated keyframes are added last so they win, which
is exactly why `.kill()` on the master timeline stayed invisible. A golden mp4
would have cost a fixture and a shard and guarded nothing.
What is testable is the root cause, and it is a static property: `tl.to()` returns
the TIMELINE, `gsap.to()` returns a Tween, and the two read identically. So the
guard is a lint rule, which needs no DOM, fires on the source, and covers every
composition in the registry rather than this one template.
The rule keys on the timeline handles `collectTimelineVarNames` already finds,
which is what keeps `gsap.to()` and `Array.from()` out of it. Pushing a timeline
return into an array is flagged outright -- that is the collect-to-discard shape.
A bound return is flagged only once something tween-scoped is aimed at it, so a
pointless-but-harmless capture stays quiet.
Verified against the real files, not just synthetic ones: the pre-fix
chatgpt-exchange raises exactly one error and names the offending line; the fixed
file is clean. Across all 642 HTML files under registry/ and examples/ the rule
finds nothing, and lint output on the eight promoted blocks is identical to
origin/main error-for-error and warning-for-warning, so error severity costs no
existing template. 540 lint tests pass, 6 of them new.
Requested by Magi in review of #3562; unit-test DOM measurement by Rames Jusso.
3352 lines
140 KiB
Plaintext
3352 lines
140 KiB
Plaintext
---
|
||
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 of the shared link card. It leads with the real name of the brand this video promotes.","portrays":["subject_name"],"default":"HyperFrames | Write HTML, render pixel-perfect video"},{"id":"cardDomain","type":"string","role":"content","label":"Link card domain","description":"Domain of the brand this video promotes, under the card title. Use the real domain.","portrays":["subject_domain"],"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 brand this video promotes.","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 of the brand this video promotes, on the closing card.","portrays":["subject_logo"],"default":"assets/hyperframes-logo-black.svg"},{"id":"ecProof","type":"string","role":"content","label":"End-card proof","description":"Social-proof line under the stars. Claim only a figure the brand itself publishes; use neutral copy when there is none.","portrays":["authority_badge"],"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 of the shared link card. It leads with the real name of the brand this video promotes.", "portrays": ["subject_name"], "default": "HyperFrames | Write HTML, render pixel-perfect video" },
|
||
{ "id": "cardDomain", "type": "string", "role": "content", "label": "Link card domain", "description": "Domain of the brand this video promotes, under the card title. Use the real domain.", "portrays": ["subject_domain"], "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 brand this video promotes.", "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 of the brand this video promotes, on the closing card.", "portrays": ["subject_logo"], "default": "assets/hyperframes-logo-black.svg" },
|
||
{ "id": "ecProof", "type": "string", "role": "content", "label": "End-card proof", "description": "Social-proof line under the stars. Claim only a figure the brand itself publishes; use neutral copy when there is none.", "portrays": ["authority_badge"], "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'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 of the shared link card. It leads with the real name of the brand this video promotes. |
|
||
| `cardDomain` | `hyperframes.heygen.com` | string | Domain of the brand this video promotes, under the card title. Use the real domain. |
|
||
| `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 brand this video promotes. |
|
||
| `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 of the brand this video promotes, on the closing card. |
|
||
| `ecProof` | `12,000+ creators` | string | Social-proof line under the stars. Claim only a figure the brand itself publishes; use neutral copy when there is none. |
|
||
| `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 of the shared link card. It leads with the real name of the brand this video promotes.", "portrays": ["subject_name"], "default": "HyperFrames | Write HTML, render pixel-perfect video" },
|
||
{ "id": "cardDomain", "type": "string", "role": "content", "label": "Link card domain", "description": "Domain of the brand this video promotes, under the card title. Use the real domain.", "portrays": ["subject_domain"], "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 brand this video promotes.", "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 of the brand this video promotes, on the closing card.", "portrays": ["subject_logo"], "default": "assets/hyperframes-logo-black.svg" },
|
||
{ "id": "ecProof", "type": "string", "role": "content", "label": "End-card proof", "description": "Social-proof line under the stars. Claim only a figure the brand itself publishes; use neutral copy when there is none.", "portrays": ["authority_badge"], "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'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)
|