mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 09:16:55 +00:00
docs(examples): the inspiration page, with films and remixes to start from (#6383)
* docs(examples): the inspiration page, with films and remixes to start from The Examples page becomes Inspiration: two rows of films made with HyperFrames, then 41 remixes of popular videos, each crediting and linking the original post, with how to remix it in the Studio app. The rows play one film at a time, since a second playing film drops the page from 120 to 30 fps, and they get a Pause button. The block and template tables stay. * docs(examples): remixes honour reduced motion; one film while the dialog is open Remix previews now follow reduced motion (read on the first render, stopped if it turns on), and each film is a button that plays it on purpose with sound. The film rows stop their previews while a full film plays in the dialog, so only one film plays at a time. Two remixes get the credit handles the app lists for them. * docs(examples): a motion setting change keeps remix cards as they are The shelf keeps the reduced-motion setting in a ref, so a change no longer re-renders it and remounts every card: a playing remix, its focus and its open instructions stay. * docs(examples): one film at a time across the whole Inspiration page The dialog paused only the film-row previews, so a chosen remix kept playing behind it. Any video that starts with sound now makes each remix card stop its own, and the film rows rest their previews while a film with sound plays anywhere on the page. * docs(examples): remix cards and film-row controls in the docs palette The remix cards used Tailwind zinc greys and white, the film rows the old green focus ring and fixed tints; they now use the palette tokens, so they sit on the beige ground and in the Night theme like the rest.
This commit is contained in:
Ular Kimsanov
+132
@@ -1688,3 +1688,135 @@ pre.shiki {
|
||||
|
||||
.hf-day-play { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 0.5rem; }
|
||||
.hf-day-play:focus-visible { outline: 2px solid var(--hf-brand); outline-offset: 2px; }
|
||||
|
||||
/* Showcase rows: two tracks of films drifting in opposite directions, each track twice its films for a seamless loop. */
|
||||
.hf-film-rows {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
margin: 1.25rem 0 1.5rem;
|
||||
overflow: hidden;
|
||||
border-radius: 0.6rem;
|
||||
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
|
||||
}
|
||||
.hf-film-row {
|
||||
overflow: hidden;
|
||||
}
|
||||
.hf-film-track {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
animation: hf-film-drift 90s linear infinite;
|
||||
}
|
||||
.hf-film-row.is-reverse .hf-film-track {
|
||||
animation-direction: reverse;
|
||||
animation-duration: 105s;
|
||||
}
|
||||
@keyframes hf-film-drift {
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.hf-film-card {
|
||||
position: relative;
|
||||
height: 11.5rem;
|
||||
margin: 0 0.6rem 0 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
background: #1a1a1a;
|
||||
cursor: pointer;
|
||||
flex: none;
|
||||
}
|
||||
.hf-film-card video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.hf-film-card:focus-visible {
|
||||
outline: 2px solid var(--hf-brand);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.hf-film-label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 1.2rem 0.6rem 0.45rem;
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
background: linear-gradient(transparent, rgb(0 0 0 / 0.7));
|
||||
}
|
||||
.hf-film-label b {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
opacity: 0.75;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
.hf-film-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
height: fit-content;
|
||||
width: min(92vw, 1100px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0.75rem;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
}
|
||||
.hf-film-dialog::backdrop {
|
||||
background: rgb(0 0 0 / 0.7);
|
||||
}
|
||||
.hf-film-dialog video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
background: #000;
|
||||
}
|
||||
.hf-film-dialog-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.6rem 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.hf-film-dialog-bar button {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border: 1px solid rgb(255 255 255 / 0.4);
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hf-film-track {
|
||||
animation: none;
|
||||
}
|
||||
.hf-film-row {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.hf-film-card {
|
||||
height: 9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hf-film-rows.is-paused .hf-film-track { animation-play-state: paused; }
|
||||
.hf-film-pause { display: block; margin: 0.5rem 0 0 auto; padding: 0.25rem 0.75rem; border: 1px solid var(--hf-border-color-light);
|
||||
border-radius: 999px; font-size: 0.8125rem; font-weight: 600; background: transparent; color: inherit; }
|
||||
|
||||
/* Remix cards in the docs palette: frosted cream on the ground (a Night card in dark mode), ink text, black pill. */
|
||||
.hf-remix-card { background: var(--hf-background-light); border-color: var(--hf-ui-border); backdrop-filter: blur(12px); }
|
||||
.hf-remix-media { background: var(--hf-surface2); }
|
||||
.hf-remix-name { color: var(--hf-heading); }
|
||||
.hf-remix-credit, .hf-remix-help { color: var(--hf-text-secondary); }
|
||||
.hf-remix-credit a { color: inherit; }
|
||||
.hf-remix-btn { background: var(--hf-heading); color: var(--hf-background); }
|
||||
|
||||
+393
-126
@@ -1,143 +1,410 @@
|
||||
---
|
||||
title: "Examples"
|
||||
description: "Watch finished HyperFrames videos, inspect real production projects, or start from a working template."
|
||||
title: "Inspiration"
|
||||
description: "Videos people made, remixed in HyperFrames: launch films, motion graphics and talking-head edits. Find one you like and remix it in the Studio app."
|
||||
---
|
||||
|
||||
import { DocsVideo } from "/snippets/docs-video.jsx";
|
||||
import { RemixShelf } from "/snippets/remix-shelf.jsx";
|
||||
import { FilmRows } from "/snippets/film-rows.jsx";
|
||||
import { ReplicaCompare } from "/snippets/replica-compare.jsx";
|
||||
import { ExamplePlayer } from "/snippets/example-player.jsx";
|
||||
|
||||
## What HyperFrames can make
|
||||
export const motion = [
|
||||
{
|
||||
"id": "jake-pond",
|
||||
"name": "Pond: a new Linux OS",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-pond-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-pond-result.jpg",
|
||||
"handle": "@bflycomputer",
|
||||
"post": "https://x.com/bflycomputer/status/2082496873655648632"
|
||||
},
|
||||
{
|
||||
"id": "jake-lovable",
|
||||
"name": "Lovable: Aesthetics Update",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-lovable-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-lovable-result.jpg",
|
||||
"handle": "@Lovable",
|
||||
"post": "https://x.com/Lovable/status/2053874566460752191"
|
||||
},
|
||||
{
|
||||
"id": "jake-figma-draw",
|
||||
"name": "Figma Draw",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-figma-draw-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-figma-draw-result.jpg",
|
||||
"handle": "@figma",
|
||||
"post": "https://x.com/figma/status/1920168282751185360"
|
||||
},
|
||||
{
|
||||
"id": "remix-anduril",
|
||||
"name": "Anduril: AI Grand Prix",
|
||||
"ratio": "1/1",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-anduril-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-anduril-result.jpg",
|
||||
"handle": "@anduriltech",
|
||||
"post": "https://x.com/anduriltech/status/2016233946607141290"
|
||||
},
|
||||
{
|
||||
"id": "remix-grok-bot",
|
||||
"name": "Grok Bot: now on more plans",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-grok-bot-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-grok-bot-result.jpg",
|
||||
"handle": "@bot",
|
||||
"post": "https://x.com/bot/status/2090852881373311369"
|
||||
},
|
||||
{
|
||||
"id": "remix-kimi-k3",
|
||||
"name": "Kimi K3 teaser",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-kimi-k3-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-kimi-k3-result.jpg",
|
||||
"handle": "@Kimi_Moonshot",
|
||||
"post": "https://x.com/Kimi_Moonshot/status/2081757327146045450"
|
||||
},
|
||||
{
|
||||
"id": "remix-jordanarchivess",
|
||||
"name": "How do you communicate that",
|
||||
"ratio": "4/3",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-jordanarchivess-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-jordanarchivess-result.jpg",
|
||||
"handle": "@jordanarchivess",
|
||||
"post": "https://x.com/jordanarchivess/status/2107536262894915762"
|
||||
},
|
||||
{
|
||||
"id": "remix-firecrawl",
|
||||
"name": "Firecrawl Free Keyless",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-firecrawl-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-firecrawl-result.jpg",
|
||||
"handle": "@ericciarla",
|
||||
"post": "https://x.com/ericciarla/status/2093375835679977570"
|
||||
},
|
||||
{
|
||||
"id": "remix-authorize-once",
|
||||
"name": "Authorize Once, Everyone Connected",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-authorize-once-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-authorize-once-result.jpg",
|
||||
"post": "https://x.com/ClaudeDevs/status/2091953609185657251",
|
||||
"handle": "@ClaudeDevs"
|
||||
},
|
||||
{
|
||||
"id": "remix-zaro",
|
||||
"name": "Zaro: apps and agents on your context",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-zaro-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-zaro-result.jpg",
|
||||
"handle": "@ZaroAI_",
|
||||
"post": "https://x.com/ZaroAI_/status/2070084796378747316"
|
||||
},
|
||||
{
|
||||
"id": "remix-polymarket-perps",
|
||||
"name": "Polymarket Perps",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-polymarket-perps-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-polymarket-perps-result.jpg",
|
||||
"handle": "@Polymarket",
|
||||
"post": "https://x.com/Polymarket/status/2095530373274816595"
|
||||
},
|
||||
{
|
||||
"id": "remix-web-noise",
|
||||
"name": "From web noise to working UI",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-web-noise-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-web-noise-result.jpg",
|
||||
"post": "https://x.com/firecrawl/status/2057495269785358384",
|
||||
"handle": "@firecrawl"
|
||||
},
|
||||
{
|
||||
"id": "remix-linear-loops",
|
||||
"name": "Linear Loops",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-linear-loops-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-linear-loops-result.jpg",
|
||||
"handle": "@linear",
|
||||
"post": "https://x.com/linear/status/2079233260161323371"
|
||||
},
|
||||
{
|
||||
"id": "remix-glyph",
|
||||
"name": "Glyph: GPU typography for the web",
|
||||
"ratio": "640/461",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-glyph-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-glyph-result.jpg",
|
||||
"handle": "@pmndrs",
|
||||
"post": "https://x.com/pmndrs/status/2100980802091708818"
|
||||
},
|
||||
{
|
||||
"id": "remix-hermes-omarchy",
|
||||
"name": "Hermes in Omarchy",
|
||||
"ratio": "1/1",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-hermes-omarchy-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-hermes-omarchy-result.jpg",
|
||||
"handle": "@NousResearch",
|
||||
"post": "https://x.com/NousResearch/status/2097403926072987986"
|
||||
},
|
||||
{
|
||||
"id": "remix-iskra-light",
|
||||
"name": "Iskra Light",
|
||||
"ratio": "5/4",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-iskra-light-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-iskra-light-result.jpg",
|
||||
"handle": "@world_is_web",
|
||||
"post": "https://x.com/world_is_web/status/2084694934657892557"
|
||||
},
|
||||
{
|
||||
"id": "remix-elevenlabs-reception",
|
||||
"name": "Reception by ElevenLabs",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-elevenlabs-reception-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-elevenlabs-reception-result.jpg",
|
||||
"handle": "@ElevenLabs",
|
||||
"post": "https://x.com/ElevenLabs/status/2100262886916358361"
|
||||
},
|
||||
{
|
||||
"id": "remix-cyera",
|
||||
"name": "Cyera brand video",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-cyera-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-cyera-result.jpg",
|
||||
"handle": "@motionimo",
|
||||
"post": "https://x.com/motionimo/status/2103703350017433670"
|
||||
},
|
||||
{
|
||||
"id": "remix-harvey",
|
||||
"name": "Harvey",
|
||||
"ratio": "16/9",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-harvey-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-harvey-result.jpg",
|
||||
"handle": "@harvey",
|
||||
"post": "https://x.com/harvey/status/2089722668761432349"
|
||||
}
|
||||
];
|
||||
|
||||
Every film below is 100% HyperFrames — HTML rendered frame by frame, no other tool. They are grouped by what they show off. Where a source project is public, the card links to it.
|
||||
export const aroll = [
|
||||
{
|
||||
"id": "aroll-aiwithsachi",
|
||||
"name": "Top 5 plugins to install in Claude",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/aiwithsachi-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/aiwithsachi-result.jpg",
|
||||
"handle": "@aiwithsachi",
|
||||
"post": "https://www.instagram.com/reel/Dc7G9Pxu_1O/"
|
||||
},
|
||||
{
|
||||
"id": "aroll-tenfoldmarc",
|
||||
"name": "17 video effects Claude can create",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/tenfoldmarc-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/tenfoldmarc-result.jpg",
|
||||
"handle": "@tenfoldmarc",
|
||||
"post": "https://www.instagram.com/reel/Def9pj5TWtA/"
|
||||
},
|
||||
{
|
||||
"id": "aroll-careerwithriya",
|
||||
"name": "6 essential skills to transform your career",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/careerwithriya-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/careerwithriya-result.jpg",
|
||||
"handle": "@careerwithriya",
|
||||
"post": "https://www.instagram.com/reel/Ddd57MBszhc/"
|
||||
},
|
||||
{
|
||||
"id": "aroll-harpercarrollai",
|
||||
"name": "10 Days of AI Basics, Day 1",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/harpercarrollai-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/harpercarrollai-result.jpg",
|
||||
"handle": "@harpercarrollai",
|
||||
"post": "https://www.instagram.com/reel/C4eNPF3PdpG/"
|
||||
},
|
||||
{
|
||||
"id": "aroll-mattfarmerai",
|
||||
"name": "Best AI image generators, October 2026",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/mattfarmerai-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/mattfarmerai-result.jpg",
|
||||
"handle": "@mattfarmerai",
|
||||
"post": "https://www.instagram.com/reel/DeCtQ_9JACg/"
|
||||
},
|
||||
{
|
||||
"id": "aroll-nocode-joshua",
|
||||
"name": "10/10 Claude Skills for marketing",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/nocode-joshua-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/nocode-joshua-result.jpg",
|
||||
"handle": "@nocode.joshua",
|
||||
"post": "https://www.tiktok.com/@nocode.joshua/video/7663973344026397960"
|
||||
},
|
||||
{
|
||||
"id": "aroll-mpaige13",
|
||||
"name": "Granola + Claude Skills",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/mpaige13-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/mpaige13-result.jpg",
|
||||
"handle": "@mpaige13",
|
||||
"post": "https://www.instagram.com/reel/DY5X72kxE-4/"
|
||||
},
|
||||
{
|
||||
"id": "aroll-brockmesarich",
|
||||
"name": "These 5 GitHub Repos Give You Thousands of Free Claude Skills",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/brockmesarich-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/brockmesarich-result.jpg",
|
||||
"handle": "Brock Mesarich",
|
||||
"post": "https://www.youtube.com/shorts/rxOcBowQcS0"
|
||||
},
|
||||
{
|
||||
"id": "aroll-drcintas",
|
||||
"name": "Motion graphics in seconds",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/drcintas-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/drcintas-result.jpg",
|
||||
"handle": "@drcintas",
|
||||
"post": "https://www.instagram.com/reel/DPoXbzZjb8J/"
|
||||
},
|
||||
{
|
||||
"id": "aroll-itsbetterwithai",
|
||||
"name": "Astra makes complete AI videos inside ChatGPT",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/itsbetterwithai-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/itsbetterwithai-result.jpg",
|
||||
"handle": "@itsbetterwithai",
|
||||
"post": "https://www.instagram.com/reel/DdTzYbkCkvc/"
|
||||
},
|
||||
{
|
||||
"id": "aroll-kevinstratvert",
|
||||
"name": "Stop Paying for 5 AI Tools",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/kevinstratvert-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/kevinstratvert-result.jpg",
|
||||
"handle": "Kevin Stratvert",
|
||||
"post": "https://www.youtube.com/shorts/1fA5j5_5TRY"
|
||||
},
|
||||
{
|
||||
"id": "aroll-dan-martell-tools",
|
||||
"name": "What's the best AI tool right now?",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/dan-martell-tools-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/dan-martell-tools-result.jpg",
|
||||
"handle": "Dan Martell",
|
||||
"post": "https://www.youtube.com/shorts/mk1zJd9Rm4c"
|
||||
},
|
||||
{
|
||||
"id": "aroll-ali-abdaal-workflow",
|
||||
"name": "5 tools I use every day",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-workflow-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-workflow-result.jpg",
|
||||
"handle": "@aliabdaal",
|
||||
"post": "https://www.youtube.com/shorts/S2AZbZ_K8vY"
|
||||
},
|
||||
{
|
||||
"id": "aroll-ali-abdaal-archival",
|
||||
"name": "Face over archival art",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-archival-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-archival-result.jpg",
|
||||
"handle": "@aliabdaal",
|
||||
"post": "https://www.youtube.com/shorts/Ksjt_I8rDrE"
|
||||
},
|
||||
{
|
||||
"id": "aroll-ali-abdaal-dm",
|
||||
"name": "Reads a DM, answers it",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-dm-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-dm-result.jpg",
|
||||
"handle": "Ali Abdaal",
|
||||
"post": "https://www.youtube.com/shorts/jCyhEO3h-Ik"
|
||||
},
|
||||
{
|
||||
"id": "aroll-cindy-zhu-ranking",
|
||||
"name": "Webcam ranking, 1 to 10",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/cindy-zhu-ranking-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/cindy-zhu-ranking-result.jpg",
|
||||
"handle": "@cindiezhu",
|
||||
"post": "https://www.tiktok.com/@cindiezhu/video/7694049166972013831"
|
||||
},
|
||||
{
|
||||
"id": "aroll-hook-open-loops",
|
||||
"name": "Hook, lead, open loops",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/hook-open-loops-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/hook-open-loops-result.jpg",
|
||||
"post": "https://www.instagram.com/reel/DambEp1igDW/",
|
||||
"handle": "@realskytan"
|
||||
},
|
||||
{
|
||||
"id": "aroll-hundred-days-story",
|
||||
"name": "100 days with stickers and photo cards",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/hundred-days-story-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/hundred-days-story-result.jpg",
|
||||
"post": "https://www.instagram.com/reel/Dd6vHlQgpok/",
|
||||
"handle": "@anyway.julia"
|
||||
},
|
||||
{
|
||||
"id": "aroll-khris-sheer-founder",
|
||||
"name": "The Founder Experiments, Ep. 1",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/khris-sheer-founder-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/khris-sheer-founder-result.jpg",
|
||||
"handle": "@khris.sheer",
|
||||
"post": "https://www.tiktok.com/@khris.sheer/video/7491715587895430402"
|
||||
},
|
||||
{
|
||||
"id": "aroll-john-tagudin-capso",
|
||||
"name": "Tool demo with callouts",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/john-tagudin-capso-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/john-tagudin-capso-result.jpg",
|
||||
"handle": "@john.tagudin",
|
||||
"post": "https://www.tiktok.com/@john.tagudin/video/7524883942328126728"
|
||||
},
|
||||
{
|
||||
"id": "aroll-ugc-rachelll",
|
||||
"name": "AI creator with product",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ugc-rachelll-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ugc-rachelll-result.jpg",
|
||||
"handle": "@ugc.rachelll",
|
||||
"post": "https://www.tiktok.com/@ugc.rachelll/video/7616996050066345246"
|
||||
},
|
||||
{
|
||||
"id": "aroll-gusfiraa-meitu",
|
||||
"name": "Photo glow-up in an editing app",
|
||||
"ratio": "9/16",
|
||||
"result": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/gusfiraa-meitu-result.mp4",
|
||||
"resultPoster": "https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/gusfiraa-meitu-result.jpg",
|
||||
"handle": "@gusfiraa",
|
||||
"post": "https://www.tiktok.com/@gusfiraa/video/7668295832994598162"
|
||||
}
|
||||
];
|
||||
|
||||
### Product & launch films
|
||||
Every video on this page was made with HyperFrames: launch films, cartoons, explainers, 3D, logo stings, live-coded
|
||||
music. Click one to watch it with sound.
|
||||
|
||||
A whole product cut into a launch film — its own screens, type and colour.
|
||||
<FilmRows />
|
||||
|
||||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="HeyGen × Stripe" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-HF-heygen-stripe-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-HF-heygen-stripe-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">HeyGen × Stripe</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Product launch, 4K · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="HyperFrames launch" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-hyperframes-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-hyperframes-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch">HyperFrames launch</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">The framework's own launch · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Website → video" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-website-to-hyperframes-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-website-to-hyperframes-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes">Website → video</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A live site becomes a promo · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="SpaceX explainer" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-spacex-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-spacex-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/spacex-launch">SpaceX explainer</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Data and motion at scale · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="K3 promo" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-k3-promo-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-k3-promo-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">K3 promo</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Short product spot · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
</div>
|
||||
## Remix a video you like
|
||||
|
||||
### The tooling, shown working
|
||||
The fastest way to a video you love is to start from one. Every video below is a remix: someone's original, rebuilt
|
||||
in HyperFrames with new words, people and brand. Hover to play. Like one? Choose **Remix in Studio** and make your
|
||||
own version; see [Reference any video](/studio-app/reference-video) for how it works.
|
||||
|
||||
Each film is HyperFrames demonstrating one of its own features.
|
||||
### Launch films and motion graphics
|
||||
|
||||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Agent skills" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-skills-launch-video-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-skills-launch-video-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Agent skills</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">The skill system · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Keyframes" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-keyframes-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-keyframes-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Keyframes</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Seek-safe animation · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Timeline editor" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-timeline-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-timeline-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch">Timeline editor</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Studio timeline · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Studio inspector" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-inspector-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-inspector-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/inspector-launch">Studio inspector</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Editing on the canvas · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Variables" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-variables-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-variables-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/variables-launch">Variables</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">One composition, many versions · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Cloud rendering" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-cloud-render-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-cloud-render-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/cloud-render-launch">Cloud rendering</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Render on HeyGen's cloud · source included</span></div>
|
||||
</div>
|
||||
</div>
|
||||
Product launches and type-led motion, rebuilt from the original's cuts, timing and effects.
|
||||
|
||||
### Motion, sound & effects
|
||||
<RemixShelf items={motion} />
|
||||
|
||||
Motion is the message — kinetic type, beat-synced cuts, texture and VFX.
|
||||
### Talking-head edits
|
||||
|
||||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Texture launch" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-texture-launch-video-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-texture-launch-video-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Texture launch</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Motion design · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="VFX reel" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-vfx-heygen-combined-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-vfx-heygen-combined-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">VFX reel</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Shaders and effects · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Music to video" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-music-to-video-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-music-to-video-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Music to video</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Cuts synced to a track · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Sound & music" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-sfx-music-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-sfx-music-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/sfx-music-launch">Sound & music</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">SFX and music with the CLI · source included</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Workflows & integrations
|
||||
|
||||
A PR, a Figma file, a design brief — turned into a finished film.
|
||||
|
||||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="PR to video" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-pr-to-video-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-pr-to-video-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/pr-to-video-launch">PR to video</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A GitHub PR as a reveal · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Figma → HyperFrames" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-figma-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-figma-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/figma-launch">Figma → HyperFrames</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A design brought to motion · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Claude Design" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-claude-design-hyperframes-video-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-claude-design-hyperframes-video-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Claude Design</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">From a design draft · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="FRAME.md storyboard" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-frame-md-launch-storyboard-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-frame-md-launch-storyboard-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/frame-md-launch-storyboard">FRAME.md storyboard</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Brief-driven direction · source included</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Where HyperFrames plugs in
|
||||
|
||||
The same engine, reached from the tools teams already use. Use the player controls to watch and listen.
|
||||
|
||||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Codex plugin" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-codex-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-codex-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Codex plugin</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">HyperFrames inside Codex · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Vercel" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-vercel-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-vercel-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Vercel</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Deploy from a template · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Open models (Ollama)" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-ollama-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-ollama-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Open models (Ollama)</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Build with local models · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Community · hyperframes.dev" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-community-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-community-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Community · hyperframes.dev</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Publish and remix · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
</div>
|
||||
The editing style of popular Reels, TikToks and Shorts, with a different presenter: captions, cutaways, callouts and
|
||||
pacing.
|
||||
|
||||
<RemixShelf items={aroll} tall />
|
||||
|
||||
## Recreate any video, 1:1
|
||||
|
||||
@@ -205,6 +472,6 @@ The init templates remain available for scaffolding complete projects.
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Reference any video to recreate its style](/studio-app/reference-video)
|
||||
- [What do you want to make?](/workflows)
|
||||
- [Make your first video](/quickstart)
|
||||
- [Choose what to make](/workflows)
|
||||
- [Take more control of an existing project](/studio-app/edit-with-the-agent)
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
/**
|
||||
* The homepage's showcase on a docs page: two rows of films made with HyperFrames, drifting in opposite directions.
|
||||
* The card nearest the middle plays its 720p copy, the others show their poster; a click opens the full film with
|
||||
* sound. Reduced motion holds the rows still on their posters.
|
||||
*/
|
||||
export const FilmRows = () => {
|
||||
// Keep data inside the component: Mintlify compiles only the named export.
|
||||
const CDN = "https://static.heygen.ai/hyperframes-oss";
|
||||
const film = (id, kind, name, ar) => ({
|
||||
kind,
|
||||
name,
|
||||
ar,
|
||||
src: `${CDN}/homepage/showcase/card/${id}-v1.mp4`,
|
||||
hq: `${CDN}/homepage/showcase/hq/${id}-v1.mp4`,
|
||||
poster: `${CDN}/homepage/showcase/poster/${id}-v1.jpg`,
|
||||
});
|
||||
const launch = `${CDN}/site/studio-launch-nib-sf-audio`;
|
||||
const rows = [
|
||||
[
|
||||
{ ...film("studio-launch", "Launch film", "Studio launch", 16 / 9), hq: `${launch}.mp4`, poster: `${launch}-poster.jpg` },
|
||||
film("vfx-billboard-hoodie-handoff", "VFX", "Out of the billboard", 9 / 16),
|
||||
film("frameys-opening-night", "Awards trailer", "Opening night", 16 / 9),
|
||||
film("jake-taycan-bricks", "3D build", "Jake & the Taycan", 1),
|
||||
film("cartoon-frameys-launch-one-take", "Cartoon", "The Frameys", 16 / 9),
|
||||
film("k", "Explainer", "The journey of “k”", 9 / 16),
|
||||
film("real-ui-newspaper-1969", "Real UI", "Men walk on the Moon", 16 / 9),
|
||||
film("launch-storyboard-first", "Product launch", "Storyboard first", 16 / 9),
|
||||
film("captions", "Captions", "Don’t tell my clients", 4 / 5),
|
||||
film("manga-last-onigiri", "Manga", "The last onigiri", 16 / 9),
|
||||
film("square-one-strudel", "Live-coded music", "Square one", 1),
|
||||
film("vfx-background-removal-launch", "VFX", "Background removal", 16 / 9),
|
||||
film("sitcom", "Sitcom", "Two lines", 9 / 16),
|
||||
film("just-html", "Explainer", "It’s just HTML", 16 / 9),
|
||||
film("kinetic-type-curiosity", "Kinetic type", "Going through a change", 4 / 3),
|
||||
film("home", "Many looks", "This homepage", 16 / 9),
|
||||
film("wordmark-sting", "Logo sting", "Wordmark", 1),
|
||||
film("session-story", "Cartoon", "Jake’s favorite agent", 16 / 9),
|
||||
film("launch-claude-motion", "Square", "Claude Motion", 1),
|
||||
film("real-ui-google-search", "Real UI", "How do cameras focus", 16 / 9),
|
||||
film("muybridge-horse-styles", "Style study", "One horse, many looks", 32 / 9),
|
||||
film("rackrats", "Cartoon", "Rackrats", 16 / 9),
|
||||
],
|
||||
[
|
||||
film("tutorial-wenbo-studio-tutorial-talkinghead", "Tutorial", "Reference any video", 16 / 9),
|
||||
film("axe", "3D tutorial", "Axe chop", 9 / 16),
|
||||
film("framey-orby-halloween", "Cartoon", "Halloween party", 16 / 9),
|
||||
film("cow", "Launch parody", "Cow 1.0", 16 / 9),
|
||||
film("ascii-sharks-logo", "Logo sting", "ASCII sharks", 16 / 9),
|
||||
film("vfx-giant-keyboard-reel", "VFX", "Giant keyboard", 9 / 16),
|
||||
film("real-ui-wikipedia", "Real UI", "Wikipedia", 16 / 9),
|
||||
film("launch-heygen-video1", "AI footage", "HeyGen Video 1", 16 / 9),
|
||||
film("pixel-game-one-canvas", "Code tutorial", "A game in one canvas", 16 / 9),
|
||||
film("demo", "Talking head", "Tool demo", 9 / 16),
|
||||
film("everything-was-written", "Motion design", "Everything was written", 16 / 9),
|
||||
film("launch", "Kinetic type", "Keynote line", 16 / 9),
|
||||
film("remotion-to-hyperframes", "3D voxel", "Remotion to HyperFrames", 16 / 9),
|
||||
film("explainer-code2video-bench", "Presenter", "Code2Video Bench", 16 / 9),
|
||||
film("real-ui-cctv", "Real UI", "CCTV tracking", 16 / 9),
|
||||
film("frameys-felt-party", "3D characters", "The Frameys dance", 16 / 9),
|
||||
film("launch-moments-catalog", "Product launch", "Moments catalog", 16 / 9),
|
||||
film("shards-logo-reveal", "Logo reveal", "Shards", 16 / 9),
|
||||
film("launch-hyperframes-studio-intro", "Product reveal", "Studio intro", 16 / 9),
|
||||
film("studio-launch-pixel", "Launch film", "A launch video in 6 hours", 16 / 9),
|
||||
film("youtube-online-business", "YouTube edit", "Online business story", 16 / 9),
|
||||
film("website-to-launch", "Product launch", "From your website", 16 / 9),
|
||||
film("generative-replica", "Generative art", "Code is a material", 16 / 9),
|
||||
],
|
||||
];
|
||||
|
||||
const rootRef = useRef(null);
|
||||
const dialogRef = useRef(null);
|
||||
const [open, setOpen] = useState(null);
|
||||
const [paused, setPaused] = useState(false);
|
||||
// Known on the first render, so nothing loads or moves before the preference is read.
|
||||
const [still, setStill] = useState(
|
||||
() => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
const follow = (event) => setStill(event.matches);
|
||||
query.addEventListener("change", follow);
|
||||
return () => query.removeEventListener("change", follow);
|
||||
}, []);
|
||||
|
||||
// A card loads its file only near the screen, and one plays at a time, the one nearest the middle: with two 720p
|
||||
// films playing, Chrome drops the whole page from 120 to 30 fps (measured 2026-10-26), drift or not.
|
||||
useEffect(() => {
|
||||
const root = rootRef.current;
|
||||
if (!root) return;
|
||||
// Reduce Motion turned on mid-visit: stop every film and let go of its file.
|
||||
if (still) {
|
||||
for (const v of root.querySelectorAll("video[data-src]")) {
|
||||
v.pause();
|
||||
v.removeAttribute("src");
|
||||
v.load();
|
||||
}
|
||||
return;
|
||||
}
|
||||
const near = new Set();
|
||||
const seen = new IntersectionObserver((entries) => {
|
||||
for (const { target, isIntersecting } of entries) {
|
||||
if (isIntersecting) {
|
||||
if (!target.src) target.src = target.dataset.src;
|
||||
near.add(target);
|
||||
} else if (target.src) {
|
||||
near.delete(target);
|
||||
target.pause();
|
||||
target.removeAttribute("src");
|
||||
target.load();
|
||||
}
|
||||
}
|
||||
}, { rootMargin: "100px" });
|
||||
for (const v of root.querySelectorAll("video[data-src]")) seen.observe(v);
|
||||
const pick = () => {
|
||||
const mid = window.innerWidth / 2;
|
||||
const centre = (v) => { const r = v.getBoundingClientRect(); return Math.abs(r.left + r.width / 2 - mid); };
|
||||
// Paused rows, or a full film open in the dialog: no preview plays.
|
||||
// A film playing with sound anywhere on the page (a chosen remix, a replica pair) also rests the previews.
|
||||
const filmWithSound = [...document.querySelectorAll("video")].some((v) => !v.paused && !v.muted);
|
||||
const resting = root.classList.contains("is-paused") || root.dataset.watching === "true" || filmWithSound;
|
||||
const first = resting ? null : [...near].sort((a, b) => centre(a) - centre(b))[0];
|
||||
for (const v of near) {
|
||||
if (v === first) v.play().catch(() => {});
|
||||
else v.pause();
|
||||
}
|
||||
};
|
||||
const tick = setInterval(pick, 1000);
|
||||
return () => { seen.disconnect(); clearInterval(tick); };
|
||||
}, [still]);
|
||||
|
||||
useEffect(() => {
|
||||
if (paused) for (const v of rootRef.current?.querySelectorAll("video") ?? []) v.pause();
|
||||
}, [paused]);
|
||||
|
||||
// While a full film plays in the dialog, the previews stop, so only one film plays at a time.
|
||||
useEffect(() => {
|
||||
const root = rootRef.current;
|
||||
if (!root) return;
|
||||
root.dataset.watching = open ? "true" : "false";
|
||||
if (open) for (const v of root.querySelectorAll("video[data-src]")) v.pause();
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
const d = dialogRef.current;
|
||||
if (!d) return;
|
||||
if (open && !d.open) d.showModal();
|
||||
if (!open && d.open) d.close();
|
||||
}, [open]);
|
||||
|
||||
const card = (f, i, twin) => (
|
||||
<button
|
||||
type="button"
|
||||
key={(twin ? "t" : "") + i}
|
||||
className="hf-film-card"
|
||||
style={{ aspectRatio: String(f.ar) }}
|
||||
aria-hidden={twin ? "true" : undefined}
|
||||
tabIndex={twin ? -1 : 0}
|
||||
onClick={() => setOpen(f)}
|
||||
aria-label={`${f.kind}: ${f.name}. Watch with sound`}
|
||||
>
|
||||
<video data-src={f.src} poster={f.poster} muted loop playsInline preload="none" />
|
||||
<span className="hf-film-label"><b>{f.kind}</b> {f.name}</span>
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={"hf-film-rows not-prose" + (paused ? " is-paused" : "")} ref={rootRef}>
|
||||
{rows.map((row, r) => (
|
||||
<div className={"hf-film-row" + (r ? " is-reverse" : "")} key={r}>
|
||||
<div className="hf-film-track">
|
||||
{row.map((f, i) => card(f, i, false))}
|
||||
{row.map((f, i) => card(f, i, true))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* WCAG 2.2.2: rows that move on their own get a way to stop them. Reduced motion never moves them, so no button */}
|
||||
{!still && (
|
||||
<button type="button" className="hf-film-pause" aria-pressed={paused} onClick={() => setPaused(!paused)}>
|
||||
{paused ? "Play" : "Pause"}
|
||||
</button>
|
||||
)}
|
||||
<dialog ref={dialogRef} className="hf-film-dialog" onClose={() => setOpen(null)} onClick={(e) => { if (e.target === dialogRef.current) setOpen(null); }}>
|
||||
{open && (
|
||||
<div>
|
||||
<video src={open.hq} poster={open.poster} controls autoPlay playsInline />
|
||||
<div className="hf-film-dialog-bar">
|
||||
<span><b>{open.kind}</b> {open.name} · made with HyperFrames</span>
|
||||
<button type="button" onClick={() => setOpen(null)}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,130 @@
|
||||
// A shelf of videos remixed in the Studio app: each card plays HeyGen's remix on hover, credits the original
|
||||
// (linked to its post), and says how to remix it yourself. Originals are never hosted here.
|
||||
export const RemixShelf = ({ items, tall = false }) => {
|
||||
// Hover previews follow the visitor's reduced-motion setting, known on the first render; the film is a button, so
|
||||
// playing it on purpose works for keyboard and touch, and under reduced motion.
|
||||
// The setting lives in a ref, not state: a preference change must not re-render the shelf, which would remount
|
||||
// every card (RemixCard is declared in here, as Mintlify snippets keep helpers inside the export) and lose a
|
||||
// playing film, focus and open instructions.
|
||||
const shelfRef = useRef(null);
|
||||
const reduced = useRef(null);
|
||||
if (reduced.current === null)
|
||||
reduced.current = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
useEffect(() => {
|
||||
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
const follow = (event) => {
|
||||
reduced.current = event.matches;
|
||||
// Turned on mid-visit: stop any hover preview that is running.
|
||||
if (event.matches) for (const v of shelfRef.current?.querySelectorAll("video") ?? []) if (v.dataset.hover) v.pause();
|
||||
};
|
||||
query.addEventListener("change", follow);
|
||||
return () => query.removeEventListener("change", follow);
|
||||
}, []);
|
||||
const RemixCard = ({ item }) => {
|
||||
const videoRef = useRef(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [chosen, setChosen] = useState(false);
|
||||
// One film at a time across the page: any other video starting with sound (another remix, the full-film dialog, a
|
||||
// replica pair) is a deliberate choice, so this card stops and lets go of its own.
|
||||
useEffect(() => {
|
||||
const onPlay = (event) => {
|
||||
const v = event.target;
|
||||
const own = videoRef.current;
|
||||
if (!(v instanceof HTMLVideoElement) || v.muted || v === own || !own) return;
|
||||
own.pause();
|
||||
own.muted = true;
|
||||
setChosen(false);
|
||||
};
|
||||
document.addEventListener("play", onPlay, true);
|
||||
return () => document.removeEventListener("play", onPlay, true);
|
||||
}, []);
|
||||
const preview = (on) => {
|
||||
const v = videoRef.current;
|
||||
const filmWithSound = [...document.querySelectorAll("video")].some((x) => !x.paused && !x.muted);
|
||||
if (!v || chosen || (on && filmWithSound)) return;
|
||||
if (on && !reduced.current) {
|
||||
v.dataset.hover = "1";
|
||||
v.play().catch(() => {});
|
||||
} else if (!on) {
|
||||
delete v.dataset.hover;
|
||||
v.pause();
|
||||
v.currentTime = 0;
|
||||
}
|
||||
};
|
||||
const toggle = () => {
|
||||
const v = videoRef.current;
|
||||
if (!v) return;
|
||||
// A chosen film plays with its sound; hover previews stay muted.
|
||||
if (chosen && !v.paused) {
|
||||
v.pause();
|
||||
v.muted = true;
|
||||
setChosen(false);
|
||||
} else {
|
||||
delete v.dataset.hover;
|
||||
v.muted = false;
|
||||
v.play().catch(() => {});
|
||||
setChosen(true);
|
||||
}
|
||||
};
|
||||
const copy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(item.post);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1600);
|
||||
} catch {}
|
||||
};
|
||||
return (
|
||||
<div className="hf-remix-card overflow-hidden rounded-xl border">
|
||||
<button
|
||||
type="button"
|
||||
className="hf-remix-media relative block w-full cursor-pointer border-0 p-0"
|
||||
style={{ aspectRatio: item.ratio }}
|
||||
aria-label={`${chosen ? "Pause" : "Play with sound:"} ${item.name}, remixed in HyperFrames`}
|
||||
aria-pressed={chosen}
|
||||
onMouseEnter={() => preview(true)}
|
||||
onMouseLeave={() => preview(false)}
|
||||
onClick={toggle}
|
||||
>
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="absolute inset-0 h-full w-full object-cover"
|
||||
src={item.result}
|
||||
poster={item.resultPoster}
|
||||
preload="none"
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
/>
|
||||
</button>
|
||||
<div className="flex flex-col gap-1.5 p-3">
|
||||
<strong className="hf-remix-name text-sm leading-snug">{item.name}</strong>
|
||||
<span className="hf-remix-credit text-xs">
|
||||
Remix of a video by{" "}
|
||||
<a href={item.post} target="_blank" rel="noopener noreferrer">{item.handle}</a>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
className="hf-remix-btn mt-1 self-start rounded-full px-3 py-1 text-xs font-semibold"
|
||||
>
|
||||
Remix in Studio
|
||||
</button>
|
||||
{open && (
|
||||
<div className="hf-remix-help text-xs leading-relaxed">
|
||||
Copy the original's link, then paste it in <strong>Reference</strong> on the Studio app's Home.{" "}
|
||||
<button type="button" onClick={copy} className="font-semibold underline">
|
||||
{copied ? "Copied" : "Copy link"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div ref={shelfRef} className={`not-prose my-6 grid gap-4 ${tall ? "grid-cols-2 sm:grid-cols-3" : "grid-cols-1 sm:grid-cols-2"}`}>
|
||||
{items.map((item) => <RemixCard key={item.id} item={item} />)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -193,12 +193,8 @@ test("HoverVideo preserves the caller's sizing classes at the Mintlify boundary"
|
||||
assert.match(wrapper[1], /overflow:\s*"hidden"/, "clip the preview inside its card");
|
||||
});
|
||||
|
||||
test("example films use the catalog player without making its controls source links", () => {
|
||||
const page = readFileSync(join(here, "../docs/examples.mdx"), "utf8");
|
||||
test("the catalog player keeps native controls until the CDN player upgrades it", () => {
|
||||
const source = readFileSync(join(here, "../docs/snippets/example-player.jsx"), "utf8");
|
||||
assert.equal((page.match(/<ExamplePlayer\s/g) ?? []).length, 23);
|
||||
assert.doesNotMatch(page, /<HoverVideo\s/);
|
||||
assert.doesNotMatch(page, /<a[^>]*>\s*<ExamplePlayer/);
|
||||
assert.match(source, /createElement\("hyperframes-player"\)/);
|
||||
assert.match(source, /player\.setAttribute\("controls", ""\)/);
|
||||
assert.match(
|
||||
|
||||
Reference in New Issue
Block a user