mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +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
10 KiB
JSON
1 line
10 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-lg-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-accent: #0071e3;\n --mk-paper: #ffffff;\n --mk-blob-2: #45d6c8;\n --mk-axis: rgba(29, 29, 31, 0.22);\n\n position: relative;\n width: 1920px;\n height: 1080px;\n overflow: hidden;\n background: transparent; /* overlays footage or mk-background */\n font-family: var(--mk-font);\n }\n #mk-lg-svg {\n position: absolute;\n inset: 0;\n }\n .mk-lg-line {\n fill: none;\n stroke-width: 5;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n .mk-lg-dot {\n stroke-width: 4;\n fill: var(--mk-paper);\n }\n .mk-lg-axis {\n stroke: var(--mk-axis);\n stroke-width: 2;\n }\n .mk-lg-value {\n position: absolute;\n font-weight: 600;\n font-size: 30px;\n letter-spacing: -0.01em;\n color: var(--mk-ink);\n font-variant-numeric: tabular-nums;\n /* Horizontal centring only. The label's vertical offset is baked into\n `top` instead of a CSS translate, because the entrance tween animates\n `y` and GSAP rewrites this transform, dropping any vertical shift. */\n transform: translate(-50%, 0);\n line-height: 38px;\n white-space: nowrap;\n }\n .mk-lg-xlabel {\n position: absolute;\n font-weight: 400;\n font-size: 26px;\n color: var(--mk-ink-dim);\n transform: translateX(-50%);\n white-space: nowrap;\n }\n .mk-lg-legend {\n position: absolute;\n display: flex;\n gap: 40px;\n }\n .mk-lg-legend-item {\n display: flex;\n align-items: center;\n gap: 12px;\n font-weight: 500;\n font-size: 30px;\n color: var(--mk-ink-dim);\n }\n .mk-lg-legend-dot {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n }\n </style>\n </head>\n <body>\n <div\n id=\"mk-lg-root\"\n data-composition-id=\"mk-line-graph\"\n data-start=\"0\"\n data-duration=\"7\"\n data-width=\"1920\"\n data-height=\"1080\"\n >\n <svg id=\"mk-lg-svg\" viewBox=\"0 0 1920 1080\"></svg>\n <div id=\"mk-lg-labels\"></div>\n <div\n id=\"mk-lg-drv\"\n class=\"clip\"\n data-start=\"0\"\n data-duration=\"7\"\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 A minimal presentation line graph: 1–2 series draw on, dots pop, value labels\n ride their points, axes dimmer than labels (clear hierarchy). */\n var CONFIG = {\n // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens\n series: [\n { name: \"Renders\", color: null /* accent */, values: [12, 26, 22, 38, 44, 58] },\n { name: \"Projects\", color: null /* blob-2 */, values: [8, 14, 18, 16, 28, 36] },\n ],\n xLabels: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"],\n showValues: true,\n area: { x: 160, y: 240, w: 980, h: 500 }, // plot rectangle\n animationIn: true,\n animationOut: true,\n };\n\n var DUR = 7;\n var NS = \"http://www.w3.org/2000/svg\";\n var root = document.getElementById(\"mk-lg-root\");\n var svg = document.getElementById(\"mk-lg-svg\");\n var labels = document.getElementById(\"mk-lg-labels\");\n var A = CONFIG.area;\n\n var accent = getComputedStyle(root).getPropertyValue(\"--mk-accent\").trim();\n var blob2 = getComputedStyle(root).getPropertyValue(\"--mk-blob-2\").trim();\n if (CONFIG.series[1] && !CONFIG.series[1].color) CONFIG.series[1].color = blob2;\n\n /* scale: 0..max(all values)*1.15 into the plot rect */\n var max = 0;\n CONFIG.series.forEach(function (s) {\n s.values.forEach(function (v) {\n if (v > max) max = v;\n });\n });\n max *= 1.15;\n var n = CONFIG.series[0].values.length;\n function px(i) {\n return A.x + (i / (n - 1)) * A.w;\n }\n function py(v) {\n return A.y + A.h - (v / max) * A.h;\n }\n\n /* baseline axis */\n var axis = document.createElementNS(NS, \"line\");\n axis.setAttribute(\"class\", \"mk-lg-axis\");\n axis.setAttribute(\"x1\", A.x - 20);\n axis.setAttribute(\"y1\", A.y + A.h);\n axis.setAttribute(\"x2\", A.x + A.w + 20);\n axis.setAttribute(\"y2\", A.y + A.h);\n axis.id = \"mk-lg-axis\";\n svg.appendChild(axis);\n\n /* series paths, dots, value labels */\n var paths = [],\n dots = [],\n vals = [];\n CONFIG.series.forEach(function (s, si) {\n var color = s.color || accent;\n var d = s.values\n .map(function (v, i) {\n return (i === 0 ? \"M\" : \"L\") + px(i) + \" \" + py(v);\n })\n .join(\" \");\n var path = document.createElementNS(NS, \"path\");\n path.setAttribute(\"class\", \"mk-lg-line\");\n path.setAttribute(\"d\", d);\n path.setAttribute(\"stroke\", color);\n path.id = \"mk-lg-path-\" + si;\n svg.appendChild(path);\n paths.push(path);\n\n s.values.forEach(function (v, i) {\n var dot = document.createElementNS(NS, \"circle\");\n dot.setAttribute(\"class\", \"mk-lg-dot\");\n dot.setAttribute(\"cx\", px(i));\n dot.setAttribute(\"cy\", py(v));\n dot.setAttribute(\"r\", 9);\n dot.setAttribute(\"stroke\", color);\n dot.id = \"mk-lg-dot-\" + si + \"-\" + i;\n svg.appendChild(dot);\n dots.push({ el: dot, si: si, i: i });\n\n if (CONFIG.showValues) {\n var val = document.createElement(\"div\");\n /* Series after the first label downward. With every series\n labelling upward the numbers collide wherever the lines run\n close together. GAP clears the dot radius plus line stroke. */\n var below = si > 0;\n var GAP = 22;\n val.className = \"mk-lg-value\";\n val.id = \"mk-lg-val-\" + si + \"-\" + i;\n val.textContent = v;\n val.style.left = px(i) + \"px\";\n val.style.top = py(v) + (below ? GAP : -(GAP + 38)) + \"px\";\n labels.appendChild(val);\n vals.push({ el: val, si: si, i: i });\n }\n });\n });\n\n /* x labels + legend */\n CONFIG.xLabels.slice(0, n).forEach(function (t, i) {\n var xl = document.createElement(\"div\");\n xl.className = \"mk-lg-xlabel\";\n xl.id = \"mk-lg-xl-\" + i;\n xl.textContent = t;\n xl.style.left = px(i) + \"px\";\n xl.style.top = A.y + A.h + 24 + \"px\";\n labels.appendChild(xl);\n });\n var legend = document.createElement(\"div\");\n legend.className = \"mk-lg-legend\";\n legend.id = \"mk-lg-legend\";\n legend.style.left = A.x + \"px\";\n legend.style.top = A.y + A.h + 90 + \"px\";\n CONFIG.series.forEach(function (s) {\n var item = document.createElement(\"div\");\n item.className = \"mk-lg-legend-item\";\n var dot = document.createElement(\"span\");\n dot.className = \"mk-lg-legend-dot\";\n dot.style.background = s.color || accent;\n item.appendChild(dot);\n item.appendChild(document.createTextNode(s.name));\n legend.appendChild(item);\n });\n labels.appendChild(legend);\n\n var tl = gsap.timeline({ paused: true });\n var DRAW = 1.3;\n\n /* entrance: axis + x labels settle first */\n gsap.set([axis, legend], { opacity: 0 });\n tl.to(axis, { opacity: 1, duration: 0.5, ease: \"power2.out\" }, 0.2);\n CONFIG.xLabels.slice(0, n).forEach(function (t, i) {\n var xl = document.getElementById(\"mk-lg-xl-\" + i);\n gsap.set(xl, { opacity: 0, y: 10 });\n tl.to(xl, { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, 0.25 + i * 0.05);\n });\n\n /* draw each series, dots + values riding the draw front */\n CONFIG.series.forEach(function (s, si) {\n var t0 = (CONFIG.animationIn ? 0.5 : 0) + si * 0.35;\n var path = paths[si];\n var len = path.getTotalLength();\n gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });\n tl.to(path, { strokeDashoffset: 0, duration: DRAW, ease: \"power2.inOut\" }, t0);\n\n s.values.forEach(function (v, i) {\n var dot = document.getElementById(\"mk-lg-dot-\" + si + \"-\" + i);\n var td = t0 + (i / (n - 1)) * DRAW * 0.92;\n gsap.set(dot, { scale: 0, transformOrigin: \"50% 50%\" });\n tl.to(dot, { scale: 1, duration: 0.35, ease: \"back.out(1.2)\" }, td);\n if (CONFIG.showValues) {\n var val = document.getElementById(\"mk-lg-val-\" + si + \"-\" + i);\n gsap.set(val, { opacity: 0, y: 8 });\n tl.to(val, { opacity: 1, y: 0, duration: 0.35, ease: \"power2.out\" }, td + 0.06);\n }\n });\n });\n\n tl.to(legend, { opacity: 1, duration: 0.5, ease: \"power2.out\" }, 2.3);\n\n /* exit + hard kill */\n if (CONFIG.animationOut) {\n tl.to([svg, labels], { opacity: 0, y: -20, duration: 0.4, ease: \"power2.in\" }, DUR - 0.5);\n }\n tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n window.__timelines[\"mk-line-graph\"] = tl;\n })();\n </script>\n </body>\n</html>\n"} |