Communitygithub.com

heygen-com/hyperframes

一个线框传送门爆裂打开，标题文字浮现，随后字母切换为第二句短语。HyperFrames 区块，1920×1080，8秒，9个变量。

hyperframes 是什么？

此技能提供了一个基于 Three.js 和 GSAP 的 3D 线框标题动画区块，适用于 HyperFrames 平台。它通过 TTF 字体加载器与多边形偏移技术，从 Geist 字体构建出立体线框字母，并以一个可调节混乱程度的“传送门爆裂”效果呈现。第一波动画结束后，文字会以单词换行和自动字号调整的方式，平滑地切换为第二句短语，切换过程具有可调节的缓动曲线和字母稳定后的毛刺效果，并可选配深度雾效。技能支持 9 个可配置变量（如标题、替换短语、持续时间、缓动强度、毛刺强度等），所有动画状态都是时间的封闭函数，确保帧级精确的可跳跃性，适合在视频编辑或动态图形渲染管线中直接集成。

兼容平台~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 CustomEvent 时重新同步；每一帧都是时间的封闭函数（仅使用种子伪随机数生成器，无 rAF 循环，无 Date.now）。
  • 渲染器：three.js 0.181.2，GSAP 3.14.2，Canvas 2D，GLSL 着色器，后处理，种子伪随机数生成器，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 的函数；可跳跃性是使区块可渲染的关键。

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