hyperframes-animation

Name: hyperframes-animation
Author: calesthio

41kstars4.9kforks

How to install hyperframes-animation?

calesthio/openmontage/hyperframes-animation

$npx -y skills add calesthio/OpenMontage --skill hyperframes-animation

Installs into the current project.

Summary

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 an

Files · 1

View on GitHub

SKILL.md

1	# HyperFrames Animation
2
3	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).
4
5	For the composition contract (data attributes, sub-compositions, determinism) see `hyperframes-core`.
6
7	## Default: compose atomic rules
8
9	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.
10
11	## Load a blueprint when
12
13	- The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, etc.) and reusing its phase pipeline saves real authoring time
14	- You want runnable ground-truth code for a complex 4-5 phase choreography
15
16	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.
17
18	## Routing
19
20	\| Want to… \| Read \|
21	\| ------------------------------------------------------------------------------ \| --------------------------------------------------- \|
22	\| Pick an atomic motion pattern by trigger / tag \| `rules-index.md` \|
23	\| Read one rule's full HTML / CSS / GSAP recipe \| `rules/<name>.md` \|
24	\| Pick a multi-phase scene template \| `blueprints-index.md` \|
25	\| Read one blueprint's full recipe \| `blueprints/<id>.md` \|
26	\| Author a scene transition (CSS-driven, between two clips) \| `transitions/overview.md`, `transitions/catalog.md` \|
27	\| Look up a broader motion-design technique \| `techniques.md` \|
28	\| Analyze an existing composition's animation map \| `scripts/animation-map.mjs` \|
29	\| GSAP API — timeline / tweens / position parameters \| `adapters/gsap.md` \|
30	\| GSAP — drop-in effect recipes \| `rules/gsap-effects.md` \|
31	\| GSAP — transforms / perf \| `adapters/gsap-transforms-and-perf.md` \|
32	\| GSAP — eases / stagger \| `adapters/gsap-easing-and-stagger.md` \|
33	\| GSAP — timeline / labels \| `adapters/gsap-timeline-and-labels.md` \|
34	\| Lottie / dotLottie (After Effects exports, `window.__hfLottie`) \| `adapters/lottie.md` \|
35	\| Three.js / WebGL (3D scenes, `AnimationMixer`, `hf-seek`) \| `adapters/three.md` \|
36	\| Anime.js (`window.__hfAnime`) \| `adapters/animejs.md` \|
37	\| CSS keyframes (`animation-delay` / `play-state` / `fill-mode`) \| `adapters/css-animations.md` \|
38	\| Web Animations API (`element.animate()`, `currentTime` seek) \| `adapters/waapi.md` \|
39	\| TypeGPU / WebGPU (`navigator.gpu`, WGSL, compute pipelines) \| `adapters/typegpu.md` \|
40	\| HTML-as-texture + WebGL/GLSL post-fx (capture live DOM via `drawElementImage`) \| `adapters/html-in-canvas-patterns.md` \|
41	\| Named text-animation effects (24 IDs via external `animate-text` skill) \| `adapters/animate-text.md` \|
42
43	## Picking a runtime
44
45	- GSAP is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based.
46	- Lottie when an asset has its own pre-baked timeline (typically After Effects exports).
47	- Three.js for 3D scenes, camera motion, shader-driven visuals.
48	- Anime.js for lightweight tweening when GSAP

People who liked this also viewed

6 picks

Type

hyperframes-animation

41kstars4.9kforks

View on GitHub

How to install hyperframes-animation?

calesthio/openmontage/hyperframes-animation

$npx -y skills add calesthio/OpenMontage --skill hyperframes-animation

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# HyperFrames Animation
2
3	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).
4
5	For the composition contract (data attributes, sub-compositions, determinism) see `hyperframes-core`.
6
7	## Default: compose atomic rules
8
9	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.
10
11	## Load a blueprint when
12
13	- The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, etc.) and reusing its phase pipeline saves real authoring time
14	- You want runnable ground-truth code for a complex 4-5 phase choreography
15
16	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.
17
18	## Routing
19
20	\| Want to… \| Read \|
21	\| ------------------------------------------------------------------------------ \| --------------------------------------------------- \|
22	\| Pick an atomic motion pattern by trigger / tag \| `rules-index.md` \|
23	\| Read one rule's full HTML / CSS / GSAP recipe \| `rules/<name>.md` \|
24	\| Pick a multi-phase scene template \| `blueprints-index.md` \|
25	\| Read one blueprint's full recipe \| `blueprints/<id>.md` \|
26	\| Author a scene transition (CSS-driven, between two clips) \| `transitions/overview.md`, `transitions/catalog.md` \|
27	\| Look up a broader motion-design technique \| `techniques.md` \|
28	\| Analyze an existing composition's animation map \| `scripts/animation-map.mjs` \|
29	\| GSAP API — timeline / tweens / position parameters \| `adapters/gsap.md` \|
30	\| GSAP — drop-in effect recipes \| `rules/gsap-effects.md` \|
31	\| GSAP — transforms / perf \| `adapters/gsap-transforms-and-perf.md` \|
32	\| GSAP — eases / stagger \| `adapters/gsap-easing-and-stagger.md` \|
33	\| GSAP — timeline / labels \| `adapters/gsap-timeline-and-labels.md` \|
34	\| Lottie / dotLottie (After Effects exports, `window.__hfLottie`) \| `adapters/lottie.md` \|
35	\| Three.js / WebGL (3D scenes, `AnimationMixer`, `hf-seek`) \| `adapters/three.md` \|
36	\| Anime.js (`window.__hfAnime`) \| `adapters/animejs.md` \|
37	\| CSS keyframes (`animation-delay` / `play-state` / `fill-mode`) \| `adapters/css-animations.md` \|
38	\| Web Animations API (`element.animate()`, `currentTime` seek) \| `adapters/waapi.md` \|
39	\| TypeGPU / WebGPU (`navigator.gpu`, WGSL, compute pipelines) \| `adapters/typegpu.md` \|
40	\| HTML-as-texture + WebGL/GLSL post-fx (capture live DOM via `drawElementImage`) \| `adapters/html-in-canvas-patterns.md` \|
41	\| Named text-animation effects (24 IDs via external `animate-text` skill) \| `adapters/animate-text.md` \|
42
43	## Picking a runtime
44
45	- GSAP is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based.
46	- Lottie when an asset has its own pre-baked timeline (typically After Effects exports).
47	- Three.js for 3D scenes, camera motion, shader-driven visuals.
48	- Anime.js for lightweight tweening when GSAP

People who liked this also viewed

6 picks

Type