hyperframes-registry

Cài đặt và kết nối các khối registry cùng thành phần vào các tổ hợp HyperFrames. Sử dụng khi chạy hyperframes add, cài đặt một khối hoặc thành phần, kết nối một mục đã cài đặt vào index.html, hoặc làm việc với hyperframes.json. Bao gồm lệnh add, vị trí cài đặt, kết nối khối phụ trong tổ hợp, hợp nhất đoạn mã thành phần, khám phá registry, và tạo một khối hoặc thành phần mới để đóng góp ngược lên (ý tưởng → tạo khung → xác thực → 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.

Thêm skills từ 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
Tất cả kiến thức hoạt hình cho HyperFrames — quy tắc chuyển động nguyên tử, bản thiết kế cảnh đa pha, chuyển tiếp cảnh, kỹ thuật thiết kế chuyển động rộng hơn, VÀ bảy bộ điều hợp thời gian chạy (GSAP mặc định, cộng với Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Sử dụng cho bất kỳ tác vụ chuyển động hoặc hoạt hình nào: chọn 2-4 quy tắc và soạn, hoặc tải bản thiết kế, hoặc tra cứu API thời gian chạy cụ thể (ví dụ: GSAP eases / Lottie player / Three.js mixer). Gốc HyperFrames: dòng thời gian tạm dừng đơn, an toàn t
creativedevelopmentdesign
hyperframes-core
heygen-com
Hợp đồng soạn thảo HTML HyperFrames. Sử dụng cho cấu trúc soạn thảo, thuộc tính dữ liệu, clip, track, hợp đồng phụ, biến, phát lại phương tiện, quy tắc kết xuất xác định và xác thực các dự án có thể kết xuất tối thiểu.
developmentmediacreative
hyperframes-media
heygen-com
Tiền xử lý tài sản cho các bản phối HyperFrames — TTS đa nhà cung cấp (HeyGen / ElevenLabs / Kokoro local), BGM đa nhà cung cấp (Google Lyria / local MusicGen), phiên âm Whisper, xóa nền, và biên tập phụ đề. Sử dụng cho npx hyperframes tts, bgm, transcribe, remove-background, lựa chọn giọng nói/nhà cung cấp, gợi ý tâm trạng nhạc, phụ đề / chú thích / lời bài hát / karaoke / tạo kiểu theo từng từ.
mediaaudiovideo
general-video
heygen-com
Sử dụng làm phương án dự phòng cho việc biên soạn video HTML HyperFrames tùy chỉnh khi không có quy trình chuyên biệt nào phù hợp. Bao gồm các tác phẩm dài hoặc nhiều cảnh, video thương hiệu/sizzle reel, dựng cảnh, thẻ tiêu đề, áp phích chuyển động dài, vòng lặp tĩnh và các tác phẩm tự do ở bất kỳ độ dài hoặc định dạng nào. Không dành cho quảng cáo sản phẩm tiếp thị (product-launch-video), chụp màn hình trang web thành video tổng quát (website-to-video), video giải thích chủ đề (faceless-explainer), video GitHub PR (pr-to-video), phụ đề cho cảnh quay có sẵn...
videocreativemedia
motion-graphics
heygen-com
Sử dụng khi người dùng muốn một đồ họa chuyển động ngắn, thiên về thiết kế, nơi chuyển động là thông điệp: kiểu chữ động, đếm số liệu hoặc số, hiệu ứng biểu đồ/trực quan hóa dữ liệu, logo sting, brand lockup, lower-third, callout, lớp phủ mạng xã hội, tiêu đề/tweet/tin tức động, poster chuyển động, hoặc điểm nhấn trang đã chụp nhanh. Thường dưới 10 giây và tối đa khoảng 30 giây, không có mạch tường thuật, lồng tiếng hoặc chủ thể quay thực. Có thể xuất ra MP4 hoặc lớp phủ trong suốt. Không dành cho các tác phẩm dài hơn, nhiều cảnh,
creativevideodesign
hyperframes-read-first
heygen-com
BẮT ĐẦU TỪ ĐÂY cho bất kỳ yêu cầu nào về tạo, dựng, sinh, chỉnh sửa, làm hoạt ảnh hoặc kết xuất video, hoạt ảnh, đồ họa chuyển động, video giải thích, thẻ tiêu đề, lớp phủ, video có phụ đề, quảng cáo sản phẩm, video trang web, video PR hoặc nhật ký thay đổi, ghép dữ liệu, áp phích chuyển động hoặc bố cục HTML HyperFrames. Sử dụng trước các kỹ năng video hoặc hoạt ảnh khác khi người dùng muốn HyperFrames tạo hoặc kết xuất video MP4/web hoàn chỉnh, chọn quy trình làm việc hoặc định tuyến giữa video ra mắt sản phẩm,
creativevideomedia