ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-01 19:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
sync/hyperframes-codegen-df972e70
hyperframes/docs/public/catalog/components/motion-blur.json
T
Miguel Ángel 9734578e60 feat(registry): bring back the video-primitive moves (#3169) 
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.
2026-08-10 18:46:03 -04:00

1 line
18 KiB
JSON
Raw Permalink Blame History

{"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>Motion Blur — 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: #06060a;\n }\n\n #demo {\n position: relative;\n width: 1920px;\n height: 1080px;\n overflow: hidden;\n font-family: \"SF Mono\", ui-monospace, monospace;\n background: #06060a;\n }\n\n .header {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 80px;\n display: flex;\n align-items: flex-end;\n padding: 0 72px 20px;\n border-bottom: 1px solid #0f0f18;\n }\n .header-title {\n font-size: 11px;\n letter-spacing: 0.4em;\n text-transform: uppercase;\n color: #1e1e2a;\n }\n .header-sub {\n margin-left: auto;\n font-size: 11px;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: #14141c;\n }\n\n .group {\n position: absolute;\n left: 0;\n right: 0;\n height: 184px;\n }\n\n .group::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 72px;\n right: 72px;\n height: 1px;\n background: #0d0d15;\n }\n\n .dur {\n position: absolute;\n left: 72px;\n top: 0;\n width: 90px;\n height: 160px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n .dur-num {\n font-size: 28px;\n font-weight: 700;\n letter-spacing: -0.04em;\n color: #fff;\n line-height: 1;\n }\n .dur-unit {\n font-size: 9px;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: #252532;\n margin-top: 5px;\n }\n\n .row-hint {\n position: absolute;\n left: 176px;\n width: 44px;\n height: 72px;\n display: flex;\n align-items: center;\n font-size: 8px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: #161620;\n }\n\n .spd {\n position: absolute;\n right: 72px;\n top: 0;\n width: 100px;\n height: 160px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-end;\n }\n .spd-label {\n font-size: 10px;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: #181822;\n }\n\n .pill {\n position: absolute;\n left: 0;\n top: 0;\n width: 200px;\n height: 72px;\n border-radius: 36px;\n /* Flat L1 ink: every row is the same object, so only the blur differs. */\n background: rgba(244, 244, 245, 0.72);\n will-change: transform, filter;\n }\n\n .word {\n position: absolute;\n left: 0;\n top: 88px;\n height: 72px;\n line-height: 72px;\n white-space: nowrap;\n font-size: 56px;\n font-weight: 800;\n letter-spacing: -0.03em;\n color: #f4f4f5;\n will-change: transform, filter;\n }\n\n .inner-div {\n position: absolute;\n left: 220px;\n right: 200px;\n top: 80px;\n height: 1px;\n background: #0a0a12;\n }\n\n .track-a,\n .track-b {\n position: absolute;\n left: 220px;\n right: 200px;\n height: 1px;\n background: #0c0c14;\n }\n .track-a {\n top: 35px;\n }\n .track-b {\n top: 123px;\n }\n </style>\n </head>\n <body>\n <div\n id=\"demo\"\n data-composition-id=\"motion-blur-demo\"\n data-width=\"1920\"\n data-height=\"1080\"\n data-start=\"0\"\n data-duration=\"4\"\n >\n <div class=\"header\">\n <span class=\"header-title\">Motion Blur — Velocity Showcase</span>\n <span class=\"header-sub\">feGaussianBlur + scaleX · blur ∝ velocity</span>\n </div>\n\n <div class=\"group\" style=\"top: 80px\">\n <div class=\"dur\"><span class=\"dur-num\">3.0</span><span class=\"dur-unit\">seconds</span></div>\n <div class=\"row-hint\" style=\"top: 0\">shape</div>\n <div class=\"row-hint\" style=\"top: 88px\">text</div>\n <div class=\"track-a\"></div>\n <div class=\"inner-div\"></div>\n <div class=\"track-b\"></div>\n <div class=\"pill\" id=\"s1\"></div>\n <div class=\"word\" id=\"t1\">DRIFT</div>\n <div class=\"spd\"><span class=\"spd-label\">slow</span></div>\n </div>\n\n <div class=\"group\" style=\"top: 264px\">\n <div class=\"dur\"><span class=\"dur-num\">1.5</span><span class=\"dur-unit\">seconds</span></div>\n <div class=\"row-hint\" style=\"top: 0\">shape</div>\n <div class=\"row-hint\" style=\"top: 88px\">text</div>\n <div class=\"track-a\"></div>\n <div class=\"inner-div\"></div>\n <div class=\"track-b\"></div>\n <div class=\"pill\" id=\"s2\"></div>\n <div class=\"word\" id=\"t2\">GLIDE</div>\n <div class=\"spd\"><span class=\"spd-label\">medium</span></div>\n </div>\n\n <div class=\"group\" style=\"top: 448px\">\n <div class=\"dur\"><span class=\"dur-num\">0.7</span><span class=\"dur-unit\">seconds</span></div>\n <div class=\"row-hint\" style=\"top: 0\">shape</div>\n <div class=\"row-hint\" style=\"top: 88px\">text</div>\n <div class=\"track-a\"></div>\n <div class=\"inner-div\"></div>\n <div class=\"track-b\"></div>\n <div class=\"pill\" id=\"s3\"></div>\n <div class=\"word\" id=\"t3\">RUSH</div>\n <div class=\"spd\"><span class=\"spd-label\">fast</span></div>\n </div>\n\n <div class=\"group\" style=\"top: 632px\">\n <div class=\"dur\">\n <span class=\"dur-num\">0.35</span><span class=\"dur-unit\">seconds</span>\n </div>\n <div class=\"row-hint\" style=\"top: 0\">shape</div>\n <div class=\"row-hint\" style=\"top: 88px\">text</div>\n <div class=\"track-a\"></div>\n <div class=\"inner-div\"></div>\n <div class=\"track-b\"></div>\n <div class=\"pill\" id=\"s4\"></div>\n <div class=\"word\" id=\"t4\">BLAST</div>\n <div class=\"spd\"><span class=\"spd-label\">faster</span></div>\n </div>\n\n <div class=\"group\" style=\"top: 816px\">\n <div class=\"dur\"><span class=\"dur-num\">0.2</span><span class=\"dur-unit\">seconds</span></div>\n <div class=\"row-hint\" style=\"top: 0\">shape</div>\n <div class=\"row-hint\" style=\"top: 88px\">text</div>\n <div class=\"track-a\"></div>\n <div class=\"inner-div\"></div>\n <div class=\"track-b\"></div>\n <div class=\"pill\" id=\"s5\"></div>\n <div class=\"word\" id=\"t5\">WARP</div>\n <div class=\"spd\"><span class=\"spd-label\">extreme</span></div>\n </div>\n\n <script>\n (function () {\n if (!window._hfMbUid) window._hfMbUid = 0;\n var ns = \"http://www.w3.org/2000/svg\";\n\n window.attachMotionBlur = function (selector, tl, opts) {\n opts = opts || {};\n var blurScale = opts.blurScale !== undefined ? opts.blurScale : 0.008;\n var blurMax = opts.blurMax !== undefined ? opts.blurMax : 20;\n var stretchScale = opts.stretchScale !== undefined ? opts.stretchScale : 0.0002;\n var stretchMax = opts.stretchMax !== undefined ? opts.stretchMax : 0;\n var axis = opts.axis || \"both\";\n\n var items = Array.isArray(selector) ? selector : [selector];\n var targets = items.reduce(function (acc, s) {\n if (typeof s === \"string\") {\n document.querySelectorAll(s).forEach(function (el) {\n acc.push(el);\n });\n } else if (s instanceof Element) {\n acc.push(s);\n }\n return acc;\n }, []);\n\n var GHOST_CFG = [\n { frac: 0.25, slope: 0.55 },\n { frac: 0.55, slope: 0.28 },\n { frac: 1.0, slope: 0.1 },\n ];\n\n var state = targets.map(function (el) {\n var uid = \"hf-mb-\" + window._hfMbUid++;\n var svg = document.createElementNS(ns, \"svg\");\n svg.setAttribute(\"style\", \"position:absolute;width:0;height:0;overflow:hidden;\");\n\n var filter = document.createElementNS(ns, \"filter\");\n filter.id = uid;\n filter.setAttribute(\"x\", \"-110%\");\n filter.setAttribute(\"y\", \"-25%\");\n filter.setAttribute(\"width\", \"260%\");\n filter.setAttribute(\"height\", \"150%\");\n\n var ghosts = GHOST_CFG.map(function (cfg, gi) {\n var feOff = document.createElementNS(ns, \"feOffset\");\n feOff.setAttribute(\"in\", \"SourceGraphic\");\n feOff.setAttribute(\"dx\", \"0\");\n feOff.setAttribute(\"dy\", \"0\");\n feOff.setAttribute(\"result\", \"go\" + gi);\n\n var feGB = document.createElementNS(ns, \"feGaussianBlur\");\n feGB.setAttribute(\"in\", \"go\" + gi);\n feGB.setAttribute(\"stdDeviation\", \"0 0\");\n feGB.setAttribute(\"result\", \"gb\" + gi);\n\n var feCT = document.createElementNS(ns, \"feComponentTransfer\");\n feCT.setAttribute(\"in\", \"gb\" + gi);\n feCT.setAttribute(\"result\", \"gf\" + gi);\n var feFuncA = document.createElementNS(ns, \"feFuncA\");\n feFuncA.setAttribute(\"type\", \"linear\");\n feFuncA.setAttribute(\"slope\", String(cfg.slope));\n feCT.appendChild(feFuncA);\n\n filter.appendChild(feOff);\n filter.appendChild(feGB);\n filter.appendChild(feCT);\n return { feOff: feOff, feGB: feGB, frac: cfg.frac };\n });\n\n var feTopBlur = document.createElementNS(ns, \"feGaussianBlur\");\n feTopBlur.setAttribute(\"in\", \"SourceGraphic\");\n feTopBlur.setAttribute(\"stdDeviation\", \"0 0\");\n feTopBlur.setAttribute(\"result\", \"top\");\n filter.appendChild(feTopBlur);\n\n var feMerge = document.createElementNS(ns, \"feMerge\");\n for (var mi = GHOST_CFG.length - 1; mi >= 0; mi--) {\n var mn = document.createElementNS(ns, \"feMergeNode\");\n mn.setAttribute(\"in\", \"gf\" + mi);\n feMerge.appendChild(mn);\n }\n var mnTop = document.createElementNS(ns, \"feMergeNode\");\n mnTop.setAttribute(\"in\", \"top\");\n feMerge.appendChild(mnTop);\n filter.appendChild(feMerge);\n\n svg.appendChild(filter);\n document.body.appendChild(svg);\n\n return {\n el: el,\n ghosts: ghosts,\n feTopBlur: feTopBlur,\n filterId: uid,\n prevX: parseFloat(gsap.getProperty(el, \"x\")) || 0,\n prevY: parseFloat(gsap.getProperty(el, \"y\")) || 0,\n prevTime: tl.time(),\n };\n });\n\n var _proxy = { t: 0 };\n tl.to(\n _proxy,\n {\n t: 1,\n duration: Math.max(tl.duration(), 0.1),\n ease: \"none\",\n onUpdate: function () {\n var time = tl.time();\n\n state.forEach(function (s) {\n var x = parseFloat(gsap.getProperty(s.el, \"x\")) || 0;\n var y = parseFloat(gsap.getProperty(s.el, \"y\")) || 0;\n var dt = time - s.prevTime;\n\n if (dt > 0.0005) {\n var vx = axis !== \"y\" ? (x - s.prevX) / dt : 0;\n var vy = axis !== \"x\" ? (y - s.prevY) / dt : 0;\n\n var bx = Math.min(Math.abs(vx) * blurScale, blurMax);\n var by = Math.min(Math.abs(vy) * blurScale, blurMax);\n var bxFinal = axis !== \"y\" ? bx : Math.max(by * 0.08, 0.4);\n var byFinal = axis !== \"x\" ? by : Math.max(bx * 0.08, 0.4);\n var active = bx > 0.3 || by > 0.3;\n\n if (active) {\n s.el.style.filter = \"url(#\" + s.filterId + \")\";\n s.ghosts.forEach(function (g) {\n var dx =\n axis !== \"y\" ? (vx >= 0 ? -bxFinal * g.frac : bxFinal * g.frac) : 0;\n var dy =\n axis !== \"x\" ? (vy >= 0 ? -byFinal * g.frac : byFinal * g.frac) : 0;\n g.feOff.setAttribute(\"dx\", dx.toFixed(2));\n g.feOff.setAttribute(\"dy\", dy.toFixed(2));\n var gbx =\n axis !== \"y\"\n ? (bxFinal * g.frac * 0.5).toFixed(2)\n : Math.max(byFinal * g.frac * 0.04, 0.4).toFixed(2);\n var gby =\n axis !== \"x\"\n ? (byFinal * g.frac * 0.5).toFixed(2)\n : Math.max(bxFinal * g.frac * 0.04, 0.4).toFixed(2);\n g.feGB.setAttribute(\"stdDeviation\", gbx + \" \" + gby);\n });\n s.feTopBlur.setAttribute(\n \"stdDeviation\",\n (bxFinal * 0.15).toFixed(2) + \" \" + (byFinal * 0.15).toFixed(2),\n );\n if (stretchMax > 0) {\n var sx = 1 + Math.min(Math.abs(vx) * stretchScale, stretchMax);\n var sy = 1 + Math.min(Math.abs(vy) * stretchScale, stretchMax);\n var ox = axis !== \"y\" ? (vx >= 0 ? \"100% 50%\" : \"0% 50%\") : \"50% 50%\";\n var oy = axis !== \"x\" ? (vy >= 0 ? \"50% 100%\" : \"50% 0%\") : \"50% 50%\";\n gsap.set(s.el, {\n scaleX: axis !== \"y\" ? sx : 1,\n scaleY: axis !== \"x\" ? sy : 1,\n transformOrigin: axis === \"x\" ? ox : axis === \"y\" ? oy : \"50% 50%\",\n });\n }\n } else {\n s.el.style.filter = \"\";\n s.ghosts.forEach(function (g) {\n g.feOff.setAttribute(\"dx\", \"0\");\n g.feOff.setAttribute(\"dy\", \"0\");\n g.feGB.setAttribute(\"stdDeviation\", \"0 0\");\n });\n s.feTopBlur.setAttribute(\"stdDeviation\", \"0 0\");\n if (stretchMax > 0) {\n gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: \"50% 50%\" });\n }\n }\n\n s.prevX = x;\n s.prevY = y;\n s.prevTime = time;\n } else if (dt < -0.0005) {\n s.el.style.filter = \"\";\n s.ghosts.forEach(function (g) {\n g.feOff.setAttribute(\"dx\", \"0\");\n g.feOff.setAttribute(\"dy\", \"0\");\n g.feGB.setAttribute(\"stdDeviation\", \"0 0\");\n });\n s.feTopBlur.setAttribute(\"stdDeviation\", \"0 0\");\n if (stretchMax > 0) {\n gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: \"50% 50%\" });\n }\n s.prevX = x;\n s.prevY = y;\n s.prevTime = time;\n }\n // dt ≈ 0: double-fire — skip.\n });\n },\n },\n 0,\n );\n };\n\n var tl = gsap.timeline({ paused: true });\n\n gsap.set([\"#s1\", \"#s2\", \"#s3\", \"#s4\", \"#s5\", \"#t1\", \"#t2\", \"#t3\", \"#t4\", \"#t5\"], {\n x: -400,\n });\n\n tl.to([\"#s1\", \"#t1\"], { x: 1640, duration: 3.0, ease: \"power3.inOut\" }, 0);\n tl.to([\"#s2\", \"#t2\"], { x: 1640, duration: 1.5, ease: \"power3.inOut\" }, 0);\n tl.to([\"#s3\", \"#t3\"], { x: 1640, duration: 0.7, ease: \"power3.inOut\" }, 0);\n tl.to([\"#s4\", \"#t4\"], { x: 1640, duration: 0.35, ease: \"power3.inOut\" }, 0);\n tl.to([\"#s5\", \"#t5\"], { x: 1640, duration: 0.2, ease: \"power3.inOut\" }, 0);\n\n tl.set(document.body, {}, 4);\n\n attachMotionBlur(\n [\"#s1\", \"#s2\", \"#s3\", \"#s4\", \"#s5\", \"#t1\", \"#t2\", \"#t3\", \"#t4\", \"#t5\"],\n tl,\n { axis: \"x\", blurMax: 80, stretchMax: 0 },\n );\n\n window.__timelines = window.__timelines || {};\n window.__timelines[\"motion-blur-demo\"] = tl;\n })();\n </script>\n </div>\n </body>\n</html>\n"}
Reference in New Issue View Git Blame Copy Permalink