Communitygithub.com

heygen-com/hyperframes

環繞鏡頭跟隨冰塊標誌，標誌碎裂、重組成兩段文字後淡出。HyperFrames 區塊，1920×1080，22.5 秒，216 個變數。

hyperframes 是什麼？

這是 HyperFrames 平台中的一個影片合成技能，名為「Frost Sequence Camera Orbit」，專為 HyperFrames 區塊系統設計。它提供了一個 22.5 秒、1920×1080 解析度、30 fps 的完整冰霜主題動畫序列，包含標誌碎裂、重組為兩段文字並淡出的效果。相機以軌道環繞固定物件，在前方緩慢移動以便閱讀，並透過同一個粒子場串接所有轉場。使用者可以自訂兩段文字和 SVG 標誌，原始碼中也包含了可編輯的相機與組裝時間設定。此技能支援安裝、掛載與渲染指令，並提供多達 216 個可調整變數，涵蓋材質顏色、粗糙度、透明度、霜花、裂紋、散射等細部參數，適合用於高品質的動態品牌或宣傳影片製作。

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

在你喜歡的 AI 中提問

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

冰霜序列相機軌道

一個完整的 22.5 秒冰霜序列：標誌、第一段文字、第二段文字、碎裂與淡出。相機以軌道環繞固定物件，在前方緩慢移動以便閱讀。同一個粒子場串接所有轉場。可自訂兩段文字與 SVG 標誌；原始碼包含可編輯的相機與組裝時間設定。

合成 ID：frost-sequence-rig。時長 22.5 秒，30 fps，1920×1080。

檔案

  • frost-sequence-camera-orbit.html (131 KB)
  • assets/example-logo.svg (1 KB)
  • assets/fonts/Geist-Bold.ttf (65 KB)
  • assets/fonts/Geist-OFL.txt (4 KB)
  • assets/fonts/Geist-Regular.ttf (65 KB)
  • assets/fonts/Geist-SemiBold.ttf (65 KB)
  • assets/frost.js (1.5 MB)
  • assets/Three-LICENSE.txt (1 KB)
  • assets/ThreeMeshBVH-LICENSE.txt (1 KB)
  • assets/OpentypeJS-LICENSE.txt (1 KB)
  • assets/Clipper-LICENSE.txt (3 KB)
  • assets/gsap-3.14.2.min.js (128 KB)
  • assets/GSAP-NOTICE.txt (1 KB)
  • assets/logo.svg (1 KB)
  • assets/shards-atlas.png (安裝時從 CDN 擷取)
  • assets/test-mark.svg (1 KB)
  • assets/textures/bluenoise64.png (12 KB)
  • assets/textures/ice-inclusions-generated.png (安裝時從 CDN 擷取)

安裝

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

<div
  data-composition-id="frost-sequence-rig"
  data-composition-src="compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html"
  data-start="0"
  data-duration="22.5"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

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

npx --yes [email protected] render 'compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html' --variables '{"headline1":"難忘的|回憶。","headline2":"易於|記住。"}'

變數

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

id類型預設值標籤／範圍
headline1字串`"難忘的回憶。"`
headline2字串`"易於記住。"`
logoUrl字串"assets/logo.svg"標誌 SVG 資產路徑（在 Assets 中上傳，然後貼上路徑）最多 200 個字元
assemblyMode列舉"hybrid"組裝反應（實體
materialBaseColor顏色"#ffffff"基礎顏色
baseRoughness數字0.31基礎粗糙度 0–0.5 步長 0.005
materialTransmission布林true透射
materialBacklight數字0.27冰塊背光 0–2 步長 0.01
ior數字1.675折射率 1–2 步長 0.005
thicknessScale數字2.04厚度比例 0.1–3 步長 0.01
materialAbsorption布林true吸收／色調
attenuationColor顏色"#d5f4ff"衰減顏色（白色 = 無吸收，透明玻璃）
attenuationDistance數字6.54衰減距離 0.05–12 步長 0.01
materialDispersion布林false色散
dispersion數字0.12色散（0 = 關閉；開關需重新載入） 0–0.3 步長 0.005
materialReflections布林true反射
envIntensity數字2.04環境強度 0–3 步長 0.01
specularIntensity數字1.44高光強度 0–2 步長 0.01
materialFrost布林true霜花
materialInteriorFrost數字0均勻霜花 0–1 步長 0.01
frostScale數字0.7比例 0.2–6 步長 0.05
frostThreshold數字0.62閾值（1 = 無霜花，透明玻璃） 0–1 步長 0.01
frostSoftness數字0.24柔和度 0.01–1 步長 0.01
frostRoughness數字0.73粗糙度 0–1 步長 0.01
frostDiffuse數字0.11擴散度（霜花區域捕捉光線的程度） 0–1 步長 0.01
materialSurfaceBumps布林false物體表面凹凸／裂紋凹痕
materialCrystals布林true晶體凹凸
crystalBump數字0.01晶體凹凸 0–1 步長 0.01
crystalScale數字4晶體比例 4–80 步長 1
materialGrain布林true顆粒凹凸
materialGrainAmount數字0.47顆粒強度 0–2 步長 0.01
materialGrainScale數字150顆粒比例 1–150 步長 1
materialCutNormals布林true斷裂法線
materialMicro布林true微觀凹凸
microBump數字0.445微觀凹凸 0–1 步長 0.005
microScale數字10微觀比例 10–200 步長 1
microCoverage數字0.25微觀覆蓋率 0–1 步長 0.01
bumpMaskScale數字1.45遮罩比例 0.1–6 步長 0.05
materialRipples布林true漣漪
rippleBump數字0.22漣漪凹凸 0–1 步長 0.01
rippleScale數字23漣漪比例 2–30 步長 0.5
materialSmudges布林true污漬
smudgeAmount數字0.78數量 0–1 步長 0.01
smudgeCoverage數字0.58覆蓋率 0–1 步長 0.01
smudgeMaskScale數字1.85遮罩比例 0.1–6 步長 0.05
smudgeAnisotropy數字16.5各向異性 1–20 步長 0.5
smudgeRoughness數字0.75粗糙度 0–1 步長 0.01
smudgeWhiteness數字0.035白色度 0–0.5 步長 0.005
smudgeScale數字1.3比例 0.5–10 步長 0.1
materialCracks布林true裂紋
crackLargeScale數字2.45大型比例 0.3–8 步長 0.05
crackWarp數字0.22扭曲 0–1.5 步長 0.01
crackCoverage數字0.19覆蓋率 0–1 步長 0.01
crackRegionScale數字1.8區域比例 0.1–4 步長 0.05
crackRegionCoverage數字0.6區域覆蓋率 0–1 步長 0.01
veinScale數字8脈絡比例 1–20 步長 0.25
veinContrast數字0.55脈絡對比度 0–1 步長 0.01
crackWidth數字0.0025寬度 0.0005–0.02 步長 0.0005
crackBrightness數字0.65亮度 0–3 步長 0.01
crackDarkness數字0.69暗度 0–1 步長 0.01
crackRefraction數字0.076折射 0–0.1 步長 0.001
crackSurfaceStrength數字0.16表面強度 0–1 步長 0.01
fineScale數字18.4精細比例 2–20 步長 0.1
fineAmount數字0.52精細數量 0–1 步長 0.01
fineCoverage數字1精細覆蓋率 0–1 步長 0.01
materialScatter布林true內部散射
materialInclusionScale數字0.05內含物比例 0.05–3 步長 0.01
materialInclusionAmount數字2攝影內含物 0–2 步長 0.01
interiorScatter數字0.09內部散射 0–1 步長 0.01
materialClearcoat布林true清漆
clearcoat數字0清漆 0–1 步長 0.01

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

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

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

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

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