hyperframes/docs/public/catalog/blocks/spiral-galaxy.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='[{\"id\":\"stars\",\"type\":\"number\",\"label\":\"Star count\",\"default\":20000,\"min\":2000,\"max\":40000,\"step\":1000},{\"id\":\"arms\",\"type\":\"number\",\"label\":\"Arm count\",\"default\":3,\"min\":2,\"max\":8,\"step\":1},{\"id\":\"rate\",\"type\":\"number\",\"label\":\"Rotation rate\",\"default\":0.25,\"min\":0,\"max\":1.5,\"step\":0.05,\"unit\":\"rad/s\"},{\"id\":\"glow\",\"type\":\"number\",\"label\":\"Core brightness\",\"default\":1.9,\"min\":0.2,\"max\":4,\"step\":0.1},{\"id\":\"size\",\"type\":\"number\",\"label\":\"Star size\",\"default\":10,\"min\":2,\"max\":40,\"step\":1,\"unit\":\"px\"},{\"id\":\"core\",\"type\":\"color\",\"label\":\"Core colour\",\"default\":\"#ffa575\"},{\"id\":\"rim\",\"type\":\"color\",\"label\":\"Rim colour\",\"default\":\"#311599\"}]'\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"}