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
4.1 KiB
JSON
1 line
4.1 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>Grain Overlay — Demo</title>\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 }\n </style>\n </head>\n <body>\n <div\n id=\"demo\"\n data-composition-id=\"grain-overlay-demo\"\n data-width=\"1920\"\n data-height=\"1080\"\n data-duration=\"5\"\n >\n <!-- Background content to demonstrate the overlay -->\n <div class=\"demo-bg\">\n <div style=\"text-align: center; z-index: 1\">\n <div\n class=\"demo-title\"\n style=\"font-size: 80px; font-weight: 700; color: #2c1e16; opacity: 0\"\n >\n Grain Overlay\n </div>\n <div\n class=\"demo-subtitle\"\n style=\"font-size: 32px; color: #5a4a3a; margin-top: 20px; opacity: 0\"\n >\n Adds warmth and analog character\n </div>\n </div>\n </div>\n\n <!-- The grain overlay component -->\n <div\n id=\"grain-overlay\"\n style=\"\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 100;\n \"\n >\n <div class=\"grain-texture\"></div>\n </div>\n\n <style>\n .demo-bg {\n width: 1920px;\n height: 1080px;\n background: linear-gradient(135deg, #f5f0e0 0%, #e8d8b8 50%, #d4c4a0 100%);\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: \"Inter\", sans-serif;\n position: relative;\n }\n\n @keyframes hf-grain-noise {\n 0%,\n 100% {\n transform: translate(0, 0);\n }\n 10% {\n transform: translate(-5%, -5%);\n }\n 20% {\n transform: translate(-10%, 5%);\n }\n 30% {\n transform: translate(5%, -10%);\n }\n 40% {\n transform: translate(-5%, 15%);\n }\n 50% {\n transform: translate(-10%, 5%);\n }\n 60% {\n transform: translate(15%, 0);\n }\n 70% {\n transform: translate(0, 10%);\n }\n 80% {\n transform: translate(-15%, 0);\n }\n 90% {\n transform: translate(10%, 5%);\n }\n }\n\n #grain-overlay .grain-texture {\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\");\n opacity: 0.15;\n animation: hf-grain-noise 0.5s steps(1) infinite;\n }\n </style>\n\n <script>\n (function () {\n const tl = gsap.timeline({ paused: true });\n\n tl.to(\n \".demo-title\",\n {\n opacity: 1,\n y: -10,\n duration: 1,\n ease: \"power3.out\",\n },\n 0.5,\n );\n\n tl.to(\n \".demo-subtitle\",\n {\n opacity: 1,\n y: -5,\n duration: 0.8,\n ease: \"power3.out\",\n },\n 1.0,\n );\n\n window.__timelines = window.__timelines || {};\n window.__timelines[\"grain-overlay-demo\"] = tl;\n })();\n </script>\n </div>\n </body>\n</html>\n"} |