Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新
無料GitHub で公開
hyperframes-animation
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
インストール方法を見る含まれるファイル（122）
- SKILL.md8.3 KB
- adapters/animate-text.md4.5 KB
- adapters/animejs.md6.1 KB
- adapters/css-animations.md5.3 KB
- adapters/gsap-easing-and-stagger.md13.0 KB
- adapters/gsap-timeline-and-labels.md3.7 KB
- adapters/gsap-transforms-and-perf.md8.4 KB
- adapters/gsap.md7.5 KB
- adapters/html-in-canvas-patterns.md16.8 KB
- adapters/lottie.md6.0 KB
- adapters/three.md8.0 KB
- adapters/typegpu.md8.0 KB
- adapters/waapi.md4.1 KB
- blueprints-index.md25.9 KB
- blueprints/agent-progress-theater.md15.7 KB
- blueprints/camera-journey.md13.3 KB
- blueprints/comparison-split.md3.2 KB
- blueprints/constellation-hub.md7.0 KB
- blueprints/cta-morph-press.md6.3 KB
- blueprints/cursor-ui-demo.md19.8 KB
- blueprints/dataviz-countup.md14.3 KB
- blueprints/device-surface-showcase.md16.7 KB
- blueprints/fixed-anchor-cycle.md8.9 KB
- blueprints/grid-card-assemble.md15.2 KB
- blueprints/kinetic-type-beats.md28.5 KB
- blueprints/logo-assemble-lockup.md26.0 KB
- blueprints/overwhelm-surround.md6.0 KB
- blueprints/panel-edit-live-sync.md13.1 KB
- blueprints/prompt-type-submit-generate.md18.2 KB
- blueprints/spatial-pan-stations.md4.8 KB
- blueprints/ticker-takeover.md3.0 KB
- blueprints/titlecard-reveal.md7.3 KB
- blueprints/transcript-scroll-artifact-reveal.md11.4 KB
- blueprints/typewriter-reveal.md6.1 KB
- blueprints/video-text-pivot.md3.2 KB
- blueprints/zoom-out-workspace-reveal.md14.4 KB
- examples/brand-reveal-assemble-zoom.html12.0 KB
- examples/comparison-split-cards.html21.2 KB
- examples/concept-demo-decode-pan.html18.0 KB
- examples/cta-morph-press.html14.8 KB
- examples/cta-orbit-collapse.html49.5 KB
- examples/demo-page-scroll-spotlight.html24.4 KB
- examples/hook-counter-burst.html22.5 KB
- examples/messaging-multi-phrase.html11.9 KB
- examples/metric-video-text-pivot.html25.0 KB
- examples/problem-mockup-overwhelm.html43.4 KB
- examples/proof-logo-chain.html28.2 KB
- examples/takeover-ticker-displace.html10.7 KB
- examples/workflow-approve-press.html20.2 KB
- references/motion-blur.md13.8 KB
- rules-index.md21.0 KB
- rules/3d-camera-flight.md17.7 KB
- rules/3d-page-scroll.md7.2 KB
- rules/3d-text-depth-layers.md6.6 KB
- rules/ai-tracking-box.md6.4 KB
- rules/ambient-glow-bloom.md9.6 KB
- rules/anchored-layout-expand.md10.1 KB
- rules/asr-keyword-glow.md6.6 KB
- rules/avatar-cloud-network.md6.4 KB
- rules/camera-cursor-tracking.md7.7 KB
- rules/card-morph-anchor.md7.2 KB
- rules/center-outward-expansion.md4.2 KB
- rules/chart-scrub-readout.md10.1 KB
- rules/chromatic-glitch.md10.1 KB
- rules/context-sensitive-cursor.md6.8 KB
- rules/control-target-sync.md10.0 KB
- rules/coordinate-target-zoom.md7.4 KB
- rules/counting-dynamic-scale.md5.8 KB
- rules/css-marker-patterns.md5.6 KB
- rules/cursor-click-ripple.md6.2 KB
- rules/cursor-drag.md10.0 KB
- rules/depth-of-field-blur.md8.7 KB
- rules/depth-scatter-assemble.md6.9 KB
- rules/discrete-text-sequence.md6.3 KB
- rules/dynamic-content-sequencing.md8.4 KB
- rules/gradient-text-sweep.md8.5 KB
- rules/gsap-effects.md6.8 KB
- rules/hacker-flip-3d.md5.5 KB
- rules/kinetic-beat-slam.md6.3 KB
- rules/motion-blur-streak.md15.8 KB
- rules/multi-cursor-choreography.md10.3 KB
- rules/multi-phase-camera.md7.6 KB
- rules/nudge-curve.md2.6 KB
- rules/orbit-3d-entry.md6.5 KB
- rules/particle-burst.md9.7 KB
- rules/physics-press-reaction.md6.5 KB
- rules/press-release-spring.md6.9 KB
- rules/reactive-displacement.md6.4 KB
- rules/scale-swap-transition.md5.4 KB
- rules/sine-wave-loop.md6.0 KB
- rules/split-tilt-cards.md5.5 KB
- rules/spring-pop-entrance.md6.4 KB
- rules/stat-bars-and-fills.md5.4 KB
- rules/svg-icon-enrichment.md7.4 KB
- rules/svg-path-draw.md5.5 KB
- rules/theme-crossfade-morph.md9.2 KB
- rules/vertical-spring-ticker.md5.4 KB
- rules/viewport-change.md8.8 KB
- rules/waterfall-entry.md4.5 KB
- scripts/animation-map-sampling.mjs1.4 KB
- scripts/animation-map-sampling.test.mjs1.6 KB
- scripts/animation-map.mjs22.8 KB
- scripts/animation-map.test.mjs18.9 KB
- scripts/package-loader.mjs14.1 KB
- scripts/package-loader.test.mjs4.2 KB
- techniques.md17.0 KB
- transitions/catalog.md6.5 KB
- transitions/css-3d.md421 B
- transitions/css-blur.md1.7 KB
- transitions/css-cover.md1.4 KB
- transitions/css-destruction.md4.4 KB
- transitions/css-dissolve.md2.4 KB
- transitions/css-distortion.md1.8 KB
- transitions/css-grid.md370 B
- transitions/css-light.md2.3 KB
- transitions/css-mechanical.md1.6 KB
- transitions/css-other.md838 B
- transitions/css-push.md1.2 KB
- transitions/css-radial.md1.0 KB
- transitions/css-scale.md715 B
- transitions/overview.md13.5 KB
- transitions/TRANSITION-REGISTRY.md8.0 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.
HyperFrames Animation
All motion knowledge in one skill: rules (atomic recipes), blueprints (multi-phase scene templates), transitions (scene-to-scene), techniques (broader motion-design patterns), and adapters (per-runtime APIs).
For the composition contract (data attributes, sub-compositions, determinism) see hyperframes-core.
Default: compose atomic rules
Pick 2-4 rules from rules-index.md, glue them together with a single paused GSAP timeline, done. This is faster and produces less code than starting from a blueprint.
Load a blueprint when
- The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, etc.) and reusing its phase pipeline saves real authoring time
- You want runnable ground-truth code for a complex 4-5 phase choreography
Blueprints live in blueprints-index.md. Each entry points to blueprints/<id>.md (recipe). Do not read it speculatively; load it when you've already decided you need scene-level orchestration.
Routing
| Want to… | Read |
|---|---|
| Pick an atomic motion pattern by trigger / tag | rules-index.md |
| Read one rule's full HTML / CSS / GSAP recipe | rules/<name>.md |
| Pick a multi-phase scene template | blueprints-index.md |
| Read one blueprint's full recipe | blueprints/<id>.md |
| Author a scene transition (CSS-driven, between two clips) | transitions/overview.md, transitions/catalog.md |
| Look up a broader motion-design technique | techniques.md |
| Motion blur — shutter smear on an element, and when not to use it | references/motion-blur.md |
| Analyze an existing composition's animation map | scripts/animation-map.mjs |
| GSAP API — timeline / tweens / position parameters | adapters/gsap.md |
| GSAP — drop-in effect recipes | rules/gsap-effects.md |
| GSAP — transforms / perf | adapters/gsap-transforms-and-perf.md |
| GSAP — eases / stagger | adapters/gsap-easing-and-stagger.md |
| GSAP — timeline / labels | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie (After Effects exports, window.__hfLottie) | adapters/lottie.md |
| Character animation (walk cycle, mascot, jointed puppet, gestures) | adapters/lottie.md → Characters |
Three.js / WebGL (3D scenes, AnimationMixer, hf-seek) | adapters/three.md |
Anime.js (window.__hfAnime) | adapters/animejs.md |
CSS keyframes (animation-delay / play-state / fill-mode) | adapters/css-animations.md |
Web Animations API (element.animate(), currentTime seek) | adapters/waapi.md |
TypeGPU / WebGPU (navigator.gpu, WGSL, compute pipelines) | adapters/typegpu.md |
HTML-as-texture + WebGL/GLSL post-fx (capture live DOM via drawElementImage) | adapters/html-in-canvas-patterns.md |
Named text-animation effects (24 IDs via external animate-text skill) | adapters/animate-text.md |
Picking a runtime
- GSAP is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based.
- Lottie when an asset has its own pre-baked timeline (typically After Effects exports), including characters that walk, gesture or react.
- Three.js for 3D scenes, camera motion, shader-driven visuals.
- Anime.js for lightweight tweening when GSAP is overkill.
- CSS for simple repeated motifs, decoration, shimmer — no JavaScript animation cost.
- WAAPI for native browser keyframes without a GSAP dependency.
- TypeGPU / WebGPU for GPU-rendered canvases (particles, liquid glass, custom shaders).
Multiple runtimes can coexist in one composition. Each registers its instances on the runtime-specific global so HyperFrames can seek all of them in one pass.
Critical Constraints
Prerequisite: hyperframes-core → One paused timeline + Non-negotiable rules (single paused timeline, data-duration governs length, no Math.random / Date.now / performance.now, no repeat: -1 without a finite root data-duration, no page-load gsap.set on later-scene clips, no display or raw visibility tweens, and register the timeline only after it is fully built, including when the build runs inside an async callback such as document.fonts.ready). GSAP autoAlpha and zero-duration visibility sets at explicit timeline boundaries remain allowed by core. Use those exceptions only on non-clip elements or wrappers inside a clip; the framework owns .clip lifecycle. Don't restate the full contract here.
Animation-craft additions on top of core's contract:
- Pre-calculated layout constants — never derive positions from
getBoundingClientRect()at tween time. Tween-time DOM measurements desync because the renderer samples in parallel; compute coordinates once at composition setup and reuse. - Spatial motion uses GSAP transform aliases only (
x,y,scale,rotation). Core's allowlist also permitsopacity/color/backgroundColor/borderRadiusfor non-spatial property tweens — but neverwidth/height/top/leftfor layout changes.
Scripts
node <SKILL_DIR>/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
Reads every GSAP timeline registered on window.__timelines, enumerates tweens, samples bboxes, computes flags, outputs animation-map.json. Use it to audit choreography (dead zones, stagger consistency, lifecycle warnings) after authoring.
animation-map.mjs resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set HYPERFRAMES_SKILL_PKG_VERSION=<version> only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.
See Also
hyperframes-core— composition structure, data attributes, sub-compositions, deterministic render contracthyperframes-creative— palettes, typography, narration, beat planning (non-animation creative direction)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
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万2026年10月10日 更新
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万2026年10月10日 更新
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万2026年10月10日 更新
A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.
日本語の概要は準備中です。原文の説明を表示しています。
heygen-com/hyperframes6万2026年10月10日 更新
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万2026年10月10日 更新