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
8.4 KiB
JSON
1 line
8.4 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>Vignette — 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 background: #000;\n }\n </style>\n </head>\n <body>\n <div\n id=\"demo\"\n data-composition-id=\"vignette-demo\"\n data-width=\"1920\"\n data-height=\"1080\"\n data-duration=\"5\"\n >\n <!-- Backdrop: a layered \"cinematic still\" — a warm key light at upper-left,\n a teal rim light at lower-right, and a soft global glow. The vignette\n overlay reads against this so the effect is unambiguous. -->\n <div class=\"demo-bg\">\n <!-- Subject shapes — a stylized \"moon\" centered, with subtle haze rings\n so the eye has something to anchor on. Without a subject the demo\n looks like an abstract gradient and the vignette gets lost. -->\n <div class=\"demo-haze haze-far\"></div>\n <div class=\"demo-haze haze-near\"></div>\n <div class=\"demo-subject\"></div>\n\n <div class=\"demo-text\">\n <div class=\"demo-title\">\n <span class=\"ch\">V</span><span class=\"ch\">I</span><span class=\"ch\">G</span\n ><span class=\"ch\">N</span><span class=\"ch\">E</span><span class=\"ch\">T</span\n ><span class=\"ch\">T</span><span class=\"ch\">E</span>\n </div>\n <div class=\"demo-subtitle\">Frame the eye. Hold the moment.</div>\n </div>\n </div>\n\n <!-- The vignette component -->\n <div\n id=\"hf-vignette\"\n style=\"\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 90;\n \"\n ></div>\n\n <style>\n .demo-bg {\n width: 1920px;\n height: 1080px;\n background:\n radial-gradient(\n circle at 22% 28%,\n rgba(255, 196, 130, 0.85),\n rgba(255, 196, 130, 0) 38%\n ),\n radial-gradient(circle at 78% 78%, rgba(64, 175, 200, 0.55), rgba(64, 175, 200, 0) 42%),\n radial-gradient(circle at 50% 50%, #3b2616 0%, #1a0e07 68%, #060403 100%);\n position: relative;\n overflow: hidden;\n font-family: \"Inter\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n }\n\n .demo-haze {\n position: absolute;\n left: 50%;\n top: 50%;\n border-radius: 50%;\n transform: translate(-50%, -50%) scale(1);\n pointer-events: none;\n opacity: 0;\n }\n .haze-far {\n width: 1400px;\n height: 1400px;\n background: radial-gradient(\n circle,\n rgba(255, 220, 180, 0.18),\n rgba(255, 220, 180, 0) 65%\n );\n filter: blur(40px);\n }\n .haze-near {\n width: 900px;\n height: 900px;\n background: radial-gradient(\n circle,\n rgba(255, 240, 210, 0.32),\n rgba(255, 240, 210, 0) 60%\n );\n filter: blur(20px);\n }\n\n .demo-subject {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 520px;\n height: 520px;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n background: radial-gradient(\n circle at 35% 32%,\n #fff6e0 0%,\n #f4c47e 28%,\n #b87a3f 62%,\n #6b3d1c 88%,\n #2a1607 100%\n );\n box-shadow:\n inset -40px -40px 80px rgba(0, 0, 0, 0.55),\n 0 0 120px rgba(255, 180, 100, 0.35);\n opacity: 0;\n }\n\n .demo-text {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 12%;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 14px;\n pointer-events: none;\n /* Sits above the subject in document order; below the vignette in z-index */\n z-index: 5;\n }\n\n .demo-title {\n font-size: 108px;\n font-weight: 800;\n letter-spacing: 0.18em;\n color: #f6ecd0;\n text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);\n opacity: 0;\n }\n .demo-title .ch {\n display: inline-block;\n }\n\n .demo-subtitle {\n font-size: 30px;\n font-weight: 400;\n letter-spacing: 0.32em;\n text-transform: uppercase;\n color: rgba(246, 236, 208, 0.72);\n opacity: 0;\n }\n\n #hf-vignette {\n background: radial-gradient(\n var(--vignette-shape, ellipse) at center,\n transparent var(--vignette-size, 45%),\n var(--vignette-color, rgba(0, 0, 0, 0.7)) var(--vignette-edge, 100%)\n );\n }\n </style>\n\n <script>\n (function () {\n const tl = gsap.timeline({ paused: true });\n\n // Reveal the backdrop subject and haze first so the vignette has\n // something to frame. Without a subject the effect reads as a flat\n // dark gradient — uninteresting in a still preview.\n tl.to(\".haze-far\", { opacity: 1, duration: 0.8, ease: \"power2.out\" }, 0.0);\n tl.to(\".haze-near\", { opacity: 1, duration: 0.8, ease: \"power2.out\" }, 0.15);\n tl.to(\".demo-subject\", { opacity: 1, scale: 1, duration: 1.0, ease: \"power3.out\" }, 0.1);\n\n // Title + subtitle settle in. The letters settle from wider spacing to their\n // resting spacing — the faithful smooth equivalent of a letter-spacing tween is a\n // per-glyph x spread (transform, sub-pixel smooth), NOT a uniform scale (which\n // would resize the glyphs instead of closing the gaps). letter-spacing holds at\n // its CSS resting 0.18em; each glyph starts offset by the extra gap the original\n // tween opened — (0.32em − 0.18em) × 108px ≈ 15.12px per gap — and converges to 0,\n // centered about the word (8 chars → center at index 3.5).\n tl.fromTo(\n \".demo-title\",\n { opacity: 0, y: 18 },\n { opacity: 1, y: 0, duration: 1.0, ease: \"power3.out\" },\n 0.6,\n );\n tl.from(\n \".demo-title .ch\",\n { x: (i) => (i - 3.5) * 15.12, duration: 1.0, ease: \"power3.out\" },\n 0.6,\n );\n tl.to(\".demo-subtitle\", { opacity: 1, duration: 0.8, ease: \"power3.out\" }, 1.0);\n\n // Vignette: start visibly soft (so viewers see the unframed scene),\n // then ramp to a strong cinematic vignette and hold through the\n // capture-time peak (~3.0s, picked to match the catalog thumbnail\n // sampling at `Math.min(3.0, duration * 0.6)` for duration=5).\n gsap.set(\"#hf-vignette\", {\n \"--vignette-color\": \"rgba(0, 0, 0, 0.35)\",\n \"--vignette-size\": \"70%\",\n \"--vignette-edge\": \"100%\",\n });\n tl.to(\n \"#hf-vignette\",\n {\n \"--vignette-color\": \"rgba(0, 0, 0, 0.92)\",\n \"--vignette-size\": \"26%\",\n duration: 1.6,\n ease: \"power2.inOut\",\n },\n 1.4,\n );\n\n // Gentle breathing for the video loop so the effect reads as alive,\n // not static. Keeps the still-frame at peak intensity around t≈3s.\n tl.to(\n \"#hf-vignette\",\n { \"--vignette-size\": \"32%\", duration: 0.9, ease: \"sine.inOut\" },\n 3.4,\n );\n tl.to(\n \"#hf-vignette\",\n { \"--vignette-size\": \"26%\", duration: 0.9, ease: \"sine.inOut\" },\n 4.3,\n );\n\n window.__timelines = window.__timelines || {};\n window.__timelines[\"vignette-demo\"] = tl;\n })();\n </script>\n </div>\n </body>\n</html>\n"} |