diff --git a/docs/catalog/blocks/ai-chat-reveal.mdx b/docs/catalog/blocks/ai-chat-reveal.mdx new file mode 100644 index 000000000..412ca6afb --- /dev/null +++ b/docs/catalog/blocks/ai-chat-reveal.mdx @@ -0,0 +1,2086 @@ +--- +title: "AI Chat Reveal" +description: "A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html ai-chat-reveal.html + + + + + + AI Chat Reveal + + + + +
+
+
+ +
+
11:42
+
+ + + + + + + + + + + + +
+
+ +
+
+ + + +
+
Assistant
+
+ + + + + + +
+
+ + + + + + +
+
+ +
How do I turn my HTML into real video?
+ +
+
+ +
+
+
+ + + +
+
+ Ask anything +
+
+
+ + + + +
+
+ + + +
+
+ + + +
+
+
+
+ +
+
+
How
+
Can
+
My
+
+
+
+ + + + + +
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+
It's not magic.
It's HTML.
+
+ Open-source video rendering — write HTML, ship pixel-perfect video. +
+
+ Try HyperFrames + + +
+
HYPERFRAMES.HEYGEN.COM
+
+
+
+ + + + +``` + + + +## Install + + + +That writes `compositions/ai-chat-reveal.html`, plus 1 supporting file under `assets/`. + +## Add it to your video + +It runs for 19.3333 seconds at 750×1624. Paste this into your composition: + +```html index.html +
+``` + +Move it in time with `data-start`. Put it on a different timeline row with +`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest. + +## Variables + +Every one of these has a default, so the piece works untouched. Set the ones you +want to change on the element: + +| Variable | Default | Accepts | What it does | +| --- | --- | --- | --- | +| `botName` | `Assistant` | string | Title in the chat header. | +| `userMessage` | `How do I turn my HTML into real video?` | string | The question typed on the keyboard and sent. Around 40 characters keeps the measured pacing. | +| `answer1` | `You do not need an editor. HyperFrames renders the HTML you already write into deterministic, pixel-perfect video.` | string | First streamed paragraph. | +| `answer2` | `It is markup, not magic.` | string | Short second beat. | +| `answer3` | `What you get out of the box:` | string | Lead-in to the list. | +| `bullet1` | `A catalog of motion primitives you install and own` | string | First list item. | +| `bullet2` | `GSAP timelines that seek to any frame` | string | Second list item. | +| `bullet3` | `4K renders from a single CLI command` | string | Third list item. | +| `ecHeadline` | `It's not magic.|It's HTML.` | string | Closing card headline. A | breaks the line. | +| `ecSub` | `Open-source video rendering — write HTML, ship pixel-perfect video.` | string | Supporting sentence on the closing card. | +| `ecCta` | `Try HyperFrames` | string | Label on the closing card button. | +| `ecFooter` | `HYPERFRAMES.HEYGEN.COM` | string | Letter-spaced line at the very bottom. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + + + + + AI Chat Reveal + + + + +
+
+
+ +
+
11:42
+
+ + + + + + + + + + + + +
+
+ +
+
+ + + +
+
Assistant
+
+ + + + + + +
+
+ + + + + + +
+
+ +
How do I turn my HTML into real video?
+ +
+
+ +
+
+
+ + + +
+
+ Ask anything +
+
+
+ + + + +
+
+ + + +
+
+ + + +
+
+
+
+ +
+
+
How
+
Can
+
My
+
+
+
+ + + + + +
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+
It's not magic.
It's HTML.
+
+ Open-source video rendering — write HTML, ship pixel-perfect video. +
+
+ Try HyperFrames + + +
+
HYPERFRAMES.HEYGEN.COM
+
+
+
+ + + + +``` + + + +{/* hf:generated-footer */} + +Tagged `showcase` `mock-ui` `ai` `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) diff --git a/docs/catalog/blocks/message-thread-reveal.mdx b/docs/catalog/blocks/message-thread-reveal.mdx new file mode 100644 index 000000000..957c1c4b5 --- /dev/null +++ b/docs/catalog/blocks/message-thread-reveal.mdx @@ -0,0 +1,2999 @@ +--- +title: "Message Thread Reveal" +description: "A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html message-thread-reveal.html + + + + + + Message Thread Reveal + + + + +
+
+
+
+
+
+
9:41
+ + + + + + + + + + + + + + +
12
+
R
+
Rachel›
+ + + + +
+
+
+
what r u using for the launch video??
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
wait look 👀
+
Delivered
+
+
+
+
+
+ +
+
+
+ HyperFrames | Write HTML, render pixel-perfect video +
+
hyperframes.heygen.com
+
+
›
+
+
+
+
+
+
OMG IT'S HTML
+
+
+
🤯🤯🤯
+
+
+
+
renders in 4K. no editor
+
Delivered
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
where did u find this
+
+
+
+
on heygen
+
+
+
+
u just write plain html tags
+
+
+
+
+
the code is yours forever
+
Delivered
+
+
+
+
installing rn
+
+
+
ty bestie 💚
+
+
+
+
+
+
Message
+
+ o + wa + wai + wait + wait + wait l + wait lo + wait loo + wait look + wait look + wait look 👀 + r + re + ren + rend + rende + render + renders + renders + renders i + renders in + renders in + renders in 4 + renders in 4K + renders in 4K. + renders in 4K. + renders in 4K. n + renders in 4K. no + renders in 4K. no + renders in 4K. no e + renders in 4K. no ed + renders in 4K. no edi + renders in 4K. no edit + renders in 4K. no edito + renders in 4K. no editor + o + on + on + on h + on he + on hey + on heyg + on heyge + on heygen + u + u + u j + u ju + u jus + u just + u just + u just w + u just wr + u just wri + u just writ + u just write + u just write + u just write p + u just write pl + u just write pla + u just write plai + u just write plain + u just write plain + u just write plain h + u just write plain ht + u just write plain htm + u just write plain html + u just write plain html + u just write plain html t + u just write plain html ta + u just write plain html tag + u just write plain html tags + r + th + the + the + the c + the co + the cod + the code + the code + the code i + the code is + the code is + the code is y + the code is yo + the code is you + the code is your + the code is yours + the code is yours + the code is yours f + the code is yours fo + the code is yours for + the code is yours fore + the code is yours forev + the code is yours foreve + the code is yours forever +
+ + + + + + +
+ + + +
+
+
+
+
+ +
+ + + + + + + + + + + + + + + +
+
12,000+ creators
+
+ + + +
+
+ + + +
+
+ + + +
+
+
Write
+
plain HTML
+
+
+
Render
+
pixel-perfect
+
+
+
Own
+
every line
+
+
Start rendering free
+
+
+
+ + + +``` + + + +## Install + + + +That writes `compositions/message-thread-reveal.html`, plus 2 supporting files under `assets/`. + +## Add it to your video + +It runs for 25.7667 seconds at 1080×1920. Paste this into your composition: + +```html index.html +
+``` + +Move it in time with `data-start`. Put it on a different timeline row with +`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest. + +## Variables + +Every one of these has a default, so the piece works untouched. Set the ones you +want to change on the element: + +| Variable | Default | Accepts | What it does | +| --- | --- | --- | --- | +| `contactName` | `Rachel` | string | Name pill in the chat header; the avatar shows its first letter. | +| `cardTitle` | `HyperFrames | Write HTML, render pixel-perfect video` | string | Title on the shared link card. | +| `cardDomain` | `hyperframes.heygen.com` | string | Domain line under the card title. | +| `ecProof` | `12,000+ creators` | string | Social-proof line under the stars. | +| `ecCta` | `Start rendering free` | string | Label on the closing card button. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + + + + + Message Thread Reveal + + + + +
+
+
+
+
+
+
9:41
+ + + + + + + + + + + + + + +
12
+
R
+
Rachel›
+ + + + +
+
+
+
what r u using for the launch video??
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
wait look 👀
+
Delivered
+
+
+
+
+
+ +
+
+
+ HyperFrames | Write HTML, render pixel-perfect video +
+
hyperframes.heygen.com
+
+
›
+
+
+
+
+
+
OMG IT'S HTML
+
+
+
🤯🤯🤯
+
+
+
+
renders in 4K. no editor
+
Delivered
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
where did u find this
+
+
+
+
on heygen
+
+
+
+
u just write plain html tags
+
+
+
+
+
the code is yours forever
+
Delivered
+
+
+
+
installing rn
+
+
+
ty bestie 💚
+
+
+
+
+
+
Message
+
+ o + wa + wai + wait + wait + wait l + wait lo + wait loo + wait look + wait look + wait look 👀 + r + re + ren + rend + rende + render + renders + renders + renders i + renders in + renders in + renders in 4 + renders in 4K + renders in 4K. + renders in 4K. + renders in 4K. n + renders in 4K. no + renders in 4K. no + renders in 4K. no e + renders in 4K. no ed + renders in 4K. no edi + renders in 4K. no edit + renders in 4K. no edito + renders in 4K. no editor + o + on + on + on h + on he + on hey + on heyg + on heyge + on heygen + u + u + u j + u ju + u jus + u just + u just + u just w + u just wr + u just wri + u just writ + u just write + u just write + u just write p + u just write pl + u just write pla + u just write plai + u just write plain + u just write plain + u just write plain h + u just write plain ht + u just write plain htm + u just write plain html + u just write plain html + u just write plain html t + u just write plain html ta + u just write plain html tag + u just write plain html tags + r + th + the + the + the c + the co + the cod + the code + the code + the code i + the code is + the code is + the code is y + the code is yo + the code is you + the code is your + the code is yours + the code is yours + the code is yours f + the code is yours fo + the code is yours for + the code is yours fore + the code is yours forev + the code is yours foreve + the code is yours forever +
+ + + + + + +
+ + + +
+
+
+
+
+ +
+ + + + + + + + + + + + + + + +
+
12,000+ creators
+
+ + + +
+
+ + + +
+
+ + + +
+
+
Write
+
plain HTML
+
+
+
Render
+
pixel-perfect
+
+
+
Own
+
every line
+
+
Start rendering free
+
+
+
+ + + +``` + + + +{/* hf:generated-footer */} + +Tagged `showcase` `mock-ui` `chat` `vertical` `ad-template`. + +Created by Miao Yang. + +## Related topics + +- [Browse the complete Catalog](/catalog) +- [Add assets and Catalog items in Studio](/studio/assets-and-blocks) +- [Build a richer composition](/go-further) diff --git a/docs/catalog/blocks/notes-reveal.mdx b/docs/catalog/blocks/notes-reveal.mdx new file mode 100644 index 000000000..24b072943 --- /dev/null +++ b/docs/catalog/blocks/notes-reveal.mdx @@ -0,0 +1,2997 @@ +--- +title: "Notes Reveal" +description: "A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html notes-reveal.html + + + + + Notes Reveal + + + +
+ +
+
+
+
+
+ THE POWER +
+
+
+ OF +
+
+ + ONEFILE +
+ +
WRITE
+
HTML
+ + + +
+
RENDER
+
IN 4K
+ + + +
+
SHIP
+
TODAY
+ + + +
+
+
+
+ + + +
+
+
+
+ + +
+
+ +
9:41
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Things nobody told me +
+
+ about video. +
+
+ my videos sucked +
+
+ my tools cost $$$ +
+
+ and re-edits never end. +
+
+ then i tried writing html only +
+
+ started HyperFrames three weeks ago +
+
+ the grind is gone, but more than that — +
+
+ I ship videos weekly. +
+
+
+
+ + +
+
+ Aa +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
The
+
My
+
I
+
+
+
q
+
w
+
e
+
r
+
t
+
y
+
u
+
i
+
o
+
p
+
a
+
s
+
d
+
f
+
g
+
h
+
j
+
k
+
l
+
z
+
x
+
c
+
v
+
b
+
n
+
m
+
+ + + +
+
+ + + + +
+
+ 123 +
+
+ + + + + + +
+
+ space +
+
+ + + +
+ + + + + + + + + +
+
+
+
+ + + + + +``` + + + +## Install + + + +That writes `compositions/notes-reveal.html`, plus 3 supporting files under `assets/`. + +## Add it to your video + +It runs for 24.85 seconds at 1080×1920. Paste this into your composition: + +```html index.html +
+``` + +Move it in time with `data-start`. Put it on a different timeline row with +`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest. + +## Variables + +Every one of these has a default, so the piece works untouched. Set the ones you +want to change on the element: + +| Variable | Default | Accepts | What it does | +| --- | --- | --- | --- | +| `titleL1` | `Things nobody told me` | string | First line of the note title. | +| `titleL2` | `about video.` | string | Second line of the note title. | +| `cardTop` | `THE POWER` | string | First marker line on the closing card. | +| `check1Label` | `WRITE` | string | Typewriter label of the first checklist row. | +| `check1Value` | `HTML` | string | Marker value of the first checklist row. | +| `check2Label` | `RENDER` | string | Typewriter label of the second checklist row. | +| `check2Value` | `IN 4K` | string | Marker value of the second checklist row. | +| `check3Label` | `SHIP` | string | Typewriter label of the third checklist row. | +| `check3Value` | `TODAY` | string | Marker value of the third checklist row. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + + + + Notes Reveal + + + +
+ +
+
+
+
+
+ THE POWER +
+
+
+ OF +
+
+ + ONEFILE +
+ +
WRITE
+
HTML
+ + + +
+
RENDER
+
IN 4K
+ + + +
+
SHIP
+
TODAY
+ + + +
+
+
+
+ + + +
+
+
+
+ + +
+
+ +
9:41
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Things nobody told me +
+
+ about video. +
+
+ my videos sucked +
+
+ my tools cost $$$ +
+
+ and re-edits never end. +
+
+ then i tried writing html only +
+
+ started HyperFrames three weeks ago +
+
+ the grind is gone, but more than that — +
+
+ I ship videos weekly. +
+
+
+
+ + +
+
+ Aa +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
The
+
My
+
I
+
+
+
q
+
w
+
e
+
r
+
t
+
y
+
u
+
i
+
o
+
p
+
a
+
s
+
d
+
f
+
g
+
h
+
j
+
k
+
l
+
z
+
x
+
c
+
v
+
b
+
n
+
m
+
+ + + +
+
+ + + + +
+
+ 123 +
+
+ + + + + + +
+
+ space +
+
+ + + +
+ + + + + + + + + +
+
+
+
+ + + + + +``` + + + +{/* hf:generated-footer */} + +Tagged `showcase` `mock-ui` `notes` `typing` `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) diff --git a/docs/catalog/blocks/notification-cascade.mdx b/docs/catalog/blocks/notification-cascade.mdx new file mode 100644 index 000000000..ea2f03aad --- /dev/null +++ b/docs/catalog/blocks/notification-cascade.mdx @@ -0,0 +1,1121 @@ +--- +title: "Notification Cascade" +description: "Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html notification-cascade.html + + + + + + Notification Cascade + + + + +
+
+ + +
+ +
+
+ + +
+
+
+
+ + + + Show less +
+
+ + + +
+
+ +
+
+ + + +
+
New render
+
Launch video is ready.
+
NOW
+
HyperFrames
+
+
+
+ + + +
+
New render
+
All checks passed.
+
NOW
+
HyperFrames
+
+
+
+ + + +
+
New render
+
4K render done in 92s.
+
NOW
+
HyperFrames
+
+
+
+ + + +
+
New render
+
Published to the catalog.
+
NOW
+
HyperFrames
+
+
+
+ + +
+
+
+
SHIP VIDEO
+
FROM HTML
+ HyperFrames + +
+
+ + +
+
+
+
+ + + + +``` + + + +## Install + + + +That writes `compositions/notification-cascade.html`, plus 2 supporting files under `assets/`. + +## Add it to your video + +It runs for 14 seconds at 1080×1920. Paste this into your composition: + +```html index.html +
+``` + +Move it in time with `data-start`. Put it on a different timeline row with +`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest. + +## Variables + +Every one of these has a default, so the piece works untouched. Set the ones you +want to change on the element: + +| Variable | Default | Accepts | What it does | +| --- | --- | --- | --- | +| `notifTitle` | `New render` | string | Bold first line on every banner. | +| `message1` | `Launch video is ready.` | string | Subtitle of the first banner to land. | +| `message2` | `All checks passed.` | string | Subtitle of the second banner. | +| `message3` | `4K render done in 92s.` | string | Subtitle of the third banner. | +| `message4` | `Published to the catalog.` | string | Subtitle of the fourth banner. | +| `appName` | `HyperFrames` | string | Small credit in the corner of every banner. | +| `headlineTop` | `SHIP VIDEO` | string | First line of the closing card. | +| `headlineAccent` | `FROM HTML` | string | Accented second line of the closing card. | +| `footerText` | `hyperframes.heygen.com` | string | URL or call to action under the headline. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + + + + + Notification Cascade + + + + +
+
+ + +
+ +
+
+ + +
+
+
+
+ + + + Show less +
+
+ + + +
+
+ +
+
+ + + +
+
New render
+
Launch video is ready.
+
NOW
+
HyperFrames
+
+
+
+ + + +
+
New render
+
All checks passed.
+
NOW
+
HyperFrames
+
+
+
+ + + +
+
New render
+
4K render done in 92s.
+
NOW
+
HyperFrames
+
+
+
+ + + +
+
New render
+
Published to the catalog.
+
NOW
+
HyperFrames
+
+
+
+ + +
+
+
+
SHIP VIDEO
+
FROM HTML
+ HyperFrames + +
+
+ + +
+
+
+
+ + + + +``` + + + +{/* hf:generated-footer */} + +Tagged `showcase` `mock-ui` `notification` `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) diff --git a/docs/catalog/blocks/share-sheet-carousel.mdx b/docs/catalog/blocks/share-sheet-carousel.mdx new file mode 100644 index 000000000..2e9bee775 --- /dev/null +++ b/docs/catalog/blocks/share-sheet-carousel.mdx @@ -0,0 +1,792 @@ +--- +title: "Share-Sheet Carousel" +description: "A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html share-sheet-carousel.html + + + + + + Share-Sheet Carousel + + + + +
+
+ + + + +
+
+
Share
+
HyperFrames would like to share a video
+
+ + + + +
+ HyperFrames +
OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML
+
+
+
+
+
+
Decline
+
Accept
+
+
+
+
+ + + +``` + + + +## Install + + + +That writes `compositions/share-sheet-carousel.html`, plus 5 supporting files under `assets/`. + +## Add it to your video + +It runs for 7.2333 seconds at 1080×1920. Paste this into your composition: + +```html index.html +
+``` + +Move it in time with `data-start`. Put it on a different timeline row with +`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest. + +## Variables + +Every one of these has a default, so the piece works untouched. Set the ones you +want to change on the element: + +| Variable | Default | Accepts | What it does | +| --- | --- | --- | --- | +| `shareTitle` | `Share` | string | Heading at the top of the share sheet. | +| `senderName` | `HyperFrames` | string | Bold name in the sheet subtitle. | +| `itemLabel` | `a video` | string | What the sender is offering, completing the sentence "… would like to share …". | +| `stripText` | `OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML` | string | Small-caps line under the preview, beside the logo. | +| `acceptLabel` | `Accept` | string | Right-hand action button. | +| `declineLabel` | `Decline` | string | Left-hand action button. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + + + + + Share-Sheet Carousel + + + + +
+
+ + + + +
+
+
Share
+
HyperFrames would like to share a video
+
+ + + + +
+ HyperFrames +
OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML
+
+
+
+
+
+
Decline
+
Accept
+
+
+
+
+ + + +``` + + + +{/* hf:generated-footer */} + +Tagged `showcase` `mock-ui` `share-sheet` `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) diff --git a/docs/catalog/components/chat-message.mdx b/docs/catalog/components/chat-message.mdx new file mode 100644 index 000000000..dd60bdff8 --- /dev/null +++ b/docs/catalog/components/chat-message.mdx @@ -0,0 +1,686 @@ +--- +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"; + + + +```html chat-message.html + + + + + + Chat Message + + + + + +``` + + + +## Install + + + +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 +
+``` + +## Source + + + +```html + + + + + + Chat Message + + + + + +``` + + + +{/* 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) diff --git a/docs/catalog/components/chat-thread.mdx b/docs/catalog/components/chat-thread.mdx new file mode 100644 index 000000000..ab4efb4c4 --- /dev/null +++ b/docs/catalog/components/chat-thread.mdx @@ -0,0 +1,1402 @@ +--- +title: "Chat Thread" +description: "The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html chat-thread.html + + + + + + Chat Thread + + + + + +``` + + + +## Install + + + +That writes one file: `compositions/components/chat-thread.html`. + +## Paste it into your composition + +Open `compositions/components/chat-thread.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 | +| --- | --- | --- | --- | +| `contact` | `Rachel` | string | Name in the thread header; the avatar shows its first letter. | +| `unread` | `12` | 0 to 99, step 1 | Count in the back-button badge. 0 hides it. | +| `messages` | `recv:what r u using for the launch video??|sent:wait look 👀|card:HyperFrames — Write HTML, render pixel-perfect video~hyperframes.heygen.com|recv:OMG IT'S HTML|emoji:🤯🤯🤯|sent:renders in 4K. no editor` | string | Pipe-separated thread. Each entry picks its type by prefix: recv: or sent: for a text bubble, emoji: for a large emoji row, img for a media placeholder, card:Title~domain for a link card. Example: recv:hey|sent:look 👀|card:HyperFrames~hyperframes.heygen.com|emoji:🤯🤯🤯 | +| `beat` | `1.7` | 0.8 to 3, step 0.1 | Seconds between message arrivals. | +| `dots` | `on` | `on`, `off` | Show the three-dot indicator before received messages. | +| `receipt` | `on` | `on`, `off` | Show Delivered under the last sent bubble, as iMessage does. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + + + + + Chat Thread + + + + + +``` + + + +{/* hf:generated-footer */} + +Tagged `motion-primitive` `chat` `mock-ui` `conversation` `vertical`. + +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) diff --git a/docs/catalog/components/marker-checklist-card.mdx b/docs/catalog/components/marker-checklist-card.mdx new file mode 100644 index 000000000..ec5808063 --- /dev/null +++ b/docs/catalog/components/marker-checklist-card.mdx @@ -0,0 +1,694 @@ +--- +title: "Marker Checklist Card" +description: "A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html marker-checklist-card.html + + + + + + Marker Checklist Card + + + + + +``` + + + +## Install + + + +That writes `compositions/components/marker-checklist-card.html`, plus 2 supporting files under `assets/fonts/`. + +## Paste it into your composition + +Open `compositions/components/marker-checklist-card.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 | +| --- | --- | --- | --- | +| `top` | `THE POWER` | string | First marker line. | +| `mid` | `OF` | string | Small connecting word under the underline. | +| `circled` | `ONE` | string | The word the marker ellipse draws around. | +| `rest` | `FILE` | string | The rest of the bottom line. | +| `l1` | `WRITE` | string | Typewriter label of row 1. | +| `v1` | `HTML` | string | Marker value of row 1. | +| `l2` | `RENDER` | string | Typewriter label of row 2. | +| `v2` | `IN 4K` | string | Marker value of row 2. | +| `l3` | `SHIP` | string | Typewriter label of row 3. | +| `v3` | `TODAY` | string | Marker value of row 3. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + + + + + Marker Checklist Card + + + + + +``` + + + +{/* hf:generated-footer */} + +Tagged `motion-primitive` `handwritten` `checklist` `paper` `marker`. + +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) diff --git a/docs/catalog/components/notes-typing.mdx b/docs/catalog/components/notes-typing.mdx new file mode 100644 index 000000000..e3d6e57b0 --- /dev/null +++ b/docs/catalog/components/notes-typing.mdx @@ -0,0 +1,769 @@ +--- +title: "Notes Typing" +description: "The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html notes-typing.html + + + + + + Notes Typing + + + + + +``` + + + +## Install + + + +That writes one file: `compositions/components/notes-typing.html`. + +## Paste it into your composition + +Open `compositions/components/notes-typing.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 | +| --- | --- | --- | --- | +| `title` | `Things nobody told me|about video.` | string | Bold note title. A | breaks the line. | +| `lines` | `my videos sucked|my tools cost $$$|and re-edits never end.` | string | Pipe-separated body lines, typed one after another. | +| `speed` | `1` | 0.5 to 2, step 0.1 | Typing speed multiplier. 1 is the measured human rhythm. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + + + + + Notes Typing + + + + + +``` + + + +{/* hf:generated-footer */} + +Tagged `motion-primitive` `notes` `typing` `mock-ui` `vertical`. + +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) diff --git a/docs/catalog/components/sheet-spring-up.mdx b/docs/catalog/components/sheet-spring-up.mdx new file mode 100644 index 000000000..b904c37d8 --- /dev/null +++ b/docs/catalog/components/sheet-spring-up.mdx @@ -0,0 +1,562 @@ +--- +title: "Sheet Spring-Up" +description: "A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html sheet-spring-up.html + + +
+
+
Share
+
Sheet content goes here.
+
+
+ + + + + + +``` + + + +## Install + + + +That writes one file: `compositions/components/sheet-spring-up.html`. + +## Paste it into your composition + +Open `compositions/components/sheet-spring-up.html` and copy what is inside into your own composition. +The file opens with a comment header that walks you through it. + +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 | +| --- | --- | --- | --- | +| `width` | `668` | 400px to 900px, step 4px | Sheet width in pixels. | +| `radius` | `34` | 16px to 48px, step 1px | Sheet corner radius. | +| `tone` | `light` | `light`, `dark` | Light is the reference near-white sheet; dark is the raised surface token. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + +
+
+
Share
+
Sheet content goes here.
+
+
+ + + + + + +``` + + + +{/* hf:generated-footer */} + +Tagged `video-primitive` `sheet` `spring` `mock-ui` `overlay`. + +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) diff --git a/docs/catalog/components/social-proof-card.mdx b/docs/catalog/components/social-proof-card.mdx new file mode 100644 index 000000000..ce2642f99 --- /dev/null +++ b/docs/catalog/components/social-proof-card.mdx @@ -0,0 +1,538 @@ +--- +title: "Social Proof Card" +description: "The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html social-proof-card.html + + + + + + Social Proof Card + + + + + +``` + + + +## Install + + + +That writes one file: `compositions/components/social-proof-card.html`. + +## Paste it into your composition + +Open `compositions/components/social-proof-card.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 | +| --- | --- | --- | --- | +| `brand` | `HyperFrames` | string | Wordmark at the top of the card. | +| `proof` | `12,000+ creators` | string | Social-proof line under the stars. | +| `cta` | `Start rendering free` | string | Label on the closing capsule. | +| `f1` | `Write|plain HTML` | string | First feature, | breaks the line. | +| `f2` | `Render|pixel-perfect` | string | Second feature, | breaks the line. | +| `f3` | `Own|every line` | string | Third feature, | breaks the line. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + + + + + Social Proof Card + + + + + +``` + + + +{/* hf:generated-footer */} + +Tagged `motion-primitive` `social-proof` `end-card` `cta` `vertical`. + +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) diff --git a/docs/catalog/components/streaming-text.mdx b/docs/catalog/components/streaming-text.mdx new file mode 100644 index 000000000..745f0fa18 --- /dev/null +++ b/docs/catalog/components/streaming-text.mdx @@ -0,0 +1,585 @@ +--- +title: "Streaming Text" +description: "Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html streaming-text.html + + +
+

+ You don't need + a video editor. + HyperFrames renders the + HTML you already + write into pixel-perfect, + deterministic video. +

+
+ + + + + + +``` + + + +## Install + + + +That writes one file: `compositions/components/streaming-text.html`. + +## Paste it into your composition + +Open `compositions/components/streaming-text.html` and copy what is inside into your own composition. +The file opens with a comment header that walks you through it. + +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 | +| --- | --- | --- | --- | +| `size` | `27` | 18px to 64px, step 1px | Type size of the streamed words. | +| `tone` | `dark-on-light` | `dark-on-light`, `light-on-dark` | Ink pair: dark words on a light ground, or light words on a dark ground. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + +
+

+ You don't need + a video editor. + HyperFrames renders the + HTML you already + write into pixel-perfect, + deterministic video. +

+
+ + + + + + +``` + + + +{/* hf:generated-footer */} + +Tagged `video-primitive` `text-effect` `ai` `chat`. + +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) diff --git a/docs/catalog/components/typing-indicator.mdx b/docs/catalog/components/typing-indicator.mdx new file mode 100644 index 000000000..2369ff363 --- /dev/null +++ b/docs/catalog/components/typing-indicator.mdx @@ -0,0 +1,656 @@ +--- +title: "Typing Indicator" +description: "The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands" +--- + +import { InstallCommand } from "/snippets/install-command.jsx"; +import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; + + + +```html typing-indicator.html + + +
+
+
+ + + +
+
+
+
+
+ + + + + + +``` + + + +## Install + + + +That writes one file: `compositions/components/typing-indicator.html`. + +## Paste it into your composition + +Open `compositions/components/typing-indicator.html` and copy what is inside into your own composition. +The file opens with a comment header that walks you through it. + +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 | +| --- | --- | --- | --- | +| `size` | `124` | 80px to 220px, step 2px | Bubble width in pixels; dots and tail scale with it. | +| `tone` | `dark` | `dark`, `light` | Dark is the reference iOS bubble; light suits bright chat grounds. | +| `tail` | `on` | `on`, `off` | The two shrinking circles anchoring the bubble to the sender side. | + +Set them with `data-variable-values` on the element that mounts it. These are the +defaults, so this behaves exactly like the preview above until you change one: + +```html wrap +
+``` + +## Source + + + +```html + + +
+
+
+ + + +
+
+
+
+
+ + + + + + +``` + + + +{/* hf:generated-footer */} + +Tagged `video-primitive` `chat` `mock-ui` `overlay`. + +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) diff --git a/docs/docs.json b/docs/docs.json index f5380e052..eace34c03 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -466,6 +466,7 @@ { "group": "Showcases", "pages": [ + "catalog/blocks/ai-chat-reveal", "catalog/components/ai-generation-canvas", "catalog/blocks/app-showcase", "catalog/blocks/apple-money-count", @@ -473,10 +474,14 @@ "catalog/blocks/camera-dolly-zoom", "catalog/blocks/cosmic-orb", "catalog/blocks/gallery-tunnel", + "catalog/blocks/message-thread-reveal", "catalog/blocks/north-korea-locked-down", + "catalog/blocks/notes-reveal", + "catalog/blocks/notification-cascade", "catalog/blocks/nyc-paris-flight", "catalog/blocks/oscilloscope-trace", "catalog/blocks/rack-focus", + "catalog/blocks/share-sheet-carousel", "catalog/blocks/ui-3d-reveal", "catalog/blocks/vfx-anamorphic-flare", "catalog/blocks/vpn-youtube-spot" @@ -531,6 +536,7 @@ "catalog/components/aurora-drift", "catalog/components/beat-accent", "catalog/components/beat-pulse-background", + "catalog/components/chat-thread", "catalog/components/constellation-hub", "catalog/components/count-up", "catalog/components/cta-close", @@ -543,8 +549,10 @@ "catalog/components/light-sweep-pass", "catalog/components/locked-nucleus-orbit", "catalog/components/logo-sting", + "catalog/components/marker-checklist-card", "catalog/components/modal-morph", "catalog/components/multi-device-splay", + "catalog/components/notes-typing", "catalog/components/outline-draw", "catalog/components/oversized-cursor", "catalog/components/particle-image-reveal", @@ -552,6 +560,7 @@ "catalog/components/radial-surround", "catalog/components/scroll-feed", "catalog/components/slit-scan-reveal", + "catalog/components/social-proof-card", "catalog/components/split-tilt-cards", "catalog/components/spring-pop", "catalog/components/stitched-text-draw", @@ -579,6 +588,7 @@ "catalog/components/badge-pop", "catalog/components/blur-in", "catalog/components/card-resize", + "catalog/components/chat-message", "catalog/components/chromatic-aberration-wipe", "catalog/components/dynamic-grid", "catalog/components/icon-swap", @@ -588,10 +598,12 @@ "catalog/components/number-wheel", "catalog/components/page-slide", "catalog/components/separator", + "catalog/components/sheet-spring-up", "catalog/components/simulated-cursor", "catalog/components/skeleton-reveal", "catalog/components/slot-machine-roll", "catalog/components/staggered-fade-up", + "catalog/components/streaming-text", "catalog/components/success-check", "catalog/components/svg-line-draw-loader", "catalog/components/text-stagger", @@ -599,7 +611,8 @@ "catalog/components/three-orbiting-cards", "catalog/components/tilt-card", "catalog/components/top-down-letters", - "catalog/components/typewriter" + "catalog/components/typewriter", + "catalog/components/typing-indicator" ] }, { diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json index 01c111c5b..f4b0a8431 100644 --- a/docs/public/catalog-index.json +++ b/docs/public/catalog-index.json @@ -1,4 +1,20 @@ [ + { + "name": "ai-chat-reveal", + "type": "block", + "title": "AI Chat Reveal", + "description": "A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card", + "tags": [ + "showcase", + "mock-ui", + "ai", + "chat", + "vertical", + "ad-template" + ], + "href": "/catalog/blocks/ai-chat-reveal", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ai-chat-reveal.png" + }, { "name": "ai-generation-canvas", "type": "component", @@ -715,6 +731,35 @@ "href": "/catalog/components/chart-story", "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chart-story.png" }, + { + "name": "chat-message", + "type": "component", + "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", + "tags": [ + "video-primitive", + "chat", + "mock-ui", + "message" + ], + "href": "/catalog/components/chat-message", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chat-message.png" + }, + { + "name": "chat-thread", + "type": "component", + "title": "Chat Thread", + "description": "The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits", + "tags": [ + "motion-primitive", + "chat", + "mock-ui", + "conversation", + "vertical" + ], + "href": "/catalog/components/chat-thread", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chat-thread.png" + }, { "name": "checkout-flow", "type": "component", @@ -2587,6 +2632,21 @@ "href": "/catalog/blocks/macos-tahoe-liquid-glass", "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" }, + { + "name": "marker-checklist-card", + "type": "component", + "title": "Marker Checklist Card", + "description": "A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows", + "tags": [ + "motion-primitive", + "handwritten", + "checklist", + "paper", + "marker" + ], + "href": "/catalog/components/marker-checklist-card", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/marker-checklist-card.png" + }, { "name": "marker-highlight", "type": "component", @@ -2657,6 +2717,21 @@ "href": "/catalog/components/mesh-gradient-bg", "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.png" }, + { + "name": "message-thread-reveal", + "type": "block", + "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", + "tags": [ + "showcase", + "mock-ui", + "chat", + "vertical", + "ad-template" + ], + "href": "/catalog/blocks/message-thread-reveal", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/message-thread-reveal.png" + }, { "name": "micro-transitions", "type": "component", @@ -2938,6 +3013,52 @@ "href": "/catalog/blocks/north-korea-locked-down", "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png" }, + { + "name": "notes-reveal", + "type": "block", + "title": "Notes Reveal", + "description": "A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist", + "tags": [ + "showcase", + "mock-ui", + "notes", + "typing", + "vertical", + "ad-template" + ], + "href": "/catalog/blocks/notes-reveal", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/notes-reveal.png" + }, + { + "name": "notes-typing", + "type": "component", + "title": "Notes Typing", + "description": "The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter", + "tags": [ + "motion-primitive", + "notes", + "typing", + "mock-ui", + "vertical" + ], + "href": "/catalog/components/notes-typing", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/notes-typing.png" + }, + { + "name": "notification-cascade", + "type": "block", + "title": "Notification Cascade", + "description": "Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card", + "tags": [ + "showcase", + "mock-ui", + "notification", + "vertical", + "ad-template" + ], + "href": "/catalog/blocks/notification-cascade", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/notification-cascade.png" + }, { "name": "notification-pileup", "type": "component", @@ -3616,6 +3737,21 @@ "href": "/catalog/components/settings-toggle-flow", "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/settings-toggle-flow.png" }, + { + "name": "share-sheet-carousel", + "type": "block", + "title": "Share-Sheet Carousel", + "description": "A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap", + "tags": [ + "showcase", + "mock-ui", + "share-sheet", + "vertical", + "ad-template" + ], + "href": "/catalog/blocks/share-sheet-carousel", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/share-sheet-carousel.png" + }, { "name": "shared-axis-y", "type": "component", @@ -3642,6 +3778,21 @@ "href": "/catalog/components/shared-axis-z", "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shared-axis-z.png" }, + { + "name": "sheet-spring-up", + "type": "component", + "title": "Sheet Spring-Up", + "description": "A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease", + "tags": [ + "video-primitive", + "sheet", + "spring", + "mock-ui", + "overlay" + ], + "href": "/catalog/components/sheet-spring-up", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/sheet-spring-up.png" + }, { "name": "shimmer-sweep", "type": "component", @@ -3730,6 +3881,21 @@ "href": "/catalog/components/slot-machine-roll", "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/slot-machine-roll.png" }, + { + "name": "social-proof-card", + "type": "component", + "title": "Social Proof Card", + "description": "The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup", + "tags": [ + "motion-primitive", + "social-proof", + "end-card", + "cta", + "vertical" + ], + "href": "/catalog/components/social-proof-card", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/social-proof-card.png" + }, { "name": "soft-blob-touch", "type": "component", @@ -4020,6 +4186,20 @@ "href": "/catalog/components/store-badge-lockup", "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/store-badge-lockup.png" }, + { + "name": "streaming-text", + "type": "component", + "title": "Streaming Text", + "description": "Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter", + "tags": [ + "video-primitive", + "text-effect", + "ai", + "chat" + ], + "href": "/catalog/components/streaming-text", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/streaming-text.png" + }, { "name": "strikethrough-replace", "type": "component", @@ -4659,6 +4839,20 @@ "href": "/catalog/components/typewriter", "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/typewriter.png" }, + { + "name": "typing-indicator", + "type": "component", + "title": "Typing Indicator", + "description": "The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands", + "tags": [ + "video-primitive", + "chat", + "mock-ui", + "overlay" + ], + "href": "/catalog/components/typing-indicator", + "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/typing-indicator.png" + }, { "name": "ui-3d-reveal", "type": "block", diff --git a/docs/public/catalog/assets/654a1d16c0b027ea.woff2 b/docs/public/catalog/assets/654a1d16c0b027ea.woff2 new file mode 100644 index 000000000..d9172b309 Binary files /dev/null and b/docs/public/catalog/assets/654a1d16c0b027ea.woff2 differ diff --git a/docs/public/catalog/assets/734322e45db3b243.jpg b/docs/public/catalog/assets/734322e45db3b243.jpg new file mode 100644 index 000000000..a2a728afc Binary files /dev/null and b/docs/public/catalog/assets/734322e45db3b243.jpg differ diff --git a/docs/public/catalog/assets/8963f64fa28dc4ae.woff2 b/docs/public/catalog/assets/8963f64fa28dc4ae.woff2 new file mode 100644 index 000000000..8613f2a70 Binary files /dev/null and b/docs/public/catalog/assets/8963f64fa28dc4ae.woff2 differ diff --git a/docs/public/catalog/assets/a634cb9e7783af7e.woff2 b/docs/public/catalog/assets/a634cb9e7783af7e.woff2 new file mode 100644 index 000000000..7f02be902 Binary files /dev/null and b/docs/public/catalog/assets/a634cb9e7783af7e.woff2 differ diff --git a/docs/public/catalog/assets/b027e8df2ebc91b8.jpg b/docs/public/catalog/assets/b027e8df2ebc91b8.jpg new file mode 100644 index 000000000..510b1da4b Binary files /dev/null and b/docs/public/catalog/assets/b027e8df2ebc91b8.jpg differ diff --git a/docs/public/catalog/assets/b84738ef758732c7.jpg b/docs/public/catalog/assets/b84738ef758732c7.jpg new file mode 100644 index 000000000..ae4bb08cd Binary files /dev/null and b/docs/public/catalog/assets/b84738ef758732c7.jpg differ diff --git a/docs/public/catalog/assets/b953bffd7866c96c.jpg b/docs/public/catalog/assets/b953bffd7866c96c.jpg new file mode 100644 index 000000000..7acc94b35 Binary files /dev/null and b/docs/public/catalog/assets/b953bffd7866c96c.jpg differ diff --git a/docs/public/catalog/assets/cd908527295c4367.jpg b/docs/public/catalog/assets/cd908527295c4367.jpg new file mode 100644 index 000000000..0ffb70e20 Binary files /dev/null and b/docs/public/catalog/assets/cd908527295c4367.jpg differ diff --git a/docs/public/catalog/assets/dc156e7c21b47474.svg b/docs/public/catalog/assets/dc156e7c21b47474.svg new file mode 100644 index 000000000..a103b1bad --- /dev/null +++ b/docs/public/catalog/assets/dc156e7c21b47474.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/catalog/assets/e0afd7322aaec59a.jpg b/docs/public/catalog/assets/e0afd7322aaec59a.jpg new file mode 100644 index 000000000..2337e9e26 Binary files /dev/null and b/docs/public/catalog/assets/e0afd7322aaec59a.jpg differ diff --git a/docs/public/catalog/blocks/ai-chat-reveal.json b/docs/public/catalog/blocks/ai-chat-reveal.json new file mode 100644 index 000000000..d8f4cfb85 --- /dev/null +++ b/docs/public/catalog/blocks/ai-chat-reveal.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n AI Chat Reveal\n \n \n \n \n \n
\n
\n\n
\n
11:42
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n
\n
\n \n \n \n
\n
Assistant
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n\n
How do I turn my HTML into real video?
\n\n
\n
\n\n
\n
\n
\n \n \n \n
\n
\n Ask anything\n
\n
\n
\n \n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n
\n
\n\n
\n
\n
How
\n
Can
\n
My
\n
\n
\n
\n \n \n \n \n \n
\n
\n
\n\n \n
\n \"HyperFrames\"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n
\n
\n
It's not magic.
It's HTML.
\n
\n Open-source video rendering — write HTML, ship pixel-perfect video.\n
\n
\n Try HyperFrames\n \n \n
\n
HYPERFRAMES.HEYGEN.COM
\n
\n \n \n\n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/blocks/message-thread-reveal.json b/docs/public/catalog/blocks/message-thread-reveal.json new file mode 100644 index 000000000..8fcf7d26c --- /dev/null +++ b/docs/public/catalog/blocks/message-thread-reveal.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n Message Thread Reveal\n \n \n \n \n \n
\n
\n
\n \n
\n
9:41
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
12
\n
R
\n
Rachel›
\n \n \n \n \n
\n \n
\n
what r u using for the launch video??
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
wait look 👀
\n
Delivered
\n
\n \n \n
\n
\n \"\"\n
\n
\n
\n HyperFrames | Write HTML, render pixel-perfect video\n
\n
hyperframes.heygen.com
\n
\n
›
\n
\n
\n
\n \n \n
OMG IT'S HTML
\n \n \n
🤯🤯🤯
\n \n \n
\n
renders in 4K. no editor
\n
Delivered
\n
\n \n \n
\n
\n
\n \n
\n
\n
\n
\n
\n \n \n
\n
where did u find this
\n
\n \n \n
on heygen
\n \n \n
\n
u just write plain html tags
\n
\n \n \n
\n
the code is yours forever
\n
Delivered
\n
\n \n \n
installing rn
\n \n \n
ty bestie 💚
\n \n \n
+
\n
\n
Message
\n
\n o\n wa\n wai\n wait\n wait \n wait l\n wait lo\n wait loo\n wait look\n wait look \n wait look 👀\n r\n re\n ren\n rend\n rende\n render\n renders\n renders \n renders i\n renders in\n renders in \n renders in 4\n renders in 4K\n renders in 4K.\n renders in 4K. \n renders in 4K. n\n renders in 4K. no\n renders in 4K. no \n renders in 4K. no e\n renders in 4K. no ed\n renders in 4K. no edi\n renders in 4K. no edit\n renders in 4K. no edito\n renders in 4K. no editor\n o\n on\n on \n on h\n on he\n on hey\n on heyg\n on heyge\n on heygen\n u\n u \n u j\n u ju\n u jus\n u just\n u just \n u just w\n u just wr\n u just wri\n u just writ\n u just write\n u just write \n u just write p\n u just write pl\n u just write pla\n u just write plai\n u just write plain\n u just write plain \n u just write plain h\n u just write plain ht\n u just write plain htm\n u just write plain html\n u just write plain html \n u just write plain html t\n u just write plain html ta\n u just write plain html tag\n u just write plain html tags\n r\n th\n the\n the \n the c\n the co\n the cod\n the code\n the code \n the code i\n the code is\n the code is \n the code is y\n the code is yo\n the code is you\n the code is your\n the code is yours\n the code is yours \n the code is yours f\n the code is yours fo\n the code is yours for\n the code is yours fore\n the code is yours forev\n the code is yours foreve\n the code is yours forever\n
\n \n \n \n \n \n \n
\n \n \n \n
\n \n \n \n
\n \"HyperFrames\"\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
12,000+ creators
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n
Write
\n
plain HTML
\n
\n
\n
Render
\n
pixel-perfect
\n
\n
\n
Own
\n
every line
\n
\n
Start rendering free
\n
\n \n \n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/blocks/notes-reveal.json b/docs/public/catalog/blocks/notes-reveal.json new file mode 100644 index 000000000..e54144894 --- /dev/null +++ b/docs/public/catalog/blocks/notes-reveal.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n Notes Reveal\n \n \n \n \n \n \n
\n
\n
\n \n THE POWER\n
\n
\n \n OF\n
\n \n \n ONEFILE\n \n\n
WRITE
\n
HTML
\n \n \n \n
\n
RENDER
\n
IN 4K
\n \n \n \n
\n
SHIP
\n
TODAY
\n \n \n \n
\n \n
\n
\n \n \n \n
\n
\n \n \n\n \n
\n
\n \n
9:41
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n\n \n
\n
\n \n Things nobody told me\n
\n \n about video.\n
\n \n my videos sucked\n
\n \n my tools cost $$$\n
\n \n and re-edits never end.\n \n \n then i tried writing html only\n \n \n started HyperFrames three weeks ago\n \n \n the grind is gone, but more than that —\n \n \n I ship videos weekly.\n \n
\n \n \n\n \n
\n \n Aa\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n
\n
The
\n
My
\n
I
\n
\n
\n
q
\n
w
\n
e
\n
r
\n
t
\n
y
\n
u
\n
i
\n
o
\n
p
\n
a
\n
s
\n
d
\n
f
\n
g
\n
h
\n
j
\n
k
\n
l
\n
z
\n
x
\n
c
\n
v
\n
b
\n
n
\n
m
\n
\n \n \n \n
\n
\n \n \n \n \n
\n \n 123\n
\n
\n \n \n \n \n \n \n
\n \n space\n \n
\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/blocks/notification-cascade.json b/docs/public/catalog/blocks/notification-cascade.json new file mode 100644 index 000000000..6367f3f49 --- /dev/null +++ b/docs/public/catalog/blocks/notification-cascade.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n Notification Cascade\n \n \n \n \n \n
\n\n \n
\n \"\"\n
\n
\n\n \n \n
\n
\n
\n \n \n \n Show less\n
\n
\n \n \n \n
\n
\n\n
\n
\n \n \n \n
\n
New render
\n
Launch video is ready.
\n
NOW
\n
HyperFrames
\n
\n
\n
\n \n \n \n
\n
New render
\n
All checks passed.
\n
NOW
\n
HyperFrames
\n
\n
\n
\n \n \n \n
\n
New render
\n
4K render done in 92s.
\n
NOW
\n
HyperFrames
\n
\n
\n
\n \n \n \n
\n
New render
\n
Published to the catalog.
\n
NOW
\n
HyperFrames
\n
\n
\n \n\n \n \n
\n
\n
SHIP VIDEO
\n
FROM HTML
\n \"HyperFrames\"\n
hyperframes.heygen.com
\n
\n \n\n \n
\n
\n
\n \n\n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/blocks/share-sheet-carousel.json b/docs/public/catalog/blocks/share-sheet-carousel.json new file mode 100644 index 000000000..8fe79e9fd --- /dev/null +++ b/docs/public/catalog/blocks/share-sheet-carousel.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n Share-Sheet Carousel\n \n \n \n \n \n \n \"\"\n \"\"\n \"\"\n \"\"\n
\n
\n
Share
\n
HyperFrames would like to share a video
\n
\n \n \n \n \n
\n \"HyperFrames\"\n
OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML
\n
\n
\n
\n
\n
\n
Decline
\n
Accept
\n
\n
\n \n \n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/components/chat-message.json b/docs/public/catalog/components/chat-message.json new file mode 100644 index 000000000..d69d1dabe --- /dev/null +++ b/docs/public/catalog/components/chat-message.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n Chat Message\n \n \n \n \n \n \n
\n
\n \n
type: recv
\n \n
\n
\n what r u using for the launch video??\n
\n
\n
\n \n
\n
wait look 👀
\n
Delivered
\n
\n
\n \n
🤯🤯🤯
\n \n \n
\n \n
\n \n \n
\n HyperFrames — Write HTML, render pixel-perfect videohyperframes.heygen.com›\n
\n \n \n \n \n
\n
chat-message
\n
\n
\n ONE message arrives on the measured entry, growing from its sender's corner. The\n type is an enum, switched like marker-highlight's style — the demo cycles all\n five.\n
\n
\n
type — recv / sent / emoji / img / card
\n
measured — pop-in scale .75 / 0.12s power2.out
\n
the atom — chat-thread builds conversations from it
\n
\n
\n \n \n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/components/chat-thread.json b/docs/public/catalog/components/chat-thread.json new file mode 100644 index 000000000..d3b79bd21 --- /dev/null +++ b/docs/public/catalog/components/chat-thread.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n Chat Thread\n \n \n \n \n \n \n
\n
\n
\n
9:41
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
12
\n
R
\n
Rachel›
\n \n \n \n \n
\n
+
\n
\n
Message
\n \n \n \n \n \n \n
\n
\n
\n
\n
chat-thread
\n
\n
\n The full conversation at film fidelity: bubble tails, a Delivered receipt, emoji rows, a\n link card. Each message picks its type by prefix; heights are measured at mount and the\n choreography is generated to fit.\n
\n
\n
recv: / sent: / emoji: / img / card: — the type switch
\n
measured — pop-in scale .75 / 0.12s, expo lockstep
\n
any thread — messages are one variable
\n
\n
\n \n \n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/components/marker-checklist-card.json b/docs/public/catalog/components/marker-checklist-card.json new file mode 100644 index 000000000..373227a48 --- /dev/null +++ b/docs/public/catalog/components/marker-checklist-card.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n Marker Checklist Card\n \n \n \n \n \n \n
\n
\n
\n \n THE POWER\n
\n
\n \n OF\n
\n \n \n \n \n ONEFILE\n
\n
\n
WRITE
\n
HTML
\n \n \n \n
\n
\n
\n
RENDER
\n
IN 4K
\n \n \n \n
\n
\n
\n
SHIP
\n
TODAY
\n \n \n \n
\n
\n \n \n \n
\n
marker-checklist-card
\n
\n
\n A hand-lettered paper card: marker headline, a drawn ellipse around one word, and three\n checklist rows whose checks draw themselves on.\n
\n
\n
0.55s — the ellipse draws around the word
\n
3 rows — label / value / self-drawing check
\n
Open faces — Permanent Marker (Apache-2.0) + Courier Prime (OFL 1.1)
\n
\n
\n \n \n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/components/notes-typing.json b/docs/public/catalog/components/notes-typing.json new file mode 100644 index 000000000..de92c7822 --- /dev/null +++ b/docs/public/catalog/components/notes-typing.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n Notes Typing\n \n \n \n \n \n \n
\n
\n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n
\n Things nobody told me
about video.\n
\n
\n
\n
\n
\n Aa\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
notes-typing
\n
\n
\n The notes-app confession: body lines typed on the measured human keystroke rhythm, the\n caret riding every landed character.\n
\n
\n
30-gap table — the measured keystroke rhythm
\n
0.85s — the breath before a new thought
\n
caret — measured at mount, rides every char
\n
\n
\n \n \n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/components/sheet-spring-up.json b/docs/public/catalog/components/sheet-spring-up.json new file mode 100644 index 000000000..b3a48a893 --- /dev/null +++ b/docs/public/catalog/components/sheet-spring-up.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n Sheet Spring-Up\n \n \n \n \n \n \n
\n
Share
\n
HyperFrames would like to share a video
\n
\n Decline\n Accept\n
\n
\n \n \n\n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/components/social-proof-card.json b/docs/public/catalog/components/social-proof-card.json new file mode 100644 index 000000000..f97adddf5 --- /dev/null +++ b/docs/public/catalog/components/social-proof-card.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n Social Proof Card\n \n \n \n \n \n \n
\n
\n
\n
\n
HyperFrames
\n
\n
12,000+ creators
\n
\n
Start rendering free
\n
\n
\n
\n
\n
\n
social-proof-card
\n
\n
\n The app-store close as one scene: wordmark, five stars, a proof line, three feature\n icons and a CTA capsule build in a quiet stagger and hold.\n
\n
\n
6 variables — every piece of copy
\n
2.0s — build, then hold
\n
composes — star-rating-fill / cta-lockup stay atomic
\n
\n
\n \n \n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/components/streaming-text.json b/docs/public/catalog/components/streaming-text.json new file mode 100644 index 000000000..421fb43ef --- /dev/null +++ b/docs/public/catalog/components/streaming-text.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n Streaming Text\n \n \n \n \n \n \n

\n You don't need\n a video editor.\n HyperFrames renders\n the HTML you\n already write into\n pixel-perfect, deterministic\n video.\n

\n \n \n\n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/components/typing-indicator.json b/docs/public/catalog/components/typing-indicator.json new file mode 100644 index 000000000..8427a49ad --- /dev/null +++ b/docs/public/catalog/components/typing-indicator.json @@ -0,0 +1 @@ +{"html":"\n\n \n \n \n Typing Indicator\n \n \n \n \n \n \n
\n
\n \n \n \n
\n
\n
\n
\n \n \n\n \n \n\n"} \ No newline at end of file diff --git a/docs/public/catalog/items/ai-chat-reveal/assets/hyperframes-logo-white.svg b/docs/public/catalog/items/ai-chat-reveal/assets/hyperframes-logo-white.svg new file mode 100644 index 000000000..1d5721e7c --- /dev/null +++ b/docs/public/catalog/items/ai-chat-reveal/assets/hyperframes-logo-white.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/catalog/items/marker-checklist-card/assets/fonts/courier-prime-700.woff2 b/docs/public/catalog/items/marker-checklist-card/assets/fonts/courier-prime-700.woff2 new file mode 100644 index 000000000..d9172b309 Binary files /dev/null and b/docs/public/catalog/items/marker-checklist-card/assets/fonts/courier-prime-700.woff2 differ diff --git a/docs/public/catalog/items/marker-checklist-card/assets/fonts/permanent-marker-400.woff2 b/docs/public/catalog/items/marker-checklist-card/assets/fonts/permanent-marker-400.woff2 new file mode 100644 index 000000000..8613f2a70 Binary files /dev/null and b/docs/public/catalog/items/marker-checklist-card/assets/fonts/permanent-marker-400.woff2 differ diff --git a/docs/public/catalog/items/message-thread-reveal/assets/card-image.jpg b/docs/public/catalog/items/message-thread-reveal/assets/card-image.jpg new file mode 100644 index 000000000..7acc94b35 Binary files /dev/null and b/docs/public/catalog/items/message-thread-reveal/assets/card-image.jpg differ diff --git a/docs/public/catalog/items/message-thread-reveal/assets/hyperframes-logo-black.svg b/docs/public/catalog/items/message-thread-reveal/assets/hyperframes-logo-black.svg new file mode 100644 index 000000000..a103b1bad --- /dev/null +++ b/docs/public/catalog/items/message-thread-reveal/assets/hyperframes-logo-black.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/catalog/items/notes-reveal/assets/courier-prime-400.woff2 b/docs/public/catalog/items/notes-reveal/assets/courier-prime-400.woff2 new file mode 100644 index 000000000..7f02be902 Binary files /dev/null and b/docs/public/catalog/items/notes-reveal/assets/courier-prime-400.woff2 differ diff --git a/docs/public/catalog/items/notes-reveal/assets/courier-prime-700.woff2 b/docs/public/catalog/items/notes-reveal/assets/courier-prime-700.woff2 new file mode 100644 index 000000000..d9172b309 Binary files /dev/null and b/docs/public/catalog/items/notes-reveal/assets/courier-prime-700.woff2 differ diff --git a/docs/public/catalog/items/notes-reveal/assets/permanent-marker-400.woff2 b/docs/public/catalog/items/notes-reveal/assets/permanent-marker-400.woff2 new file mode 100644 index 000000000..8613f2a70 Binary files /dev/null and b/docs/public/catalog/items/notes-reveal/assets/permanent-marker-400.woff2 differ diff --git a/docs/public/catalog/items/notification-cascade/assets/desk-backdrop.jpg b/docs/public/catalog/items/notification-cascade/assets/desk-backdrop.jpg new file mode 100644 index 000000000..ae4bb08cd Binary files /dev/null and b/docs/public/catalog/items/notification-cascade/assets/desk-backdrop.jpg differ diff --git a/docs/public/catalog/items/notification-cascade/assets/hyperframes-logo-white.svg b/docs/public/catalog/items/notification-cascade/assets/hyperframes-logo-white.svg new file mode 100644 index 000000000..1d5721e7c --- /dev/null +++ b/docs/public/catalog/items/notification-cascade/assets/hyperframes-logo-white.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/catalog/items/share-sheet-carousel/assets/hyperframes-logo-black.svg b/docs/public/catalog/items/share-sheet-carousel/assets/hyperframes-logo-black.svg new file mode 100644 index 000000000..a103b1bad --- /dev/null +++ b/docs/public/catalog/items/share-sheet-carousel/assets/hyperframes-logo-black.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/catalog/items/share-sheet-carousel/assets/slide-01.jpg b/docs/public/catalog/items/share-sheet-carousel/assets/slide-01.jpg new file mode 100644 index 000000000..510b1da4b Binary files /dev/null and b/docs/public/catalog/items/share-sheet-carousel/assets/slide-01.jpg differ diff --git a/docs/public/catalog/items/share-sheet-carousel/assets/slide-02.jpg b/docs/public/catalog/items/share-sheet-carousel/assets/slide-02.jpg new file mode 100644 index 000000000..2337e9e26 Binary files /dev/null and b/docs/public/catalog/items/share-sheet-carousel/assets/slide-02.jpg differ diff --git a/docs/public/catalog/items/share-sheet-carousel/assets/slide-03.jpg b/docs/public/catalog/items/share-sheet-carousel/assets/slide-03.jpg new file mode 100644 index 000000000..0ffb70e20 Binary files /dev/null and b/docs/public/catalog/items/share-sheet-carousel/assets/slide-03.jpg differ diff --git a/docs/public/catalog/items/share-sheet-carousel/assets/slide-04.jpg b/docs/public/catalog/items/share-sheet-carousel/assets/slide-04.jpg new file mode 100644 index 000000000..a2a728afc Binary files /dev/null and b/docs/public/catalog/items/share-sheet-carousel/assets/slide-04.jpg differ diff --git a/registry/blocks/ai-chat-reveal/ai-chat-reveal.html b/registry/blocks/ai-chat-reveal/ai-chat-reveal.html new file mode 100644 index 000000000..8b15ee0af --- /dev/null +++ b/registry/blocks/ai-chat-reveal/ai-chat-reveal.html @@ -0,0 +1,995 @@ + + + + + + AI Chat Reveal + + + + +
+
+
+ +
+
11:42
+
+ + + + + + + + + + + + +
+
+ +
+
+ + + +
+
Assistant
+
+ + + + + + +
+
+ + + + + + +
+
+ +
How do I turn my HTML into real video?
+ +
+
+ +
+
+
+ + + +
+
+ Ask anything +
+
+
+ + + + +
+
+ + + +
+
+ + + +
+
+
+
+ +
+
+
How
+
Can
+
My
+
+
+
+ + + + + +
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+
It's not magic.
It's HTML.
+
+ Open-source video rendering — write HTML, ship pixel-perfect video. +
+
+ Try HyperFrames + + +
+
HYPERFRAMES.HEYGEN.COM
+
+
+
+ + + + diff --git a/registry/blocks/ai-chat-reveal/assets/hyperframes-logo-white.svg b/registry/blocks/ai-chat-reveal/assets/hyperframes-logo-white.svg new file mode 100644 index 000000000..1d5721e7c --- /dev/null +++ b/registry/blocks/ai-chat-reveal/assets/hyperframes-logo-white.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/registry/blocks/ai-chat-reveal/registry-item.json b/registry/blocks/ai-chat-reveal/registry-item.json new file mode 100644 index 000000000..86985d4c4 --- /dev/null +++ b/registry/blocks/ai-chat-reveal/registry-item.json @@ -0,0 +1,124 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "ai-chat-reveal", + "type": "hyperframes:block", + "title": "AI Chat Reveal", + "description": "A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card", + "tags": ["showcase", "mock-ui", "ai", "chat", "vertical", "ad-template"], + "author": "Miao Yang", + "dimensions": { + "width": 750, + "height": 1624 + }, + "duration": 19.3333, + "variables": [ + { + "id": "botName", + "type": "string", + "role": "content", + "label": "Assistant name", + "description": "Title in the chat header.", + "default": "Assistant" + }, + { + "id": "userMessage", + "type": "string", + "role": "content", + "label": "User message", + "description": "The question typed on the keyboard and sent. Around 40 characters keeps the measured pacing.", + "default": "How do I turn my HTML into real video?" + }, + { + "id": "answer1", + "type": "string", + "role": "content", + "label": "Answer paragraph 1", + "description": "First streamed paragraph.", + "default": "You do not need an editor. HyperFrames renders the HTML you already write into deterministic, pixel-perfect video." + }, + { + "id": "answer2", + "type": "string", + "role": "content", + "label": "Answer paragraph 2", + "description": "Short second beat.", + "default": "It is markup, not magic." + }, + { + "id": "answer3", + "type": "string", + "role": "content", + "label": "Answer paragraph 3", + "description": "Lead-in to the list.", + "default": "What you get out of the box:" + }, + { + "id": "bullet1", + "type": "string", + "role": "content", + "label": "Bullet 1", + "description": "First list item.", + "default": "A catalog of motion primitives you install and own" + }, + { + "id": "bullet2", + "type": "string", + "role": "content", + "label": "Bullet 2", + "description": "Second list item.", + "default": "GSAP timelines that seek to any frame" + }, + { + "id": "bullet3", + "type": "string", + "role": "content", + "label": "Bullet 3", + "description": "Third list item.", + "default": "4K renders from a single CLI command" + }, + { + "id": "ecHeadline", + "type": "string", + "role": "content", + "label": "End-card headline", + "description": "Closing card headline. A | breaks the line.", + "default": "It's not magic.|It's HTML." + }, + { + "id": "ecSub", + "type": "string", + "role": "content", + "label": "End-card subline", + "description": "Supporting sentence on the closing card.", + "default": "Open-source video rendering — write HTML, ship pixel-perfect video." + }, + { + "id": "ecCta", + "type": "string", + "role": "content", + "label": "End-card CTA", + "description": "Label on the closing card button.", + "default": "Try HyperFrames" + }, + { + "id": "ecFooter", + "type": "string", + "role": "content", + "label": "End-card footer", + "description": "Letter-spaced line at the very bottom.", + "default": "HYPERFRAMES.HEYGEN.COM" + } + ], + "files": [ + { + "path": "ai-chat-reveal.html", + "target": "compositions/ai-chat-reveal.html", + "type": "hyperframes:composition" + }, + { + "path": "assets/hyperframes-logo-white.svg", + "target": "assets/hyperframes-logo-white.svg", + "type": "hyperframes:asset" + } + ] +} diff --git a/registry/blocks/message-thread-reveal/assets/card-image.jpg b/registry/blocks/message-thread-reveal/assets/card-image.jpg new file mode 100644 index 000000000..7acc94b35 Binary files /dev/null and b/registry/blocks/message-thread-reveal/assets/card-image.jpg differ diff --git a/registry/blocks/message-thread-reveal/assets/hyperframes-logo-black.svg b/registry/blocks/message-thread-reveal/assets/hyperframes-logo-black.svg new file mode 100644 index 000000000..a103b1bad --- /dev/null +++ b/registry/blocks/message-thread-reveal/assets/hyperframes-logo-black.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/registry/blocks/message-thread-reveal/message-thread-reveal.html b/registry/blocks/message-thread-reveal/message-thread-reveal.html new file mode 100644 index 000000000..e06f7bbaf --- /dev/null +++ b/registry/blocks/message-thread-reveal/message-thread-reveal.html @@ -0,0 +1,1455 @@ + + + + + + Message Thread Reveal + + + + +
+
+
+
+
+
+
9:41
+ + + + + + + + + + + + + + +
12
+
R
+
Rachel›
+ + + + +
+
+
+
what r u using for the launch video??
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
wait look 👀
+
Delivered
+
+
+
+
+
+ +
+
+
+ HyperFrames | Write HTML, render pixel-perfect video +
+
hyperframes.heygen.com
+
+
›
+
+
+
+
+
+
OMG IT'S HTML
+
+
+
🤯🤯🤯
+
+
+
+
renders in 4K. no editor
+
Delivered
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
where did u find this
+
+
+
+
on heygen
+
+
+
+
u just write plain html tags
+
+
+
+
+
the code is yours forever
+
Delivered
+
+
+
+
installing rn
+
+
+
ty bestie 💚
+
+
+
+
+
+
Message
+
+ o + wa + wai + wait + wait + wait l + wait lo + wait loo + wait look + wait look + wait look 👀 + r + re + ren + rend + rende + render + renders + renders + renders i + renders in + renders in + renders in 4 + renders in 4K + renders in 4K. + renders in 4K. + renders in 4K. n + renders in 4K. no + renders in 4K. no + renders in 4K. no e + renders in 4K. no ed + renders in 4K. no edi + renders in 4K. no edit + renders in 4K. no edito + renders in 4K. no editor + o + on + on + on h + on he + on hey + on heyg + on heyge + on heygen + u + u + u j + u ju + u jus + u just + u just + u just w + u just wr + u just wri + u just writ + u just write + u just write + u just write p + u just write pl + u just write pla + u just write plai + u just write plain + u just write plain + u just write plain h + u just write plain ht + u just write plain htm + u just write plain html + u just write plain html + u just write plain html t + u just write plain html ta + u just write plain html tag + u just write plain html tags + r + th + the + the + the c + the co + the cod + the code + the code + the code i + the code is + the code is + the code is y + the code is yo + the code is you + the code is your + the code is yours + the code is yours + the code is yours f + the code is yours fo + the code is yours for + the code is yours fore + the code is yours forev + the code is yours foreve + the code is yours forever +
+ + + + + + +
+ + + +
+
+
+
+
+ +
+ + + + + + + + + + + + + + + +
+
12,000+ creators
+
+ + + +
+
+ + + +
+
+ + + +
+
+
Write
+
plain HTML
+
+
+
Render
+
pixel-perfect
+
+
+
Own
+
every line
+
+
Start rendering free
+
+
+
+ + + diff --git a/registry/blocks/message-thread-reveal/registry-item.json b/registry/blocks/message-thread-reveal/registry-item.json new file mode 100644 index 000000000..62fce46af --- /dev/null +++ b/registry/blocks/message-thread-reveal/registry-item.json @@ -0,0 +1,73 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "message-thread-reveal", + "type": "hyperframes:block", + "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", + "tags": ["showcase", "mock-ui", "chat", "vertical", "ad-template"], + "author": "Miao Yang", + "dimensions": { + "width": 1080, + "height": 1920 + }, + "duration": 25.7667, + "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": "cardTitle", + "type": "string", + "role": "content", + "label": "Link card title", + "description": "Title on the shared link card.", + "default": "HyperFrames | Write HTML, render pixel-perfect video" + }, + { + "id": "cardDomain", + "type": "string", + "role": "content", + "label": "Link card domain", + "description": "Domain line under the card title.", + "default": "hyperframes.heygen.com" + }, + { + "id": "ecProof", + "type": "string", + "role": "content", + "label": "End-card proof", + "description": "Social-proof line under the stars.", + "default": "12,000+ creators" + }, + { + "id": "ecCta", + "type": "string", + "role": "content", + "label": "End-card CTA", + "description": "Label on the closing card button.", + "default": "Start rendering free" + } + ], + "files": [ + { + "path": "message-thread-reveal.html", + "target": "compositions/message-thread-reveal.html", + "type": "hyperframes:composition" + }, + { + "path": "assets/card-image.jpg", + "target": "assets/card-image.jpg", + "type": "hyperframes:asset" + }, + { + "path": "assets/hyperframes-logo-black.svg", + "target": "assets/hyperframes-logo-black.svg", + "type": "hyperframes:asset" + } + ] +} diff --git a/registry/blocks/notes-reveal/assets/courier-prime-400.woff2 b/registry/blocks/notes-reveal/assets/courier-prime-400.woff2 new file mode 100644 index 000000000..7f02be902 Binary files /dev/null and b/registry/blocks/notes-reveal/assets/courier-prime-400.woff2 differ diff --git a/registry/blocks/notes-reveal/assets/courier-prime-700.woff2 b/registry/blocks/notes-reveal/assets/courier-prime-700.woff2 new file mode 100644 index 000000000..d9172b309 Binary files /dev/null and b/registry/blocks/notes-reveal/assets/courier-prime-700.woff2 differ diff --git a/registry/blocks/notes-reveal/assets/permanent-marker-400.woff2 b/registry/blocks/notes-reveal/assets/permanent-marker-400.woff2 new file mode 100644 index 000000000..8613f2a70 Binary files /dev/null and b/registry/blocks/notes-reveal/assets/permanent-marker-400.woff2 differ diff --git a/registry/blocks/notes-reveal/notes-reveal.html b/registry/blocks/notes-reveal/notes-reveal.html new file mode 100644 index 000000000..313e19942 --- /dev/null +++ b/registry/blocks/notes-reveal/notes-reveal.html @@ -0,0 +1,1452 @@ + + + + + Notes Reveal + + + +
+ +
+
+
+
+
+ THE POWER +
+
+
+ OF +
+
+ + ONEFILE +
+ +
WRITE
+
HTML
+ + + +
+
RENDER
+
IN 4K
+ + + +
+
SHIP
+
TODAY
+ + + +
+
+
+
+ + + +
+
+
+
+ + +
+
+ +
9:41
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Things nobody told me +
+
+ about video. +
+
+ my videos sucked +
+
+ my tools cost $$$ +
+
+ and re-edits never end. +
+
+ then i tried writing html only +
+
+ started HyperFrames three weeks ago +
+
+ the grind is gone, but more than that — +
+
+ I ship videos weekly. +
+
+
+
+ + +
+
+ Aa +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
The
+
My
+
I
+
+
+
q
+
w
+
e
+
r
+
t
+
y
+
u
+
i
+
o
+
p
+
a
+
s
+
d
+
f
+
g
+
h
+
j
+
k
+
l
+
z
+
x
+
c
+
v
+
b
+
n
+
m
+
+ + + +
+
+ + + + +
+
+ 123 +
+
+ + + + + + +
+
+ space +
+
+ + + +
+ + + + + + + + + +
+
+
+
+ + + + + diff --git a/registry/blocks/notes-reveal/registry-item.json b/registry/blocks/notes-reveal/registry-item.json new file mode 100644 index 000000000..d84594c5e --- /dev/null +++ b/registry/blocks/notes-reveal/registry-item.json @@ -0,0 +1,110 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "notes-reveal", + "type": "hyperframes:block", + "title": "Notes Reveal", + "description": "A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist", + "tags": ["showcase", "mock-ui", "notes", "typing", "vertical", "ad-template"], + "author": "Miao Yang", + "dimensions": { + "width": 1080, + "height": 1920 + }, + "duration": 24.85, + "variables": [ + { + "id": "titleL1", + "type": "string", + "role": "content", + "label": "Note title line 1", + "description": "First line of the note title.", + "default": "Things nobody told me" + }, + { + "id": "titleL2", + "type": "string", + "role": "content", + "label": "Note title line 2", + "description": "Second line of the note title.", + "default": "about video." + }, + { + "id": "cardTop", + "type": "string", + "role": "content", + "label": "Card headline top", + "description": "First marker line on the closing card.", + "default": "THE POWER" + }, + { + "id": "check1Label", + "type": "string", + "role": "content", + "label": "Checklist 1 label", + "description": "Typewriter label of the first checklist row.", + "default": "WRITE" + }, + { + "id": "check1Value", + "type": "string", + "role": "content", + "label": "Checklist 1 value", + "description": "Marker value of the first checklist row.", + "default": "HTML" + }, + { + "id": "check2Label", + "type": "string", + "role": "content", + "label": "Checklist 2 label", + "description": "Typewriter label of the second checklist row.", + "default": "RENDER" + }, + { + "id": "check2Value", + "type": "string", + "role": "content", + "label": "Checklist 2 value", + "description": "Marker value of the second checklist row.", + "default": "IN 4K" + }, + { + "id": "check3Label", + "type": "string", + "role": "content", + "label": "Checklist 3 label", + "description": "Typewriter label of the third checklist row.", + "default": "SHIP" + }, + { + "id": "check3Value", + "type": "string", + "role": "content", + "label": "Checklist 3 value", + "description": "Marker value of the third checklist row.", + "default": "TODAY" + } + ], + "files": [ + { + "path": "notes-reveal.html", + "target": "compositions/notes-reveal.html", + "type": "hyperframes:composition" + }, + { + "path": "assets/permanent-marker-400.woff2", + "target": "assets/permanent-marker-400.woff2", + "type": "hyperframes:asset" + }, + { + "path": "assets/courier-prime-400.woff2", + "target": "assets/courier-prime-400.woff2", + "type": "hyperframes:asset" + }, + { + "path": "assets/courier-prime-700.woff2", + "target": "assets/courier-prime-700.woff2", + "type": "hyperframes:asset" + } + ] +} diff --git a/registry/blocks/notification-cascade/assets/desk-backdrop.jpg b/registry/blocks/notification-cascade/assets/desk-backdrop.jpg new file mode 100644 index 000000000..ae4bb08cd Binary files /dev/null and b/registry/blocks/notification-cascade/assets/desk-backdrop.jpg differ diff --git a/registry/blocks/notification-cascade/assets/hyperframes-logo-white.svg b/registry/blocks/notification-cascade/assets/hyperframes-logo-white.svg new file mode 100644 index 000000000..1d5721e7c --- /dev/null +++ b/registry/blocks/notification-cascade/assets/hyperframes-logo-white.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/registry/blocks/notification-cascade/notification-cascade.html b/registry/blocks/notification-cascade/notification-cascade.html new file mode 100644 index 000000000..32ac997ec --- /dev/null +++ b/registry/blocks/notification-cascade/notification-cascade.html @@ -0,0 +1,514 @@ + + + + + + Notification Cascade + + + + +
+
+ + +
+ +
+
+ + +
+
+
+
+ + + + Show less +
+
+ + + +
+
+ +
+
+ + + +
+
New render
+
Launch video is ready.
+
NOW
+
HyperFrames
+
+
+
+ + + +
+
New render
+
All checks passed.
+
NOW
+
HyperFrames
+
+
+
+ + + +
+
New render
+
4K render done in 92s.
+
NOW
+
HyperFrames
+
+
+
+ + + +
+
New render
+
Published to the catalog.
+
NOW
+
HyperFrames
+
+
+
+ + +
+
+
+
SHIP VIDEO
+
FROM HTML
+ HyperFrames + +
+
+ + +
+
+
+
+ + + + diff --git a/registry/blocks/notification-cascade/registry-item.json b/registry/blocks/notification-cascade/registry-item.json new file mode 100644 index 000000000..7d6e06b06 --- /dev/null +++ b/registry/blocks/notification-cascade/registry-item.json @@ -0,0 +1,105 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "notification-cascade", + "type": "hyperframes:block", + "title": "Notification Cascade", + "description": "Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card", + "tags": ["showcase", "mock-ui", "notification", "vertical", "ad-template"], + "author": "Miao Yang", + "dimensions": { + "width": 1080, + "height": 1920 + }, + "duration": 14, + "variables": [ + { + "id": "notifTitle", + "type": "string", + "role": "content", + "label": "Notification title", + "description": "Bold first line on every banner.", + "default": "New render" + }, + { + "id": "message1", + "type": "string", + "role": "content", + "label": "Message 1", + "description": "Subtitle of the first banner to land.", + "default": "Launch video is ready." + }, + { + "id": "message2", + "type": "string", + "role": "content", + "label": "Message 2", + "description": "Subtitle of the second banner.", + "default": "All checks passed." + }, + { + "id": "message3", + "type": "string", + "role": "content", + "label": "Message 3", + "description": "Subtitle of the third banner.", + "default": "4K render done in 92s." + }, + { + "id": "message4", + "type": "string", + "role": "content", + "label": "Message 4", + "description": "Subtitle of the fourth banner.", + "default": "Published to the catalog." + }, + { + "id": "appName", + "type": "string", + "role": "content", + "label": "App name", + "description": "Small credit in the corner of every banner.", + "default": "HyperFrames" + }, + { + "id": "headlineTop", + "type": "string", + "role": "content", + "label": "End-card line 1", + "description": "First line of the closing card.", + "default": "SHIP VIDEO" + }, + { + "id": "headlineAccent", + "type": "string", + "role": "content", + "label": "End-card line 2", + "description": "Accented second line of the closing card.", + "default": "FROM HTML" + }, + { + "id": "footerText", + "type": "string", + "role": "content", + "label": "End-card footer", + "description": "URL or call to action under the headline.", + "default": "hyperframes.heygen.com" + } + ], + "files": [ + { + "path": "notification-cascade.html", + "target": "compositions/notification-cascade.html", + "type": "hyperframes:composition" + }, + { + "path": "assets/desk-backdrop.jpg", + "target": "assets/desk-backdrop.jpg", + "type": "hyperframes:asset" + }, + { + "path": "assets/hyperframes-logo-white.svg", + "target": "assets/hyperframes-logo-white.svg", + "type": "hyperframes:asset" + } + ] +} diff --git a/registry/blocks/share-sheet-carousel/assets/hyperframes-logo-black.svg b/registry/blocks/share-sheet-carousel/assets/hyperframes-logo-black.svg new file mode 100644 index 000000000..a103b1bad --- /dev/null +++ b/registry/blocks/share-sheet-carousel/assets/hyperframes-logo-black.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/registry/blocks/share-sheet-carousel/assets/slide-01.jpg b/registry/blocks/share-sheet-carousel/assets/slide-01.jpg new file mode 100644 index 000000000..510b1da4b Binary files /dev/null and b/registry/blocks/share-sheet-carousel/assets/slide-01.jpg differ diff --git a/registry/blocks/share-sheet-carousel/assets/slide-02.jpg b/registry/blocks/share-sheet-carousel/assets/slide-02.jpg new file mode 100644 index 000000000..2337e9e26 Binary files /dev/null and b/registry/blocks/share-sheet-carousel/assets/slide-02.jpg differ diff --git a/registry/blocks/share-sheet-carousel/assets/slide-03.jpg b/registry/blocks/share-sheet-carousel/assets/slide-03.jpg new file mode 100644 index 000000000..0ffb70e20 Binary files /dev/null and b/registry/blocks/share-sheet-carousel/assets/slide-03.jpg differ diff --git a/registry/blocks/share-sheet-carousel/assets/slide-04.jpg b/registry/blocks/share-sheet-carousel/assets/slide-04.jpg new file mode 100644 index 000000000..a2a728afc Binary files /dev/null and b/registry/blocks/share-sheet-carousel/assets/slide-04.jpg differ diff --git a/registry/blocks/share-sheet-carousel/registry-item.json b/registry/blocks/share-sheet-carousel/registry-item.json new file mode 100644 index 000000000..fba0cf2a3 --- /dev/null +++ b/registry/blocks/share-sheet-carousel/registry-item.json @@ -0,0 +1,96 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "share-sheet-carousel", + "type": "hyperframes:block", + "title": "Share-Sheet Carousel", + "description": "A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap", + "tags": ["showcase", "mock-ui", "share-sheet", "vertical", "ad-template"], + "author": "Miao Yang", + "dimensions": { + "width": 1080, + "height": 1920 + }, + "duration": 7.2333, + "variables": [ + { + "id": "shareTitle", + "type": "string", + "role": "content", + "label": "Sheet title", + "description": "Heading at the top of the share sheet.", + "default": "Share" + }, + { + "id": "senderName", + "type": "string", + "role": "content", + "label": "Sender", + "description": "Bold name in the sheet subtitle.", + "default": "HyperFrames" + }, + { + "id": "itemLabel", + "type": "string", + "role": "content", + "label": "Item", + "description": "What the sender is offering, completing the sentence \"… would like to share …\".", + "default": "a video" + }, + { + "id": "stripText", + "type": "string", + "role": "content", + "label": "Brand strip", + "description": "Small-caps line under the preview, beside the logo.", + "default": "OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML" + }, + { + "id": "acceptLabel", + "type": "string", + "role": "content", + "label": "Accept label", + "description": "Right-hand action button.", + "default": "Accept" + }, + { + "id": "declineLabel", + "type": "string", + "role": "content", + "label": "Decline label", + "description": "Left-hand action button.", + "default": "Decline" + } + ], + "files": [ + { + "path": "share-sheet-carousel.html", + "target": "compositions/share-sheet-carousel.html", + "type": "hyperframes:composition" + }, + { + "path": "assets/slide-01.jpg", + "target": "assets/slide-01.jpg", + "type": "hyperframes:asset" + }, + { + "path": "assets/slide-02.jpg", + "target": "assets/slide-02.jpg", + "type": "hyperframes:asset" + }, + { + "path": "assets/slide-03.jpg", + "target": "assets/slide-03.jpg", + "type": "hyperframes:asset" + }, + { + "path": "assets/slide-04.jpg", + "target": "assets/slide-04.jpg", + "type": "hyperframes:asset" + }, + { + "path": "assets/hyperframes-logo-black.svg", + "target": "assets/hyperframes-logo-black.svg", + "type": "hyperframes:asset" + } + ] +} diff --git a/registry/blocks/share-sheet-carousel/share-sheet-carousel.html b/registry/blocks/share-sheet-carousel/share-sheet-carousel.html new file mode 100644 index 000000000..e075a0321 --- /dev/null +++ b/registry/blocks/share-sheet-carousel/share-sheet-carousel.html @@ -0,0 +1,351 @@ + + + + + + Share-Sheet Carousel + + + + +
+
+ + + + +
+
+
Share
+
HyperFrames would like to share a video
+
+ + + + +
+ HyperFrames +
OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML
+
+
+
+
+
+
Decline
+
Accept
+
+
+
+
+ + + diff --git a/registry/catalog-artifact/local-vectors.bin b/registry/catalog-artifact/local-vectors.bin index c9c262e3a..01aff786f 100644 Binary files a/registry/catalog-artifact/local-vectors.bin and b/registry/catalog-artifact/local-vectors.bin differ diff --git a/registry/catalog-artifact/local-vectors.json b/registry/catalog-artifact/local-vectors.json index 92a097901..21059a741 100644 --- a/registry/catalog-artifact/local-vectors.json +++ b/registry/catalog-artifact/local-vectors.json @@ -2,8 +2,9 @@ "model": "bge-small-en-v1.5", "modelRevision": "ea104dacec62c0de699686887e3f920caeb4f3e3", "dimensions": 384, - "revision": "a823e13eb98937e709ea70bbdc5f9e6dc0be1feed6346fb1d8746069fea6796b", + "revision": "f5cb199165f8e7faec1f52713596613af0ef6b5495938341233a63167ee43d3a", "names": [ + "ai-chat-reveal", "ai-generation-canvas", "ai-prompt-flow", "animated-bar-chart", @@ -52,6 +53,8 @@ "card-resize", "char-slam-explode", "chart-story", + "chat-message", + "chat-thread", "checkout-flow", "chromatic-aberration-wipe", "chromatic-radial-split", @@ -180,11 +183,13 @@ "lt-stack-bars", "macos-notification", "macos-tahoe-liquid-glass", + "marker-checklist-card", "marker-highlight", "match-cut", "matrix-decode", "menu-morph", "mesh-gradient-bg", + "message-thread-reveal", "micro-transitions", "mk-background", "mk-callout-highlight", @@ -204,6 +209,9 @@ "native-notification-pop", "news-ticker", "north-korea-locked-down", + "notes-reveal", + "notes-typing", + "notification-cascade", "notification-pileup", "notification-stack", "number-pop-in", @@ -249,14 +257,17 @@ "segmentation-flood", "separator", "settings-toggle-flow", + "share-sheet-carousel", "shared-axis-y", "shared-axis-z", + "sheet-spring-up", "shimmer-sweep", "signup-flow", "simulated-cursor", "skeleton-reveal", "slit-scan-reveal", "slot-machine-roll", + "social-proof-card", "soft-blob-touch", "soft-blur-in", "spain-map", @@ -276,6 +287,7 @@ "stitched-text-draw", "stop-motion-cadence", "store-badge-lockup", + "streaming-text", "strikethrough-replace", "success-check", "svg-line-draw-loader", @@ -322,6 +334,7 @@ "type-match-cut", "typed-prompt", "typewriter", + "typing-indicator", "ui-3d-reveal", "ui-focus-zoom", "us-map", diff --git a/registry/components/chat-message/chat-message.html b/registry/components/chat-message/chat-message.html new file mode 100644 index 000000000..db4e57360 --- /dev/null +++ b/registry/components/chat-message/chat-message.html @@ -0,0 +1,304 @@ + + + + + + Chat Message + + + + + diff --git a/registry/components/chat-message/demo.html b/registry/components/chat-message/demo.html new file mode 100644 index 000000000..ae7c16ddb --- /dev/null +++ b/registry/components/chat-message/demo.html @@ -0,0 +1,441 @@ + + + + + + Chat Message + + + + +
+
+
+
+
+
type: recv
+
+
+
+ what r u using for the launch video?? +
+
+
+
+
+
wait look 👀
+
Delivered
+
+
+
+
🤯🤯🤯
+
+
+
+ +
+
+
+
+ HyperFrames — Write HTML, render pixel-perfect videohyperframes.heygen.com› +
+
+
+
+
+
+
chat-message
+
+
+ ONE message arrives on the measured entry, growing from its sender's corner. The + type is an enum, switched like marker-highlight's style — the demo cycles all + five. +
+
+
type — recv / sent / emoji / img / card
+
measured — pop-in scale .75 / 0.12s power2.out
+
the atom — chat-thread builds conversations from it
+
+
+
+
+ + + diff --git a/registry/components/chat-message/registry-item.json b/registry/components/chat-message/registry-item.json new file mode 100644 index 000000000..f3edb7c12 --- /dev/null +++ b/registry/components/chat-message/registry-item.json @@ -0,0 +1,108 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "chat-message", + "type": "hyperframes:component", + "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", + "tags": ["video-primitive", "chat", "mock-ui", "message"], + "author": "Miao Yang", + "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" + } + ] + } + ], + "files": [ + { + "path": "chat-message.html", + "target": "compositions/components/chat-message.html", + "type": "hyperframes:snippet" + } + ] +} diff --git a/registry/components/chat-thread/chat-thread.html b/registry/components/chat-thread/chat-thread.html new file mode 100644 index 000000000..595802b4d --- /dev/null +++ b/registry/components/chat-thread/chat-thread.html @@ -0,0 +1,662 @@ + + + + + + Chat Thread + + + + + diff --git a/registry/components/chat-thread/demo.html b/registry/components/chat-thread/demo.html new file mode 100644 index 000000000..195f299d4 --- /dev/null +++ b/registry/components/chat-thread/demo.html @@ -0,0 +1,762 @@ + + + + + + Chat Thread + + + + +
+
+
+
+
+
9:41
+ + + + + + + + + + + + + + +
12
+
R
+
Rachel›
+ + + + +
+
+
+
+
Message
+ + + + + + +
+
+
+
+
chat-thread
+
+
+ The full conversation at film fidelity: bubble tails, a Delivered receipt, emoji rows, a + link card. Each message picks its type by prefix; heights are measured at mount and the + choreography is generated to fit. +
+
+
recv: / sent: / emoji: / img / card: — the type switch
+
measured — pop-in scale .75 / 0.12s, expo lockstep
+
any thread — messages are one variable
+
+
+
+
+ + + diff --git a/registry/components/chat-thread/registry-item.json b/registry/components/chat-thread/registry-item.json new file mode 100644 index 000000000..0e4dcaff1 --- /dev/null +++ b/registry/components/chat-thread/registry-item.json @@ -0,0 +1,92 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "chat-thread", + "type": "hyperframes:component", + "title": "Chat Thread", + "description": "The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits", + "tags": ["motion-primitive", "chat", "mock-ui", "conversation", "vertical"], + "author": "Miao Yang", + "variables": [ + { + "id": "contact", + "type": "string", + "role": "content", + "label": "Contact", + "description": "Name in the thread header; the avatar shows its first letter.", + "default": "Rachel" + }, + { + "id": "unread", + "type": "number", + "role": "content", + "label": "Unread badge", + "description": "Count in the back-button badge. 0 hides it.", + "default": 12, + "min": 0, + "max": 99, + "step": 1 + }, + { + "id": "messages", + "type": "string", + "role": "content", + "label": "Messages", + "description": "Pipe-separated thread. Each entry picks its type by prefix: recv: or sent: for a text bubble, emoji: for a large emoji row, img for a media placeholder, card:Title~domain for a link card. Example: recv:hey|sent:look 👀|card:HyperFrames~hyperframes.heygen.com|emoji:🤯🤯🤯", + "default": "recv:what r u using for the launch video??|sent:wait look 👀|card:HyperFrames — Write HTML, render pixel-perfect video~hyperframes.heygen.com|recv:OMG IT'S HTML|emoji:🤯🤯🤯|sent:renders in 4K. no editor" + }, + { + "id": "beat", + "type": "number", + "role": "timing", + "label": "Beat", + "description": "Seconds between message arrivals.", + "default": 1.7, + "min": 0.8, + "max": 3, + "step": 0.1 + }, + { + "id": "dots", + "type": "enum", + "role": "timing", + "label": "Typing dots", + "description": "Show the three-dot indicator before received messages.", + "default": "on", + "options": [ + { + "value": "on", + "label": "On" + }, + { + "value": "off", + "label": "Off" + } + ] + }, + { + "id": "receipt", + "type": "enum", + "role": "content", + "label": "Delivered receipt", + "description": "Show Delivered under the last sent bubble, as iMessage does.", + "default": "on", + "options": [ + { + "value": "on", + "label": "On" + }, + { + "value": "off", + "label": "Off" + } + ] + } + ], + "files": [ + { + "path": "chat-thread.html", + "target": "compositions/components/chat-thread.html", + "type": "hyperframes:snippet" + } + ] +} diff --git a/registry/components/marker-checklist-card/assets/fonts/courier-prime-700.woff2 b/registry/components/marker-checklist-card/assets/fonts/courier-prime-700.woff2 new file mode 100644 index 000000000..d9172b309 Binary files /dev/null and b/registry/components/marker-checklist-card/assets/fonts/courier-prime-700.woff2 differ diff --git a/registry/components/marker-checklist-card/assets/fonts/permanent-marker-400.woff2 b/registry/components/marker-checklist-card/assets/fonts/permanent-marker-400.woff2 new file mode 100644 index 000000000..8613f2a70 Binary files /dev/null and b/registry/components/marker-checklist-card/assets/fonts/permanent-marker-400.woff2 differ diff --git a/registry/components/marker-checklist-card/demo.html b/registry/components/marker-checklist-card/demo.html new file mode 100644 index 000000000..06044bd59 --- /dev/null +++ b/registry/components/marker-checklist-card/demo.html @@ -0,0 +1,436 @@ + + + + + + Marker Checklist Card + + + + +
+
+
+
+
+
+ THE POWER +
+
+
+ OF +
+ + + +
+ ONEFILE +
+
+
WRITE
+
HTML
+ + + +
+
+
+
RENDER
+
IN 4K
+ + + +
+
+
+
SHIP
+
TODAY
+ + + +
+
+
+
+
+
+
marker-checklist-card
+
+
+ A hand-lettered paper card: marker headline, a drawn ellipse around one word, and three + checklist rows whose checks draw themselves on. +
+
+
0.55s — the ellipse draws around the word
+
3 rows — label / value / self-drawing check
+
+ Open faces — Permanent Marker (Apache-2.0) + Courier Prime (OFL 1.1) +
+
+
+
+
+ + + diff --git a/registry/components/marker-checklist-card/marker-checklist-card.html b/registry/components/marker-checklist-card/marker-checklist-card.html new file mode 100644 index 000000000..bbf1a723a --- /dev/null +++ b/registry/components/marker-checklist-card/marker-checklist-card.html @@ -0,0 +1,306 @@ + + + + + + Marker Checklist Card + + + + + diff --git a/registry/components/marker-checklist-card/registry-item.json b/registry/components/marker-checklist-card/registry-item.json new file mode 100644 index 000000000..67eee7091 --- /dev/null +++ b/registry/components/marker-checklist-card/registry-item.json @@ -0,0 +1,108 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "marker-checklist-card", + "type": "hyperframes:component", + "title": "Marker Checklist Card", + "description": "A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows", + "tags": ["motion-primitive", "handwritten", "checklist", "paper", "marker"], + "author": "Miao Yang", + "variables": [ + { + "id": "top", + "type": "string", + "role": "content", + "label": "Headline top", + "description": "First marker line.", + "default": "THE POWER" + }, + { + "id": "mid", + "type": "string", + "role": "content", + "label": "Headline middle", + "description": "Small connecting word under the underline.", + "default": "OF" + }, + { + "id": "circled", + "type": "string", + "role": "content", + "label": "Circled word", + "description": "The word the marker ellipse draws around.", + "default": "ONE" + }, + { + "id": "rest", + "type": "string", + "role": "content", + "label": "Headline rest", + "description": "The rest of the bottom line.", + "default": "FILE" + }, + { + "id": "l1", + "type": "string", + "role": "content", + "label": "Row 1 label", + "description": "Typewriter label of row 1.", + "default": "WRITE" + }, + { + "id": "v1", + "type": "string", + "role": "content", + "label": "Row 1 value", + "description": "Marker value of row 1.", + "default": "HTML" + }, + { + "id": "l2", + "type": "string", + "role": "content", + "label": "Row 2 label", + "description": "Typewriter label of row 2.", + "default": "RENDER" + }, + { + "id": "v2", + "type": "string", + "role": "content", + "label": "Row 2 value", + "description": "Marker value of row 2.", + "default": "IN 4K" + }, + { + "id": "l3", + "type": "string", + "role": "content", + "label": "Row 3 label", + "description": "Typewriter label of row 3.", + "default": "SHIP" + }, + { + "id": "v3", + "type": "string", + "role": "content", + "label": "Row 3 value", + "description": "Marker value of row 3.", + "default": "TODAY" + } + ], + "files": [ + { + "path": "marker-checklist-card.html", + "target": "compositions/components/marker-checklist-card.html", + "type": "hyperframes:snippet" + }, + { + "path": "assets/fonts/permanent-marker-400.woff2", + "target": "assets/fonts/permanent-marker-400.woff2", + "type": "hyperframes:asset" + }, + { + "path": "assets/fonts/courier-prime-700.woff2", + "target": "assets/fonts/courier-prime-700.woff2", + "type": "hyperframes:asset" + } + ] +} diff --git a/registry/components/notes-typing/demo.html b/registry/components/notes-typing/demo.html new file mode 100644 index 000000000..ecf3f8fba --- /dev/null +++ b/registry/components/notes-typing/demo.html @@ -0,0 +1,468 @@ + + + + + + Notes Typing + + + + +
+
+
+
+
+
+ + + +
+
+ + + +
+
+
+ Things nobody told me
about video. +
+
+
+
+
+ Aa + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
notes-typing
+
+
+ The notes-app confession: body lines typed on the measured human keystroke rhythm, the + caret riding every landed character. +
+
+
30-gap table — the measured keystroke rhythm
+
0.85s — the breath before a new thought
+
caret — measured at mount, rides every char
+
+
+
+
+ + + diff --git a/registry/components/notes-typing/notes-typing.html b/registry/components/notes-typing/notes-typing.html new file mode 100644 index 000000000..6a59379e8 --- /dev/null +++ b/registry/components/notes-typing/notes-typing.html @@ -0,0 +1,347 @@ + + + + + + Notes Typing + + + + + diff --git a/registry/components/notes-typing/registry-item.json b/registry/components/notes-typing/registry-item.json new file mode 100644 index 000000000..a7bbc0e47 --- /dev/null +++ b/registry/components/notes-typing/registry-item.json @@ -0,0 +1,45 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "notes-typing", + "type": "hyperframes:component", + "title": "Notes Typing", + "description": "The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter", + "tags": ["motion-primitive", "notes", "typing", "mock-ui", "vertical"], + "author": "Miao Yang", + "variables": [ + { + "id": "title", + "type": "string", + "role": "content", + "label": "Title", + "description": "Bold note title. A | breaks the line.", + "default": "Things nobody told me|about video." + }, + { + "id": "lines", + "type": "string", + "role": "content", + "label": "Lines", + "description": "Pipe-separated body lines, typed one after another.", + "default": "my videos sucked|my tools cost $$$|and re-edits never end." + }, + { + "id": "speed", + "type": "number", + "role": "timing", + "label": "Speed", + "description": "Typing speed multiplier. 1 is the measured human rhythm.", + "default": 1, + "min": 0.5, + "max": 2, + "step": 0.1 + } + ], + "files": [ + { + "path": "notes-typing.html", + "target": "compositions/components/notes-typing.html", + "type": "hyperframes:snippet" + } + ] +} diff --git a/registry/components/sheet-spring-up/demo.html b/registry/components/sheet-spring-up/demo.html new file mode 100644 index 000000000..520320c14 --- /dev/null +++ b/registry/components/sheet-spring-up/demo.html @@ -0,0 +1,330 @@ + + + + + + Sheet Spring Up + + + + +
+
+
+
+
+
+
+
+
+
Share
+
HyperFrames would like to share a video
+
+
+ + + +
+
+
+
Decline
+
Accept
+
+
+
+
+
+
sheet-spring-up
+
+
+ A bottom sheet rushes up from below the frame on a real spring sampled frame by frame — + overshoot, then a long soft settle. No ease approximates it; the table ships. +
+
+
22 steps — the sampled y/alpha table
+
192px — overshoot past rest
+
0.72s — launch to settle
+
+
+
+
+ + + + diff --git a/registry/components/sheet-spring-up/registry-item.json b/registry/components/sheet-spring-up/registry-item.json new file mode 100644 index 000000000..1ac225ac9 --- /dev/null +++ b/registry/components/sheet-spring-up/registry-item.json @@ -0,0 +1,54 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "sheet-spring-up", + "type": "hyperframes:component", + "title": "Sheet Spring-Up", + "description": "A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease", + "tags": ["video-primitive", "sheet", "spring", "mock-ui", "overlay"], + "author": "Miao Yang", + "variables": [ + { + "id": "width", + "type": "number", + "role": "style", + "label": "Width", + "description": "Sheet width in pixels.", + "default": 668, + "min": 400, + "max": 900, + "step": 4, + "unit": "px" + }, + { + "id": "radius", + "type": "number", + "role": "style", + "label": "Radius", + "description": "Sheet corner radius.", + "default": 34, + "min": 16, + "max": 48, + "step": 1, + "unit": "px" + }, + { + "id": "tone", + "type": "enum", + "role": "style", + "label": "Tone", + "description": "Light is the reference near-white sheet; dark is the raised surface token.", + "default": "light", + "options": [ + { "value": "light", "label": "Light" }, + { "value": "dark", "label": "Dark" } + ] + } + ], + "files": [ + { + "path": "sheet-spring-up.html", + "target": "compositions/components/sheet-spring-up.html", + "type": "hyperframes:snippet" + } + ] +} diff --git a/registry/components/sheet-spring-up/sheet-spring-up.html b/registry/components/sheet-spring-up/sheet-spring-up.html new file mode 100644 index 000000000..d758c9d09 --- /dev/null +++ b/registry/components/sheet-spring-up/sheet-spring-up.html @@ -0,0 +1,243 @@ + + +
+
+
Share
+
Sheet content goes here.
+
+
+ + + + + + diff --git a/registry/components/social-proof-card/demo.html b/registry/components/social-proof-card/demo.html new file mode 100644 index 000000000..703562ec3 --- /dev/null +++ b/registry/components/social-proof-card/demo.html @@ -0,0 +1,351 @@ + + + + + + Social Proof Card + + + + +
+
+
+
+
+
+
HyperFrames
+
+
12,000+ creators
+
+
Start rendering free
+
+
+
+
+
+
social-proof-card
+
+
+ The app-store close as one scene: wordmark, five stars, a proof line, three feature + icons and a CTA capsule build in a quiet stagger and hold. +
+
+
6 variables — every piece of copy
+
2.0s — build, then hold
+
composes — star-rating-fill / cta-lockup stay atomic
+
+
+
+
+ + + diff --git a/registry/components/social-proof-card/registry-item.json b/registry/components/social-proof-card/registry-item.json new file mode 100644 index 000000000..ec3c1b063 --- /dev/null +++ b/registry/components/social-proof-card/registry-item.json @@ -0,0 +1,66 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "social-proof-card", + "type": "hyperframes:component", + "title": "Social Proof Card", + "description": "The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup", + "tags": ["motion-primitive", "social-proof", "end-card", "cta", "vertical"], + "author": "Miao Yang", + "variables": [ + { + "id": "brand", + "type": "string", + "role": "content", + "label": "Brand", + "description": "Wordmark at the top of the card.", + "default": "HyperFrames" + }, + { + "id": "proof", + "type": "string", + "role": "content", + "label": "Proof line", + "description": "Social-proof line under the stars.", + "default": "12,000+ creators" + }, + { + "id": "cta", + "type": "string", + "role": "content", + "label": "CTA", + "description": "Label on the closing capsule.", + "default": "Start rendering free" + }, + { + "id": "f1", + "type": "string", + "role": "content", + "label": "Feature 1", + "description": "First feature, | breaks the line.", + "default": "Write|plain HTML" + }, + { + "id": "f2", + "type": "string", + "role": "content", + "label": "Feature 2", + "description": "Second feature, | breaks the line.", + "default": "Render|pixel-perfect" + }, + { + "id": "f3", + "type": "string", + "role": "content", + "label": "Feature 3", + "description": "Third feature, | breaks the line.", + "default": "Own|every line" + } + ], + "files": [ + { + "path": "social-proof-card.html", + "target": "compositions/components/social-proof-card.html", + "type": "hyperframes:snippet" + } + ] +} diff --git a/registry/components/social-proof-card/social-proof-card.html b/registry/components/social-proof-card/social-proof-card.html new file mode 100644 index 000000000..b2ef852c9 --- /dev/null +++ b/registry/components/social-proof-card/social-proof-card.html @@ -0,0 +1,230 @@ + + + + + + Social Proof Card + + + + + diff --git a/registry/components/streaming-text/demo.html b/registry/components/streaming-text/demo.html new file mode 100644 index 000000000..0a7ccb6dd --- /dev/null +++ b/registry/components/streaming-text/demo.html @@ -0,0 +1,229 @@ + + + + + + Streaming Text + + + + +
+
+
+
+
+
+
Assistant
+
how do I turn my HTML into real video?
+
+ You don't + need a video + editor. HyperFrames + renders the + HTML you + already write + into pixel-perfect, + deterministic video. +
+
+
+
+
+
streaming-text
+
+
+ Words arrive the way an AI answer streams — in uneven bursts on a measured token rhythm, + each word landing grey and inking to full colour. Not a typewriter. +
+
+
29 gaps — the measured token rhythm, cycled
+
0.27s — fresh-grey to ink ramp, per word
+
bursts — two together, a pause, three more
+
+
+
+
+ + + + diff --git a/registry/components/streaming-text/registry-item.json b/registry/components/streaming-text/registry-item.json new file mode 100644 index 000000000..32ec2ece2 --- /dev/null +++ b/registry/components/streaming-text/registry-item.json @@ -0,0 +1,42 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "streaming-text", + "type": "hyperframes:component", + "title": "Streaming Text", + "description": "Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter", + "tags": ["video-primitive", "text-effect", "ai", "chat"], + "author": "Miao Yang", + "variables": [ + { + "id": "size", + "type": "number", + "role": "style", + "label": "Size", + "description": "Type size of the streamed words.", + "default": 27, + "min": 18, + "max": 64, + "step": 1, + "unit": "px" + }, + { + "id": "tone", + "type": "enum", + "role": "style", + "label": "Tone", + "description": "Ink pair: dark words on a light ground, or light words on a dark ground.", + "default": "dark-on-light", + "options": [ + { "value": "dark-on-light", "label": "Dark on light" }, + { "value": "light-on-dark", "label": "Light on dark" } + ] + } + ], + "files": [ + { + "path": "streaming-text.html", + "target": "compositions/components/streaming-text.html", + "type": "hyperframes:snippet" + } + ] +} diff --git a/registry/components/streaming-text/streaming-text.html b/registry/components/streaming-text/streaming-text.html new file mode 100644 index 000000000..9f4466026 --- /dev/null +++ b/registry/components/streaming-text/streaming-text.html @@ -0,0 +1,255 @@ + + +
+

+ You don't need + a video editor. + HyperFrames renders the + HTML you already + write into pixel-perfect, + deterministic video. +

+
+ + + + + + diff --git a/registry/components/typing-indicator/demo.html b/registry/components/typing-indicator/demo.html new file mode 100644 index 000000000..f4d8d2e0b --- /dev/null +++ b/registry/components/typing-indicator/demo.html @@ -0,0 +1,303 @@ + + + + + + Typing Indicator + + + + +
+
+
+
+
+
+
RRachel
+
+
+
what r u using for the launch video??
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
hyperframes 👀
+
+
+
+
+
+
+
typing-indicator
+
+
+ The three-dot bubble that says someone is writing: it pops in at the thread's edge, + holds while the reply is coming, and yields the moment the message lands. +
+
+
0.10s — pop-in, scale 0.6 to 1, measured
+
alpha .4 to 1 — the measured entry ramp
+
bounded wave — optional; the reference holds still
+
+
+
+
+ + + + diff --git a/registry/components/typing-indicator/registry-item.json b/registry/components/typing-indicator/registry-item.json new file mode 100644 index 000000000..9e49f3003 --- /dev/null +++ b/registry/components/typing-indicator/registry-item.json @@ -0,0 +1,54 @@ +{ + "$schema": "https://hyperframes.heygen.com/schema/registry-item.json", + "name": "typing-indicator", + "type": "hyperframes:component", + "title": "Typing Indicator", + "description": "The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands", + "tags": ["video-primitive", "chat", "mock-ui", "overlay"], + "author": "Miao Yang", + "variables": [ + { + "id": "size", + "type": "number", + "role": "style", + "label": "Size", + "description": "Bubble width in pixels; dots and tail scale with it.", + "default": 124, + "min": 80, + "max": 220, + "step": 2, + "unit": "px" + }, + { + "id": "tone", + "type": "enum", + "role": "style", + "label": "Tone", + "description": "Dark is the reference iOS bubble; light suits bright chat grounds.", + "default": "dark", + "options": [ + { "value": "dark", "label": "Dark" }, + { "value": "light", "label": "Light" } + ] + }, + { + "id": "tail", + "type": "enum", + "role": "style", + "label": "Tail", + "description": "The two shrinking circles anchoring the bubble to the sender side.", + "default": "on", + "options": [ + { "value": "on", "label": "On" }, + { "value": "off", "label": "Off" } + ] + } + ], + "files": [ + { + "path": "typing-indicator.html", + "target": "compositions/components/typing-indicator.html", + "type": "hyperframes:snippet" + } + ] +} diff --git a/registry/components/typing-indicator/typing-indicator.html b/registry/components/typing-indicator/typing-indicator.html new file mode 100644 index 000000000..acaf086c6 --- /dev/null +++ b/registry/components/typing-indicator/typing-indicator.html @@ -0,0 +1,290 @@ + + +
+
+
+ + + +
+
+
+
+
+ + + + + + diff --git a/registry/registry.json b/registry/registry.json index 839e3143b..dae767263 100644 --- a/registry/registry.json +++ b/registry/registry.json @@ -39,6 +39,10 @@ "name": "warm-grain", "type": "hyperframes:example" }, + { + "name": "ai-chat-reveal", + "type": "hyperframes:block" + }, { "name": "app-showcase", "type": "hyperframes:block" @@ -371,6 +375,10 @@ "name": "macos-tahoe-liquid-glass", "type": "hyperframes:block" }, + { + "name": "message-thread-reveal", + "type": "hyperframes:block" + }, { "name": "mk-background", "type": "hyperframes:block" @@ -407,6 +415,14 @@ "name": "north-korea-locked-down", "type": "hyperframes:block" }, + { + "name": "notes-reveal", + "type": "hyperframes:block" + }, + { + "name": "notification-cascade", + "type": "hyperframes:block" + }, { "name": "nyc-paris-flight", "type": "hyperframes:block" @@ -439,6 +455,10 @@ "name": "sdf-iris", "type": "hyperframes:block" }, + { + "name": "share-sheet-carousel", + "type": "hyperframes:block" + }, { "name": "spain-map", "type": "hyperframes:block" @@ -783,6 +803,14 @@ "name": "chart-story", "type": "hyperframes:component" }, + { + "name": "chat-message", + "type": "hyperframes:component" + }, + { + "name": "chat-thread", + "type": "hyperframes:component" + }, { "name": "checkout-flow", "type": "hyperframes:component" @@ -991,6 +1019,10 @@ "name": "logo-wall", "type": "hyperframes:component" }, + { + "name": "marker-checklist-card", + "type": "hyperframes:component" + }, { "name": "marker-highlight", "type": "hyperframes:component" @@ -1051,6 +1083,10 @@ "name": "native-notification-pop", "type": "hyperframes:component" }, + { + "name": "notes-typing", + "type": "hyperframes:component" + }, { "name": "notification-pileup", "type": "hyperframes:component" @@ -1207,6 +1243,10 @@ "name": "shared-axis-z", "type": "hyperframes:component" }, + { + "name": "sheet-spring-up", + "type": "hyperframes:component" + }, { "name": "shimmer-sweep", "type": "hyperframes:component" @@ -1231,6 +1271,10 @@ "name": "slot-machine-roll", "type": "hyperframes:component" }, + { + "name": "social-proof-card", + "type": "hyperframes:component" + }, { "name": "soft-blob-touch", "type": "hyperframes:component" @@ -1291,6 +1335,10 @@ "name": "store-badge-lockup", "type": "hyperframes:component" }, + { + "name": "streaming-text", + "type": "hyperframes:component" + }, { "name": "strikethrough-replace", "type": "hyperframes:component" @@ -1407,6 +1455,10 @@ "name": "typewriter", "type": "hyperframes:component" }, + { + "name": "typing-indicator", + "type": "hyperframes:component" + }, { "name": "ui-focus-zoom", "type": "hyperframes:component" @@ -1473,6 +1525,6 @@ } ], "catalogArtifact": { - "revision": "a823e13eb98937e709ea70bbdc5f9e6dc0be1feed6346fb1d8746069fea6796b" + "revision": "f5cb199165f8e7faec1f52713596613af0ef6b5495938341233a63167ee43d3a" } }