docs(examples): the inspiration page, with films and remixes to start from by ukimsanov · Pull Request #6383 · heygen-com/hyperframes

ukimsanov · 2026-10-26T02:34:58Z

What

The Examples page (/examples) becomes Inspiration, as decided on 23 Oct. Three parts:

Two moving rows of films made with HyperFrames: the homepage showcase, from launch films and cartoons to 3D, real UI and live-coded music. A click opens the full film with sound. There's a Pause button for the moving rows (WCAG 2.2.2, as on the homepage). With reduced motion turned on, the rows stand still.
Remix a video you like: 41 remixes of popular launch films, motion graphics and talking-head Reels. Each credits and links the original post. Remix in Studio explains how to remix it: copy the original's link, then paste it in Reference on the Studio app's Home. The remixes themselves are hosted; the originals are only linked, never re-hosted.
The Most-installed blocks and Project templates tables stay as they are.
Playback: remix previews follow reduced motion, and each remix is a button that plays it with sound; the film rows stop their previews while a full film plays in the dialog, so only one film plays at a time.
Recreate any video, 1:1 stays, moved under the remixes: each original next to its HyperFrames rebuild, matched frame for frame (THE OBLIST, Srinika × Mercury).
Removed from the old page: the 23 older launch films in the catalog player, many showing the Studio UI before this month's redesign. The rows above replace them with the current team films. Their snippet (example-player.jsx) stays for reuse, still covered by its own test.

Why

People learn what to make by seeing it. Today's Examples page has 4 videos and two tables, while the Studio app's best way in is starting from a video you like (Reference). This page shows the range HyperFrames can make, and gives each remix a one-step path into the app.

How we'll know: Inspiration visits that go on to the Studio app download or the Reference page (PostHog docs pageviews and clicks).

Related work

Docs PR 7c, stacked on #6380 and #6382 (#6378, #6379 and #6393 merged): until they merge, this diff also shows their commits. Review only this PR's own commits.

How

Credits come from the app's own list. Every remix credit and link comes from referenceVideo/flow/exampleCredits.ts in hyperframes-internal, the same list the app uses. 22 credits that the draft was missing are filled in. One remix is dropped because it's no longer in the app and has no credit.
The labels match today's app: Reference on Home, Remix from inspiration as the Home feed heading (RiffFeed.tsx), and Pick a reference in the Reference flow.
One film plays at a time. Measured in a normally launched Chrome: with one 720p film playing the page runs at 120 fps; with two or more it drops to 30 fps, with the rows moving or stopped, and with no long main-thread tasks. So only the card nearest the middle plays; the others show their poster. A film loads only when it's near the screen.
scripts/check-docs-snippet-motion.test.mjs asserted the old page held exactly 23 catalog players. Those three page assertions go; the player snippet's own assertions stay.

Test plan

mint broken-links --check-redirects: no broken links; mint validate passes; bun run lint passes, including check:docs-snippet-motion
Reduced motion: with Reduce Motion on, no film loads or plays, the rows stand still and there is no Pause button; turning it on mid-visit stops every film and drops its file (checked in Chrome)
Manual testing performed in Chrome on a local preview:
- 0 page errors at desktop and phone width, no sideways scroll;
- Pause stops the rows and every film, and Play resumes them;
- a click opens the full film with sound;
- Remix in Studio shows the steps, and Copy link copies the original post;
- all 82 remix film and poster URLs answer 200.
Measured: 120 fps with the rows moving (was 30 fps with every visible film playing); 0 long tasks
Documentation updated (if applicable)
Unit tests added/updated (docs only)
Comments follow CONTRIBUTING.md "Comments"

Copilot

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

mintlify · 2026-10-26T02:36:23Z

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated
hyperframes	🟢 Ready	View Preview	Oct 26, 2026, 8:28 AM

💡 Tip: Enable Automations to automatically generate PRs for you.

jrusso1020

We reviewed only this PR's last commit. All 41 original-post URLs match the app's credit list, but two author names are missing. Chromium controls also reproduce reduced-motion playback on the remix shelf and a preview playing behind the full-film dialog. Please fix the three inline findings. Broken links pass. Playback was checked with fixture media, not production FPS or full-film acceptance.

jrusso1020 · 2026-10-26T04:49:51Z

+    const videoRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const play = () => videoRef.current?.play().catch(() => {});


[P2] Apply reduced-motion policy to remix previews too. Unlike FilmRows, this shelf never reads or follows prefers-reduced-motion. With reduction enabled before mount, hovering a remix starts it; enabling reduction while it plays leaves it playing with src still assigned. We reproduced both cases in Chromium using the actual snippet and fixture media. Suppress incidental hover playback under reduced motion, stop and release autoplaying previews on a preference change, and keep an explicit accessible play control for deliberate playback.

jrusso1020 · 2026-10-26T04:49:51Z

+    const pick = () => {
+      const mid = window.innerWidth / 2;
+      const centre = (v) => { const r = v.getBoundingClientRect(); return Math.abs(r.left + r.width / 2 - mid); };
+      const first = root.classList.contains("is-paused") ? null : [...near].sort((a, b) => centre(a) - centre(b))[0];


[P2] Stop previews while the full film is open. This interval keeps selecting and playing a preview when open is set, while the dialog mounts an autoPlaying HQ video. Chromium with the actual snippet shows one player normally, zero on Pause, one after resume, then two when the full film opens: the preview plus the unmuted HQ film. Pause the previews and suspend their picker for the modal's lifetime, then resume the previous policy when it closes. This breaks the single-player policy introduced to avoid the multi-video performance problem.

jrusso1020 · 2026-10-26T04:49:51Z

+    "post": "https://www.tiktok.com/@cindiezhu/video/7694049166972013831"
+  },
+  {
+    "id": "aroll-hook-open-loops",


[P2] Include the two missing author handles. aroll-hook-open-loops and aroll-hundred-days-story have post URLs but no handle, so RemixShelf renders "Remix of a video by" followed by an empty link for each. Current exampleCredits.ts supplies @realskytan and @anyway.julia respectively. We checked all 41 post URLs against that list; these two missing fields are the remaining visible credit gap.

jrusso1020

We checked the follow-up and rebased scope. The previous reduced-motion, modal playback and author-credit findings are resolved. One new component-identity bug resets remix cards when the motion preference changes. Please fix the inline finding. Runtime checks used actual snippets with fixture media.

jrusso1020 · 2026-10-26T05:29:57Z

+  useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const follow = (event) => {
+      setReduced(event.matches);


[P2] Preserve card identity when the motion preference changes. RemixCard is declared inside RemixShelf, so this new parent state update creates a new component type for every card. In Chromium, intentionally playing a remix by keyboard under reduced motion and then switching reduction off replaces the video node, resets it to paused/time 0/muted, and loses keyboard focus. Expanded Remix in Studio instructions also disappear (Copy link count goes from one to zero). This is more than stopping hover motion. Keep the card component type stable across shelf renders and pass the preference through without remounting it, using a Mintlify-compatible arrangement.

jrusso1020

We checked the follow-up and rebased patches. Motion preference changes now keep the same remix video, deliberate playback, focus and open instructions. The modal pause/resume policy and corrected credits still check out. Our prior findings are resolved; no new blocker found in the snippet fixture checks.

miguel-heygen

Independent review at e311b043979e155bcb608c0f6871b3c438c703da, scoped to the Inspiration delta above 3f40b2aca. The identity repair works: deliberate remix playback, focus, the video node and expanded instructions survive a motion-preference change. All 41 original-post URLs and creator credits match the available app credit source (four use the creator's name rather than handle).

Blocker (P2), docs/snippets/film-rows.jsx:139: opening the full-film dialog pauses only FilmRows previews. On the real hosted /examples page, keyboard-play the first remix (Pond), then open Studio launch in the film rows. Once loaded, the dialog film and the offscreen remix both have paused=false and muted=false; the remix continues behind the modal. Its controls are then outside the modal. Extend the playback owner/suspension boundary to the remix shelves, not just video[data-src] descendants, and cover chosen remix → dialog → close, preserving a usable deliberate playback state.

Executed: public hosted preview with actual CDN films; keyboard/motion-change identity control and the cross-surface two-unmuted-films sequence. Exact-head snippet-motion suite: 14/14 pass. Audited: own five-file diff, both shelves, FilmRows modal/preview lifetimes, credits and relevant cumulative consumers. Rames's existing repairs remain resolved; this is a separate sibling-component boundary.

CI: 56 success / 54 skipped / one cancelled Studio/player capture job, no failed checks. No production FPS measurement, native/provider acceptance, installation, paid call, production write or merge.

Verdict: REQUEST CHANGES
Reasoning: The dialog enforces one film only within FilmRows; a deliberately playing remix remains unmuted behind it on the same actual page.

— Magi

miguel-heygen · 2026-10-26T06:38:06Z

+    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();


[P2] Include remix playback in the full-film modal boundary. In the hosted /examples route, keyboard-play Pond in RemixShelf, then open Studio launch from FilmRows. After the HQ film loads, both it and the offscreen Pond film have paused=false and muted=false. This effect pauses only FilmRows video[data-src] descendants; RemixShelf is a sibling and keeps playing behind the modal, where its controls are inaccessible. Coordinate the page playback owner/suspend shelves when the dialog opens and test chosen remix → dialog → close, not only hover preview → dialog.

miguel-heygen

Independent repair review at ca8e87a93ce3c9aec5ddaf0e171be4e3af4cee7d; replaces my remix-behind-dialog hold.

docs/snippets/remix-shelf.jsx:30-45 now releases the card's film/selection when another unmuted film starts; film-rows.jsx:120-124 suppresses incidental previews while sound plays elsewhere. In the newly deployed public /examples Mintlify preview, keyboard-start Pond then Studio launch: only the dialog film plays, Pond is paused/muted and aria-pressed=false. Escape closes the dialog and a muted row preview resumes. The same sequence passes at 390px dark/reduced-motion and in the isolated exact-source browser control.

Audited: repair and inherited DayList delta, shelf/row/dialog consumers, listener cleanup, full previous peer texts. The previous identity, credits and reduced-motion repairs remain covered by the prior audit. Executed: actual hosted public CDN media and 14/14 snippet-motion tests. No uncaught page errors; the known GitHub repository/star widget XHR 403 is unrelated. No native/provider/FPS acceptance claim.

CI snapshot: 37 success, 19 skipped, 1 neutral, 6 running; docs validation, lint and Mintlify deployment succeeded, no failing checks. Remaining Studio/Windows/analysis checks are pending, not claimed green.

Verdict: APPROVE
Reasoning: Deliberate remix playback no longer continues behind the full-film modal, and preview behavior resumes correctly after dismissal.

— Magi

miguel-heygen

Successor review at e568a77c16e233d1807cf9ca9f9bee207cf4e248. docs/custom.css:1737,1813-1822 and remix-shelf.jsx:78-114 use the merged palette tokens for cards, pills and film controls. The shelf changes only classes; FilmRows playback code is byte-identical to the approved repair.

Audited: restacked layer, palette rules and their consumers, unchanged page-wide playback boundary and all current peer texts. Trusting: prior credit/provider/prose audit for unchanged content. Executed: public hosted /examples in light/dark and 390px, computed styles and screenshots without horizontal overflow. Keyboard opening Studio launch after deliberately playing Pond leaves only the dialog film playing with sound; Pond is paused/muted and unpressed. Escape closes the dialog. 14 snippet-motion tests pass. No uncaught page errors or HTTP errors in the captured network sample; this is not a full media census or native/provider/FPS acceptance.

Current-head CI snapshot: {'skipped': 50, 'success': 52, 'in_progress': 2, 'neutral': 1}. Docs validation, lint and Mintlify deployment passed; remaining checks are pending, not claimed green.

Verdict: APPROVE
Reasoning: The reviewed content/repairs survive the restack, and the new palette integration has no blocking defect in the affected rendered routes. Approval covers this exact head only.

— Magi

… 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.

…log 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.

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.

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.

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.

miguel-heygen

Restack review at eed9e13033b90ecb7ef1fb6d0b1c7ccc6077f58d onto a183125e97e176af628ed36826758332ad8e9d6d. The complete five-file patch is byte-identical to the approved b1c11ced..e568a77c layer, and all five commits match in git range-diff. docs/snippets/remix-shelf.jsx:30-45 retains the page-wide sound-playback boundary; both snippets, their CSS, page content and motion tests are byte-identical to my approved version.

Audited: exact patch/file equality, new base integration, all current review/inline/comment texts and current-head checks. The only inherited docs differences from the prior approved tree are unrelated changelog, CLI and harness-context prose. Trusting: my prior hosted /examples light/dark/mobile and Pond → Studio launch → Escape evidence for the unchanged page and playback code; I did not rerun that browser walk this round. No new provider/native/FPS acceptance claim.

Executed: exact-head archive motion suite, 14/14 passed; snippet-motion guard passed. CI snapshot: 25 success, 14 skipped, 1 neutral, 17 in progress, zero failures. Lint passed; docs validation and broader checks remain pending, not claimed green. No installs, worktree, product edits, merge or deployment.

Verdict: APPROVE
Reasoning: The rebase preserves the complete reviewed patch and its prior repairs without a content conflict or new interaction in the affected consumers. This approval covers the exact head above.

— Magi

Copilot AI balanced review requested due to automatic review settings October 26, 2026 02:34

Copilot AI reviewed Oct 26, 2026

mintlify Bot deployed to staging - docs October 26, 2026 02:41

View deployment

ukimsanov mentioned this pull request Oct 26, 2026

docs: the docs in hyperframes.dev's and the Studio app's colours #6393

Merged

6 of 7 tasks

ukimsanov force-pushed the docs/inspiration branch from 44f62eb to 28902c5 Compare October 26, 2026 03:55

mintlify Bot deployed to staging - docs October 26, 2026 04:01

View deployment

ukimsanov force-pushed the docs/inspiration branch from 28902c5 to 06c9af7 Compare October 26, 2026 04:04

mintlify Bot deployed to staging - docs October 26, 2026 04:10

View deployment

ukimsanov force-pushed the docs/inspiration branch from 06c9af7 to a471b1f Compare October 26, 2026 04:11

mintlify Bot deployed to staging - docs October 26, 2026 04:18

View deployment

ukimsanov force-pushed the docs/inspiration branch from a471b1f to 4f1dbf2 Compare October 26, 2026 04:34

mintlify Bot deployed to staging - docs October 26, 2026 04:40

View deployment

jrusso1020 reviewed Oct 26, 2026

View reviewed changes

ukimsanov force-pushed the docs/inspiration branch from 4f1dbf2 to f8ad82b Compare October 26, 2026 04:56

mintlify Bot deployed to staging - docs October 26, 2026 05:02

View deployment

jrusso1020 reviewed Oct 26, 2026

View reviewed changes

ukimsanov force-pushed the docs/inspiration branch from f8ad82b to e311b04 Compare October 26, 2026 05:35

jrusso1020 reviewed Oct 26, 2026

View reviewed changes

mintlify Bot deployed to staging - docs October 26, 2026 05:45

View deployment

miguel-heygen requested changes Oct 26, 2026

View reviewed changes

ukimsanov force-pushed the docs/inspiration branch from e311b04 to ca8e87a Compare October 26, 2026 06:43

mintlify Bot deployed to staging - docs October 26, 2026 06:49

View deployment

miguel-heygen approved these changes Oct 26, 2026

View reviewed changes

ukimsanov force-pushed the docs/inspiration branch from ca8e87a to e568a77 Compare October 26, 2026 07:06

mintlify Bot deployed to staging - docs October 26, 2026 07:13

View deployment

miguel-heygen approved these changes Oct 26, 2026

View reviewed changes

ukimsanov added 3 commits October 26, 2026 04:17

docs(examples): a motion setting change keeps remix cards as they are

ab487b7

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.

ukimsanov added 2 commits October 26, 2026 04:17

docs(examples): remix cards and film-row controls in the docs palette

eed9e13

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.

ukimsanov force-pushed the docs/inspiration branch from e568a77 to eed9e13 Compare October 26, 2026 08:17

miguel-heygen approved these changes Oct 26, 2026

View reviewed changes

ukimsanov enabled auto-merge October 26, 2026 08:22

mintlify Bot deployed to staging - docs October 26, 2026 08:28

View deployment

ukimsanov added this pull request to the merge queue Oct 26, 2026

Merged via the queue into main with commit 3f1950b Oct 26, 2026
66 checks passed

ukimsanov deleted the docs/inspiration branch October 26, 2026 08:59

Conversation

ukimsanov commented Oct 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

Related work

How

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

mintlify Bot commented Oct 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jrusso1020 left a comment

Choose a reason for hiding this comment

Uh oh!

jrusso1020 Oct 26, 2026

Choose a reason for hiding this comment

Uh oh!

jrusso1020 Oct 26, 2026

Choose a reason for hiding this comment

Uh oh!

jrusso1020 Oct 26, 2026

Choose a reason for hiding this comment

Uh oh!

jrusso1020 left a comment

Choose a reason for hiding this comment

Uh oh!

jrusso1020 Oct 26, 2026

Choose a reason for hiding this comment

Uh oh!

jrusso1020 left a comment

Choose a reason for hiding this comment

Uh oh!

miguel-heygen left a comment

Choose a reason for hiding this comment

Uh oh!

miguel-heygen Oct 26, 2026

Choose a reason for hiding this comment

Uh oh!

miguel-heygen left a comment

Choose a reason for hiding this comment

Uh oh!

miguel-heygen left a comment

Choose a reason for hiding this comment

Uh oh!

miguel-heygen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ukimsanov commented Oct 26, 2026 •

edited

Loading

mintlify Bot commented Oct 26, 2026 •

edited

Loading