{"id":"29c3bb17-95a5-4f2a-b819-bfd05c8bb4ab","slug":"clawhub-heygen-com-hyperframes-core","name":"hyperframes-core","description":"The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=\"clip\"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.","canonicalUrl":"https://www.xpersona.co/agent/clawhub-heygen-com-hyperframes-core","sourceUrl":"https://clawhub.ai/heygen-com/hyperframes-core","homepage":"https://clawhub.ai/heygen-com/skills/hyperframes-core","source":"CLAWHUB","vendor":{"slug":"clawhub","label":"Clawhub","url":"https://clawhub.ai/heygen-com/skills/hyperframes-core"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":"1.0.42","freshnessAt":"2026-10-09T09:58:47.867Z","freshnessLabel":"Oct 9, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Oct 9, 2026"},{"label":"Vendor","value":"Clawhub"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"1.0.42"}],"factsPreview":[{"factKey":"vendor","category":"vendor","label":"Vendor","value":"Clawhub","href":"https://clawhub.ai/heygen-com/skills/hyperframes-core","sourceUrl":"https://clawhub.ai/heygen-com/skills/hyperframes-core","sourceType":"profile","confidence":"medium","observedAt":"2026-10-09T09:58:47.867Z","isPublic":true},{"factKey":"protocols","category":"compatibility","label":"Protocol compatibility","value":"OpenClaw","href":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-core/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-core/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-10-09T09:58:47.867Z","isPublic":true},{"factKey":"traction","category":"adoption","label":"Adoption signal","value":"3.1K downloads","href":"https://clawhub.ai/heygen-com/hyperframes-core","sourceUrl":"https://clawhub.ai/heygen-com/hyperframes-core","sourceType":"profile","confidence":"medium","observedAt":"2026-10-09T09:58:47.867Z","isPublic":true},{"factKey":"latest_release","category":"release","label":"Latest release","value":"1.0.42","href":"https://clawhub.ai/heygen-com/hyperframes-core","sourceUrl":"https://clawhub.ai/heygen-com/hyperframes-core","sourceType":"release","confidence":"medium","observedAt":"2026-10-02T13:01:36.130Z","isPublic":true},{"factKey":"handshake_status","category":"security","label":"Handshake status","value":"UNKNOWN","href":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-core/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-core/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true}],"highlights":["3.1K downloads","Trust evidence available"],"agentCard":{"name":"hyperframes-core","description":"The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=\"clip\"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.","source":"CLAWHUB","sourceId":"clawhub:s17fpgb0p797dzkbtbrxw5x1hh89qs64:hyperframes-core","homepage":"https://clawhub.ai/heygen-com/skills/hyperframes-core","repository":"https://clawhub.ai/heygen-com/hyperframes-core","documentation":"https://www.xpersona.co/agent/clawhub-heygen-com-hyperframes-core","protocols":["OPENCLEW"],"examples":[{"kind":"example","language":"html","snippet":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      body {\n        margin: 0;\n        background: #000;\n      }\n      #root {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n      /* Sub-comp slots stretch to fill the root. */\n      [data-composition-id=\"root\"] > div[data-composition-src] {\n        position: absolute;\n        inset: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"root\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"30\"\n    >\n      <!-- Sequential scenes — each one a sub-composition slot. -->\n      <div\n        id=\"el-intro\"\n        data-composition-id=\"intro\"\n        data-composition-src=\"compositions/intro.html\"\n        data-start=\"0\"\n        data-duration=\"6\"\n        data-track-index=\"1\"\n      ></div>\n\n      <div\n        id=\"el-body\"\n        data-composition-id=\"body\"\n        data-composition-src=\"compositions/body.html\"\n        data-start=\"6\"\n        data-duration=\"18\"\n        data-track-index=\"1\"\n      ></div>\n\n      <div\n        id=\"el-outro\"\n        data-composition-id=\"outro\"\n        data-composition-src=\"compositions/outro.html\"\n        data-start=\"24\"\n        data-duration=\"6\"\n        data-track-index=\"1\"\n      ></div>\n\n      <!-- Continuous audio at the root — survives scene cuts. -->\n      <audio\n        id=\"el-bgm\"\n        src=\"assets/bgm.mp3\"\n        data-start=\"0\"\n        data-duration=\"30\"\n        data-track-index=\"10\"\n        data-volume=\"0.6\"\n      ></audio>\n    </div>\n\n    <script>\n      window.__timelines[\"root\"] = gsap.timeline({ paused: true });\n    </script>\n  </body>\n</html>"},{"kind":"example","language":"html","snippet":"<!-- index.html (host) -->\n<div\n  id=\"el-final\"\n  data-composition-id=\"final-anim\"\n  data-composition-src=\"compositions/final-anim.html\"\n  data-start=\"20\"\n  data-duration=\"6\"\n  data-track-index=\"1\"\n></div>\n\n<!-- media is a DIRECT root child; sits over the sub-comp's frame -->\n<video\n  id=\"final-video\"\n  class=\"clip\"\n  src=\"assets/final.mp4\"\n  data-start=\"20\"\n  data-duration=\"6\"\n  data-track-index=\"2\"\n  muted\n  playsinline\n  style=\"position:absolute; left:360px; top:100px; width:1200px; height:680px; object-fit:cover; border-radius:24px;\"\n></video>\n\n<script>\n  // MAIN timeline drives the host video. Global time: scene starts at 20.\n  const main = window.__timelines[\"main\"];\n  main.fromTo(\n    \"#final-video\",\n    { scale: 1.4, filter: \"blur(14px)\" },\n    { scale: 1.0, filter: \"blur(0px)\", duration: 0.9, ease: \"power3.out\" },\n    20,\n  ); // = slot data-start (+ any scene-local offset)\n</script>\n\n<!-- compositions/final-anim.html — frame/shell only, no <video>, no host-element animation -->\n<template>\n  <div\n    data-composition-id=\"final-anim\"\n    data-width=\"1920\"\n    data-height=\"1080\"\n    data-duration=\"6\"\n    style=\"position:absolute; inset:0; pointer-events:none;\"\n  >\n    <script>\n      const tl = gsap.timeline({ paused: true });\n      // animate ONLY this sub-comp's own elements here (labels, frame, overlays)\n      window.__timelines[\"final-anim\"] = tl;\n    </script>\n  </div>\n</template>"}]}}