本文へ移動
cccskills
無料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). HyperFrames-native: single paused timeline, seek-safe, deterministic.

calesthio/OpenMontage
インストール方法を見る

含まれるファイル（115）

  • SKILL.md7.0 KB
  • adapters/animate-text.md4.0 KB
  • adapters/animejs.md3.2 KB
  • adapters/css-animations.md3.8 KB
  • adapters/gsap-easing-and-stagger.md6.1 KB
  • adapters/gsap-timeline-and-labels.md3.6 KB
  • adapters/gsap-transforms-and-perf.md3.5 KB
  • adapters/gsap.md6.8 KB
  • adapters/html-in-canvas-patterns.md16.8 KB
  • adapters/lottie.md3.3 KB
  • adapters/three.md4.3 KB
  • adapters/typegpu.md7.3 KB
  • adapters/waapi.md3.2 KB
  • blueprints-index.md13.2 KB
  • blueprints/comparison-split.md3.2 KB
  • blueprints/constellation-hub.md5.3 KB
  • blueprints/cta-morph-press.md3.0 KB
  • blueprints/cursor-ui-demo.md9.4 KB
  • blueprints/dataviz-countup.md8.6 KB
  • blueprints/device-surface-showcase.md10.4 KB
  • blueprints/grid-card-assemble.md9.6 KB
  • blueprints/kinetic-type-beats.md12.7 KB
  • blueprints/logo-assemble-lockup.md12.4 KB
  • blueprints/overwhelm-surround.md3.2 KB
  • blueprints/spatial-pan-stations.md4.8 KB
  • blueprints/ticker-takeover.md3.0 KB
  • blueprints/titlecard-reveal.md4.2 KB
  • blueprints/typewriter-reveal.md6.1 KB
  • blueprints/video-text-pivot.md3.2 KB
  • examples/assets/avatars/01.png45.6 KB
  • examples/assets/avatars/02.avif2.6 KB
  • examples/assets/avatars/03.png38.2 KB
  • examples/assets/avatars/04.webp21.7 KB
  • examples/assets/avatars/05.webp3.4 KB
  • examples/assets/avatars/06.webp1.8 KB
  • examples/assets/avatars/07.webp4.0 KB
  • examples/assets/avatars/08.webp3.4 KB
  • examples/assets/avatars/09.jpg7.2 KB
  • examples/assets/avatars/10.webp4.9 KB
  • examples/assets/background-tech-data-flow.mp415.9 MB
  • examples/assets/brands/github.avif1.7 KB
  • examples/assets/brands/nvidia.avif1.8 KB
  • examples/assets/brands/visa.avif1.5 KB
  • examples/assets/brands/zoominfo.avif1.7 KB
  • examples/assets/hyperframes-showcase-hypecard.mp419.8 MB
  • examples/assets/logo-hyperframes.png1.3 MB
  • 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
  • rules-index.md13.0 KB
  • rules/3d-page-scroll.md8.9 KB
  • rules/3d-text-depth-layers.md11.4 KB
  • rules/ai-tracking-box.md14.7 KB
  • rules/ambient-glow-bloom.md15.6 KB
  • rules/asr-keyword-glow.md11.9 KB
  • rules/avatar-cloud-network.md13.7 KB
  • rules/camera-cursor-tracking.md12.3 KB
  • rules/card-morph-anchor.md12.0 KB
  • rules/center-outward-expansion.md7.9 KB
  • rules/context-sensitive-cursor.md10.7 KB
  • rules/coordinate-target-zoom.md14.7 KB
  • rules/counting-dynamic-scale.md9.1 KB
  • rules/css-marker-patterns.md8.1 KB
  • rules/cursor-click-ripple.md10.9 KB
  • rules/depth-of-field-blur.md16.1 KB
  • rules/depth-scatter-assemble.md15.0 KB
  • rules/discrete-text-sequence.md9.9 KB
  • rules/dynamic-content-sequencing.md11.8 KB
  • rules/gsap-effects.md9.0 KB
  • rules/hacker-flip-3d.md9.8 KB
  • rules/kinetic-beat-slam.md8.0 KB
  • rules/motion-blur-streak.md17.9 KB
  • rules/multi-phase-camera.md10.3 KB
  • rules/orbit-3d-entry.md12.6 KB
  • rules/physics-press-reaction.md12.3 KB
  • rules/press-release-spring.md12.0 KB
  • rules/reactive-displacement.md11.0 KB
  • rules/scale-swap-transition.md10.5 KB
  • rules/sine-wave-loop.md13.7 KB
  • rules/split-tilt-cards.md11.0 KB
  • rules/spring-pop-entrance.md14.8 KB
  • rules/stat-bars-and-fills.md5.5 KB
  • rules/svg-icon-enrichment.md12.0 KB
  • rules/svg-path-draw.md9.7 KB
  • rules/vertical-spring-ticker.md10.2 KB
  • rules/viewport-change.md14.0 KB
  • scripts/animation-map.mjs19.0 KB
  • scripts/package-loader.mjs8.1 KB
  • techniques.md15.4 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.md7.9 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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 / tagrules-index.md
Read one rule's full HTML / CSS / GSAP reciperules/<name>.md
Pick a multi-phase scene templateblueprints-index.md
Read one blueprint's full recipeblueprints/<id>.md
Author a scene transition (CSS-driven, between two clips)transitions/overview.md, transitions/catalog.md
Look up a broader motion-design techniquetechniques.md
Analyze an existing composition's animation mapscripts/animation-map.mjs
GSAP API — timeline / tweens / position parametersadapters/gsap.md
GSAP — drop-in effect recipesrules/gsap-effects.md
GSAP — transforms / perfadapters/gsap-transforms-and-perf.md
GSAP — eases / staggeradapters/gsap-easing-and-stagger.md
GSAP — timeline / labelsadapters/gsap-timeline-and-labels.md
Lottie / dotLottie (After Effects exports, window.__hfLottie)adapters/lottie.md
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).
  • 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 → Non-Negotiable Rules (single paused timeline, data-duration governs length, no Math.random / Date.now / performance.now, no repeat: -1, no gsap.set on later-scene clips, no display / visibility animation, no timeline construction inside async / setTimeout / Promise). Don't restate those 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 permits opacity / color / backgroundColor / borderRadius for non-spatial property tweens — but never width / height / top / left for layout changes.

Scripts

node skills/hyperframes-animation/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.

See Also

  • hyperframes-core — composition structure, data attributes, sub-compositions, deterministic render contract
  • hyperframes-creative — palettes, typography, narration, beat planning (non-animation creative direction)
  • hyperframes-cli — npx hyperframes lint / validate / inspect / preview / render

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

3d-asset-generation

無料

Generate, reconstruct, inspect, and route production 3D assets for OpenMontage worlds using Atlas Cloud, fal.ai, licensed catalogs, and Blender.

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.7万2026年10月4日 更新

acestep

無料

AI music generation with ACE-Step 1.5 — background music, vocal tracks, covers, stem extraction for video production. Use when generating music, soundtracks, jingles, or working with audio stems. Triggers include background music, soundtrack, jingle, music generation, stem extraction, cover, style transfer, or musical composition tasks.

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.7万2026年10月4日 更新

agents

無料

Build voice AI agents with ElevenLabs. Use when creating voice assistants, customer service bots, interactive voice characters, or any real-time voice conversation experience.

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.7万2026年10月4日 更新

ai-video-gen

無料

Generate AI videos from text prompts using multiple provider gateways. Use when: (1) Generating videos from text descriptions, (2) Creating AI-generated video clips for content production, (3) Image-to-video generation with a reference image, (4) Choosing between video generation providers (VEO, Kling, Sora, Runway, Seedance, MiniMax, Gemini Omni). Supports gateways: HeyGen API, fal.ai API, Kling official direct API, and the Gemini API (Gemini Omni Flash).

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.7万2026年10月4日 更新

ai-video-gen

無料

Generate AI videos from text prompts using multiple provider gateways. Use when: (1) Generating videos from text descriptions, (2) Creating AI-generated video clips for content production, (3) Image-to-video generation with a reference image, (4) Choosing between video generation providers (VEO, Kling, Sora, Runway, Seedance, MiniMax, Gemini Omni). Supports gateways: HeyGen API, fal.ai API, and the Gemini API (Gemini Omni Flash).

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.7万2026年10月4日 更新

atlas-cloud

無料

Generate or edit images and videos through the Atlas Cloud gateway. Use for Atlas-hosted Seedance 2.5/2.0, Gemini Omni Flash, MiniMax H3, Seedream 5.0, GPT Image 2, Nano Banana 2, or when one ATLASCLOUD_API_KEY should access multiple media model families.

日本語の概要は準備中です。原文の説明を表示しています。

calesthio/OpenMontage6.7万2026年10月4日 更新

calesthio のスキルをすべて見る

このスキルの問題を報告する