Communitygithub.com

heygen-com/hyperframes

一個線框入口突然打開，標題從中浮現，然後字母轉變為第二個短語。HyperFrames 區塊，1920×1080，8 秒，9 個變數。

hyperframes 是什麼？

此技能提供了一個名為「Wireframe Portal Title」的 HyperFrames 合成區塊，用於在 1920×1080 解析度下生成 8 秒的動態文字動畫。它使用由 Geist 字體建構的擠出線框字母，並透過可調整混亂度的入口爆發效果來揭示標題。接著，字母會以可調的緩動曲線和安定抖動效果，轉變為第二段替換文字。該區塊支援 9 個變數，包括主標題、替換短語、轉場持續時間、顏色等，可完全自訂。它相容於 HyperFrames 渲染器，並透過 GSAP 時間軸和 Closed-Form 時間函數實現可搜尋的回播。此技能主要為使用 HyperFrames 平台（如 HeyGen 生態系統）的開發者設計，能直接整合到網頁中，適合需要動態標題的影片或演示製作。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/wireframe-portal-title
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

線框入口標題

擠出的線框字母由內建的 Geist 字體構建，使用 TTF 載入器和多邊形偏移技術，然後透過入口爆發效果揭示，其混亂度為一個變數。第二個節拍將字母轉變為替換短語，支援單詞換行和自動字型大小，並透過可調的緩動曲線和安定抖動效果分階段呈現，可選遠近霧效果。

合成 ID：wireframe-portal-title。持續時間 8 秒，30 fps，1920×1080。

檔案

  • wireframe-portal-title.html（63 KB）
  • assets/fonts/Geist-Bold.ttf（65 KB）
  • assets/fonts/Geist-Regular.ttf（65 KB）
  • assets/fonts/Geist-SemiBold.ttf（65 KB）
  • assets/fonts/Geist-OFL.txt（4 KB）

安裝

使用 npx hyperframes add wireframe-portal-title 安裝；預設情況下，上述檔案會放置在 compositions/wireframe-portal-title/ 目錄下。然後從主機 index.html 掛載區塊：

<div
  data-composition-id="wireframe-portal-title"
  data-composition-src="compositions/wireframe-portal-title/wireframe-portal-title.html"
  data-start="0"
  data-duration="8"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

透過直接指定合成檔案來使用自訂值渲染：

npx --yes [email protected] render 'compositions/wireframe-portal-title/wireframe-portal-title.html' --variables '{"title":"BREAKTHROUGH","replacementPhrase":"Lets do this sir!"}'

變數

執行時透過 window.__hyperframes.getVariables() 讀取；在合成根元素上以 data-composition-variables 屬性宣告（使用單引號屬性，純 JSON）。

id類型預設值標籤 / 範圍
titlestring"BREAKTHROUGH"標題最多 18 個字元
replacementPhrasestring"Lets do this sir!"3D 替換短語（自動佈局）
phraseDurationnumber1.85短語轉場持續時間（秒）0.65–2.9 步長 0.05
phraseEasingnumber8轉場緩動（1 柔和 – 8 彈性）1–8 步長 0.25
settleGlitchnumber0.2字母安定抖動強度 0–4 步長 0.05
depthFogbooleantrue遠近霧（早期淡出始終開啟）
subtitlestring"HYPERFRAMES PORTAL TITLE"字幕最多 48 個字元
accentcolor"#F5C518"強調色
burstChaosnumber1入口混亂度（0-2）0–2 步長 0.01

執行時契約

  • 一個已暫停的 GSAP 時間軸，註冊為 window.__timelines["wireframe-portal-title"]。
  • 在 hf-seek 自訂事件上重新同步；每一幀都是時間的封閉式函數（僅有基於種子的 PRNG，無 rAF 迴圈，無 Date.now）。
  • 渲染器：three.js 0.181.2，GSAP 3.14.2，Canvas 2D，GLSL 著色器，後處理，基於種子的 PRNG，Clipper。每個實例約需 350 MB 記憶體；請一次只執行一個。
  • 外部執行時依賴：https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js、https://cdn.jsdelivr.net/npm/[email protected]/clipper.js、https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js、https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/。
  • 本地字體：assets/fonts/Geist-Regular.ttf、assets/fonts/Geist-SemiBold.ttf、assets/fonts/Geist-Bold.ttf。

編輯規則（來自原始專案）

  1. 保持 data-composition-variables 為單引號屬性，內容為純 " JSON。絕不要透過 Studio 的設計面板儲存它。
  2. 不要在靜態標記中放入 <canvas>；應在執行時建立它。
  3. 保持每個視覺狀態為 t 的函數；可搜尋性（seek-safety）是區塊可渲染的關鍵。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

相關技能

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community