+## 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
-
+Product launches and type-led motion, rebuilt from the original's cuts, timing and effects.
-### Motion, sound & effects
+
-Motion is the message — kinetic type, beat-synced cuts, texture and VFX.
+### Talking-head edits
-
-
-
-
Texture launchMotion design · 100% HyperFrames
-
-
-
-
VFX reelShaders and effects · 100% HyperFrames
-
-
-
-
Music to videoCuts synced to a track · 100% HyperFrames
-
-
-
-
Sound & musicSFX and music with the CLI · source included
-
-
-
-### Workflows & integrations
-
-A PR, a Figma file, a design brief — turned into a finished film.
-
-
-
-
-
PR to videoA GitHub PR as a reveal · source included
Open models (Ollama)Build with local models · 100% HyperFrames
-
-
-
-
Community · hyperframes.devPublish and remix · 100% HyperFrames
-
-
+The editing style of popular Reels, TikToks and Shorts, with a different presenter: captions, cutaways, callouts and
+pacing.
+
## 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)
diff --git a/docs/snippets/film-rows.jsx b/docs/snippets/film-rows.jsx
new file mode 100644
index 0000000000..3ca870ac68
--- /dev/null
+++ b/docs/snippets/film-rows.jsx
@@ -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) => (
+
+ );
+
+ return (
+
+ {rows.map((row, r) => (
+
+
+ {row.map((f, i) => card(f, i, false))}
+ {row.map((f, i) => card(f, i, true))}
+
+
+ ))}
+ {/* 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 && (
+
+ )}
+
+
+ );
+};
diff --git a/docs/snippets/remix-shelf.jsx b/docs/snippets/remix-shelf.jsx
new file mode 100644
index 0000000000..fcd3b7dd61
--- /dev/null
+++ b/docs/snippets/remix-shelf.jsx
@@ -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 (
+
+
+
+ {item.name}
+
+ Remix of a video by{" "}
+ {item.handle}
+
+
+ {open && (
+
+ Copy the original's link, then paste it in Reference on the Studio app's Home.{" "}
+
+
+ )}
+
+
+ );
+ };
+ return (
+
+ {items.map((item) => )}
+
+ );
+};
diff --git a/scripts/check-docs-snippet-motion.test.mjs b/scripts/check-docs-snippet-motion.test.mjs
index 650f2c2456..7c6bb72ab0 100644
--- a/scripts/check-docs-snippet-motion.test.mjs
+++ b/scripts/check-docs-snippet-motion.test.mjs
@@ -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(/]*>\s*