mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +00:00
Miguel Ángel
536165b6ef
* 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
1 line
7.2 KiB
JSON
1 line
7.2 KiB
JSON
{"html":"<!doctype html>\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: transparent;\n overflow: hidden;\n }\n #mk-sl-root {\n /* ---- mk tokens: override in the host to re-skin the family ---- */\n --mk-font: \"Inter\", -apple-system, sans-serif;\n --mk-ink: #1d1d1f;\n --mk-ink-dim: #6e6e73;\n --mk-ink-dark: #f5f5f7;\n --mk-ink-dim-dark: #a1a1a6;\n --mk-accent: #0071e3;\n --mk-accent-dark: #7d5cff;\n --mk-hairline: 2px;\n\n position: relative;\n width: 1920px;\n height: 1080px;\n overflow: hidden;\n background: transparent; /* overlays footage or mk-background */\n }\n #mk-sl-scrim {\n position: absolute;\n inset: 0;\n background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 62%);\n opacity: 0;\n }\n #mk-sl-col {\n position: absolute;\n display: flex;\n flex-direction: column;\n }\n .mk-sl-row {\n font-family: var(--mk-font);\n line-height: 1;\n opacity: 0;\n }\n .mk-sl-text {\n display: flex;\n align-items: baseline;\n gap: 18px;\n white-space: nowrap;\n }\n .mk-sl-label {\n font-weight: 600;\n font-size: 46px;\n letter-spacing: -0.015em;\n color: var(--mk-ink);\n }\n .mk-sl-value {\n font-weight: 400;\n font-size: 40px;\n letter-spacing: -0.01em;\n color: var(--mk-ink-dim);\n }\n .mk-sl-line {\n position: relative;\n margin-top: 22px;\n height: var(--mk-hairline);\n background: rgba(0, 0, 0, 0.1);\n border-radius: 2px;\n overflow: hidden;\n }\n .mk-sl-line-fill {\n position: absolute;\n inset: 0;\n background: var(--mk-accent);\n transform-origin: left center;\n }\n /* dark scheme: white rows for use over footage (overlay look) */\n .mk-dark .mk-sl-label {\n color: var(--mk-ink-dark);\n }\n .mk-dark .mk-sl-value {\n color: var(--mk-ink-dim-dark);\n }\n .mk-dark .mk-sl-line {\n background: rgba(255, 255, 255, 0.18);\n }\n .mk-dark .mk-sl-line-fill {\n background: var(--mk-accent-dark);\n }\n </style>\n </head>\n <body>\n <div\n id=\"mk-sl-root\"\n data-composition-id=\"mk-specs-list\"\n data-start=\"0\"\n data-duration=\"8\"\n data-width=\"1920\"\n data-height=\"1080\"\n >\n <div id=\"mk-sl-scrim\"></div>\n <div id=\"mk-sl-col\"></div>\n <div\n id=\"mk-sl-drv\"\n class=\"clip\"\n data-start=\"0\"\n data-duration=\"8\"\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 /* ---- published parameters (inspector-style CONFIG) ---- */\n var CONFIG = {\n scheme: \"light\", // \"light\" (ink rows) | \"dark\" (white rows, for footage)\n rows: [\n { label: \"Design\", value: \"Minimal, clean lines\" },\n { label: \"Typography\", value: \"Inter SemiBold\" },\n { label: \"Motion\", value: \"Restrained, no bounce\" },\n { label: \"Color\", value: \"Stage + one accent\" },\n { label: \"Shapes\", value: \"Capsules & rounded cards\" },\n ],\n underline: true, // accent sweep under each row\n lineWidth: 660, // px\n scrim: 0, // 0–1 left-edge dark scrim for readability over footage\n x: 160, // column left edge\n rowGap: 44, // px between rows\n stagger: 0.18, // s between row entrances\n animationIn: true,\n animationOut: true,\n };\n\n var DUR = 8;\n var root = document.getElementById(\"mk-sl-root\");\n var col = document.getElementById(\"mk-sl-col\");\n var scrim = document.getElementById(\"mk-sl-scrim\");\n\n if (CONFIG.scheme === \"dark\") root.classList.add(\"mk-dark\");\n scrim.style.opacity = String(CONFIG.scrim);\n\n /* build rows */\n CONFIG.rows.forEach(function (r, i) {\n var row = document.createElement(\"div\");\n row.id = \"mk-sl-row-\" + i;\n row.className = \"mk-sl-row\";\n if (i > 0) row.style.marginTop = CONFIG.rowGap + \"px\";\n\n var text = document.createElement(\"div\");\n text.className = \"mk-sl-text\";\n var label = document.createElement(\"span\");\n label.className = \"mk-sl-label\";\n label.textContent = r.label;\n text.appendChild(label);\n if (r.value) {\n var value = document.createElement(\"span\");\n value.className = \"mk-sl-value\";\n value.textContent = r.value;\n text.appendChild(value);\n }\n row.appendChild(text);\n\n if (CONFIG.underline) {\n var line = document.createElement(\"div\");\n line.className = \"mk-sl-line\";\n line.style.width = CONFIG.lineWidth + \"px\";\n var fill = document.createElement(\"div\");\n fill.id = \"mk-sl-fill-\" + i;\n fill.className = \"mk-sl-line-fill\";\n line.appendChild(fill);\n row.appendChild(line);\n }\n col.appendChild(row);\n });\n\n /* center the column vertically */\n var colH =\n CONFIG.rows.length * (46 + 22 + (CONFIG.underline ? 2 : 0)) +\n (CONFIG.rows.length - 1) * CONFIG.rowGap;\n col.style.left = CONFIG.x + \"px\";\n col.style.top = Math.round((1080 - colH) / 2) + \"px\";\n\n var tl = gsap.timeline({ paused: true });\n\n CONFIG.rows.forEach(function (r, i) {\n var row = document.getElementById(\"mk-sl-row-\" + i);\n var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;\n\n if (CONFIG.animationIn) {\n gsap.set(row, { opacity: 0, x: -36 });\n tl.to(row, { opacity: 1, x: 0, duration: 0.7, ease: \"power3.out\" }, t0);\n } else {\n gsap.set(row, { opacity: 1 });\n }\n\n if (CONFIG.underline) {\n var fill = document.getElementById(\"mk-sl-fill-\" + i);\n gsap.set(fill, { scaleX: 0 });\n tl.to(fill, { scaleX: 1, duration: 0.8, ease: \"power2.inOut\" }, t0 + 0.15);\n }\n });\n\n /* exit + hard kill */\n if (CONFIG.animationOut) {\n tl.to(col, { opacity: 0, y: -20, duration: 0.4, ease: \"power2.in\" }, DUR - 0.5);\n tl.to(scrim, { opacity: 0, duration: 0.4, ease: \"power2.in\" }, DUR - 0.5);\n }\n tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n window.__timelines[\"mk-specs-list\"] = tl;\n })();\n </script>\n </body>\n</html>\n"} |