ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-08-31 02:41:44 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
hyperframes/docs/catalog/components/chat-message.mdx
T
WaterrrForever 4347af3fe1 feat(registry): add five vertical ad-template blocks and their motion primitives (#3217) 
* feat(registry): add the notification-cascade block and banner-push-in component

A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.

The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.

Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.

* feat(registry): add the share-sheet-carousel block and sheet-spring-up component

A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.

The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.

Both pass the full browser gate (WCAG AA) installed from a served registry.

* feat(registry): add the typing-indicator and streaming-text components

Two chat primitives extracted from reference footage of real conversations.

typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.

streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.

Both demos pass the browser gate.

* feat(registry): add the ai-chat-reveal block

A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.

The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.

Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.

* feat(registry): add the message-thread-reveal block

A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.

Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.

Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.

Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.

* feat(registry): add the notes-reveal block and line-reveal-list component

A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.

The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.

Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.

* docs(catalog): publish the ten new ad-template items

Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.

* chore(registry): rebuild the on-device search index for the new items

* style(registry): run oxfmt over the new item sources

The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.

* feat(registry): restage the five component demos as device specimens

The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.

* refactor(registry): shelve the five ad-template films as showcases

The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.

* refactor(registry): retire banner-push-in and line-reveal-list

Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.

* feat(registry): add four scene primitives - the moments, mountable

social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.

marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.

chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.

notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.

All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.

* docs(catalog): regenerate for the reshelved films and scene primitives

Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.

* feat(registry): bring chat-thread to film fidelity, with a per-message type switch

The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.

Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.

* feat(registry): add chat-message - the atom, with its type as an enum

ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.

* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences

Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
  its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
  Permanent Marker Apache-2.0 (verified against embedded name-table records)

Mirrored catalog payloads and pages regenerated for the four touched items.
2026-08-11 16:03:42 -04:00

687 lines
27 KiB
Plaintext
Raw Permalink Blame History

---
title: "Chat Message"
description: "One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from"
---
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
<VariablesExplorer
previewSrc="/public/catalog/components/chat-message.json"
compositionId="chat-message"
compositionSrc="compositions/components/chat-message.html"
variables={[{"id":"type","type":"enum","role":"content","label":"Type","description":"Which message form arrives.","default":"sent","options":[{"value":"recv","label":"Received"},{"value":"sent","label":"Sent"},{"value":"emoji","label":"Emoji"},{"value":"img","label":"Image"},{"value":"card","label":"Link card"}]},{"id":"text","type":"string","role":"content","label":"Text","description":"Bubble text, or the emoji row for the Emoji type.","default":"wait look 👀"},{"id":"cardTitle","type":"string","role":"content","label":"Card title","description":"Link-card title (Link card type only).","default":"HyperFrames — Write HTML, render pixel-perfect video"},{"id":"cardDomain","type":"string","role":"content","label":"Card domain","description":"Link-card domain line (Link card type only).","default":"hyperframes.heygen.com"},{"id":"tail","type":"enum","role":"style","label":"Tail","description":"The bubble tail anchoring the message to its side.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]},{"id":"delivered","type":"enum","role":"content","label":"Delivered","description":"The receipt under a sent message.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]}]}
>
```html chat-message.html
<!doctype html>
<!--
chat-message: HyperFrames video primitive (atomic move)
ONE message arrives, on the measured entry: scale 0.75, alpha 0.6 to 1,
0.12s power2.out, growing from the corner nearest its sender. The TYPE is
an enum - Received, Sent, Emoji, Image, Link card - switched the way
marker-highlight switches its style. This is the atom; chat-thread is the
conversation built from arrivals like this one, and message-thread-reveal
is the finished film.
#root only, container-type: size, one paused timeline registered under the
literal "chat-message" key. Deterministic.
-->
<html
lang="en"
data-composition-id="chat-message"
data-composition-duration="3"
data-composition-variables='[{"id": "type", "type": "enum", "role": "content", "label": "Type", "description": "Which message form arrives.", "default": "sent", "options": [{"value": "recv", "label": "Received"}, {"value": "sent", "label": "Sent"}, {"value": "emoji", "label": "Emoji"}, {"value": "img", "label": "Image"}, {"value": "card", "label": "Link card"}]}, {"id": "text", "type": "string", "role": "content", "label": "Text", "description": "Bubble text, or the emoji row for the Emoji type.", "default": "wait look 👀"}, {"id": "cardTitle", "type": "string", "role": "content", "label": "Card title", "description": "Link-card title (Link card type only).", "default": "HyperFrames — Write HTML, render pixel-perfect video"}, {"id": "cardDomain", "type": "string", "role": "content", "label": "Card domain", "description": "Link-card domain line (Link card type only).", "default": "hyperframes.heygen.com"}, {"id": "tail", "type": "enum", "role": "style", "label": "Tail", "description": "The bubble tail anchoring the message to its side.", "default": "on", "options": [{"value": "on", "label": "On"}, {"value": "off", "label": "Off"}]}, {"id": "delivered", "type": "enum", "role": "content", "label": "Delivered", "description": "The receipt under a sent message.", "default": "on", "options": [{"value": "on", "label": "On"}, {"value": "off", "label": "Off"}]}]'
>
<head>
<meta charset="UTF-8" />
<title>Chat Message</title>
</head>
<body>
<template>
<div id="root" data-composition-id="chat-message" data-duration="3" data-fps="30">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
#root {
position: absolute;
inset: 0;
overflow: hidden;
container-type: size;
isolation: isolate;
background: #000;
font-family: var(
--font-body,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif
);
pointer-events: none;
}
.cm-slot {
position: absolute;
left: 6cqw;
right: 6cqw;
bottom: 10cqh;
}
.cm-slot.sent {
text-align: right;
}
.cm-pop {
display: inline-block;
transform-origin: left bottom;
text-align: left;
}
.cm-slot.sent .cm-pop {
transform-origin: right bottom;
}
.cm-bubble {
display: inline-block;
position: relative;
max-width: 78cqw;
padding: 2cqh 5cqw;
border-radius: 6.4cqmin;
font-size: 4.6cqmin;
line-height: 1.35;
color: #fff;
}
.cm-bubble.recv {
background: #242428;
}
.cm-bubble.sent {
background: #0a80f8;
}
.cm-tail-recv::before {
content: "";
position: absolute;
left: -1.5cqmin;
bottom: 0;
width: 4cqmin;
height: 4cqmin;
background: #242428;
border-bottom-right-radius: 3cqmin 2.8cqmin;
}
.cm-tail-recv::after {
content: "";
position: absolute;
left: -4cqmin;
bottom: -0.3cqmin;
width: 3cqmin;
height: 4.6cqmin;
background: #000;
border-bottom-right-radius: 2.4cqmin;
}
.cm-tail-sent::before {
content: "";
position: absolute;
right: -1.5cqmin;
bottom: 0;
width: 4cqmin;
height: 4cqmin;
background: #0a80f8;
border-bottom-left-radius: 3cqmin 2.8cqmin;
}
.cm-tail-sent::after {
content: "";
position: absolute;
right: -4cqmin;
bottom: -0.3cqmin;
width: 3cqmin;
height: 4.6cqmin;
background: #000;
border-bottom-left-radius: 2.4cqmin;
}
.cm-delivered {
color: #8e8e93;
font-size: 3.4cqmin;
margin-top: 1.2cqh;
padding-right: 1cqw;
text-align: right;
}
.cm-emoji {
font-size: 15cqmin;
line-height: 1.25;
letter-spacing: 0.02em;
color: #fff;
white-space: nowrap;
}
.cm-media {
display: inline-block;
width: 66cqw;
aspect-ratio: 4 / 3;
border-radius: 5cqmin;
position: relative;
background: linear-gradient(165deg, #0f3a2c 0%, #0a9c6b 78%, #3ce6ac 100%);
}
.cm-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 13cqmin;
height: 13cqmin;
border-radius: 50%;
background: rgba(253, 253, 253, 0.94);
}
.cm-play::before {
content: "";
position: absolute;
left: 38%;
top: 30%;
border-left: 4.4cqmin solid #0d0d0d;
border-top: 2.6cqmin solid transparent;
border-bottom: 2.6cqmin solid transparent;
}
.cm-card {
display: inline-block;
width: 70cqw;
border-radius: 5cqmin;
overflow: hidden;
text-align: left;
}
.cm-cardimg {
display: block;
width: 100%;
aspect-ratio: 1.02;
position: relative;
background: linear-gradient(165deg, #0f3a2c 0%, #0a9c6b 78%, #3ce6ac 100%);
}
.cm-cardmeta {
background: #28282c;
display: flex;
align-items: center;
padding: 1.8cqh 3cqw 1.8cqh 4cqw;
}
.cm-cardtxt {
flex: 1;
min-width: 0;
}
.cm-cardtitle {
display: block;
color: #fff;
font-size: 3.5cqmin;
font-weight: 600;
line-height: 1.3;
}
.cm-carddomain {
display: block;
color: #8e8e93;
font-size: 3cqmin;
margin-top: 0.6cqh;
}
.cm-cardchev {
color: #8e8e93;
font-size: 6cqmin;
padding-left: 1.4cqw;
}
</style>
<div class="cm-slot" id="cm-slot" data-layout-allow-overflow data-layout-allow-overlap>
<div class="cm-pop" id="cm-pop"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
(function () {
"use strict";
var compositionId = "chat-message";
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
function text(v, fb, mx) {
if (typeof v !== "string") return fb;
var t = v.trim();
if (!t) return fb;
return t.length > mx ? t.slice(0, mx) : t;
}
function pick(table, value, fallback) {
return table.indexOf(value) >= 0 ? value : fallback;
}
var type = pick(["recv", "sent", "emoji", "img", "card"], vars.type, "sent");
var body = text(vars.text, "wait look \ud83d\udc40", 140);
var tailOn = vars.tail !== "off";
var deliveredOn = vars.delivered !== "off";
var side = type === "sent" || type === "img" || type === "card" ? "sent" : "recv";
var slot = document.getElementById("cm-slot");
var pop = document.getElementById("cm-pop");
slot.classList.add(side);
if (type === "recv" || type === "sent") {
var bubble = document.createElement("div");
bubble.className = "cm-bubble " + type + (tailOn ? " cm-tail-" + type : "");
bubble.textContent = body;
pop.appendChild(bubble);
} else if (type === "emoji") {
var row = document.createElement("div");
row.className = "cm-emoji";
row.textContent = body;
pop.appendChild(row);
} else if (type === "img") {
pop.innerHTML = '<span class="cm-media"><span class="cm-play"></span></span>';
} else {
var card = document.createElement("span");
card.className = "cm-card";
card.innerHTML = '<span class="cm-cardimg"><span class="cm-play"></span></span>';
var meta = document.createElement("span");
meta.className = "cm-cardmeta";
meta.style.display = "flex";
var txt = document.createElement("span");
txt.className = "cm-cardtxt";
var title = document.createElement("span");
title.className = "cm-cardtitle";
title.textContent = text(
vars.cardTitle,
"HyperFrames \u2014 Write HTML, render pixel-perfect video",
80,
);
txt.appendChild(title);
var domain = document.createElement("span");
domain.className = "cm-carddomain";
domain.textContent = text(vars.cardDomain, "hyperframes.heygen.com", 40);
txt.appendChild(domain);
meta.appendChild(txt);
var chev = document.createElement("span");
chev.className = "cm-cardchev";
chev.textContent = "\u203a";
meta.appendChild(chev);
card.appendChild(meta);
pop.appendChild(card);
}
if (deliveredOn && (type === "sent" || type === "card" || type === "img")) {
var receipt = document.createElement("div");
receipt.className = "cm-delivered";
receipt.textContent = "Delivered";
pop.appendChild(receipt);
}
var tl = gsap.timeline({ paused: true });
/* the measured arrival, then hold */
tl.set("#cm-slot", { autoAlpha: 0 }, 0.001);
tl.set("#cm-slot", { autoAlpha: 1 }, 0.4);
tl.fromTo(
"#cm-pop",
{ scale: 0.75, autoAlpha: 0.6 },
{ scale: 1, autoAlpha: 1, duration: 0.12, ease: "power2.out" },
0.4,
);
tl.set({}, {}, 3);
tl.seek(0);
window.__timelines = window.__timelines || {};
window.__timelines[compositionId] = tl;
})();
</script>
</div>
</template>
</body>
</html>
```
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add chat-message" item="chat-message" />
That writes one file: `compositions/components/chat-message.html`.
## Paste it into your composition
Open `compositions/components/chat-message.html` and copy what is inside into your own composition.
A component has no size or duration of its own. It takes both from the composition
you paste it into.
## 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 |
| --- | --- | --- | --- |
| `type` | `sent` | `recv`, `sent`, `emoji`, `img`, `card` | Which message form arrives. |
| `text` | `wait look 👀` | string | Bubble text, or the emoji row for the Emoji type. |
| `cardTitle` | `HyperFrames — Write HTML, render pixel-perfect video` | string | Link-card title (Link card type only). |
| `cardDomain` | `hyperframes.heygen.com` | string | Link-card domain line (Link card type only). |
| `tail` | `on` | `on`, `off` | The bubble tail anchoring the message to its side. |
| `delivered` | `on` | `on`, `off` | The receipt under a sent message. |
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="chat-message"
data-composition-src="compositions/components/chat-message.html"
data-variable-values='{"type":"sent","text":"wait look 👀","cardTitle":"HyperFrames — Write HTML, render pixel-perfect video","cardDomain":"hyperframes.heygen.com","tail":"on","delivered":"on"}'
></div>
```
## Source
<Accordion title={`chat-message.html`}>
```html
<!doctype html>
<!--
chat-message: HyperFrames video primitive (atomic move)
ONE message arrives, on the measured entry: scale 0.75, alpha 0.6 to 1,
0.12s power2.out, growing from the corner nearest its sender. The TYPE is
an enum - Received, Sent, Emoji, Image, Link card - switched the way
marker-highlight switches its style. This is the atom; chat-thread is the
conversation built from arrivals like this one, and message-thread-reveal
is the finished film.
#root only, container-type: size, one paused timeline registered under the
literal "chat-message" key. Deterministic.
-->
<html
lang="en"
data-composition-id="chat-message"
data-composition-duration="3"
data-composition-variables='[{"id": "type", "type": "enum", "role": "content", "label": "Type", "description": "Which message form arrives.", "default": "sent", "options": [{"value": "recv", "label": "Received"}, {"value": "sent", "label": "Sent"}, {"value": "emoji", "label": "Emoji"}, {"value": "img", "label": "Image"}, {"value": "card", "label": "Link card"}]}, {"id": "text", "type": "string", "role": "content", "label": "Text", "description": "Bubble text, or the emoji row for the Emoji type.", "default": "wait look 👀"}, {"id": "cardTitle", "type": "string", "role": "content", "label": "Card title", "description": "Link-card title (Link card type only).", "default": "HyperFrames — Write HTML, render pixel-perfect video"}, {"id": "cardDomain", "type": "string", "role": "content", "label": "Card domain", "description": "Link-card domain line (Link card type only).", "default": "hyperframes.heygen.com"}, {"id": "tail", "type": "enum", "role": "style", "label": "Tail", "description": "The bubble tail anchoring the message to its side.", "default": "on", "options": [{"value": "on", "label": "On"}, {"value": "off", "label": "Off"}]}, {"id": "delivered", "type": "enum", "role": "content", "label": "Delivered", "description": "The receipt under a sent message.", "default": "on", "options": [{"value": "on", "label": "On"}, {"value": "off", "label": "Off"}]}]'
>
<head>
<meta charset="UTF-8" />
<title>Chat Message</title>
</head>
<body>
<template>
<div id="root" data-composition-id="chat-message" data-duration="3" data-fps="30">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
#root {
position: absolute;
inset: 0;
overflow: hidden;
container-type: size;
isolation: isolate;
background: #000;
font-family: var(
--font-body,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif
);
pointer-events: none;
}
.cm-slot {
position: absolute;
left: 6cqw;
right: 6cqw;
bottom: 10cqh;
}
.cm-slot.sent {
text-align: right;
}
.cm-pop {
display: inline-block;
transform-origin: left bottom;
text-align: left;
}
.cm-slot.sent .cm-pop {
transform-origin: right bottom;
}
.cm-bubble {
display: inline-block;
position: relative;
max-width: 78cqw;
padding: 2cqh 5cqw;
border-radius: 6.4cqmin;
font-size: 4.6cqmin;
line-height: 1.35;
color: #fff;
}
.cm-bubble.recv {
background: #242428;
}
.cm-bubble.sent {
background: #0a80f8;
}
.cm-tail-recv::before {
content: "";
position: absolute;
left: -1.5cqmin;
bottom: 0;
width: 4cqmin;
height: 4cqmin;
background: #242428;
border-bottom-right-radius: 3cqmin 2.8cqmin;
}
.cm-tail-recv::after {
content: "";
position: absolute;
left: -4cqmin;
bottom: -0.3cqmin;
width: 3cqmin;
height: 4.6cqmin;
background: #000;
border-bottom-right-radius: 2.4cqmin;
}
.cm-tail-sent::before {
content: "";
position: absolute;
right: -1.5cqmin;
bottom: 0;
width: 4cqmin;
height: 4cqmin;
background: #0a80f8;
border-bottom-left-radius: 3cqmin 2.8cqmin;
}
.cm-tail-sent::after {
content: "";
position: absolute;
right: -4cqmin;
bottom: -0.3cqmin;
width: 3cqmin;
height: 4.6cqmin;
background: #000;
border-bottom-left-radius: 2.4cqmin;
}
.cm-delivered {
color: #8e8e93;
font-size: 3.4cqmin;
margin-top: 1.2cqh;
padding-right: 1cqw;
text-align: right;
}
.cm-emoji {
font-size: 15cqmin;
line-height: 1.25;
letter-spacing: 0.02em;
color: #fff;
white-space: nowrap;
}
.cm-media {
display: inline-block;
width: 66cqw;
aspect-ratio: 4 / 3;
border-radius: 5cqmin;
position: relative;
background: linear-gradient(165deg, #0f3a2c 0%, #0a9c6b 78%, #3ce6ac 100%);
}
.cm-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 13cqmin;
height: 13cqmin;
border-radius: 50%;
background: rgba(253, 253, 253, 0.94);
}
.cm-play::before {
content: "";
position: absolute;
left: 38%;
top: 30%;
border-left: 4.4cqmin solid #0d0d0d;
border-top: 2.6cqmin solid transparent;
border-bottom: 2.6cqmin solid transparent;
}
.cm-card {
display: inline-block;
width: 70cqw;
border-radius: 5cqmin;
overflow: hidden;
text-align: left;
}
.cm-cardimg {
display: block;
width: 100%;
aspect-ratio: 1.02;
position: relative;
background: linear-gradient(165deg, #0f3a2c 0%, #0a9c6b 78%, #3ce6ac 100%);
}
.cm-cardmeta {
background: #28282c;
display: flex;
align-items: center;
padding: 1.8cqh 3cqw 1.8cqh 4cqw;
}
.cm-cardtxt {
flex: 1;
min-width: 0;
}
.cm-cardtitle {
display: block;
color: #fff;
font-size: 3.5cqmin;
font-weight: 600;
line-height: 1.3;
}
.cm-carddomain {
display: block;
color: #8e8e93;
font-size: 3cqmin;
margin-top: 0.6cqh;
}
.cm-cardchev {
color: #8e8e93;
font-size: 6cqmin;
padding-left: 1.4cqw;
}
</style>
<div class="cm-slot" id="cm-slot" data-layout-allow-overflow data-layout-allow-overlap>
<div class="cm-pop" id="cm-pop"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
(function () {
"use strict";
var compositionId = "chat-message";
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
function text(v, fb, mx) {
if (typeof v !== "string") return fb;
var t = v.trim();
if (!t) return fb;
return t.length > mx ? t.slice(0, mx) : t;
}
function pick(table, value, fallback) {
return table.indexOf(value) >= 0 ? value : fallback;
}
var type = pick(["recv", "sent", "emoji", "img", "card"], vars.type, "sent");
var body = text(vars.text, "wait look \ud83d\udc40", 140);
var tailOn = vars.tail !== "off";
var deliveredOn = vars.delivered !== "off";
var side = type === "sent" || type === "img" || type === "card" ? "sent" : "recv";
var slot = document.getElementById("cm-slot");
var pop = document.getElementById("cm-pop");
slot.classList.add(side);
if (type === "recv" || type === "sent") {
var bubble = document.createElement("div");
bubble.className = "cm-bubble " + type + (tailOn ? " cm-tail-" + type : "");
bubble.textContent = body;
pop.appendChild(bubble);
} else if (type === "emoji") {
var row = document.createElement("div");
row.className = "cm-emoji";
row.textContent = body;
pop.appendChild(row);
} else if (type === "img") {
pop.innerHTML = '<span class="cm-media"><span class="cm-play"></span></span>';
} else {
var card = document.createElement("span");
card.className = "cm-card";
card.innerHTML = '<span class="cm-cardimg"><span class="cm-play"></span></span>';
var meta = document.createElement("span");
meta.className = "cm-cardmeta";
meta.style.display = "flex";
var txt = document.createElement("span");
txt.className = "cm-cardtxt";
var title = document.createElement("span");
title.className = "cm-cardtitle";
title.textContent = text(
vars.cardTitle,
"HyperFrames \u2014 Write HTML, render pixel-perfect video",
80,
);
txt.appendChild(title);
var domain = document.createElement("span");
domain.className = "cm-carddomain";
domain.textContent = text(vars.cardDomain, "hyperframes.heygen.com", 40);
txt.appendChild(domain);
meta.appendChild(txt);
var chev = document.createElement("span");
chev.className = "cm-cardchev";
chev.textContent = "\u203a";
meta.appendChild(chev);
card.appendChild(meta);
pop.appendChild(card);
}
if (deliveredOn && (type === "sent" || type === "card" || type === "img")) {
var receipt = document.createElement("div");
receipt.className = "cm-delivered";
receipt.textContent = "Delivered";
pop.appendChild(receipt);
}
var tl = gsap.timeline({ paused: true });
/* the measured arrival, then hold */
tl.set("#cm-slot", { autoAlpha: 0 }, 0.001);
tl.set("#cm-slot", { autoAlpha: 1 }, 0.4);
tl.fromTo(
"#cm-pop",
{ scale: 0.75, autoAlpha: 0.6 },
{ scale: 1, autoAlpha: 1, duration: 0.12, ease: "power2.out" },
0.4,
);
tl.set({}, {}, 3);
tl.seek(0);
window.__timelines = window.__timelines || {};
window.__timelines[compositionId] = tl;
})();
</script>
</div>
</template>
</body>
</html>
```
</Accordion>
{/* hf:generated-footer */}
Tagged `video-primitive` `chat` `mock-ui` `message`.
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)
Reference in New Issue View Git Blame Copy Permalink