mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
Miguel Ángel
9734578e60
Restores the 208 catalog items reverted after their previews 404'd in production, this time on the payload mechanism rather than the .html files that caused the outage. The generator no longer writes a preview document to docs/public. That writer, and the machinery under it, existed only to produce files the docs host discards, so it is gone rather than bypassed. Items now embed the composition itself via a payload, which is what the previous change already does for the items that were already in the catalog. The variables explorer is parked, not restored: it drove its preview through the same unpublished .html path, so it would have shown an empty frame. Items that declare variables get the live player plus the static variables table, and reconnecting the explorer to payloads is a follow-up.
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>Spiral Galaxy</title>\n <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js\"></script>\n <style>\n *,\n *::before,\n *::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n html,\n body {\n width: 1920px;\n height: 1080px;\n overflow: hidden;\n background: #03040a;\n }\n #sg-root {\n position: relative;\n width: 1920px;\n height: 1080px;\n overflow: hidden;\n }\n /* Full-bleed child carries the scene fill; never the composition root. */\n #sg-fill {\n position: absolute;\n inset: 0;\n background: #03040a;\n }\n #sg-gl {\n position: absolute;\n inset: 0;\n display: block;\n width: 1920px;\n height: 1080px;\n }\n /* Ambient halo in the rim colour, screen-blended over the point cloud.\n Reads the declared `rim` variable. Variable ids are single lowercase\n words on purpose: the runtime injects `--<id>` while the compiler\n injects `--<slugify(id)>`, and those two only agree when the id has\n no capitals or separators. */\n #sg-halo {\n position: absolute;\n inset: 0;\n mix-blend-mode: screen;\n opacity: 0.12;\n background: radial-gradient(72% 46% at 50% 50%, var(--rim, #311599) 0%, #000000 70%);\n }\n </style>\n </head>\n <body>\n <div\n id=\"sg-root\"\n data-composition-id=\"spiral-galaxy\"\n data-composition-variables='[\n {\"id\":\"stars\",\"type\":\"number\",\"label\":\"Star count\",\"default\":20000,\"min\":2000,\"max\":40000,\"step\":1000},\n {\"id\":\"arms\",\"type\":\"number\",\"label\":\"Arm count\",\"default\":3,\"min\":2,\"max\":8,\"step\":1},\n {\"id\":\"rate\",\"type\":\"number\",\"label\":\"Rotation rate\",\"default\":0.25,\"min\":0,\"max\":1.5,\"step\":0.05,\"unit\":\"rad/s\"},\n {\"id\":\"glow\",\"type\":\"number\",\"label\":\"Core brightness\",\"default\":1.9,\"min\":0.2,\"max\":4,\"step\":0.1},\n {\"id\":\"size\",\"type\":\"number\",\"label\":\"Star size\",\"default\":10,\"min\":2,\"max\":40,\"step\":1,\"unit\":\"px\"},\n {\"id\":\"core\",\"type\":\"color\",\"label\":\"Core colour\",\"default\":\"#ffa575\"},\n {\"id\":\"rim\",\"type\":\"color\",\"label\":\"Rim colour\",\"default\":\"#311599\"}\n ]'\n data-start=\"0\"\n data-duration=\"10\"\n data-width=\"1920\"\n data-height=\"1080\"\n >\n <div id=\"sg-fill\"></div>\n <canvas id=\"sg-gl\" width=\"1920\" height=\"1080\"></canvas>\n <div id=\"sg-halo\"></div>\n\n <!-- Driver clip: gives the block a timed element for the host timeline. -->\n <div\n id=\"sg-drv\"\n class=\"clip\"\n data-start=\"0\"\n data-duration=\"10\"\n data-track-index=\"0\"\n style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n ></div>\n </div>\n\n <script>\n (function () {\n var COMP_ID = \"spiral-galaxy\";\n var DURATION = 10;\n var W = 1920,\n H = 1080;\n\n // ── Measured constants ────────────────────────────────────────────\n // Read from the three.js galaxy examples (MIT) during reference\n // research; reimplemented here, nothing copied.\n // count 20000 · branches 3 · radius = ratio^1.5 * 5 · spin 1\n // angle = branchAngle + spin * radius + t * (1 - radiusRatio)\n // randomnessPower 3 · inside #ffa575 · outside #311599\n var DISC_RADIUS = 5.0; // world units, from `radius = ratio^1.5 * 5`\n var RADIUS_POWER = 1.5; // ratio -> radius exponent\n // Static Archimedean twist, radians per world unit. This is what draws\n // the arm across the WHOLE disc; the time term below then winds it.\n // Slightly under the example's 1.0 so the outer arms stay open.\n var SPIN = 0.78;\n var RANDOMNESS = 0.2; // arm thickness, as a fraction of DISC_RADIUS\n var RANDOM_POWER = 3.0; // pow(u, 3): most stars hug the arm, a few stray\n var TANGENT_SQUEEZE = 0.62; // arms are thin across, long along\n var DISC_FLATNESS = 0.3; // vertical jitter relative to in-plane jitter\n var SEED = 20240817; // fixes every per-star attribute\n\n // ── Variables ─────────────────────────────────────────────────────\n // Read ONCE at init. Variables never change mid-render.\n var vars =\n window.__hyperframes && window.__hyperframes.getVariables\n ? window.__hyperframes.getVariables()\n : {};\n function clampNum(value, lo, hi, fallback) {\n var n = Number(value);\n if (!isFinite(n)) n = fallback;\n return Math.min(hi, Math.max(lo, n));\n }\n var STARS = Math.round(clampNum(vars.stars, 2000, 40000, 20000));\n var ARMS = Math.round(clampNum(vars.arms, 2, 8, 3));\n var RATE = clampNum(vars.rate, 0, 1.5, 0.25);\n var GLOW = clampNum(vars.glow, 0.2, 4, 1.9);\n var SIZE = clampNum(vars.size, 2, 40, 10);\n var CORE_COLOR = typeof vars.core === \"string\" ? vars.core : \"#ffa575\";\n var RIM_COLOR = typeof vars.rim === \"string\" ? vars.rim : \"#311599\";\n\n // ── Seeded PRNG (mulberry32) ──────────────────────────────────────\n function mulberry32(seed) {\n return function () {\n seed |= 0;\n seed = (seed + 0x6d2b79f5) | 0;\n var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n }\n\n // ── Per-star attributes, seeded once ──────────────────────────────\n // Nothing here depends on time. Every frame is computed from these\n // plus `uTime` alone, so frame N never reads frame N-1.\n var rng = mulberry32(SEED);\n var aRatio = new Float32Array(STARS); // 0 = core, 1 = rim\n var aBranch = new Float32Array(STARS); // base arm angle\n var aJitterR = new Float32Array(STARS); // offset along the arm's radial axis\n var aJitterT = new Float32Array(STARS); // offset along the arm's tangent\n var aJitterY = new Float32Array(STARS); // disc thickness\n var aSpark = new Float32Array(STARS); // per-star size variation\n\n function jitter() {\n var magnitude = Math.pow(rng(), RANDOM_POWER) * RANDOMNESS * DISC_RADIUS;\n return rng() < 0.5 ? -magnitude : magnitude;\n }\n for (var i = 0; i < STARS; i++) {\n aRatio[i] = rng();\n aBranch[i] = ((i % ARMS) / ARMS) * Math.PI * 2;\n aJitterR[i] = jitter();\n aJitterT[i] = jitter() * TANGENT_SQUEEZE;\n aJitterY[i] = jitter() * DISC_FLATNESS;\n aSpark[i] = rng();\n }\n\n // ── Scene ─────────────────────────────────────────────────────────\n var renderer = new THREE.WebGLRenderer({\n canvas: document.getElementById(\"sg-gl\"),\n antialias: false,\n alpha: false,\n preserveDrawingBuffer: true, // survives seek-capture screenshots\n });\n renderer.setPixelRatio(1);\n renderer.setSize(W, H, false);\n renderer.setClearColor(0x03040a, 1);\n\n var scene = new THREE.Scene();\n var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);\n camera.position.set(0, 2.9, 7.6);\n camera.lookAt(0, 0, 0);\n\n var uniforms = {\n uTime: { value: 0 },\n uRate: { value: RATE },\n uSpin: { value: SPIN },\n uRadius: { value: DISC_RADIUS },\n uPower: { value: RADIUS_POWER },\n uSize: { value: SIZE },\n uRefDist: { value: camera.position.length() },\n uGlow: { value: GLOW },\n uCore: { value: new THREE.Color(CORE_COLOR) },\n uRim: { value: new THREE.Color(RIM_COLOR) },\n };\n\n var VERT = [\n \"attribute float aRatio;\",\n \"attribute float aBranch;\",\n \"attribute float aJitterR;\",\n \"attribute float aJitterT;\",\n \"attribute float aJitterY;\",\n \"attribute float aSpark;\",\n \"uniform float uTime;\",\n \"uniform float uRate;\",\n \"uniform float uSpin;\",\n \"uniform float uRadius;\",\n \"uniform float uPower;\",\n \"uniform float uSize;\",\n \"uniform float uRefDist;\",\n \"uniform float uGlow;\",\n \"uniform vec3 uCore;\",\n \"uniform vec3 uRim;\",\n \"varying vec3 vColor;\",\n \"varying float vBright;\",\n \"void main() {\",\n \" float ratio = clamp(aRatio, 0.0, 1.0);\",\n // Differential rotation. omega falls to zero at the rim, so the\n // core laps the outer disc and the arms wind up over time.\n // Solved directly from uTime — never integrated frame to frame.\n \" float omega = 1.0 - ratio;\",\n \" float r = pow(ratio, uPower) * uRadius;\",\n // uSpin * r is the static arm shape (time-independent, so it drops\n // out of any inner-vs-outer rotation measurement); uRate * uTime *\n // omega is the winding.\n \" float theta = aBranch + uSpin * r + uRate * uTime * omega;\",\n \" vec2 radial = vec2(cos(theta), sin(theta));\",\n \" vec2 tangent = vec2(-radial.y, radial.x);\",\n // Jitter rides in the star's own rotating frame, so arm thickness\n // holds its shape instead of smearing as the disc turns.\n \" vec2 xz = radial * (r + aJitterR) + tangent * aJitterT;\",\n \" vec4 mv = modelViewMatrix * vec4(xz.x, aJitterY, xz.y, 1.0);\",\n \" gl_Position = projectionMatrix * mv;\",\n \" gl_PointSize = uSize * (uRefDist / max(-mv.z, 0.001)) * (0.55 + 0.75 * aSpark);\",\n // Lerp by r/R (i.e. ratio^1.5), matching the example's colour ramp:\n // the disc stays warm well past mid-radius and only the rim goes cold.\n \" vColor = mix(uCore, uRim, pow(ratio, uPower));\",\n \" vBright = uGlow * (0.22 + 0.78 * exp(-ratio * 3.0));\",\n \"}\",\n ].join(\"\\n\");\n\n var FRAG = [\n \"varying vec3 vColor;\",\n \"varying float vBright;\",\n \"void main() {\",\n \" float d = length(gl_PointCoord - vec2(0.5));\",\n \" float a = smoothstep(0.5, 0.0, d);\",\n \" a = a * a;\",\n \" gl_FragColor = vec4(vColor * vBright, a);\",\n \"}\",\n ].join(\"\\n\");\n\n var geometry = new THREE.BufferGeometry();\n // The vertex shader builds every position from the attributes below;\n // `position` exists only because three.js counts vertices from it.\n geometry.setAttribute(\n \"position\",\n new THREE.BufferAttribute(new Float32Array(STARS * 3), 3),\n );\n geometry.setAttribute(\"aRatio\", new THREE.BufferAttribute(aRatio, 1));\n geometry.setAttribute(\"aBranch\", new THREE.BufferAttribute(aBranch, 1));\n geometry.setAttribute(\"aJitterR\", new THREE.BufferAttribute(aJitterR, 1));\n geometry.setAttribute(\"aJitterT\", new THREE.BufferAttribute(aJitterT, 1));\n geometry.setAttribute(\"aJitterY\", new THREE.BufferAttribute(aJitterY, 1));\n geometry.setAttribute(\"aSpark\", new THREE.BufferAttribute(aSpark, 1));\n\n var material = new THREE.ShaderMaterial({\n uniforms: uniforms,\n vertexShader: VERT,\n fragmentShader: FRAG,\n blending: THREE.AdditiveBlending,\n transparent: true,\n depthTest: false,\n depthWrite: false,\n });\n\n var points = new THREE.Points(geometry, material);\n points.frustumCulled = false; // positions live in the shader, not in `position`\n scene.add(points);\n\n function draw(t) {\n uniforms.uTime.value = t;\n renderer.render(scene, camera);\n }\n\n // ── Timeline ──────────────────────────────────────────────────────\n // `tl.eventCallback(\"onUpdate\", ...)` does NOT fire on tl.seek(), so\n // the repaint hangs off a property setter on the tweened driver —\n // that setter runs on every render, seek included.\n var driver = { _t: 0 };\n Object.defineProperty(driver, \"t\", {\n get: function () {\n return this._t;\n },\n set: function (value) {\n this._t = value;\n draw(value);\n },\n });\n\n window.__timelines = window.__timelines || {};\n var tl = gsap.timeline({ paused: true });\n // ease \"none\" over the full duration makes driver.t === tl.time().\n tl.to(driver, { t: DURATION, duration: DURATION, ease: \"none\", lazy: false }, 0);\n window.__timelines[COMP_ID] = tl;\n\n draw(0); // paint frame 0; GSAP skips the setter when the value is unchanged\n })();\n </script>\n </body>\n</html>\n"} |