[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"readme:hyperframes":3},"\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"docs\u002Flogo\u002Fdark.svg\">\u003C\u002Fsource>\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"docs\u002Flogo\u002Flight.svg\">\u003C\u002Fsource>\n    \u003Cimg alt=\"HyperFrames\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fheygen-com\u002Fhyperframes\u002FHEAD\u002Fdocs\u002Flogo\u002Flight.svg\" width=\"300\" \u002F>\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fhyperframes\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fhyperframes.svg?style=flat\" alt=\"npm version\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fhyperframes\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fhyperframes.svg?style=flat\" alt=\"npm downloads\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\u002Fblob\u002FHEAD\u002FLICENSE\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-Apache%202.0-blue.svg\" alt=\"License\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fnodejs.org\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fnode-%3E%3D22-brightgreen\" alt=\"Node.js\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FEbK98HBPdk\" rel=\"nofollow ugc noopener\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDiscord-Join-5865F2?logo=discord&logoColor=white\" alt=\"Discord\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\u003Cp align=\"center\">\u003Cb>Write HTML. Render video. Built for agents.\u003C\u002Fb>\u003C\u002Fp>\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fhyperframes.heygen.com\u002Fquickstart\" rel=\"nofollow ugc noopener\">Quickstart\u003C\u002Fa> |\n  \u003Ca href=\"https:\u002F\u002Fhyperframes.heygen.com\u002Fshowcase\" rel=\"nofollow ugc noopener\">Showcase\u003C\u002Fa> |\n  \u003Ca href=\"https:\u002F\u002Fwww.hyperframes.dev\u002F\" rel=\"nofollow ugc noopener\">Playground\u003C\u002Fa> |\n  \u003Ca href=\"https:\u002F\u002Fhyperframes.heygen.com\u002Fcatalog\u002Fblocks\u002Fdata-chart\" rel=\"nofollow ugc noopener\">Catalog\u003C\u002Fa> |\n  \u003Ca href=\"https:\u002F\u002Fhyperframes.heygen.com\u002Fintroduction\" rel=\"nofollow ugc noopener\">Docs\u003C\u002Fa> |\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FEbK98HBPdk\" rel=\"nofollow ugc noopener\">Discord\u003C\u002Fa>\n\u003C\u002Fp>\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fheygen-com\u002Fhyperframes\u002FHEAD\u002Fdocs\u002Fpublic\u002Fimages\u002Fhyperframes-logo-motion-1280-trimmed.webp\" alt=\"HyperFrames demo: HTML code on the left transforms into a rendered video on the right\" width=\"800\" \u002F>\n\u003C\u002Fp>\u003Cp>HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.\u003C\u002Fp>\n\u003Ch2>Quick Start\u003C\u002Fh2>\n\u003Ch3>With an AI coding agent\u003C\u002Fh3>\n\u003Cp>Install the HyperFrames skills, then describe the video you want:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">npx skills add heygen-com\u002Fhyperframes\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\n\u003Cp>The picker opens with nothing pre-selected — the \u003Cstrong>Core Skills\u003C\u002Fstrong> group is all you need: the \u003Ccode>\u002Fhyperframes\u003C\u002Fcode> router installs each creation workflow on demand. Agents and non-interactive runs should use \u003Ccode>npx hyperframes skills update\u003C\u002Fcode> instead — it installs exactly the core set, whereas a non-interactive \u003Ccode>skills add\u003C\u002Fcode> without \u003Ccode>--skill\u003C\u002Fcode> installs all 20.\u003C\u002Fp>\n\u003Cp>\u003Ccode>skills add\u003C\u002Fcode> resolves the skills.sh registry blob, which can lag \u003Ccode>main\u003C\u002Fcode> by hours. \u003Ccode>npx hyperframes skills update\u003C\u002Fcode> installs from the current \u003Ccode>main\u003C\u002Fcode>, so reach for it when you need the newest copy of a skill.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>Try a prompt like:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>Using \u003Ccode>\u002Fhyperframes\u003C\u002Fcode>, create a 10-second product intro with a fade-in title, a background video, and subtle background music.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills.\u003C\u002Fp>\n\u003Ch2>Skills\u003C\u002Fh2>\n\u003Cp>HyperFrames ships 20 skills agents load on demand. Read \u003Ccode>\u002Fhyperframes\u003C\u002Fcode> first — it's the router and capability map; it picks a workflow for any \"make me a…\" request — video, deck, or composition port — and points to the domain skills below.\u003C\u002Fp>\n\u003Cp>Default to the \u003Cstrong>core set\u003C\u002Fstrong> — the router installs each creation workflow on demand. \u003Ccode>npx hyperframes skills update\u003C\u002Fcode> installs exactly that from anywhere; the interactive picker (\u003Ccode>npx skills add heygen-com\u002Fhyperframes\u003C\u002Fcode>) lists it as the \"Core Skills\" group, nothing pre-selected. The picker is interactive-only — a non-interactive or agent run without \u003Ccode>--skill\u003C\u002Fcode> installs all 20. Use \u003Ccode>npx skills add heygen-com\u002Fhyperframes --all\u003C\u002Fcode> to install all 20 deliberately (skips the picker), or \u003Ccode>npx skills add heygen-com\u002Fhyperframes --skill <name>\u003C\u002Fcode> for just one (bare name, no leading \u003Ccode>\u002F\u003C\u002Fcode>).\u003C\u002Fp>\n\u003Cp>Installs stay lean after that: \u003Ccode>npx hyperframes init\u003C\u002Fcode> keeps the \u003Cstrong>core set\u003C\u002Fstrong> fresh (the router, the \u003Ccode>hyperframes-*\u003C\u002Fcode> domai\u003C\u002Fp>\n",1787445488814]