Communitygithub.com

heygen-com/hyperframes - 冰霜序列相机轨道

一个轨道相机跟随冰晶标志碎裂、重组为两段文字并淡出的动画。HyperFrames块，1920×1080，22.5秒，216个变量。

hyperframes - 冰霜序列相机轨道 是什么？

该技能是一个完整的22.5秒冰晶动画序列，包含Logo、第一段文字、第二段文字、破碎和淡出效果。相机围绕固定物体轨道旋转，在正面经过时减速以便阅读，同一粒子场贯穿所有过渡。支持自定义两段文字内容和SVG Logo，源代码中相机和组装时间线均可编辑。该技能基于HyperFrames框架，通过`npx hyperframes add`安装并挂载为HTML块，兼容任何Web宿主页面。运行时提供216个可调变量，涵盖材质颜色、粗糙度、透射、霜冻、裂纹、散射等冰晶外观的精细控制，允许开发者零代码完成专业级3D冰晶动画渲染。

兼容平台~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秒冰晶序列：Logo、第一段文字、第二段文字、破碎和淡出。相机围绕固定物体轨道旋转，在正面经过时减速以便阅读。同一粒子场贯穿所有过渡。可自定义两段文字内容和SVG Logo；源代码中包含可编辑的相机和组装时间线。

合成ID：frost-sequence-rig。时长22.5秒，30fps，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类型默认值标签/范围
headline1string`"Hard tobreak."`
headline2string`"Easy toremember."`
logoUrlstring"assets/logo.svg"Logo SVG资源路径（在Assets中上传后粘贴路径）最多200字符
assemblyModeenum"hybrid"组装响应（physical / directed / hybrid）
materialBaseColorcolor"#ffffff"基础颜色
baseRoughnessnumber0.31基础粗糙度 0–0.5 步长0.005
materialTransmissionbooleantrue透射
materialBacklightnumber0.27冰体背光 0–2 步长0.01
iornumber1.675折射率 1–2 步长0.005
thicknessScalenumber2.04厚度缩放 0.1–3 步长0.01
materialAbsorptionbooleantrue吸收/色偏
attenuationColorcolor"#d5f4ff"衰减颜色（白色=无吸收，透明玻璃）
attenuationDistancenumber6.54衰减距离 0.05–12 步长0.01
materialDispersionbooleanfalse色散
dispersionnumber0.12色散（0=关闭；开关需重载） 0–0.3 步长0.005
materialReflectionsbooleantrue反射
envIntensitynumber2.04环境强度 0–3 步长0.01
specularIntensitynumber1.44高光强度 0–2 步长0.01
materialFrostbooleantrue霜冻
materialInteriorFrostnumber0均匀霜冻 0–1 步长0.01
frostScalenumber0.7缩放 0.2–6 步长0.05
frostThresholdnumber0.62阈值（1=无霜冻，透明玻璃） 0–1 步长0.01
frostSoftnessnumber0.24柔化 0.01–1 步长0.01
frostRoughnessnumber0.73粗糙度 0–1 步长0.01
frostDiffusenumber0.11漫反射（霜冻区域捕捉光的程度） 0–1 步长0.01
materialSurfaceBumpsbooleanfalse物体表面凸起/裂纹缺口
materialCrystalsbooleantrue晶体凸起
crystalBumpnumber0.01晶体凸起强度 0–1 步长0.01
crystalScalenumber4晶体缩放 4–80 步长1
materialGrainbooleantrue颗粒感凸起
materialGrainAmountnumber0.47颗粒强度 0–2 步长0.01
materialGrainScalenumber150颗粒缩放 1–150 步长1
materialCutNormalsbooleantrue断裂法线
materialMicrobooleantrue微凸起
microBumpnumber0.445微凸起强度 0–1 步长0.005
microScalenumber10微缩放 10–200 步长1
microCoveragenumber0.25微覆盖 0–1 步长0.01
bumpMaskScalenumber1.45蒙版缩放 0.1–6 步长0.05
materialRipplesbooleantrue涟漪
rippleBumpnumber0.22涟漪凸起强度 0–1 步长0.01
rippleScalenumber23涟漪缩放 2–30 步长0.5
materialSmudgesbooleantrue污渍
smudgeAmountnumber0.78数量 0–1 步长0.01
smudgeCoveragenumber0.58覆盖 0–1 步长0.01
smudgeMaskScalenumber1.85蒙版缩放 0.1–6 步长0.05
smudgeAnisotropynumber16.5各向异性 1–20 步长0.5
smudgeRoughnessnumber0.75粗糙度 0–1 步长0.01
smudgeWhitenessnumber0.035白度 0–0.5 步长0.005
smudgeScalenumber1.3缩放 0.5–10 步长0.1
materialCracksbooleantrue裂纹
crackLargeScalenumber2.45大尺度缩放 0.3–8 步长0.05
crackWarpnumber0.22扭曲 0–1.5 步长0.01
crackCoveragenumber0.19覆盖 0–1 步长0.01
crackRegionScalenumber1.8区域缩放 0.1–4 步长0.05
crackRegionCoveragenumber0.6区域覆盖 0–1 步长0.01
veinScalenumber8脉纹缩放 1–20 步长0.25
veinContrastnumber0.55脉纹对比度 0–1 步长0.01
crackWidthnumber0.0025宽度 0.0005–0.02 步长0.0005
crackBrightnessnumber0.65亮度 0–3 步长0.01
crackDarknessnumber0.69暗度 0–1 步长0.01
crackRefractionnumber0.076折射 0–0.1 步长0.001
crackSurfaceStrengthnumber0.16表面强度 0–1 步长0.01
fineScalenumber18.4精细缩放 2–20 步长0.1
fineAmountnumber0.52精细数量 0–1 步长0.01
fineCoveragenumber1精细覆盖 0–1 步长0.01
materialScatterbooleantrue内部散射
materialInclusionScalenumber0.05内含物缩放 0.05–3 步长0.01
materialInclusionAmountnumber2摄影内含物 0–2 步长0.01
interiorScatternumber0.09内部散射 0–1 步长0.01
materialClearcoatbooleantrue清漆
clearcoatnumber0清漆 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