[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-heygen-com-hyperframes":3},{"slug":4,"name":5,"summary":6,"owner":7,"repo":8,"repo_url":9,"avatar_url":10,"stars":11,"language":12,"license":13,"ai_tools":14,"topics":22,"published_at":38,"updated_at":39,"category":40,"category_slug":41,"description":42,"github_synced_at":43,"install":44,"guide_html":56,"toc":57},"heygen-com-hyperframes","HyperFrames skills","HyperFrames — HTML, CSS va GSAP animatsiyalardan deterministik MP4 video yasaydigan ochiq framework. AI agentlar uchun skill va CLI bilan keladi.","heygen-com","hyperframes","https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F65394575?v=4",80260,"TypeScript","Apache-2.0",[15,16,17,18,19,20,21],"Claude Code","Codex","Cursor","Gemini CLI","Copilot","OpenCode","IBM Bob",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"ai","ai-agents","animation","claude-code","ffmpeg","framework","gsap","html","html-to-video","mcp","motion-graphics","puppeteer","rendering","typescript","video-editor","2026-11-07T09:53:12.000000Z","2026-11-07T09:53:47.000000Z","Video","video","Write HTML. Render video. Built for agents.","2026-11-07T09:53:13.000000Z",{"repo_url":9,"skills":45,"custom":55},[46,47,48,49,50,51,52,53,54],"captions-overlay","changelog-video","cut-the-curve","motion-doctrine","oversized-cursor","seam-craft","canopy-part-title","code-slice-hero","cuboid-carousel",null,"\u003Ch2 id=\"hyperframes-nima\">HyperFrames nima\u003C\u002Fh2>\n\u003Cp>HyperFrames — HTML, CSS, media va "seekable" (vaqt bo'yicha surish mumkin bo'lgan) animatsiyalarni deterministik MP4 videoga aylantiradigan bepul, ochiq manbali framework. Uni CLI orqali lokal ishlatish yoki AI kod agentlariga skill sifatida ulash mumkin. Dasturchilar, motion-dizaynerlar va avtomatlashtirilgan video pipeline quruvchilar uchun mos. Litsenziya: Apache-2.0.\u003C\u002Fp>\n\u003Cp>Render vaqtida headless Chrome har bir kadrni "seek" qiladi, natijani FFmpeg kodlaydi. Shuning uchun bir xil kirish doim bir xil videoni beradi.\u003C\u002Fp>\n\u003Ch2 id=\"ornatish\">O'rnatish\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Usul\u003C\u002Fth>\n\u003Cth>Buyruq\u003C\u002Fth>\n\u003Cth>Natija\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Claude Code plagini\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>claude plugin marketplace add heygen-com\u002Fhyperframes\u003C\u002Fcode> va \u003Ccode>claude plugin install hyperframes@hyperframes\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>To'liq skill katalogi plagin sifatida o'rnatiladi, \u003Ccode>\u002Fhyperframes:hyperframes\u003C\u002Fcode> ishlaydi\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Alohida skill'lar (OpenCode ham)\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx skills add heygen-com\u002Fhyperframes\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Tanlash oynasi ochiladi; "Core Skills" guruhi yetarli\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Core to'plam (skriptda\u002FCI'da)\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx hyperframes skills update\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Aynan core skill'lar, CLI versiyasiga mos\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Hammasi\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx skills add heygen-com\u002Fhyperframes --all\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Barcha 9 ta e'lon qilingan skill\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Qo'lda CLI\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>npx hyperframes init my-video\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Yangi loyiha skeleti\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>\u003Cstrong>Talablar:\u003C\u002Fstrong> Node.js 22+, FFmpeg.\u003C\u002Fp>\n\u003Ch2 id=\"ish-jarayoni\">Ish jarayoni\u003C\u002Fh2>\n\u003Cp>Skill'lar agentga HyperFrames ishlab chiqarish siklini o'rgatadi:\u003C\u002Fp>\n\u003Col>\n\u003Cli>Videoni rejalashtirish.\u003C\u002Fli>\n\u003Cli>To'g'ri HTML yozish (\u003Ccode>data-start\u003C\u002Fcode>, \u003Ccode>data-duration\u003C\u002Fcode>, \u003Ccode>data-track-index\u003C\u002Fcode> atributlari bilan).\u003C\u002Fli>\n\u003Cli>Seekable animatsiyalarni ulash (GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI).\u003C\u002Fli>\n\u003Cli>Media qo'shish.\u003C\u002Fli>\n\u003Cli>Lint qilish.\u003C\u002Fli>\n\u003Cli>Preview qilish.\u003C\u002Fli>\n\u003Cli>Render qilish.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2 id=\"har-bir-skill-nima-qiladi\">Har bir skill nima qiladi\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>Core to'plam:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Buyruq\u003C\u002Fth>\n\u003Cth>Siz nima berasiz\u003C\u002Fth>\n\u003Cth>Nima chiqadi\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>\u002Fhyperframes\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Video, motion graphic, subtitr yoki overlay so'rovi (avval shuni o'qiladi)\u003C\u002Ftd>\n\u003Ctd>Render qoidalari va ish sikli bo'yicha yo'riqnoma\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>\u002Fhyperframes-cli\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>CLI vazifasi: scaffold, preview, render, publish\u003C\u002Ftd>\n\u003Ctd>CLI buyruqlari, JSON o'qish, xatolarni tuzatish\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>\u002Fhyperframes-registry\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Tayyor blok yoki komponent kerak bo'lgan vizual\u003C\u002Ftd>\n\u003Ctd>Tahrirlanadigan manba sifatida o'rnatilgan ~450 blok\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>\u002Fmedia-use\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Musiqa, ovoz, rasm, voiceover, transkript va h.k.\u003C\u002Ftd>\n\u003Ctd>HeyGen yoki bepul lokal vositalar bilan media\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>\u003Cstrong>Kerak bo'lganda o'rnatiladigan\u003C\u002Fstrong> (\u003Ccode>npx hyperframes skills update <name>\u003C\u002Fcode>):\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>\u002Ffigma\u003C\u002Fcode> — Figma havolasidan asset, brend tokenlari va komponentlarni videoga olib kirish.\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fslideshow\u003C\u002Fcode> — taqdimot\u002Fdeck; natija MP4 emas, navigatsiya qilinadigan deck.\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fremotion-to-hyperframes\u003C\u002Fcode> — Remotion va boshqa vositalardagi kodni ko'chirish.\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Freverse-any-video\u003C\u002Fcode> — video faylni tahrirlanadigan loyihaga qayta qurish (HyperFrames Pro).\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Fstyle-sampling\u003C\u002Fcode> — beshta tayyor uslubdan birida yangi epizod (HyperFrames Pro).\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"amaliy-misol\">Amaliy misol\u003C\u002Fh2>\n\u003Cp>Agent orqali:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Ccode>npx hyperframes skills update\u003C\u002Fcode> ni bir marta ishga tushiring.\u003C\u002Fli>\n\u003Cli>Agentga so'rov bering: "Using \u003Ccode>\u002Fhyperframes\u003C\u002Fcode>, create a 10-second product intro with a fade-in title, a background video, and subtle background music."\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Qo'lda:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">npx hyperframes init my-video\ncd my-video\nnpx hyperframes preview      # brauzerda jonli preview\nnpx hyperframes render       # MP4 ga render\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Tayyor blok qo'shish:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">npx hyperframes add data-chart\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Boshqa misollar: \u003Ccode>flash-through-white\u003C\u002Fcode> (shader o'tish), \u003Ccode>instagram-follow\u003C\u002Fcode> (ijtimoiy overlay).\u003C\u002Fp>\n\u003Ch2 id=\"cheklovlar-va-maslahatlar\">Cheklovlar va maslahatlar\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Loyiha-lokal o'rnatishni video loyihangiz papkasidan bajaring. HyperFrames repozitoriysi ichida global \u003Ccode>npx hyperframes skills update\u003C\u002Fcode> ishlating, aks holda tahrirlanmagan o'zgarishlar ustidan yozilishi mumkin.\u003C\u002Fli>\n\u003Cli>\u003Ccode>skills add\u003C\u002Fcode> registry nusxasi \u003Ccode>main\u003C\u002Fcode> dan bir necha soat orqada qolishi mumkin; \u003Ccode>skills update\u003C\u002Fcode> CLI versiyasiga mos reliz tegidan o'rnatadi.\u003C\u002Fli>\n\u003Cli>\u003Ccode>\u002Freverse-any-video\u003C\u002Fcode> va \u003Ccode>\u002Fstyle-sampling\u003C\u002Fcode> HyperFrames Pro talab qiladi.\u003C\u002Fli>\n\u003Cli>Repo ichidagi olti ichki skill odatda o'rnatilmaydi.\u003C\u002Fli>\n\u003Cli>Animatsiya seekable bo'lishi shart: GSAP timeline \u003Ccode>paused: true\u003C\u002Fcode> bilan yaratilib, \u003Ccode>window.__timelines\u003C\u002Fcode> ga yoziladi.\u003C\u002Fli>\n\u003Cli>Dasturiy ishlab chiqish uchun repo klonlanganda Git LFS kerak (golden test \u003Ccode>.mp4\u003C\u002Fcode> fayllari, ~240 MB). Faqat manba kerak bo'lsa: \u003Ccode>GIT_LFS_SKIP_SMUDGE=1 git clone ...\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"manba\">Manba\u003C\u002Fh2>\n\u003Cp>GitHub: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\" rel=\"noopener nofollow ugc\" target=\"_blank\">https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\u003C\u002Fa>\u003C\u002Fp>\n",[58,61,64,67,70,73,76],{"id":59,"title":60},"hyperframes-nima","HyperFrames nima",{"id":62,"title":63},"ornatish","O'rnatish",{"id":65,"title":66},"ish-jarayoni","Ish jarayoni",{"id":68,"title":69},"har-bir-skill-nima-qiladi","Har bir skill nima qiladi",{"id":71,"title":72},"amaliy-misol","Amaliy misol",{"id":74,"title":75},"cheklovlar-va-maslahatlar","Cheklovlar va maslahatlar",{"id":77,"title":78},"manba","Manba"]