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
14 KiB
JSON
1 line
14 KiB
JSON
{"html":"<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n <title>Data Chart</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@300;400;600&display=block\"\n rel=\"stylesheet\"\n />\n <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n html,\n body {\n margin: 0;\n width: 1920px;\n height: 1080px;\n overflow: hidden;\n background-color: #faf9f6;\n }\n </style>\n </head>\n <body>\n <div\n id=\"data-chart\"\n data-composition-id=\"data-chart\"\n data-width=\"1920\"\n data-height=\"1080\"\n data-start=\"0\"\n data-duration=\"15\"\n >\n <div class=\"chart-container\">\n <!-- Header Section -->\n <div class=\"header\">\n <h1 class=\"headline\">Monthly Revenue vs. Conversion Rate</h1>\n <p class=\"subtitle\">Jan–Jun 2024, in thousands</p>\n <div class=\"key\">\n <div class=\"key-item\">\n <div class=\"key-box revenue-box\"></div>\n <span class=\"key-text\">Revenue</span>\n </div>\n <div class=\"key-item\">\n <div class=\"key-line conversion-line\"></div>\n <span class=\"key-text\">Conversion Rate</span>\n </div>\n </div>\n </div>\n\n <!-- SVG Chart Area -->\n <svg class=\"chart-svg\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMid meet\">\n <!-- Gridlines Group -->\n <g class=\"gridlines\"></g>\n\n <!-- X-Axis Labels -->\n <g class=\"x-axis-labels\"></g>\n\n <!-- Bars Group (Revenue) -->\n <g class=\"bars-group\"></g>\n\n <!-- Bar Labels Group -->\n <g class=\"bar-labels-group\"></g>\n\n <!-- Line Group (Conversion Rate) -->\n <g class=\"line-group\">\n <path class=\"conversion-path\" fill=\"none\" stroke=\"#326FA8\" stroke-width=\"1.5\" />\n <circle class=\"line-dot\" r=\"5\" fill=\"#326FA8\" style=\"opacity: 0\" />\n </g>\n\n <!-- Line Labels Group -->\n <g class=\"line-labels-group\"></g>\n\n <!-- Baseline -->\n <line x1=\"100\" y1=\"600\" x2=\"1500\" y2=\"600\" stroke=\"black\" stroke-width=\"1\" />\n </svg>\n\n <!-- Source Line -->\n <div class=\"source\">Source: Internal analytics</div>\n </div>\n\n <style>\n [data-composition-id=\"data-chart\"] {\n width: 1920px;\n height: 1080px;\n background-color: #faf9f6;\n font-family: \"Libre Franklin\", sans-serif;\n color: #333;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n }\n\n [data-composition-id=\"data-chart\"] .chart-container {\n width: 1600px;\n height: 900px;\n display: flex;\n flex-direction: column;\n position: relative;\n transform: scale(1.15);\n transform-origin: center center;\n }\n\n [data-composition-id=\"data-chart\"] .header {\n margin-bottom: 40px;\n text-align: left;\n }\n\n [data-composition-id=\"data-chart\"] .headline {\n font-family: \"Libre Baskerville\", serif;\n font-size: 42px;\n margin: 0;\n padding: 0;\n clip-path: inset(0 100% 0 0);\n white-space: nowrap;\n }\n\n [data-composition-id=\"data-chart\"] .subtitle {\n font-size: 16px;\n color: #666;\n margin: 8px 0 16px 0;\n clip-path: inset(0 100% 0 0);\n white-space: nowrap;\n }\n\n [data-composition-id=\"data-chart\"] .key {\n display: flex;\n gap: 24px;\n opacity: 0;\n }\n\n [data-composition-id=\"data-chart\"] .key-item {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n [data-composition-id=\"data-chart\"] .key-box {\n width: 10px;\n height: 10px;\n background-color: #5c5c5c;\n }\n\n [data-composition-id=\"data-chart\"] .key-line {\n width: 16px;\n height: 1.5px;\n background-color: #326fa8;\n }\n\n [data-composition-id=\"data-chart\"] .key-text {\n font-size: 13px;\n color: #666;\n }\n\n [data-composition-id=\"data-chart\"] .chart-svg {\n width: 100%;\n height: 600px;\n overflow: visible;\n }\n\n [data-composition-id=\"data-chart\"] .source {\n position: absolute;\n bottom: 0;\n left: 0;\n font-size: 11px;\n color: #999;\n opacity: 0;\n }\n\n [data-composition-id=\"data-chart\"] .grid-line {\n stroke: #e8e8e8;\n stroke-width: 0.5px;\n opacity: 0;\n }\n\n [data-composition-id=\"data-chart\"] .axis-label {\n font-size: 14px;\n fill: #666;\n text-anchor: middle;\n }\n\n [data-composition-id=\"data-chart\"] .bar {\n fill: #5c5c5c;\n }\n\n [data-composition-id=\"data-chart\"] .bar-label {\n font-size: 14px;\n fill: #333;\n text-anchor: middle;\n opacity: 0;\n }\n\n [data-composition-id=\"data-chart\"] .line-label {\n font-size: 14px;\n fill: #326fa8;\n font-weight: 600;\n text-anchor: middle;\n opacity: 0;\n }\n </style>\n\n <script>\n (function () {\n const svg = document.querySelector('[data-composition-id=\"data-chart\"] .chart-svg');\n const tl = gsap.timeline({ paused: true });\n\n // Data\n const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"];\n const revenueData = [8, 12, 15, 11, 18, 22];\n const conversionData = [2.1, 2.8, 3.2, 2.9, 3.8, 4.2];\n\n // Chart Dimensions\n const chartWidth = 1400;\n const chartHeight = 500;\n const startX = 100;\n const startY = 600;\n const barWidth = 80;\n const spacing = (chartWidth - barWidth * months.length) / (months.length + 1);\n\n // Scales\n const maxRevenue = 25;\n const maxConversion = 5;\n\n const getBarY = (val) => startY - (val / maxRevenue) * chartHeight;\n const getLineY = (val) => startY - (val / maxConversion) * chartHeight;\n const getX = (i) => startX + spacing + i * (barWidth + spacing) + barWidth / 2;\n\n // Setup Elements\n const gridGroup = svg.querySelector(\".gridlines\");\n const xAxisGroup = svg.querySelector(\".x-axis-labels\");\n const barsGroup = svg.querySelector(\".bars-group\");\n const barLabelsGroup = svg.querySelector(\".bar-labels-group\");\n const lineLabelsGroup = svg.querySelector(\".line-labels-group\");\n const conversionPath = svg.querySelector(\".conversion-path\");\n const lineDot = svg.querySelector(\".line-dot\");\n\n // Create Gridlines\n for (let i = 1; i <= 5; i++) {\n const y = startY - i * (chartHeight / 5);\n const line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"line\");\n line.setAttribute(\"x1\", startX);\n line.setAttribute(\"y1\", y);\n line.setAttribute(\"x2\", startX + chartWidth);\n line.setAttribute(\"y2\", y);\n line.setAttribute(\"class\", \"grid-line\");\n gridGroup.appendChild(line);\n }\n\n // Create X-Axis Labels & Bars & Bar Labels\n const linePoints = [];\n months.forEach((month, i) => {\n const x = getX(i);\n\n const label = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n label.setAttribute(\"x\", x);\n label.setAttribute(\"y\", startY + 30);\n label.setAttribute(\"class\", \"axis-label\");\n label.textContent = month;\n xAxisGroup.appendChild(label);\n\n const barHeight = (revenueData[i] / maxRevenue) * chartHeight;\n const bar = document.createElementNS(\"http://www.w3.org/2000/svg\", \"rect\");\n bar.setAttribute(\"x\", x - barWidth / 2);\n bar.setAttribute(\"y\", startY);\n bar.setAttribute(\"width\", barWidth);\n bar.setAttribute(\"height\", 0);\n bar.setAttribute(\"class\", \"bar\");\n barsGroup.appendChild(bar);\n\n const barLabel = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n barLabel.setAttribute(\"x\", x);\n barLabel.setAttribute(\"y\", getBarY(revenueData[i]) - 10);\n barLabel.setAttribute(\"class\", \"bar-label\");\n barLabel.textContent = `$${revenueData[i]}K`;\n barLabelsGroup.appendChild(barLabel);\n\n linePoints.push(`${x},${getLineY(conversionData[i])}`);\n\n const lineLabel = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n lineLabel.setAttribute(\"x\", x);\n lineLabel.setAttribute(\"y\", getLineY(conversionData[i]) - 15);\n lineLabel.setAttribute(\"class\", \"line-label\");\n lineLabel.textContent = `${conversionData[i]}%`;\n lineLabelsGroup.appendChild(lineLabel);\n });\n\n // Set Path Data\n conversionPath.setAttribute(\"d\", `M ${linePoints.join(\" L \")}`);\n const pathLength = conversionPath.getTotalLength();\n conversionPath.style.strokeDasharray = pathLength;\n conversionPath.style.strokeDashoffset = pathLength;\n\n // --- ANIMATION TIMELINE ---\n\n tl.to(\n '[data-composition-id=\"data-chart\"] .headline',\n {\n clipPath: \"inset(0 0% 0 0)\",\n duration: 1.2,\n ease: \"power1.inOut\",\n },\n 0,\n );\n\n tl.to(\n '[data-composition-id=\"data-chart\"] .subtitle',\n {\n clipPath: \"inset(0 0% 0 0)\",\n duration: 1.2,\n ease: \"power1.inOut\",\n },\n 0.2,\n );\n\n tl.to(\n '[data-composition-id=\"data-chart\"] .key',\n {\n opacity: 1,\n duration: 0.4,\n ease: \"power2.out\",\n },\n 1.0,\n );\n\n tl.to(\n '[data-composition-id=\"data-chart\"] .grid-line',\n {\n opacity: 1,\n duration: 0.5,\n stagger: 0.25,\n ease: \"power2.out\",\n },\n 0.5,\n );\n\n // Bars\n const bars = barsGroup.querySelectorAll(\".bar\");\n const barLabels = barLabelsGroup.querySelectorAll(\".bar-label\");\n\n bars.forEach((bar, i) => {\n const barHeight = (revenueData[i] / maxRevenue) * chartHeight;\n const startTime = 1.5 + i * 0.5;\n\n tl.to(\n bar,\n {\n attr: { height: barHeight, y: startY - barHeight },\n duration: 0.8,\n ease: \"power2.out\",\n },\n startTime,\n );\n\n tl.to(\n barLabels[i],\n {\n opacity: 1,\n duration: 0.3,\n ease: \"power2.out\",\n },\n startTime + 0.8,\n );\n });\n\n // Line\n const lastBarStartTime = 1.5 + (months.length - 1) * 0.5;\n const lineStartTime = lastBarStartTime + 0.5;\n\n tl.to(\n conversionPath,\n {\n strokeDashoffset: 0,\n duration: 3,\n ease: \"none\",\n },\n lineStartTime,\n );\n\n // Line Dot & Labels\n tl.set(\n lineDot,\n {\n opacity: 1,\n attr: { cx: getX(0), cy: getLineY(conversionData[0]) },\n },\n lineStartTime,\n );\n\n const lineLabels = lineLabelsGroup.querySelectorAll(\".line-label\");\n months.forEach((_, i) => {\n if (i > 0) {\n const x = getX(i);\n const y = getLineY(conversionData[i]);\n tl.to(\n lineDot,\n {\n attr: { cx: x, cy: y },\n duration: 3 / (months.length - 1),\n ease: \"none\",\n },\n lineStartTime + ((i - 1) / (months.length - 1)) * 3,\n );\n }\n\n const labelTime = lineStartTime + (i / (months.length - 1)) * 3 + 0.2;\n\n lineLabels[i].textContent = \"0.0%\";\n\n tl.to(\n lineLabels[i],\n {\n opacity: 1,\n duration: 0.1,\n ease: \"power2.out\",\n },\n labelTime,\n );\n\n const dummy = { val: 0 };\n tl.to(\n dummy,\n {\n val: conversionData[i],\n duration: 0.8,\n ease: \"power2.out\",\n onUpdate: () => {\n lineLabels[i].textContent = dummy.val.toFixed(1) + \"%\";\n },\n },\n labelTime,\n );\n });\n\n // Source Line\n tl.to(\n '[data-composition-id=\"data-chart\"] .source',\n {\n opacity: 1,\n duration: 0.5,\n ease: \"power2.out\",\n },\n \">+0.5\",\n );\n\n window.__timelines = window.__timelines || {};\n window.__timelines[\"data-chart\"] = tl;\n })();\n </script>\n </div>\n </body>\n</html>\n"} |