hyperframes-registry

โดย heygen-com

ติดตั้งและเชื่อมต่อบล็อกและคอมโพเนนต์ของ registry เข้ากับองค์ประกอบ HyperFrames ใช้เมื่อรันคำสั่ง hyperframes add, ติดตั้งบล็อกหรือคอมโพเนนต์, เชื่อมต่อรายการที่ติดตั้งแล้วเข้ากับ index.html, หรือทำงานกับ hyperframes.json ครอบคลุมคำสั่ง add, ตำแหน่งการติดตั้ง, การเชื่อมต่อบล็อกย่อย, การรวมคอมโพเนนต์ snippet, การค้นพบ registry, และการสร้างบล็อกหรือคอมโพเนนต์ใหม่เพื่อส่งกลับต้นทาง (แนวคิด → โครงร่าง → ตรวจสอบ → PR)

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-registry

Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin.

HyperFrames registry

Starting from an item is faster and usually better than writing the effect yourself, and an installed item is ordinary source in your project: change it, cut it down, restyle it.

Find and install

There is no hyperframes registry command; searching is catalog, installing is add.

npx hyperframes catalog --query "<what the beat should do, in English>" --json
npx hyperframes add <name> --json        # prints the written files and the mount snippet
  • Query in English even when the video is not: the catalog is indexed in English, and another script returns No searchable words in query, which is not a gap.
  • Search is local and sends nothing. The default words tier only finds items that reuse your words; --on-device ranks by meaning after a one-time ~33 MB download. Offer that download and let the person decide; never enable it silently. The --json envelope names the tier that answered.
  • Narrow with --type block|component and --tag <tag>. add <tag> installs every block with that tag; dependencies install first. add needs the network even for an item installed before; search works offline from the cached manifest.
  • Nothing fits: report it before you hand-build, on either tier. catalog --query prints the line pre-filled (report_gap in --json): npx hyperframes feedback --search-miss "<query>" --wanted "<the move you needed>" --tier <tier>. Describe the effect, not an item name you imagined.

Tiers, dropped and unindexed, stale indexes, offline behaviour: references/search.md.

What's in it

Blocks: a scene with its own timelineExamples
Transitionsbeat-freeze-cut, chromatic-radial-split, cinematic-zoom
Overlays and lower thirdscamcorder-hud, editorial-flash-overlay, lt-clean-bar
Title cards and kinetic typecanopy-part-title, code-slice-hero
Social, chat and UI cardsai-chat-reveal, chatgpt-exchange
Code, charts, data and mapscode-diff, bar-chart-race, data-chart
3D, shader and backgroundsapp-showcase, aurora, blob
Components: a snippet merged into your sceneExamples
Motion primitives and text effectsagent-cursor, blur-in, bottom-up-letters
Caption stylescaption-clip-wipe, caption-editorial-emphasis
Camera movescamera-shake, camera-scan-gate
Product demo and UI propsbefore-after-wipe, browser-device-stage
Textures, particles and effectsascii-render-pass, grain-overlay

Wiring

  • Block: installs to compositions/<name>.html. Mount it with data-composition-src, data-composition-id matching the block's own id, data-start and the data-duration you need; the snippet add prints is the starting point. references/wiring-blocks.md.
  • Component: installs to compositions/components/<name>.html. Copy its markup, <style> and script into your scene, and follow its comment block if it hooks into your timeline. references/wiring-components.md.
  • Take the largest unit that fits, then edit it. Keep an installed item's ids prefixed as they are, so two items can't collide.
  • An item keeps its own variables; set them for one mount with data-variable-values on its host (add --vars '{"title":"…"}' writes that), and point its colour and font variables at your brand's.
  • Beat-synced blocks take hit times from npx hyperframes beats --json: the beat times minus the mount's data-start.
  • Install paths come from hyperframes.json (references/install-locations.md).

Contributing

Authoring a new block or component for an upstream PR: references/contributing.md, starter templates in references/templates.md, quality bar in references/component-quality-bar.md.

Skills เพิ่มเติมจาก heygen-com

hyperframes-audio
heygen-com
Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.
hyperframes-cli
heygen-com
HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.
developmenttestingapi
hyperframes-animation
heygen-com
ความรู้ด้านแอนิเมชันทั้งหมดสำหรับ HyperFrames — กฎการเคลื่อนไหวระดับอะตอม, บลูพริ้นท์ฉากแบบหลายเฟส, การเปลี่ยนฉาก, เทคนิคการออกแบบการเคลื่อนไหวในวงกว้าง และอะแดปเตอร์รันไทม์ทั้งเจ็ดตัว (GSAP เริ่มต้น, รวมถึง Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU) ใช้สำหรับงานเคลื่อนไหวหรือแอนิเมชันใดๆ: เลือก 2-4 กฎแล้วประกอบ, หรือโหลดบลูพริ้นท์, หรือค้นหา API เฉพาะรันไทม์ (เช่น GSAP eases / Lottie player / Three.js mixer) HyperFrames-native: ไทม์ไลน์ที่หยุดชั่วคราวเส้นเดียว, ปลอดภัยต่อการค้นหา,...
creativedevelopmentdesign
hyperframes-core
heygen-com
สัญญาการประกอบ HyperFrames HTML ใช้สำหรับโครงสร้างการประกอบ, แอตทริบิวต์ข้อมูล, คลิป, แทร็ก, การประกอบย่อย, ตัวแปร, การเล่นสื่อ, กฎการเรนเดอร์ที่กำหนดได้, และการตรวจสอบโปรเจกต์ที่เรนเดอร์ได้ขั้นต่ำ
developmentmediacreative
hyperframes-media
heygen-com
การประมวลผลสินทรัพย์ล่วงหน้าสำหรับองค์ประกอบ HyperFrames — TTS หลายผู้ให้บริการ (HeyGen / ElevenLabs / Kokoro ในเครื่อง), BGM หลายผู้ให้บริการ (Google Lyria / MusicGen ในเครื่อง), การถอดเสียง Whisper, การลบพื้นหลัง, และการเขียนคำบรรยาย ใช้สำหรับ npx hyperframes tts, bgm, transcribe, remove-background, การเลือกเสียง/ผู้ให้บริการ, การกระตุ้นอารมณ์ดนตรี, คำบรรยาย / คำอธิบายใต้ภาพ / เนื้อเพลง / คาราโอเกะ / การจัดรูปแบบต่อคำ
mediaaudiovideo
general-video
heygen-com
ใช้เป็นตัวเลือกสำรองสำหรับการเขียนวิดีโอประกอบ HyperFrames HTML แบบกำหนดเอง เมื่อไม่มีเวิร์กโฟลว์เฉพาะที่เหมาะสม ครอบคลุมผลงานแบบยาวหรือหลายฉาก แบรนด์/ซิซเซิลรีล มอนเทจ การ์ดไตเติ้ล โมชันโปสเตอร์แบบยาว ลูปนิ่ง และองค์ประกอบอิสระในทุกความยาวหรือรูปแบบ ไม่ใช่สำหรับโปรโมตผลิตภัณฑ์ที่วางตลาด (product-launch-video) การจับภาพจากเว็บไซต์ทั่วไปเป็นวิดีโอ (website-to-video) วิดีโออธิบายหัวข้อ (faceless-explainer) วิดีโอ GitHub PR (pr-to-video) การใส่คำบรรยายในฟุตเทจที่มีอยู่...
videocreativemedia
motion-graphics
heygen-com
ใช้เมื่อผู้ใช้ต้องการโมชั่นกราฟิกที่เน้นการออกแบบและให้การเคลื่อนไหวเป็นสาระสำคัญ เช่น kinetic typography, การนับตัวเลขหรือสถิติ, การแสดงข้อมูล/แผนภูมิ, logo sting, brand lockup, lower-third, callout, social overlay, หัวข้อ/ทวีต/ข่าวแบบเคลื่อนไหว, โปสเตอร์เคลื่อนไหว, หรือการเน้นส่วนของหน้าที่จับภาพอย่างรวดเร็ว โดยทั่วไปมีความยาวต่ำกว่า 10 วินาทีถึงประมาณ 30 วินาที ไม่มีโครงสร้างการเล่าเรื่อง เสียงพากย์ หรือตัวแสดงจริง สามารถเรนเดอร์เป็น MP4 หรือโอเวอร์เลย์โปร่งใส ไม่เหมาะสำหรับชิ้นงานที่ยาว มีหลายฉาก มีการเล่าเรื่อง หรือเป็นรีลของแบรนด์...
creativevideodesign
hyperframes-read-first
heygen-com
เริ่มต้นที่นี่สำหรับคำขอใดๆ ในการสร้าง, ผลิต, แต่ง, ทำภาพเคลื่อนไหว, หรือเรนเดอร์วิดีโอ, แอนิเมชัน, กราฟิกเคลื่อนไหว, วิดีโออธิบาย, การ์ดไตเติ้ล, โอเวอร์เลย์, วิดีโอที่มีคำบรรยาย, โปรโมทสินค้า, วิดีโอสำหรับเว็บไซต์, วิดีโอประชาสัมพันธ์หรือบันทึกการเปลี่ยนแปลง, มอนเทจข้อมูล, โปสเตอร์เคลื่อนไหว, หรือองค์ประกอบ HTML ของ HyperFrames ใช้ก่อนทักษะวิดีโอหรือแอนิเมชันอื่นๆ เมื่อผู้ใช้ต้องการให้ HyperFrames สร้างหรือเรนเดอร์วิดีโอ MP4/เว็บที่เสร็จสมบูรณ์, เลือกเวิร์กโฟลว์, หรือกำหนดเส้นทางระหว่างวิดีโอเปิดตัวผลิตภัณฑ์, วิดี
creativevideomedia