hyperframes-keyframes

Name: hyperframes-keyframes
Author: heygen-com

byheygen-com· 46 skills

Installs

124k

Stars

38k

Forks

3.6k

How to install hyperframes-keyframes?

heygen-com/hyperframes/hyperframes-keyframes

$npx -y skills add heygen-com/hyperframes --skill hyperframes-keyframes

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/heygen-com/hyperframes" --skill "heygen-com/hyperframes/hyperframes-keyframes"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/heygen-com/hyperframes" that are relevant to the current task. Run `npx skills add "https://github.com/heygen-com/hyperframes"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# HyperFrames Keyframes
2
3	Keyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels.
4
5	Use `hyperframes-animation` for broad scene recipes. Use `hyperframes-cli` for full command docs. Use `references/keyframe-patterns.md` only when choosing implementation mechanisms, not visual style.
6
7	## Procedure
8
9	1. Identify the animated subject, visible states, final state, and runtime.
10	2. Choose the smallest mechanism that proves the prompt. Read `references/keyframe-patterns.md` only if the mechanism is unclear.
11	3. Author seek-safe keyframes in the declared runtime. Build synchronously and register the runtime instance.
12	4. Verify with `hyperframes lint`, `hyperframes check`, `hyperframes keyframes`, one focused `--shot`, and snapshots at proof times.
13	5. If proof fails, fix the source keyframes and rerun the smallest failing diagnostic before rendering.
14
15	## Contract
16
17	- Name the moving subject.
18	- Name the poses needed to prove the intended motion, including the final state.
19	- Keyframe visible channels, not hidden helper state.
20	- Preserve object identity when continuity matters.
21	- Crossfade only when the intended motion is replacement or dissolve.
22	- Hold readable or semantic states long enough to see.
23	- Final frame is part of the animation, not cleanup.
24	- Do not reset to rest unless requested.
25	- Do not end on black unless requested.
26	- If editing a starter scene, preserve layout, copy, assets, colors, and final state unless asked to redesign.
27
28	## Runtime Rules
29
30	GSAP:
31
32	- build synchronously at page load
33	- use `gsap.timeline({ paused: true })`
34	- register as `window.__timelines[compositionId]`
35	- registry key must match `data-composition-id`
36	- do not call `tl.play()` for render-critical motion
37	- keep repeats finite
38
39	CSS keyframes:
40
41	- finite duration and iteration count
42	- deterministic delay
43	- `animation-fill-mode: both`
44	- use `data-start` when timing belongs to a clip
45
46	Anime.js:
47
48	- create synchronously
49	- `autoplay: false`
50	- finite duration and loops
51	- push every instance to `window.__hfAnime`
52
53	WAAPI:
54
55	- finite `duration`
56	- `fill: "both"`
57	- deterministic construction
58	- the text surface does not list WAAPI; verify with `--shot` (it seeks WAAPI) and snapshots
59
60	Never use for render-critical motion:
61
62	- `Date.now()`
63	- `performance.now()`
64	- unseeded `Math.random()`
65	- hover/scroll triggers
66	- timers
67	- async-created timelines
68	- unregistered `requestAnimationFrame`
69	- infinite loops
70
71	## GSAP Skeleton
72
73	```js
74	const root = document.querySelector("[data-composition-id]");
75	const compositionId = root.dataset.compositionId;
76	const tl = gsap.timeline({ paused: true });
77
78	tl.addLabel("state-a", 0);
79	tl.to(".subject", {
80	keyframes: [
81	{ x: 0, opacity: 1, duration: 0.2 },
82	{ x: 120, opacity: 1, duration: 0.4, ease: "power2.out" },
83	{ x: 100, opacity: 1, duration: 0.2, ease: "power2.inOut" },
84	],
85	ease: "none",
86	});
87
88	window.__timelines = window.__timelines \|\| {};
89	window.__timelines[compositionId] = tl;
90	```
91
92	Use labels for semantic states. Use position parameters instead of chained delays. Use `immediateRender: false` for later `from()`/`fromTo()` tweens touching the same property.
93
94	## Keyframe Forms
95
96	- Array keyframes: pose ladder with per-step duration/ease.
97	- Percentage keyframes: exact timing inside one tween.
98	- Property arrays: compact multi-stop changes.
99	- `ease: "none"` on the parent when each stop carries its own easing.
100	- `easeEach` when every segment should share the same feel.
101
102	Do not copy numeric distances or timing from examples. Derive them from the actual composition geometry and duration.
103
104	For one subject moving between two boxes, prefer one continuous transform tween or FLIP. Split `x/y/scale` into multiple eased keyframes only when the viewer should feel distinct beats; every segment changes velocity and can read as a hitch.
105
106	## Channels
107
108	Prefer compositor/visual channels: `x/y/z`, `xPercent/yPercent`, `scale`, `rotationX/Y/Z`, `skew`, `transformOrigin`, `svgOrigin`, `opacity`, `autoAlpha`, `clip-path`, masks, CSS vars, SVG path/dash values, camera transforms, shader uniforms.
109
110	Avoid layout/lifecycle channels: `top/left/right/bottom`, `width/height`, `margin/padding`, `display`, `visibility`, late DOM creation, helper overlays doing subject motion.
111
112	For visibility changes, use `autoAlpha` on the registered seekable GSAP timeline, or a zero-duration `tl.set()` at an explicit boundary. Target only a non-clip element or a wrapper inside the clip; never target `.clip` itself. Never duration-tween raw `visibility`, and never tween `display`.
113
114	## Mechanism Choice
115
116	Choose the smallest mechanism that proves the prompt:
117
118	\| Need \| Mechanism \|
119	\| ------------------------------------- \| -------------------------------------------------- \|
120	\| Same subject changes box or hierarchy \| shared element / FLIP \|
121	\| Subject travels a visible route \| path travel \|
122	\| Stroke grows or traces \| stroke draw \|
123	\| Shape becomes another shape \| shape interpolation \|
124	\| Reveal boundary is visible \| clip, mask, or shader uniform \|
125	\| Many items move with order \| stagger / indexed delay \|
126	\| Text itself moves \| line, word, character, or band subdivision \|
127	\| Surface bends, stretches, or crops \| parent/child counter-transform \|
128	\| UI has states \| explicit state machine \|
129	\| Scene has depth \| DOM 3D, Three.js, or WebGL camera/object keyframes \|
130
131	Mechanisms can combine, but each one must clarify the idea. Decoration is not proof.
132
133	## Timing
134
135	- Anticipation only when it clarifies cause or direction.
136	- Acceleration leaves rest.
137	- Peak proof shows the mechanism unmistakably.
138	- Follow-through sells energy and direction.
139	- Overshoot only when the subject should feel elastic or tactile.
140	- Constant-speed path travel usually needs `ease: "none"`.
141	- Discrete UI states usually need a sharp ease-out.
142	- Repeated elements need ordered offsets, not identical timing.
143	- Final lockups need longer holds than transition poses.
144	- Smoothness means continuous velocity on the same subject.
145	- Do not overlap tweens that write the same transform property unless the overlap is intentional and verified.
146	- Avoid animating large `clip-path`/mask changes while the same hero surface is also scaling or traveling; use nested reveals after the main move settles.
147
148	## Text
149
150	Preserve line boxes, word spacing, readability, and final fit. If text moves internally, move the glyphs or masked bands, not only decorations around the text. Snapshot readable frames.
151
152	## SVG
153
154	For stroke growth prefer `DrawSVGPlugin`, then `stroke-dasharray`/`stroke-dashoffset`. For shape interpolation prefer `MorphSVGPlugin`; convert primitives to paths when needed and split complex silhouettes into simpler parts.
155
156	## 3D
157
158	Scale alone is fake depth. Use perspective on a stable parent, `transform-style: preserve-3d`, z travel, rotation, camera/world motion, occlusion, and layer order when objects cross.
159
160	Use one or two diagnostic angles that expose the depth relationship. If angled proof shows no depth crossing, improve z/camera/occlusion.
161
162	## Canvas / WebGL
163
164	Keyframe camera position, camera target, object transform, material opacity, shader uniforms, and postprocess intensity through deterministic state. Render from HyperFrames time. Use `--ghost` because marker boxes cannot see internal canvas motion.
165
166	## CLI Proof
167
168	```bash
169	npx hyperframes lint
170	npx hyperframes check
171	npx hyperframes keyframes .
172	npx hyperframes keyframes . --json
173	npx hyperframes keyframes . --runtime all
174	npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --samples <n>
175	npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --layout strip --from <t0> --to <t1>
176	npx hyperframes keyframes . --shot "<file>" --ghost --angle <angle>
177	npx hyperframes snapshot . --at <times>
178	```
179
180	Choose `<selector>` for the real animated subject. Choose `<times>` for first frame, proof poses, final-minus-hold, and exact final. Choose `<angle>` only when depth must be proven.
181
182	\| Tool \| Proves \|
183	\| ---------------- \| --------------------------------------------------------------------------------------------------- \|
184	\| `keyframes` \| targets, explicit stops, paths, traces, composed parent/child motion, CSS stops, Anime registration \|
185	\| `--shot` \| ghosts, route shape, time spacing, DOM 3D projection, focused selector proof \|
186	\| `--layout strip` \| in-place motion, overlaps, contact, subtle scale/opacity, text waves \|
187	\| `--ghost` \| canvas, WebGL, shader motion, rendered 3D \|
188	\| `snapshot --at` \| masks, text readability, full state, final lockup, black/reset tails \|
189
190	If selector proof looks wrong:
191
192	1. rerun `--json`
193	2. find the actual animated target
194	3. shoot that target
195	4. snapshot full frames
196	5. trust painted pixels over logs
197
198	## Diagnostic Reading
199
200	`flat` means no explicit middle poses. `keyframes` means explicit stops exist. `motionPath` means a route exists. `trace` means multi-stroke drawing. `composed with` means child motion inherits parent motion.
201
202	Even ghost spacing means constant speed. Clustered ghosts mean slow-in or settle. Large gaps mean fast travel.
203
204	A helper-selector shot is not proof. An onion shot over a broken full frame is not proof.
205
206	## Error Handling
207
208	\| Failure \| Fix \|
209	\| ------------------ \| ---------------------------------------------------------------------------------- \|
210	\| endpoint-only \| add middle poses, hold peak proof, rerun `--shot` \|
211	\| identity break \| keep one element alive, use shared source/final boxes, remove substitute crossfade \|
212	\| fake 3D \| add z/camera travel, occlusion, angled proof \|
213	\| wrong final \| add final hold, snapshot final-minus-hold and exact final \|
214	\| unseekable runtime \| pause autoplay, register instance, remove timers, build synchronously \|
215	\| unreadable text \| preserve line boxes, reduce displacement, add final hold, snapshot text frames \|
216
217	## Done
218
219	Run `hyperframes lint`, `hyperframes check`, `hyperframes keyframes`, one focused `--shot`, and snapshots. Confirm first frame, proof poses, final-minus-hold, exact final, subject-owned motion, and no debug overlays.

6 picks

Type

Run `npx skills use "https://github.com/heygen-com/hyperframes" --skill "heygen-com/hyperframes/hyperframes-keyframes"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/heygen-com/hyperframes" that are relevant to the current task. Run `npx skills add "https://github.com/heygen-com/hyperframes"` and select the relevant skills, then follow their instructions.

hyperframes-keyframes

How to install hyperframes-keyframes?

Related

hyperframes-keyframes

How to install hyperframes-keyframes?

Related