ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 06:30:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(catalog): play the real composition on catalog pages (#3168)

Browse Source 
* feat(catalog): play the real composition on catalog pages

Catalog previews were uploaded MP4s, published by hand to the CDN. Each page
now embeds the composition itself, running in <hyperframes-player>, so a
preview is the block rather than a recording of it.

The composition is delivered as JSON under docs/public/catalog, and the player
is mounted inside an iframe. Both are forced: the docs host publishes only JSON
and images out of docs/public, and its MDX renderer strips unknown custom
elements, so a player written into the page never reaches the DOM and an .html
payload 404s in production.

Assets are inlined as data URIs, which sidesteps the file-type restriction for
fonts, scripts and models alike. 164 of 168 items build a payload; the rest
keep their MP4 and say so.

* chore: rebuild docs preview

* chore: route isolation probe

* chore: drop the route isolation probe page

* chore: probe which asset types the docs host publishes

* refactor(catalog): host preview assets instead of inlining them

Fonts were being base64'd into every payload that used them, so a handful of
files cost tens of megabytes in the repository to say the same thing over and
over. Assets are now written once, content-addressed, under
docs/public/catalog/assets and linked.

Which types can be hosted was settled by fetching one file of each from a
deployed preview: woff2, wav, mp4, svg and the image formats are published,
glb is not. Types the host drops still travel inside the payload, because a
link that 404s is worse than a larger payload.

Also fixes the four type errors the scripts typecheck caught, all of them
unchecked index access on a split() result.

* refactor(catalog): share preview assets instead of repeating them

* style: format the asset module
This commit is contained in:
Miguel Ángel
2026-08-10 17:54:48 -04:00
committed by GitHub
parent 3e5be0e8c3
commit 536165b6ef
400 changed files with 1827 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/public/catalog/components/yt-screen-warp.json
+1
View File
@@ -0,0 +1 @@
{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to yt-screen-warp.html except the\n root background, which is opaque here so the transparent overlay reads.\n Not installed by `hyperframes add` - registry-item.json lists yt-screen-warp.html only. -->\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n <style>\n *,\n *::before,\n *::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n body {\n background: #14161c;\n overflow: hidden;\n }\n /* ---- yt-screen-warp ---------------------------------------------------\n Make footage read as a physical display: add .yt-screen-warp3d to the\n media WRAPPER (subtle perspective), and place .yt-screen-fx overlay\n inside it (pixel grid + scanlines + vignette + sheen). */\n .yt-screen-warp3d {\n transform: perspective(1400px) rotateY(-3.5deg) rotateX(1.6deg);\n }\n .yt-screen-fx {\n position: absolute;\n inset: 0;\n pointer-events: none;\n opacity: 0;\n background:\n /* sheen */\n linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, transparent 30%),\n /* scanlines */\n repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px),\n /* pixel grid */\n repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 4px);\n box-shadow:\n inset 0 0 90px rgba(0, 0, 0, 0.4),\n inset 0 0 8px rgba(0, 0, 0, 0.5);\n }\n /* self-preview stand-in */\n #yt-sw-wrap {\n position: absolute;\n left: 360px;\n top: 190px;\n width: 1200px;\n height: 700px;\n border-radius: 18px;\n overflow: hidden;\n }\n #yt-sw-fill {\n position: absolute;\n inset: 0;\n background: linear-gradient(150deg, #ff8fb8 0%, #7d5cff 60%, #2a7fff 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: \"Inter\", ui-sans-serif, sans-serif;\n font-weight: 700;\n font-size: 92px;\n color: rgba(255, 255, 255, 0.93);\n }\n </style>\n </head>\n <body>\n <!-- Self-preview wrapper. WIRING: copy the two CSS classes; add\n class=\"yt-screen-warp3d\" to your media wrapper and\n <div class=\"yt-screen-fx\" id=\"yt-my-fx\"></div> as its LAST child. Then:\n\n ytScreenOn(tl, \"#yt-my-fx\", 2.0);\n ytScreenOff(tl, \"#yt-my-fx\", 8.0);\n -->\n <div\n id=\"yt-sw-root\"\n data-composition-id=\"yt-screen-warp\"\n data-start=\"0\"\n data-duration=\"4\"\n data-width=\"1920\"\n data-height=\"1080\"\n >\n <div id=\"yt-sw-wrap\" class=\"yt-screen-warp3d\">\n <div id=\"yt-sw-fill\">on screen</div>\n <div class=\"yt-screen-fx\" id=\"yt-sw-fx\"></div>\n </div>\n <div\n id=\"yt-sw-drv\"\n class=\"clip\"\n data-start=\"0\"\n data-duration=\"4\"\n data-track-index=\"0\"\n style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n ></div>\n </div>\n <script>\n (function () {\n window.__timelines = window.__timelines || {};\n\n // ---- copy these helpers into the host script ----\n window.ytScreenOn = function (tl, target, at) {\n tl.to(target, { opacity: 1, duration: 0.5, ease: \"power2.out\" }, at);\n };\n window.ytScreenOff = function (tl, target, at) {\n tl.to(target, { opacity: 0, duration: 0.4, ease: \"power2.in\" }, at);\n };\n\n // Self-preview timeline.\n var tl = gsap.timeline({ paused: true });\n gsap.set(\"#yt-sw-wrap\", { opacity: 0, scale: 0.96 });\n tl.to(\"#yt-sw-wrap\", { opacity: 1, scale: 1, duration: 0.5, ease: \"power2.out\" }, 0.2);\n window.ytScreenOn(tl, \"#yt-sw-fx\", 0.8);\n window.ytScreenOff(tl, \"#yt-sw-fx\", 3.1);\n tl.to(\"#yt-sw-wrap\", { opacity: 0, duration: 0.35, ease: \"power2.in\" }, 3.5);\n tl.set(\"#yt-sw-root\", { visibility: \"hidden\" }, 3.98);\n window.__timelines[\"yt-screen-warp\"] = tl;\n })();\n </script>\n </body>\n</html>\n"}