Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6.1万2026年10月11日 更新
無料GitHub で公開
orbit-card
A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.
インストール方法を見る含まれるファイル（13）
- SKILL.md3.5 KB
- assets/Archivo-LICENSE.txt4.3 KB
- assets/archivo-regular.ttf108.1 KB
- assets/archivo-semibold.ttf109.3 KB
- assets/gsap-3.14.2.min.js128.2 KB
- assets/GSAP-NOTICE.txt145 B
- assets/orbit-motion.js58.7 KB
- assets/orbit-scene.js8.8 KB
- assets/Three-LICENSE.txt1.1 KB
- assets/three.core.min.js554.5 KB
- assets/three.module.min.js468.3 KB
- orbit-card.html3.5 KB
- registry-item.json2.5 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Orbit Card
One centred feature card with a circular cut-out framing a dot sphere. The card enters from the right (0.25–1.80 s), holds with a subtle bob and depth drift, orbits a full turn around the sphere's centre (smoothstep between 4.97 and 5.97 s), and exits left (7.35–8.55 s). The camera path and card F-curves are exported from the approved Blender rig at 30 fps and interpolated; the sphere keeps its own translation and a constant spin. Title, description, accent and the orbit angle are variables; 180° and 720° work without touching keys.
Composition id: orbit-card. Duration 10 s at 30 fps, 1920×1080.
Files
orbit-card.html(3 KB)assets/Archivo-LICENSE.txt(4 KB)assets/Three-LICENSE.txt(1 KB)assets/archivo-regular.ttf(108 KB)assets/archivo-semibold.ttf(109 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)assets/orbit-motion.js(59 KB)assets/orbit-scene.js(8 KB)assets/three.core.min.js(554 KB)assets/three.module.min.js(468 KB)
Install
Install with npx hyperframes add orbit-card; by default the files above land under compositions/orbit-card/. Then mount the block from the host index.html:
<div
data-composition-id="orbit-card"
data-composition-src="compositions/orbit-card/orbit-card.html"
data-start="0"
data-duration="10"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
Render with custom values by targeting the composition file directly:
npx --yes hyperframes@0.8.12 render 'compositions/orbit-card/orbit-card.html' --variables '{"feature1Title":"Always in sync","feature1Desc":"Changes reach every screen the moment they happen."}'
Variables
Read at runtime via window.__hyperframes.getVariables(); declared on the composition root as data-composition-variables (single-quoted attribute, plain JSON).
| id | type | default | label / range |
|---|---|---|---|
feature1Title | string | "Always in sync" | Card title max 28 chars |
feature1Desc | string | "Changes reach every screen the moment they happen." | Card description max 110 chars |
feature1Accent | color | "#4cc9ff" | Card accent |
cardOrbitDegrees | number | 360 | Card orbit degrees -36000–36000 step 1 |
Runtime contract
- One paused GSAP timeline registered as
window.__timelines["orbit-card"]. - Re-syncs on the
hf-seekCustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now). - Renderer: GSAP.
- External runtime dependencies: none (served locally).
- Local fonts: assets/archivo-regular.ttf, assets/archivo-semibold.ttf.
Editing rules (from the source project)
- Keep
data-composition-variablesa single-quoted attribute with plain"JSON. Never save it through Studio's Design panel. - Do not put
<canvas>in static markup; create it at runtime. - Keep every visual state a function of t; seek-safety is what makes the block renderable.
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6.1万2026年10月11日 更新
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.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6.1万2026年10月11日 更新
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/hyperframes6.1万2026年10月11日 更新
A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6.1万2026年10月11日 更新
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/hyperframes6.1万2026年10月11日 更新