{"id":"88e7bf70-8d61-43e1-9b19-4bbcbae08f1a","entityType":"agent","slug":"clawhub-heygen-com-hyperframes-keyframes","name":"HyperFrames Keyframes","canonicalUrl":"https://www.xpersona.co/agent/clawhub-heygen-com-hyperframes-keyframes","canonicalPath":"/agent/clawhub-heygen-com-hyperframes-keyframes","generatedAt":"2026-10-10T21:38:40.811Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-10T17:59:58.164Z","emptyReason":null},"description":"Author seek-safe video keyframes Skill: HyperFrames Keyframes Owner: heygen-com Summary: Author seek-safe video keyframes Tags: latest:1.0.8 Version history: v1.0.8 | 2026-10-04T19:18:22.934Z | user Synced from 173103d (main) v1.0.7 | 2026-09-27T21:20:33.868Z | user Synced from ff6e210 (main) v1.0.6 | 2026-09-20T16:23:00.652Z | user Synced from 0c158be (main) v1.0.5 | 2026-08-18T14:18:22.463Z | user Synced from afafca4 (main) v1.0.4 | 2026-08-16T18:","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.3K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s17fpgb0p797dzkbtbrxw5x1hh89qs64:hyperframes-keyframes","sourceUrl":"https://clawhub.ai/heygen-com/hyperframes-keyframes","homepage":"https://clawhub.ai/heygen-com/skills/hyperframes-keyframes","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/heygen-com/hyperframes-keyframes","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/heygen-com/skills/hyperframes-keyframes","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":62,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Author seek-safe video keyframes Skill: HyperFrames Keyframes Owner: heygen-com Summary: Author seek-safe video keyframes Tags: latest:1.0.8 Version history: v1"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T17:59:58.164Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T17:59:58.164Z","emptyReason":null},"stars":null,"forks":null,"downloads":1306,"packageName":null,"latestVersion":"1.0.8","tractionLabel":"1.3K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T17:59:58.164Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T17:59:58.164Z","lastCrawledAt":"2026-10-10T17:59:58.164Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T17:59:58.164Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.8","createdAt":"2026-10-04T19:18:22.934Z","changelog":"Synced from 173103d (main)","fileCount":5,"zipByteSize":10144},{"version":"1.0.7","createdAt":"2026-09-27T21:20:33.868Z","changelog":"Synced from ff6e210 (main)","fileCount":5,"zipByteSize":10248},{"version":"1.0.6","createdAt":"2026-09-20T16:23:00.652Z","changelog":"Synced from 0c158be (main)","fileCount":5,"zipByteSize":10409},{"version":"1.0.5","createdAt":"2026-08-18T14:18:22.463Z","changelog":"Synced from afafca4 (main)","fileCount":5,"zipByteSize":10223},{"version":"1.0.4","createdAt":"2026-08-16T18:03:02.755Z","changelog":"Synced from 67edb01 (main)","fileCount":5,"zipByteSize":9096},{"version":"1.0.3","createdAt":"2026-07-15T13:22:38.097Z","changelog":"Synced from b9be0b2 (main)","fileCount":5,"zipByteSize":8971},{"version":"1.0.2","createdAt":"2026-07-10T22:49:31.423Z","changelog":"Synced from 00d059b (main)","fileCount":5,"zipByteSize":8712},{"version":"1.0.1","createdAt":"2026-07-07T19:46:32.257Z","changelog":"Synced from 306a291 (main)","fileCount":5,"zipByteSize":8758}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17fpgb0p797dzkbtbrxw5x1hh89qs64:hyperframes-keyframes","setupComplexity":"low","setupSteps":["Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-keyframes/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-keyframes/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-keyframes/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-keyframes/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-keyframes/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-keyframes/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T21:38:40.804Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-keyframes/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-keyframes/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-keyframes/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-hyperframes-keyframes/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-10T17:59:58.164Z","emptyReason":null},"readme":"Skill: HyperFrames Keyframes\n\nOwner: heygen-com\n\nSummary: Author seek-safe video keyframes\n\nTags: latest:1.0.8\n\nVersion history:\n\nv1.0.8 | 2026-10-04T19:18:22.934Z | user\n\nSynced from 173103d (main)\n\nv1.0.7 | 2026-09-27T21:20:33.868Z | user\n\nSynced from ff6e210 (main)\n\nv1.0.6 | 2026-09-20T16:23:00.652Z | user\n\nSynced from 0c158be (main)\n\nv1.0.5 | 2026-08-18T14:18:22.463Z | user\n\nSynced from afafca4 (main)\n\nv1.0.4 | 2026-08-16T18:03:02.755Z | user\n\nSynced from 67edb01 (main)\n\nv1.0.3 | 2026-07-15T13:22:38.097Z | user\n\nSynced from b9be0b2 (main)\n\nv1.0.2 | 2026-07-10T22:49:31.423Z | user\n\nSynced from 00d059b (main)\n\nv1.0.1 | 2026-07-07T19:46:32.257Z | user\n\nSynced from 306a291 (main)\n\nv1.0.0 | 2026-07-02T17:09:10.921Z | auto\n\n- Initial release of the hyperframes-keyframes skill.\n- Provides detailed procedures and best practices for authoring seek-safe 2D/3D keyframes across various animation mechanisms (GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, SVG, text, 3D, etc.).\n- Outlines strict rules for proving visible motion states, maintaining subject identity, and ensuring run-time determinism.\n- Includes practical guidelines and code skeletons for GSAP and other mechanisms.\n- Defines what not to use the skill for, and offers mechanisms/timing/channel guidelines for motion proofing.\n- Comprehensive contract and runtime rules for consistent, validated animation keyframes within the HyperFrames system.\n\nArchive index:\n\nArchive v1.0.8: 5 files, 10144 bytes\n\nFiles: agents/openai.yaml (220b), references/keyframe-patterns.md (6692b), skill-card.md (1607b), SKILL.md (16263b), _meta.json (140b)\n\nFile v1.0.8:SKILL.md\n\n---\nname: hyperframes-keyframes\ndescription: >\n  Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe,\n  Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe\n  2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths,\n  masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics.\n  Don't use for broad scene strategy, brand design, media sourcing, captions, or\n  general video planning.\n---\n\n**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.\n\n# HyperFrames Keyframes\n\nKeyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels.\n\nUse `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.\n\n## Creator editing boundary\n\nKeyframes own visual motion, not clip assembly. Source-range hard cuts, trim,\nsplice, and reorder belong to `/hyperframes-core`: author one media element per\nkept range, place it with `data-start` and `data-duration`, and select its source\noffset with `data-media-start`. Adjacent ranges make a hard cut. A crossfade\nuses overlapping clips on different tracks plus visual opacity keyframes; sound\nfades use `/hyperframes-audio`.\n\n| Creator request                         | Truthful mechanism                                                                                                                                                                                                          |\n| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Punch-in / punch-out                    | Keyframe `scale` with `x`/`y` or percentage translation on a non-timed visual/crop wrapper inside the clip. Use a set/short tween for a hard punch and a tween for a smooth move.                                           |\n| Smooth multi-state zoom or reframe      | Keep one subject wrapper alive and author multiple zoom/reframe states as a pose ladder with per-segment easing.                                                                                                            |\n| Pan, reframe, or Ken Burns camera move  | Animate wrapper translation plus scale. Geometry is authored; this is not face tracking or automatic semantic reframing.                                                                                                    |\n| Chained camera moves                    | Chain labeled transform beats on one registered seek-safe timeline.                                                                                                                                                         |\n| Match cut or whip pan                   | `/hyperframes-animation` owns the visual handoff; `/hyperframes-registry` supplies primitives; keyframes preserve authored geometry, direction, and velocity. There is no automatic matching-frame discovery.               |\n| Crop and mask reframe                   | Interpolate `clip-path` or a mask on an inner visual wrapper to crop/reframe without changing source time. Polygon keyframes can form a polygon/mask transition.                                                            |\n| Directional wipe cut or iris/reveal cut | Animate a mask/clip boundary across overlapping visual clips; `/hyperframes-animation` owns the handoff choreography.                                                                                                       |\n| Split-screen handoff                    | Keep both visual clips placed by core, then keyframe their inner crop/mask wrappers and divider geometry.                                                                                                                   |\n| Constant source retime                  | `/hyperframes-core` owns normalized `data-playback-rate` (`0.1..10`) for render-safe picture and pitch-preserved sound. It is constant for the whole media element.                                                         |\n| Source speed ramps                      | A `rate` lane in `data-automation` on the `<video>`/`<audio>` (`t` in clip seconds, `v` 0.1..10, log interpolation); it wins over the constant rate.                                                                        |\n| Freeze / hold                           | A visual pose, final source frame, or finished sub-composition can hold. Arbitrary mid-source freeze is not supported; preprocess a still/derived segment, place it as its own clip, then resume with another source range. |\n\nWhen editing picture and sound together, load `/hyperframes-core`, this skill for\nvisual motion, and `/hyperframes-audio` for fades, crossfades, volume automation,\nducking/carve, or effects on the placed tracks.\n\nA visual transition or cropping treatment is not a temporal source trim or\nsplice. `/hyperframes-core` owns the timeline, clip timing, and source ranges;\nkeyframes only animate the visible handoff or crop on wrappers inside those clips.\nFor copyable combined picture/sound recipes, use `/hyperframes-core` → `references/creator-editing-recipes.md`.\n\n## Procedure\n\n1. Identify the animated subject, visible states, final state, and runtime.\n2. Choose the smallest mechanism that proves the prompt. Read `references/keyframe-patterns.md` only if the mechanism is unclear.\n3. Author seek-safe keyframes in the declared runtime. Register the runtime instance only after the build completes; building inside `document.fonts.ready` is fine.\n4. Verify with `hyperframes check` (it runs lint), `hyperframes keyframes`, one focused `--shot`, and snapshots at proof times.\n5. If proof fails, fix the source keyframes and rerun the smallest failing diagnostic before rendering.\n\n## Contract\n\n- Name the moving subject.\n- Name the poses needed to prove the intended motion, including the final state.\n- Keyframe visible channels, not hidden helper state.\n- Preserve object identity when continuity matters.\n- Crossfade only when the intended motion is replacement or dissolve.\n- Hold readable or semantic states long enough to see.\n- Final frame is part of the animation, not cleanup.\n- Do not reset to rest unless requested.\n- Do not end on black unless requested.\n- If editing a starter scene, preserve layout, copy, assets, colors, and final state unless asked to redesign.\n\n## Runtime Rules\n\nGSAP:\n\n- build at page load or inside `document.fonts.ready`, and register only after the build completes\n- use `gsap.timeline({ paused: true })`\n- register as `window.__timelines[compositionId]`\n- registry key must match `data-composition-id`\n- do not call `tl.play()` for render-critical motion\n- keep repeats finite\n\nCSS keyframes:\n\n- finite duration and iteration count\n- deterministic delay\n- `animation-fill-mode: both`\n- use `data-start` when timing belongs to a clip\n\nAnime.js:\n\n- create synchronously\n- `autoplay: false`\n- finite duration and loops\n- push every instance to `window.__hfAnime`\n\nWAAPI:\n\n- finite `duration`\n- `fill: \"both\"`\n- deterministic construction\n- the text surface does not list WAAPI; verify with `--shot` (it seeks WAAPI) and snapshots\n\nNever use for render-critical motion:\n\n- `Date.now()`\n- `performance.now()`\n- unseeded `Math.random()`\n- hover/scroll triggers\n- timers\n- a timeline registered before its async build finishes\n- unregistered `requestAnimationFrame`\n- infinite loops\n\n## GSAP Skeleton\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst compositionId = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\n\ntl.addLabel(\"state-a\", 0);\ntl.to(\".subject\", {\n  keyframes: [\n    { x: 0, opacity: 1, duration: 0.2 },\n    { x: 120, opacity: 1, duration: 0.4, ease: \"power2.out\" },\n    { x: 100, opacity: 1, duration: 0.2, ease: \"power2.inOut\" },\n  ],\n  ease: \"none\",\n});\n\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[compositionId] = tl;\n```\n\nUse labels for semantic states. Use position parameters instead of chained delays. Use `immediateRender: false` for later `from()`/`fromTo()` tweens touching the same property.\n\n## Keyframe Forms\n\n- Array keyframes: pose ladder with per-step duration/ease.\n- Percentage keyframes: exact timing inside one tween.\n- Property arrays: compact multi-stop changes.\n- `ease: \"none\"` on the parent when each stop carries its own easing.\n- `easeEach` when every segment should share the same feel.\n\nDo not copy numeric distances or timing from examples. Derive them from the actual composition geometry and duration.\n\nFor 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.\n\n## Channels\n\nPrefer 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.\n\nAvoid layout/lifecycle channels: `top/left/right/bottom`, `width/height`, `margin/padding`, `display`, `visibility`, late DOM creation, helper overlays doing subject motion.\n\nFor 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`.\n\n## Mechanism Choice\n\nChoose the smallest mechanism that proves the prompt:\n\n| Need                                  | Mechanism                                          |\n| ------------------------------------- | -------------------------------------------------- |\n| Same subject changes box or hierarchy | shared element / FLIP                              |\n| Subject travels a visible route       | path travel                                        |\n| Stroke grows or traces                | stroke draw                                        |\n| Shape becomes another shape           | shape interpolation                                |\n| Reveal boundary is visible            | clip, mask, or shader uniform                      |\n| Many items move with order            | stagger / indexed delay                            |\n| Text itself moves                     | line, word, character, or band subdivision         |\n| Surface bends, stretches, or crops    | parent/child counter-transform                     |\n| UI has states                         | explicit state machine                             |\n| Scene has depth                       | DOM 3D, Three.js, or WebGL camera/object keyframes |\n\nMechanisms can combine, but each one must clarify the idea. Decoration is not proof.\n\n## Timing\n\n- Anticipation only when it clarifies cause or direction.\n- Acceleration leaves rest.\n- Peak proof shows the mechanism unmistakably.\n- Follow-through sells energy and direction.\n- Overshoot only when the subject should feel elastic or tactile.\n- Constant-speed path travel usually needs `ease: \"none\"`.\n- Discrete UI states usually need a sharp ease-out.\n- Repeated elements need ordered offsets, not identical timing.\n- Final lockups need longer holds than transition poses.\n- Smoothness means continuous velocity on the same subject.\n- Do not overlap tweens that write the same transform property unless the overlap is intentional and verified.\n- 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.\n\n## Text\n\nPreserve 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.\n\n## SVG\n\nFor 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.\n\n## 3D\n\nScale 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.\n\nUse one or two diagnostic angles that expose the depth relationship. If angled proof shows no depth crossing, improve z/camera/occlusion.\n\n## Canvas / WebGL\n\nKeyframe 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.\n\n## CLI Proof\n\n```bash\nnpx hyperframes check\nnpx hyperframes keyframes .\nnpx hyperframes keyframes . --json\nnpx hyperframes keyframes . --runtime all\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --samples <n>\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --layout strip --from <t0> --to <t1>\nnpx hyperframes keyframes . --shot \"<file>\" --ghost --angle <angle>\nnpx hyperframes snapshot . --at <times>\n```\n\nChoose `<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.\n\n| Tool             | Proves                                                                                              |\n| ---------------- | --------------------------------------------------------------------------------------------------- |\n| `keyframes`      | targets, explicit stops, paths, traces, composed parent/child motion, CSS stops, Anime registration |\n| `--shot`         | ghosts, route shape, time spacing, DOM 3D projection, focused selector proof                        |\n| `--layout strip` | in-place motion, overlaps, contact, subtle scale/opacity, text waves                                |\n| `--ghost`        | canvas, WebGL, shader motion, rendered 3D                                                           |\n| `snapshot --at`  | masks, text readability, full state, final lockup, black/reset tails                                |\n\nIf selector proof looks wrong:\n\n1. rerun `--json`\n2. find the actual animated target\n3. shoot that target\n4. snapshot full frames\n5. trust painted pixels over logs\n\n## Diagnostic Reading\n\n`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.\n\nEven ghost spacing means constant speed. Clustered ghosts mean slow-in or settle. Large gaps mean fast travel.\n\nA helper-selector shot is not proof. An onion shot over a broken full frame is not proof.\n\n## Error Handling\n\n| Failure            | Fix                                                                                |\n| ------------------ | ---------------------------------------------------------------------------------- |\n| endpoint-only      | add middle poses, hold peak proof, rerun `--shot`                                  |\n| identity break     | keep one element alive, use shared source/final boxes, remove substitute crossfade |\n| fake 3D            | add z/camera travel, occlusion, angled proof                                       |\n| wrong final        | add final hold, snapshot final-minus-hold and exact final                          |\n| unseekable runtime | pause autoplay, remove timers, register the instance after the build completes     |\n| unreadable text    | preserve line boxes, reduce displacement, add final hold, snapshot text frames     |\n\n## Done\n\nRun `hyperframes check` (it runs lint), `hyperframes keyframes`, one focused `--shot`, and snapshots. Confirm first frame, proof poses, final-minus-hold, exact final, subject-owned motion, and no debug overlays.\n\nFile v1.0.8:_meta.json\n\n{\n  \"ownerId\": \"kn77d06grj6xqp3dqwkk4bavhn89pegt\",\n  \"slug\": \"hyperframes-keyframes\",\n  \"version\": \"1.0.8\",\n  \"publishedAt\": 1791141502934\n}\n\nFile v1.0.8:references/keyframe-patterns.md\n\n# Keyframe Mechanism Reference\n\nUse this after `SKILL.md` when choosing a concrete implementation mechanism. It is a parts shelf, not a style guide. Start with one primary mechanism; add supporting motion only when it clarifies the idea.\n\n## Runtime Skeletons\n\nGSAP:\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst id = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\ntl.to(\"<selector>\", {\n  keyframes: [\n    /* derive poses from the scene */\n  ],\n  ease: \"none\",\n});\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[id] = tl;\n```\n\nCSS:\n\n```css\n.<subject > {\n  animation: <name> <duration> <ease> both;\n  animation-iteration-count: 1;\n}\n@keyframes <name> {\n  0% {\n    transform: <pose-a>;\n    opacity: <a>;\n  }\n  100% {\n    transform: <pose-b>;\n    opacity: <b>;\n  }\n}\n```\n\nAnime.js:\n\n```js\nconst animation = anime.createTimeline({ autoplay: false });\nanimation.add(\"<selector>\", {\n  /* derived channels */\n});\nwindow.__hfAnime = window.__hfAnime || [];\nwindow.__hfAnime.push(animation);\n```\n\nThree/WebGL:\n\n```js\nconst state = { progress: 0 };\ntl.to(state, {\n  progress: 1,\n  duration: <duration>,\n  onUpdate: () => {\n    // derive camera/object/material values from state.progress\n    renderer.render(scene, camera);\n  },\n});\n```\n\n## Mechanisms\n\n| Mechanism           | Solves                                         | Keyframe                                                           | Runtime                                    | Verify                                         |\n| ------------------- | ---------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------ | ---------------------------------------------- |\n| Path travel         | Subject must visibly follow a route            | path progress, tangent rotation, follower offset, trail opacity    | GSAP MotionPath or sampled x/y/z           | strip shot at bends; final snapshot            |\n| Stroke draw         | A line, ring, or outline appears over time     | dash/draw range, stroke opacity, endpoint state                    | DrawSVG or SVG dash fallback               | partial mid snapshot; complete final           |\n| Shape interpolation | One silhouette becomes another                 | source path, middle path, target path, fill/stroke                 | MorphSVG or path tween                     | first/mid/final snapshots                      |\n| Shared element      | Same subject changes box or hierarchy          | source box, target box, x/y, scale, radius, context opacity        | GSAP Flip or manual FLIP                   | one identity moves; no substitute crossfade    |\n| Clip/mask reveal    | Animated boundary exposes content              | clip path, mask position/size, edge softness, inner counter-motion | CSS, SVG, GSAP, or shader                  | snapshot edge frames and final unclipped state |\n| Ordered repetition  | Many items enter, leave, or transform in order | indexed delay, x/y, scale, opacity, final alignment                | GSAP stagger, Anime stagger, CSS vars      | check first/middle/last item timing            |\n| Text subdivision    | Text motion needs readable internal timing     | line/word/char/band wrappers, y/x, opacity, final fit              | SplitText, authored spans, Anime splitText | strip shot plus final readability snapshot     |\n| Surface transform   | Image/card stretches, crops, or changes shape  | parent scale/skew/clip, child counter-scale, transform origin      | GSAP/CSS keyframes                         | no accidental warped final                     |\n| UI state machine    | Interface passes through semantic states       | closed, active, loading, success/error, final                      | GSAP/CSS/Anime                             | snapshots hit states in order                  |\n| DOM depth           | HTML elements need 3D separation               | perspective, z, rotationX/Y, opacity, crossing layer order         | CSS 3D + GSAP/CSS/Anime                    | angled `--shot`; overlap snapshot              |\n| Camera/object 3D    | Canvas/WebGL scene moves in depth              | camera, target, object transform, material opacity                 | Three.js/WebGL + GSAP proxy                | `--ghost`; snapshots at proof poses            |\n| Shader uniform      | Pixel effect is driven by scalar progress      | progress, edge width, noise, color mix, opacity                    | ShaderMaterial/WebGL uniforms              | `--ghost`; snapshot 0/edge/mid/final           |\n| Instanced system    | Many 3D objects move as one system             | instance transforms, scale, color/opacity, camera                  | Three InstancedMesh                        | snapshots, because DOM boxes miss internals    |\n| Imported model      | Model animation must scrub deterministically   | `AnimationMixer.setTime`, camera, material, lights                 | Three AnimationMixer                       | drive from HyperFrames time; `--ghost`         |\n\n## Source Links\n\n- GSAP keyframes: https://gsap.com/resources/keyframes/\n- GSAP timeline: https://gsap.com/docs/v3/GSAP/Timeline/\n- GSAP MotionPathPlugin: https://gsap.com/docs/v3/Plugins/MotionPathPlugin/\n- GSAP Flip: https://gsap.com/docs/v3/Plugins/Flip/\n- GSAP DrawSVGPlugin: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/\n- GSAP MorphSVGPlugin: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/\n- GSAP SplitText: https://gsap.com/docs/v3/Plugins/SplitText/\n- GSAP CSSPlugin: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/\n- Anime.js documentation: https://animejs.com/documentation/\n- Anime.js stagger grid: https://animejs.com/documentation/utilities/stagger/stagger-parameters/stagger-grid/\n- Anime.js timeline: https://animejs.com/documentation/timeline/\n- Anime.js SVG helpers: https://animejs.com/documentation/svg/createmotionpath/\n- MDN CSS animations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations\n- MDN `@keyframes`: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes\n- MDN `clip-path`: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path\n- MDN CSS masking: https://developer.mozilla.org/en-US/docs/Web/CSS/mask\n- MDN perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective\n- MDN transform-style: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style\n- Three.js AnimationMixer: https://threejs.org/docs/#api/en/animation/AnimationMixer\n- Three.js ShaderMaterial: https://threejs.org/docs/#api/en/materials/ShaderMaterial\n- Three.js InstancedMesh: https://threejs.org/docs/#api/en/objects/InstancedMesh\n\nFile v1.0.8:skill-card.md\n\n## Description:\n\nGuides creators in authoring and verifying seek-safe 2D and 3D keyframe motion for HyperFrames video compositions.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[heygen-com](https://clawhub.ai/user/heygen-com)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nVideo creators and developers use this skill to design zooms, reframes, reveals, and other keyframe motion in HyperFrames compositions and check that the results render consistently at chosen frames.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Unpinned HyperFrames CLI examples may fetch a changed or unreviewed dependency when run in a sensitive project.\n\nMitigation: Review the dependency guidance and use a reviewed, pinned CLI version or a lockfile-managed project dependency.\n\n## Reference(s):\n\n- [HyperFrames Keyframes release](https://clawhub.ai/heygen-com/skills/hyperframes-keyframes)\n- [Keyframe Mechanism Reference](references/keyframe-patterns.md)\n\n## Skill Output:\n\n**Output Type(s):** [Code, Shell commands, Guidance]\n\n**Output Format:** [Markdown with code and command examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Includes guidance for visual checks at key poses and the final frame.]\n\n## Skill Version(s):\n\n1.0.8 (source: server-resolved release)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v1.0.8:agents/openai.yaml\n\ninterface:\n  display_name: \"HyperFrames Keyframes\"\n  short_description: \"Author seek-safe video keyframes\"\n  default_prompt: \"Use $hyperframes-keyframes to author seek-safe 2D/3D keyframes and verify them with the CLI.\"\n\nArchive v1.0.7: 5 files, 10248 bytes\n\nFiles: agents/openai.yaml (220b), references/keyframe-patterns.md (6692b), skill-card.md (1875b), SKILL.md (16145b), _meta.json (140b)\n\nFile v1.0.7:SKILL.md\n\n---\nname: hyperframes-keyframes\ndescription: >\n  Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe,\n  Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe\n  2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths,\n  masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics.\n  Don't use for broad scene strategy, brand design, media sourcing, captions, or\n  general video planning.\n---\n\n**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.\n\n# HyperFrames Keyframes\n\nKeyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels.\n\nUse `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.\n\n## Creator editing boundary\n\nKeyframes own visual motion, not clip assembly. Source-range hard cuts, trim,\nsplice, and reorder belong to `/hyperframes-core`: author one media element per\nkept range, place it with `data-start` and `data-duration`, and select its source\noffset with `data-media-start`. Adjacent ranges make a hard cut. A crossfade\nuses overlapping clips on different tracks plus visual opacity keyframes; sound\nfades use `/hyperframes-audio`.\n\n| Creator request                         | Truthful mechanism                                                                                                                                                                                                          |\n| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Punch-in / punch-out                    | Keyframe `scale` with `x`/`y` or percentage translation on a non-timed visual/crop wrapper inside the clip. Use a set/short tween for a hard punch and a tween for a smooth move.                                           |\n| Smooth multi-state zoom or reframe      | Keep one subject wrapper alive and author multiple zoom/reframe states as a pose ladder with per-segment easing.                                                                                                            |\n| Pan, reframe, or Ken Burns camera move  | Animate wrapper translation plus scale. Geometry is authored; this is not face tracking or automatic semantic reframing.                                                                                                    |\n| Chained camera moves                    | Chain labeled transform beats on one registered seek-safe timeline.                                                                                                                                                         |\n| Match cut or whip pan                   | `/hyperframes-animation` owns the visual handoff; `/hyperframes-registry` supplies primitives; keyframes preserve authored geometry, direction, and velocity. There is no automatic matching-frame discovery.               |\n| Crop and mask reframe                   | Interpolate `clip-path` or a mask on an inner visual wrapper to crop/reframe without changing source time. Polygon keyframes can form a polygon/mask transition.                                                            |\n| Directional wipe cut or iris/reveal cut | Animate a mask/clip boundary across overlapping visual clips; `/hyperframes-animation` owns the handoff choreography.                                                                                                       |\n| Split-screen handoff                    | Keep both visual clips placed by core, then keyframe their inner crop/mask wrappers and divider geometry.                                                                                                                   |\n| Constant source retime                  | `/hyperframes-core` owns normalized `data-playback-rate` (`0.1..10`) for render-safe picture and pitch-preserved sound. It is constant for the whole media element.                                                         |\n| Source speed ramps                      | A `rate` lane in `data-automation` on the `<video>`/`<audio>` (`t` in clip seconds, `v` 0.1..10, log interpolation); it wins over the constant rate.                                                                        |\n| Freeze / hold                           | A visual pose, final source frame, or finished sub-composition can hold. Arbitrary mid-source freeze is not supported; preprocess a still/derived segment, place it as its own clip, then resume with another source range. |\n\nWhen editing picture and sound together, load `/hyperframes-core`, this skill for\nvisual motion, and `/hyperframes-audio` for fades, crossfades, volume automation,\nducking/carve, or effects on the placed tracks.\n\nA visual transition or cropping treatment is not a temporal source trim or\nsplice. `/hyperframes-core` owns the timeline, clip timing, and source ranges;\nkeyframes only animate the visible handoff or crop on wrappers inside those clips.\nFor copyable combined picture/sound recipes, use `/hyperframes-core` → `references/creator-editing-recipes.md`.\n\n## Procedure\n\n1. Identify the animated subject, visible states, final state, and runtime.\n2. Choose the smallest mechanism that proves the prompt. Read `references/keyframe-patterns.md` only if the mechanism is unclear.\n3. Author seek-safe keyframes in the declared runtime. Build synchronously and register the runtime instance.\n4. Verify with `hyperframes lint`, `hyperframes check`, `hyperframes keyframes`, one focused `--shot`, and snapshots at proof times.\n5. If proof fails, fix the source keyframes and rerun the smallest failing diagnostic before rendering.\n\n## Contract\n\n- Name the moving subject.\n- Name the poses needed to prove the intended motion, including the final state.\n- Keyframe visible channels, not hidden helper state.\n- Preserve object identity when continuity matters.\n- Crossfade only when the intended motion is replacement or dissolve.\n- Hold readable or semantic states long enough to see.\n- Final frame is part of the animation, not cleanup.\n- Do not reset to rest unless requested.\n- Do not end on black unless requested.\n- If editing a starter scene, preserve layout, copy, assets, colors, and final state unless asked to redesign.\n\n## Runtime Rules\n\nGSAP:\n\n- build synchronously at page load\n- use `gsap.timeline({ paused: true })`\n- register as `window.__timelines[compositionId]`\n- registry key must match `data-composition-id`\n- do not call `tl.play()` for render-critical motion\n- keep repeats finite\n\nCSS keyframes:\n\n- finite duration and iteration count\n- deterministic delay\n- `animation-fill-mode: both`\n- use `data-start` when timing belongs to a clip\n\nAnime.js:\n\n- create synchronously\n- `autoplay: false`\n- finite duration and loops\n- push every instance to `window.__hfAnime`\n\nWAAPI:\n\n- finite `duration`\n- `fill: \"both\"`\n- deterministic construction\n- the text surface does not list WAAPI; verify with `--shot` (it seeks WAAPI) and snapshots\n\nNever use for render-critical motion:\n\n- `Date.now()`\n- `performance.now()`\n- unseeded `Math.random()`\n- hover/scroll triggers\n- timers\n- async-created timelines\n- unregistered `requestAnimationFrame`\n- infinite loops\n\n## GSAP Skeleton\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst compositionId = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\n\ntl.addLabel(\"state-a\", 0);\ntl.to(\".subject\", {\n  keyframes: [\n    { x: 0, opacity: 1, duration: 0.2 },\n    { x: 120, opacity: 1, duration: 0.4, ease: \"power2.out\" },\n    { x: 100, opacity: 1, duration: 0.2, ease: \"power2.inOut\" },\n  ],\n  ease: \"none\",\n});\n\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[compositionId] = tl;\n```\n\nUse labels for semantic states. Use position parameters instead of chained delays. Use `immediateRender: false` for later `from()`/`fromTo()` tweens touching the same property.\n\n## Keyframe Forms\n\n- Array keyframes: pose ladder with per-step duration/ease.\n- Percentage keyframes: exact timing inside one tween.\n- Property arrays: compact multi-stop changes.\n- `ease: \"none\"` on the parent when each stop carries its own easing.\n- `easeEach` when every segment should share the same feel.\n\nDo not copy numeric distances or timing from examples. Derive them from the actual composition geometry and duration.\n\nFor 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.\n\n## Channels\n\nPrefer 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.\n\nAvoid layout/lifecycle channels: `top/left/right/bottom`, `width/height`, `margin/padding`, `display`, `visibility`, late DOM creation, helper overlays doing subject motion.\n\nFor 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`.\n\n## Mechanism Choice\n\nChoose the smallest mechanism that proves the prompt:\n\n| Need                                  | Mechanism                                          |\n| ------------------------------------- | -------------------------------------------------- |\n| Same subject changes box or hierarchy | shared element / FLIP                              |\n| Subject travels a visible route       | path travel                                        |\n| Stroke grows or traces                | stroke draw                                        |\n| Shape becomes another shape           | shape interpolation                                |\n| Reveal boundary is visible            | clip, mask, or shader uniform                      |\n| Many items move with order            | stagger / indexed delay                            |\n| Text itself moves                     | line, word, character, or band subdivision         |\n| Surface bends, stretches, or crops    | parent/child counter-transform                     |\n| UI has states                         | explicit state machine                             |\n| Scene has depth                       | DOM 3D, Three.js, or WebGL camera/object keyframes |\n\nMechanisms can combine, but each one must clarify the idea. Decoration is not proof.\n\n## Timing\n\n- Anticipation only when it clarifies cause or direction.\n- Acceleration leaves rest.\n- Peak proof shows the mechanism unmistakably.\n- Follow-through sells energy and direction.\n- Overshoot only when the subject should feel elastic or tactile.\n- Constant-speed path travel usually needs `ease: \"none\"`.\n- Discrete UI states usually need a sharp ease-out.\n- Repeated elements need ordered offsets, not identical timing.\n- Final lockups need longer holds than transition poses.\n- Smoothness means continuous velocity on the same subject.\n- Do not overlap tweens that write the same transform property unless the overlap is intentional and verified.\n- 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.\n\n## Text\n\nPreserve 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.\n\n## SVG\n\nFor 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.\n\n## 3D\n\nScale 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.\n\nUse one or two diagnostic angles that expose the depth relationship. If angled proof shows no depth crossing, improve z/camera/occlusion.\n\n## Canvas / WebGL\n\nKeyframe 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.\n\n## CLI Proof\n\n```bash\nnpx hyperframes lint\nnpx hyperframes check\nnpx hyperframes keyframes .\nnpx hyperframes keyframes . --json\nnpx hyperframes keyframes . --runtime all\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --samples <n>\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --layout strip --from <t0> --to <t1>\nnpx hyperframes keyframes . --shot \"<file>\" --ghost --angle <angle>\nnpx hyperframes snapshot . --at <times>\n```\n\nChoose `<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.\n\n| Tool             | Proves                                                                                              |\n| ---------------- | --------------------------------------------------------------------------------------------------- |\n| `keyframes`      | targets, explicit stops, paths, traces, composed parent/child motion, CSS stops, Anime registration |\n| `--shot`         | ghosts, route shape, time spacing, DOM 3D projection, focused selector proof                        |\n| `--layout strip` | in-place motion, overlaps, contact, subtle scale/opacity, text waves                                |\n| `--ghost`        | canvas, WebGL, shader motion, rendered 3D                                                           |\n| `snapshot --at`  | masks, text readability, full state, final lockup, black/reset tails                                |\n\nIf selector proof looks wrong:\n\n1. rerun `--json`\n2. find the actual animated target\n3. shoot that target\n4. snapshot full frames\n5. trust painted pixels over logs\n\n## Diagnostic Reading\n\n`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.\n\nEven ghost spacing means constant speed. Clustered ghosts mean slow-in or settle. Large gaps mean fast travel.\n\nA helper-selector shot is not proof. An onion shot over a broken full frame is not proof.\n\n## Error Handling\n\n| Failure            | Fix                                                                                |\n| ------------------ | ---------------------------------------------------------------------------------- |\n| endpoint-only      | add middle poses, hold peak proof, rerun `--shot`                                  |\n| identity break     | keep one element alive, use shared source/final boxes, remove substitute crossfade |\n| fake 3D            | add z/camera travel, occlusion, angled proof                                       |\n| wrong final        | add final hold, snapshot final-minus-hold and exact final                          |\n| unseekable runtime | pause autoplay, register instance, remove timers, build synchronously              |\n| unreadable text    | preserve line boxes, reduce displacement, add final hold, snapshot text frames     |\n\n## Done\n\nRun `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.\n\nFile v1.0.7:_meta.json\n\n{\n  \"ownerId\": \"kn77d06grj6xqp3dqwkk4bavhn89pegt\",\n  \"slug\": \"hyperframes-keyframes\",\n  \"version\": \"1.0.7\",\n  \"publishedAt\": 1790544033868\n}\n\nFile v1.0.7:references/keyframe-patterns.md\n\n# Keyframe Mechanism Reference\n\nUse this after `SKILL.md` when choosing a concrete implementation mechanism. It is a parts shelf, not a style guide. Start with one primary mechanism; add supporting motion only when it clarifies the idea.\n\n## Runtime Skeletons\n\nGSAP:\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst id = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\ntl.to(\"<selector>\", {\n  keyframes: [\n    /* derive poses from the scene */\n  ],\n  ease: \"none\",\n});\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[id] = tl;\n```\n\nCSS:\n\n```css\n.<subject > {\n  animation: <name> <duration> <ease> both;\n  animation-iteration-count: 1;\n}\n@keyframes <name> {\n  0% {\n    transform: <pose-a>;\n    opacity: <a>;\n  }\n  100% {\n    transform: <pose-b>;\n    opacity: <b>;\n  }\n}\n```\n\nAnime.js:\n\n```js\nconst animation = anime.createTimeline({ autoplay: false });\nanimation.add(\"<selector>\", {\n  /* derived channels */\n});\nwindow.__hfAnime = window.__hfAnime || [];\nwindow.__hfAnime.push(animation);\n```\n\nThree/WebGL:\n\n```js\nconst state = { progress: 0 };\ntl.to(state, {\n  progress: 1,\n  duration: <duration>,\n  onUpdate: () => {\n    // derive camera/object/material values from state.progress\n    renderer.render(scene, camera);\n  },\n});\n```\n\n## Mechanisms\n\n| Mechanism           | Solves                                         | Keyframe                                                           | Runtime                                    | Verify                                         |\n| ------------------- | ---------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------ | ---------------------------------------------- |\n| Path travel         | Subject must visibly follow a route            | path progress, tangent rotation, follower offset, trail opacity    | GSAP MotionPath or sampled x/y/z           | strip shot at bends; final snapshot            |\n| Stroke draw         | A line, ring, or outline appears over time     | dash/draw range, stroke opacity, endpoint state                    | DrawSVG or SVG dash fallback               | partial mid snapshot; complete final           |\n| Shape interpolation | One silhouette becomes another                 | source path, middle path, target path, fill/stroke                 | MorphSVG or path tween                     | first/mid/final snapshots                      |\n| Shared element      | Same subject changes box or hierarchy          | source box, target box, x/y, scale, radius, context opacity        | GSAP Flip or manual FLIP                   | one identity moves; no substitute crossfade    |\n| Clip/mask reveal    | Animated boundary exposes content              | clip path, mask position/size, edge softness, inner counter-motion | CSS, SVG, GSAP, or shader                  | snapshot edge frames and final unclipped state |\n| Ordered repetition  | Many items enter, leave, or transform in order | indexed delay, x/y, scale, opacity, final alignment                | GSAP stagger, Anime stagger, CSS vars      | check first/middle/last item timing            |\n| Text subdivision    | Text motion needs readable internal timing     | line/word/char/band wrappers, y/x, opacity, final fit              | SplitText, authored spans, Anime splitText | strip shot plus final readability snapshot     |\n| Surface transform   | Image/card stretches, crops, or changes shape  | parent scale/skew/clip, child counter-scale, transform origin      | GSAP/CSS keyframes                         | no accidental warped final                     |\n| UI state machine    | Interface passes through semantic states       | closed, active, loading, success/error, final                      | GSAP/CSS/Anime                             | snapshots hit states in order                  |\n| DOM depth           | HTML elements need 3D separation               | perspective, z, rotationX/Y, opacity, crossing layer order         | CSS 3D + GSAP/CSS/Anime                    | angled `--shot`; overlap snapshot              |\n| Camera/object 3D    | Canvas/WebGL scene moves in depth              | camera, target, object transform, material opacity                 | Three.js/WebGL + GSAP proxy                | `--ghost`; snapshots at proof poses            |\n| Shader uniform      | Pixel effect is driven by scalar progress      | progress, edge width, noise, color mix, opacity                    | ShaderMaterial/WebGL uniforms              | `--ghost`; snapshot 0/edge/mid/final           |\n| Instanced system    | Many 3D objects move as one system             | instance transforms, scale, color/opacity, camera                  | Three InstancedMesh                        | snapshots, because DOM boxes miss internals    |\n| Imported model      | Model animation must scrub deterministically   | `AnimationMixer.setTime`, camera, material, lights                 | Three AnimationMixer                       | drive from HyperFrames time; `--ghost`         |\n\n## Source Links\n\n- GSAP keyframes: https://gsap.com/resources/keyframes/\n- GSAP timeline: https://gsap.com/docs/v3/GSAP/Timeline/\n- GSAP MotionPathPlugin: https://gsap.com/docs/v3/Plugins/MotionPathPlugin/\n- GSAP Flip: https://gsap.com/docs/v3/Plugins/Flip/\n- GSAP DrawSVGPlugin: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/\n- GSAP MorphSVGPlugin: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/\n- GSAP SplitText: https://gsap.com/docs/v3/Plugins/SplitText/\n- GSAP CSSPlugin: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/\n- Anime.js documentation: https://animejs.com/documentation/\n- Anime.js stagger grid: https://animejs.com/documentation/utilities/stagger/stagger-parameters/stagger-grid/\n- Anime.js timeline: https://animejs.com/documentation/timeline/\n- Anime.js SVG helpers: https://animejs.com/documentation/svg/createmotionpath/\n- MDN CSS animations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations\n- MDN `@keyframes`: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes\n- MDN `clip-path`: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path\n- MDN CSS masking: https://developer.mozilla.org/en-US/docs/Web/CSS/mask\n- MDN perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective\n- MDN transform-style: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style\n- Three.js AnimationMixer: https://threejs.org/docs/#api/en/animation/AnimationMixer\n- Three.js ShaderMaterial: https://threejs.org/docs/#api/en/materials/ShaderMaterial\n- Three.js InstancedMesh: https://threejs.org/docs/#api/en/objects/InstancedMesh\n\nFile v1.0.7:skill-card.md\n\n## Description:\n\nGuides authors in creating seek-safe 2D and 3D keyframe motion for HyperFrames compositions and verifying visible states with diagnostics.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[heygen-com](https://clawhub.ai/user/heygen-com)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nVideo creators and developers use this skill to author seek-safe zooms, reframes, masks, paths, text motion, and depth effects in HyperFrames compositions, then check that key poses and final frames render as intended.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill's examples repeatedly run an unpinned npm executable, which may execute code that has not been reviewed.\n\nMitigation: Review the HyperFrames CLI source and provenance, use a controlled project, and prefer a locally installed lockfile-pinned binary or an exact reviewed package version, particularly in CI or repositories with secrets.\n\n## Reference(s):\n\n- [HyperFrames Keyframes on ClawHub](https://clawhub.ai/heygen-com/skills/hyperframes-keyframes)\n- [Keyframe Mechanism Reference](references/keyframe-patterns.md)\n- [MDN CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)\n\n## Skill Output:\n\n**Output Type(s):** [Guidance, Code, Shell commands]\n\n**Output Format:** [Markdown with code and shell command examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Includes guidance for checking rendered keyframes and final states.]\n\n## Skill Version(s):\n\n1.0.7 (source: ClawHub release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v1.0.7:agents/openai.yaml\n\ninterface:\n  display_name: \"HyperFrames Keyframes\"\n  short_description: \"Author seek-safe video keyframes\"\n  default_prompt: \"Use $hyperframes-keyframes to author seek-safe 2D/3D keyframes and verify them with the CLI.\"\n\nArchive v1.0.6: 5 files, 10409 bytes\n\nFiles: agents/openai.yaml (220b), references/keyframe-patterns.md (6692b), skill-card.md (2570b), SKILL.md (15901b), _meta.json (140b)\n\nFile v1.0.6:SKILL.md\n\n---\nname: hyperframes-keyframes\ndescription: >\n  Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe,\n  Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe\n  2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths,\n  masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics.\n  Don't use for broad scene strategy, brand design, media sourcing, captions, or\n  general video planning.\n---\n\n# HyperFrames Keyframes\n\nKeyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels.\n\nUse `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.\n\n## Creator editing boundary\n\nKeyframes own visual motion, not clip assembly. Source-range hard cuts, trim,\nsplice, and reorder belong to `/hyperframes-core`: author one media element per\nkept range, place it with `data-start` and `data-duration`, and select its source\noffset with `data-media-start`. Adjacent ranges make a hard cut. A crossfade\nuses overlapping clips on different tracks plus visual opacity keyframes; sound\nfades use `/hyperframes-audio`.\n\n| Creator request                         | Truthful mechanism                                                                                                                                                                                                          |\n| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Punch-in / punch-out                    | Keyframe `scale` with `x`/`y` or percentage translation on a non-timed visual/crop wrapper inside the clip. Use a set/short tween for a hard punch and a tween for a smooth move.                                           |\n| Smooth multi-state zoom or reframe      | Keep one subject wrapper alive and author multiple zoom/reframe states as a pose ladder with per-segment easing.                                                                                                            |\n| Pan, reframe, or Ken Burns camera move  | Animate wrapper translation plus scale. Geometry is authored; this is not face tracking or automatic semantic reframing.                                                                                                    |\n| Chained camera moves                    | Chain labeled transform beats on one registered seek-safe timeline.                                                                                                                                                         |\n| Match cut or whip pan                   | `/hyperframes-animation` owns the visual handoff; `/hyperframes-registry` supplies primitives; keyframes preserve authored geometry, direction, and velocity. There is no automatic matching-frame discovery.               |\n| Crop and mask reframe                   | Interpolate `clip-path` or a mask on an inner visual wrapper to crop/reframe without changing source time. Polygon keyframes can form a polygon/mask transition.                                                            |\n| Directional wipe cut or iris/reveal cut | Animate a mask/clip boundary across overlapping visual clips; `/hyperframes-animation` owns the handoff choreography.                                                                                                       |\n| Split-screen handoff                    | Keep both visual clips placed by core, then keyframe their inner crop/mask wrappers and divider geometry.                                                                                                                   |\n| Constant source retime                  | `/hyperframes-core` owns normalized `data-playback-rate` (`0.1..10`) for render-safe picture and pitch-preserved sound. It is constant for the whole media element.                                                         |\n| Source speed ramps                      | A `rate` lane in `data-automation` on the `<video>`/`<audio>` (`t` in clip seconds, `v` 0.1..10, log interpolation); it wins over the constant rate.                                                                        |\n| Freeze / hold                           | A visual pose, final source frame, or finished sub-composition can hold. Arbitrary mid-source freeze is not supported; preprocess a still/derived segment, place it as its own clip, then resume with another source range. |\n\nWhen editing picture and sound together, load `/hyperframes-core`, this skill for\nvisual motion, and `/hyperframes-audio` for fades, crossfades, volume automation,\nducking/carve, or effects on the placed tracks.\n\nA visual transition or cropping treatment is not a temporal source trim or\nsplice. `/hyperframes-core` owns the timeline, clip timing, and source ranges;\nkeyframes only animate the visible handoff or crop on wrappers inside those clips.\nFor copyable combined picture/sound recipes, use `/hyperframes-core` → `references/creator-editing-recipes.md`.\n\n## Procedure\n\n1. Identify the animated subject, visible states, final state, and runtime.\n2. Choose the smallest mechanism that proves the prompt. Read `references/keyframe-patterns.md` only if the mechanism is unclear.\n3. Author seek-safe keyframes in the declared runtime. Build synchronously and register the runtime instance.\n4. Verify with `hyperframes lint`, `hyperframes check`, `hyperframes keyframes`, one focused `--shot`, and snapshots at proof times.\n5. If proof fails, fix the source keyframes and rerun the smallest failing diagnostic before rendering.\n\n## Contract\n\n- Name the moving subject.\n- Name the poses needed to prove the intended motion, including the final state.\n- Keyframe visible channels, not hidden helper state.\n- Preserve object identity when continuity matters.\n- Crossfade only when the intended motion is replacement or dissolve.\n- Hold readable or semantic states long enough to see.\n- Final frame is part of the animation, not cleanup.\n- Do not reset to rest unless requested.\n- Do not end on black unless requested.\n- If editing a starter scene, preserve layout, copy, assets, colors, and final state unless asked to redesign.\n\n## Runtime Rules\n\nGSAP:\n\n- build synchronously at page load\n- use `gsap.timeline({ paused: true })`\n- register as `window.__timelines[compositionId]`\n- registry key must match `data-composition-id`\n- do not call `tl.play()` for render-critical motion\n- keep repeats finite\n\nCSS keyframes:\n\n- finite duration and iteration count\n- deterministic delay\n- `animation-fill-mode: both`\n- use `data-start` when timing belongs to a clip\n\nAnime.js:\n\n- create synchronously\n- `autoplay: false`\n- finite duration and loops\n- push every instance to `window.__hfAnime`\n\nWAAPI:\n\n- finite `duration`\n- `fill: \"both\"`\n- deterministic construction\n- the text surface does not list WAAPI; verify with `--shot` (it seeks WAAPI) and snapshots\n\nNever use for render-critical motion:\n\n- `Date.now()`\n- `performance.now()`\n- unseeded `Math.random()`\n- hover/scroll triggers\n- timers\n- async-created timelines\n- unregistered `requestAnimationFrame`\n- infinite loops\n\n## GSAP Skeleton\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst compositionId = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\n\ntl.addLabel(\"state-a\", 0);\ntl.to(\".subject\", {\n  keyframes: [\n    { x: 0, opacity: 1, duration: 0.2 },\n    { x: 120, opacity: 1, duration: 0.4, ease: \"power2.out\" },\n    { x: 100, opacity: 1, duration: 0.2, ease: \"power2.inOut\" },\n  ],\n  ease: \"none\",\n});\n\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[compositionId] = tl;\n```\n\nUse labels for semantic states. Use position parameters instead of chained delays. Use `immediateRender: false` for later `from()`/`fromTo()` tweens touching the same property.\n\n## Keyframe Forms\n\n- Array keyframes: pose ladder with per-step duration/ease.\n- Percentage keyframes: exact timing inside one tween.\n- Property arrays: compact multi-stop changes.\n- `ease: \"none\"` on the parent when each stop carries its own easing.\n- `easeEach` when every segment should share the same feel.\n\nDo not copy numeric distances or timing from examples. Derive them from the actual composition geometry and duration.\n\nFor 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.\n\n## Channels\n\nPrefer 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.\n\nAvoid layout/lifecycle channels: `top/left/right/bottom`, `width/height`, `margin/padding`, `display`, `visibility`, late DOM creation, helper overlays doing subject motion.\n\nFor 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`.\n\n## Mechanism Choice\n\nChoose the smallest mechanism that proves the prompt:\n\n| Need                                  | Mechanism                                          |\n| ------------------------------------- | -------------------------------------------------- |\n| Same subject changes box or hierarchy | shared element / FLIP                              |\n| Subject travels a visible route       | path travel                                        |\n| Stroke grows or traces                | stroke draw                                        |\n| Shape becomes another shape           | shape interpolation                                |\n| Reveal boundary is visible            | clip, mask, or shader uniform                      |\n| Many items move with order            | stagger / indexed delay                            |\n| Text itself moves                     | line, word, character, or band subdivision         |\n| Surface bends, stretches, or crops    | parent/child counter-transform                     |\n| UI has states                         | explicit state machine                             |\n| Scene has depth                       | DOM 3D, Three.js, or WebGL camera/object keyframes |\n\nMechanisms can combine, but each one must clarify the idea. Decoration is not proof.\n\n## Timing\n\n- Anticipation only when it clarifies cause or direction.\n- Acceleration leaves rest.\n- Peak proof shows the mechanism unmistakably.\n- Follow-through sells energy and direction.\n- Overshoot only when the subject should feel elastic or tactile.\n- Constant-speed path travel usually needs `ease: \"none\"`.\n- Discrete UI states usually need a sharp ease-out.\n- Repeated elements need ordered offsets, not identical timing.\n- Final lockups need longer holds than transition poses.\n- Smoothness means continuous velocity on the same subject.\n- Do not overlap tweens that write the same transform property unless the overlap is intentional and verified.\n- 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.\n\n## Text\n\nPreserve 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.\n\n## SVG\n\nFor 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.\n\n## 3D\n\nScale 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.\n\nUse one or two diagnostic angles that expose the depth relationship. If angled proof shows no depth crossing, improve z/camera/occlusion.\n\n## Canvas / WebGL\n\nKeyframe 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.\n\n## CLI Proof\n\n```bash\nnpx hyperframes lint\nnpx hyperframes check\nnpx hyperframes keyframes .\nnpx hyperframes keyframes . --json\nnpx hyperframes keyframes . --runtime all\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --samples <n>\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --layout strip --from <t0> --to <t1>\nnpx hyperframes keyframes . --shot \"<file>\" --ghost --angle <angle>\nnpx hyperframes snapshot . --at <times>\n```\n\nChoose `<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.\n\n| Tool             | Proves                                                                                              |\n| ---------------- | --------------------------------------------------------------------------------------------------- |\n| `keyframes`      | targets, explicit stops, paths, traces, composed parent/child motion, CSS stops, Anime registration |\n| `--shot`         | ghosts, route shape, time spacing, DOM 3D projection, focused selector proof                        |\n| `--layout strip` | in-place motion, overlaps, contact, subtle scale/opacity, text waves                                |\n| `--ghost`        | canvas, WebGL, shader motion, rendered 3D                                                           |\n| `snapshot --at`  | masks, text readability, full state, final lockup, black/reset tails                                |\n\nIf selector proof looks wrong:\n\n1. rerun `--json`\n2. find the actual animated target\n3. shoot that target\n4. snapshot full frames\n5. trust painted pixels over logs\n\n## Diagnostic Reading\n\n`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.\n\nEven ghost spacing means constant speed. Clustered ghosts mean slow-in or settle. Large gaps mean fast travel.\n\nA helper-selector shot is not proof. An onion shot over a broken full frame is not proof.\n\n## Error Handling\n\n| Failure            | Fix                                                                                |\n| ------------------ | ---------------------------------------------------------------------------------- |\n| endpoint-only      | add middle poses, hold peak proof, rerun `--shot`                                  |\n| identity break     | keep one element alive, use shared source/final boxes, remove substitute crossfade |\n| fake 3D            | add z/camera travel, occlusion, angled proof                                       |\n| wrong final        | add final hold, snapshot final-minus-hold and exact final                          |\n| unseekable runtime | pause autoplay, register instance, remove timers, build synchronously              |\n| unreadable text    | preserve line boxes, reduce displacement, add final hold, snapshot text frames     |\n\n## Done\n\nRun `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.\n\nFile v1.0.6:_meta.json\n\n{\n  \"ownerId\": \"kn77d06grj6xqp3dqwkk4bavhn89pegt\",\n  \"slug\": \"hyperframes-keyframes\",\n  \"version\": \"1.0.6\",\n  \"publishedAt\": 1789921380652\n}\n\nFile v1.0.6:references/keyframe-patterns.md\n\n# Keyframe Mechanism Reference\n\nUse this after `SKILL.md` when choosing a concrete implementation mechanism. It is a parts shelf, not a style guide. Start with one primary mechanism; add supporting motion only when it clarifies the idea.\n\n## Runtime Skeletons\n\nGSAP:\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst id = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\ntl.to(\"<selector>\", {\n  keyframes: [\n    /* derive poses from the scene */\n  ],\n  ease: \"none\",\n});\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[id] = tl;\n```\n\nCSS:\n\n```css\n.<subject > {\n  animation: <name> <duration> <ease> both;\n  animation-iteration-count: 1;\n}\n@keyframes <name> {\n  0% {\n    transform: <pose-a>;\n    opacity: <a>;\n  }\n  100% {\n    transform: <pose-b>;\n    opacity: <b>;\n  }\n}\n```\n\nAnime.js:\n\n```js\nconst animation = anime.createTimeline({ autoplay: false });\nanimation.add(\"<selector>\", {\n  /* derived channels */\n});\nwindow.__hfAnime = window.__hfAnime || [];\nwindow.__hfAnime.push(animation);\n```\n\nThree/WebGL:\n\n```js\nconst state = { progress: 0 };\ntl.to(state, {\n  progress: 1,\n  duration: <duration>,\n  onUpdate: () => {\n    // derive camera/object/material values from state.progress\n    renderer.render(scene, camera);\n  },\n});\n```\n\n## Mechanisms\n\n| Mechanism           | Solves                                         | Keyframe                                                           | Runtime                                    | Verify                                         |\n| ------------------- | ---------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------ | ---------------------------------------------- |\n| Path travel         | Subject must visibly follow a route            | path progress, tangent rotation, follower offset, trail opacity    | GSAP MotionPath or sampled x/y/z           | strip shot at bends; final snapshot            |\n| Stroke draw         | A line, ring, or outline appears over time     | dash/draw range, stroke opacity, endpoint state                    | DrawSVG or SVG dash fallback               | partial mid snapshot; complete final           |\n| Shape interpolation | One silhouette becomes another                 | source path, middle path, target path, fill/stroke                 | MorphSVG or path tween                     | first/mid/final snapshots                      |\n| Shared element      | Same subject changes box or hierarchy          | source box, target box, x/y, scale, radius, context opacity        | GSAP Flip or manual FLIP                   | one identity moves; no substitute crossfade    |\n| Clip/mask reveal    | Animated boundary exposes content              | clip path, mask position/size, edge softness, inner counter-motion | CSS, SVG, GSAP, or shader                  | snapshot edge frames and final unclipped state |\n| Ordered repetition  | Many items enter, leave, or transform in order | indexed delay, x/y, scale, opacity, final alignment                | GSAP stagger, Anime stagger, CSS vars      | check first/middle/last item timing            |\n| Text subdivision    | Text motion needs readable internal timing     | line/word/char/band wrappers, y/x, opacity, final fit              | SplitText, authored spans, Anime splitText | strip shot plus final readability snapshot     |\n| Surface transform   | Image/card stretches, crops, or changes shape  | parent scale/skew/clip, child counter-scale, transform origin      | GSAP/CSS keyframes                         | no accidental warped final                     |\n| UI state machine    | Interface passes through semantic states       | closed, active, loading, success/error, final                      | GSAP/CSS/Anime                             | snapshots hit states in order                  |\n| DOM depth           | HTML elements need 3D separation               | perspective, z, rotationX/Y, opacity, crossing layer order         | CSS 3D + GSAP/CSS/Anime                    | angled `--shot`; overlap snapshot              |\n| Camera/object 3D    | Canvas/WebGL scene moves in depth              | camera, target, object transform, material opacity                 | Three.js/WebGL + GSAP proxy                | `--ghost`; snapshots at proof poses            |\n| Shader uniform      | Pixel effect is driven by scalar progress      | progress, edge width, noise, color mix, opacity                    | ShaderMaterial/WebGL uniforms              | `--ghost`; snapshot 0/edge/mid/final           |\n| Instanced system    | Many 3D objects move as one system             | instance transforms, scale, color/opacity, camera                  | Three InstancedMesh                        | snapshots, because DOM boxes miss internals    |\n| Imported model      | Model animation must scrub deterministically   | `AnimationMixer.setTime`, camera, material, lights                 | Three AnimationMixer                       | drive from HyperFrames time; `--ghost`         |\n\n## Source Links\n\n- GSAP keyframes: https://gsap.com/resources/keyframes/\n- GSAP timeline: https://gsap.com/docs/v3/GSAP/Timeline/\n- GSAP MotionPathPlugin: https://gsap.com/docs/v3/Plugins/MotionPathPlugin/\n- GSAP Flip: https://gsap.com/docs/v3/Plugins/Flip/\n- GSAP DrawSVGPlugin: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/\n- GSAP MorphSVGPlugin: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/\n- GSAP SplitText: https://gsap.com/docs/v3/Plugins/SplitText/\n- GSAP CSSPlugin: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/\n- Anime.js documentation: https://animejs.com/documentation/\n- Anime.js stagger grid: https://animejs.com/documentation/utilities/stagger/stagger-parameters/stagger-grid/\n- Anime.js timeline: https://animejs.com/documentation/timeline/\n- Anime.js SVG helpers: https://animejs.com/documentation/svg/createmotionpath/\n- MDN CSS animations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations\n- MDN `@keyframes`: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes\n- MDN `clip-path`: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path\n- MDN CSS masking: https://developer.mozilla.org/en-US/docs/Web/CSS/mask\n- MDN perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective\n- MDN transform-style: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style\n- Three.js AnimationMixer: https://threejs.org/docs/#api/en/animation/AnimationMixer\n- Three.js ShaderMaterial: https://threejs.org/docs/#api/en/materials/ShaderMaterial\n- Three.js InstancedMesh: https://threejs.org/docs/#api/en/objects/InstancedMesh\n\nFile v1.0.6:skill-card.md\n\n## Description:\n\nUse when a HyperFrames composition needs seek-safe 2D/3D keyframes for punch-ins, zooms, reframes, Ken Burns treatments, camera moves, visual handoffs, GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or keyframe diagnostics.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[heygen-com](https://clawhub.ai/user/heygen-com)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and video engineers use this skill to author deterministic, seek-safe visual keyframes for HyperFrames compositions and verify the resulting motion with HyperFrames CLI diagnostics.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: CLI examples use unpinned npx commands, which can create supply-chain risk in production or sensitive workspaces.\n\nMitigation: Prefer a project-local or exact-version HyperFrames installation before running the CLI examples.\n\nRisk: Keyframe guidance can produce unseekable or non-deterministic render-critical motion if timers, autoplay, random values, or asynchronous timeline creation are used.\n\nMitigation: Build animation instances synchronously, keep loops finite, register seekable runtimes, and verify motion with HyperFrames lint, check, keyframes, shot, and snapshot diagnostics.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/heygen-com/skills/hyperframes-keyframes)\n- [Keyframe Mechanism Reference](references/keyframe-patterns.md)\n- [GSAP keyframes](https://gsap.com/resources/keyframes/)\n- [GSAP Timeline](https://gsap.com/docs/v3/GSAP/Timeline/)\n- [Anime.js documentation](https://animejs.com/documentation/)\n- [MDN CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)\n- [Three.js AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance with code snippets and shell command examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Outputs should be adapted to the actual HyperFrames composition geometry, runtime, and verification targets.]\n\n## Skill Version(s):\n\n1.0.6 (source: server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v1.0.6:agents/openai.yaml\n\ninterface:\n  display_name: \"HyperFrames Keyframes\"\n  short_description: \"Author seek-safe video keyframes\"\n  default_prompt: \"Use $hyperframes-keyframes to author seek-safe 2D/3D keyframes and verify them with the CLI.\"\n\nArchive v1.0.5: 5 files, 10223 bytes\n\nFiles: agents/openai.yaml (220b), references/keyframe-patterns.md (6692b), skill-card.md (2196b), SKILL.md (15901b), _meta.json (140b)\n\nFile v1.0.5:SKILL.md\n\n---\nname: hyperframes-keyframes\ndescription: >\n  Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe,\n  Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe\n  2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths,\n  masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics.\n  Don't use for broad scene strategy, brand design, media sourcing, captions, or\n  general video planning.\n---\n\n# HyperFrames Keyframes\n\nKeyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels.\n\nUse `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.\n\n## Creator editing boundary\n\nKeyframes own visual motion, not clip assembly. Source-range hard cuts, trim,\nsplice, and reorder belong to `/hyperframes-core`: author one media element per\nkept range, place it with `data-start` and `data-duration`, and select its source\noffset with `data-media-start`. Adjacent ranges make a hard cut. A crossfade\nuses overlapping clips on different tracks plus visual opacity keyframes; sound\nfades use `/hyperframes-audio`.\n\n| Creator request                         | Truthful mechanism                                                                                                                                                                                                          |\n| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Punch-in / punch-out                    | Keyframe `scale` with `x`/`y` or percentage translation on a non-timed visual/crop wrapper inside the clip. Use a set/short tween for a hard punch and a tween for a smooth move.                                           |\n| Smooth multi-state zoom or reframe      | Keep one subject wrapper alive and author multiple zoom/reframe states as a pose ladder with per-segment easing.                                                                                                            |\n| Pan, reframe, or Ken Burns camera move  | Animate wrapper translation plus scale. Geometry is authored; this is not face tracking or automatic semantic reframing.                                                                                                    |\n| Chained camera moves                    | Chain labeled transform beats on one registered seek-safe timeline.                                                                                                                                                         |\n| Match cut or whip pan                   | `/hyperframes-animation` owns the visual handoff; `/hyperframes-registry` supplies primitives; keyframes preserve authored geometry, direction, and velocity. There is no automatic matching-frame discovery.               |\n| Crop and mask reframe                   | Interpolate `clip-path` or a mask on an inner visual wrapper to crop/reframe without changing source time. Polygon keyframes can form a polygon/mask transition.                                                            |\n| Directional wipe cut or iris/reveal cut | Animate a mask/clip boundary across overlapping visual clips; `/hyperframes-animation` owns the handoff choreography.                                                                                                       |\n| Split-screen handoff                    | Keep both visual clips placed by core, then keyframe their inner crop/mask wrappers and divider geometry.                                                                                                                   |\n| Constant source retime                  | `/hyperframes-core` owns normalized `data-playback-rate` (`0.1..5`) for render-safe picture and pitch-preserved sound. It is constant for the whole media element.                                                          |\n| Source speed ramps                      | Not supported: there is no time-varying playback-rate envelope. Preprocess a derived media asset, then place it through core.                                                                                               |\n| Freeze / hold                           | A visual pose, final source frame, or finished sub-composition can hold. Arbitrary mid-source freeze is not supported; preprocess a still/derived segment, place it as its own clip, then resume with another source range. |\n\nWhen editing picture and sound together, load `/hyperframes-core`, this skill for\nvisual motion, and `/hyperframes-audio` for fades, crossfades, volume automation,\nducking/carve, or effects on the placed tracks.\n\nA visual transition or cropping treatment is not a temporal source trim or\nsplice. `/hyperframes-core` owns the timeline, clip timing, and source ranges;\nkeyframes only animate the visible handoff or crop on wrappers inside those clips.\nFor copyable combined picture/sound recipes, use `/hyperframes-core` → `references/creator-editing-recipes.md`.\n\n## Procedure\n\n1. Identify the animated subject, visible states, final state, and runtime.\n2. Choose the smallest mechanism that proves the prompt. Read `references/keyframe-patterns.md` only if the mechanism is unclear.\n3. Author seek-safe keyframes in the declared runtime. Build synchronously and register the runtime instance.\n4. Verify with `hyperframes lint`, `hyperframes check`, `hyperframes keyframes`, one focused `--shot`, and snapshots at proof times.\n5. If proof fails, fix the source keyframes and rerun the smallest failing diagnostic before rendering.\n\n## Contract\n\n- Name the moving subject.\n- Name the poses needed to prove the intended motion, including the final state.\n- Keyframe visible channels, not hidden helper state.\n- Preserve object identity when continuity matters.\n- Crossfade only when the intended motion is replacement or dissolve.\n- Hold readable or semantic states long enough to see.\n- Final frame is part of the animation, not cleanup.\n- Do not reset to rest unless requested.\n- Do not end on black unless requested.\n- If editing a starter scene, preserve layout, copy, assets, colors, and final state unless asked to redesign.\n\n## Runtime Rules\n\nGSAP:\n\n- build synchronously at page load\n- use `gsap.timeline({ paused: true })`\n- register as `window.__timelines[compositionId]`\n- registry key must match `data-composition-id`\n- do not call `tl.play()` for render-critical motion\n- keep repeats finite\n\nCSS keyframes:\n\n- finite duration and iteration count\n- deterministic delay\n- `animation-fill-mode: both`\n- use `data-start` when timing belongs to a clip\n\nAnime.js:\n\n- create synchronously\n- `autoplay: false`\n- finite duration and loops\n- push every instance to `window.__hfAnime`\n\nWAAPI:\n\n- finite `duration`\n- `fill: \"both\"`\n- deterministic construction\n- the text surface does not list WAAPI; verify with `--shot` (it seeks WAAPI) and snapshots\n\nNever use for render-critical motion:\n\n- `Date.now()`\n- `performance.now()`\n- unseeded `Math.random()`\n- hover/scroll triggers\n- timers\n- async-created timelines\n- unregistered `requestAnimationFrame`\n- infinite loops\n\n## GSAP Skeleton\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst compositionId = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\n\ntl.addLabel(\"state-a\", 0);\ntl.to(\".subject\", {\n  keyframes: [\n    { x: 0, opacity: 1, duration: 0.2 },\n    { x: 120, opacity: 1, duration: 0.4, ease: \"power2.out\" },\n    { x: 100, opacity: 1, duration: 0.2, ease: \"power2.inOut\" },\n  ],\n  ease: \"none\",\n});\n\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[compositionId] = tl;\n```\n\nUse labels for semantic states. Use position parameters instead of chained delays. Use `immediateRender: false` for later `from()`/`fromTo()` tweens touching the same property.\n\n## Keyframe Forms\n\n- Array keyframes: pose ladder with per-step duration/ease.\n- Percentage keyframes: exact timing inside one tween.\n- Property arrays: compact multi-stop changes.\n- `ease: \"none\"` on the parent when each stop carries its own easing.\n- `easeEach` when every segment should share the same feel.\n\nDo not copy numeric distances or timing from examples. Derive them from the actual composition geometry and duration.\n\nFor 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.\n\n## Channels\n\nPrefer 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.\n\nAvoid layout/lifecycle channels: `top/left/right/bottom`, `width/height`, `margin/padding`, `display`, `visibility`, late DOM creation, helper overlays doing subject motion.\n\nFor 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`.\n\n## Mechanism Choice\n\nChoose the smallest mechanism that proves the prompt:\n\n| Need                                  | Mechanism                                          |\n| ------------------------------------- | -------------------------------------------------- |\n| Same subject changes box or hierarchy | shared element / FLIP                              |\n| Subject travels a visible route       | path travel                                        |\n| Stroke grows or traces                | stroke draw                                        |\n| Shape becomes another shape           | shape interpolation                                |\n| Reveal boundary is visible            | clip, mask, or shader uniform                      |\n| Many items move with order            | stagger / indexed delay                            |\n| Text itself moves                     | line, word, character, or band subdivision         |\n| Surface bends, stretches, or crops    | parent/child counter-transform                     |\n| UI has states                         | explicit state machine                             |\n| Scene has depth                       | DOM 3D, Three.js, or WebGL camera/object keyframes |\n\nMechanisms can combine, but each one must clarify the idea. Decoration is not proof.\n\n## Timing\n\n- Anticipation only when it clarifies cause or direction.\n- Acceleration leaves rest.\n- Peak proof shows the mechanism unmistakably.\n- Follow-through sells energy and direction.\n- Overshoot only when the subject should feel elastic or tactile.\n- Constant-speed path travel usually needs `ease: \"none\"`.\n- Discrete UI states usually need a sharp ease-out.\n- Repeated elements need ordered offsets, not identical timing.\n- Final lockups need longer holds than transition poses.\n- Smoothness means continuous velocity on the same subject.\n- Do not overlap tweens that write the same transform property unless the overlap is intentional and verified.\n- 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.\n\n## Text\n\nPreserve 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.\n\n## SVG\n\nFor 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.\n\n## 3D\n\nScale 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.\n\nUse one or two diagnostic angles that expose the depth relationship. If angled proof shows no depth crossing, improve z/camera/occlusion.\n\n## Canvas / WebGL\n\nKeyframe 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.\n\n## CLI Proof\n\n```bash\nnpx hyperframes lint\nnpx hyperframes check\nnpx hyperframes keyframes .\nnpx hyperframes keyframes . --json\nnpx hyperframes keyframes . --runtime all\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --samples <n>\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --layout strip --from <t0> --to <t1>\nnpx hyperframes keyframes . --shot \"<file>\" --ghost --angle <angle>\nnpx hyperframes snapshot . --at <times>\n```\n\nChoose `<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.\n\n| Tool             | Proves                                                                                              |\n| ---------------- | --------------------------------------------------------------------------------------------------- |\n| `keyframes`      | targets, explicit stops, paths, traces, composed parent/child motion, CSS stops, Anime registration |\n| `--shot`         | ghosts, route shape, time spacing, DOM 3D projection, focused selector proof                        |\n| `--layout strip` | in-place motion, overlaps, contact, subtle scale/opacity, text waves                                |\n| `--ghost`        | canvas, WebGL, shader motion, rendered 3D                                                           |\n| `snapshot --at`  | masks, text readability, full state, final lockup, black/reset tails                                |\n\nIf selector proof looks wrong:\n\n1. rerun `--json`\n2. find the actual animated target\n3. shoot that target\n4. snapshot full frames\n5. trust painted pixels over logs\n\n## Diagnostic Reading\n\n`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.\n\nEven ghost spacing means constant speed. Clustered ghosts mean slow-in or settle. Large gaps mean fast travel.\n\nA helper-selector shot is not proof. An onion shot over a broken full frame is not proof.\n\n## Error Handling\n\n| Failure            | Fix                                                                                |\n| ------------------ | ---------------------------------------------------------------------------------- |\n| endpoint-only      | add middle poses, hold peak proof, rerun `--shot`                                  |\n| identity break     | keep one element alive, use shared source/final boxes, remove substitute crossfade |\n| fake 3D            | add z/camera travel, occlusion, angled proof                                       |\n| wrong final        | add final hold, snapshot final-minus-hold and exact final                          |\n| unseekable runtime | pause autoplay, register instance, remove timers, build synchronously              |\n| unreadable text    | preserve line boxes, reduce displacement, add final hold, snapshot text frames     |\n\n## Done\n\nRun `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.\n\nFile v1.0.5:_meta.json\n\n{\n  \"ownerId\": \"kn77d06grj6xqp3dqwkk4bavhn89pegt\",\n  \"slug\": \"hyperframes-keyframes\",\n  \"version\": \"1.0.5\",\n  \"publishedAt\": 1787062702463\n}\n\nFile v1.0.5:references/keyframe-patterns.md\n\n# Keyframe Mechanism Reference\n\nUse this after `SKILL.md` when choosing a concrete implementation mechanism. It is a parts shelf, not a style guide. Start with one primary mechanism; add supporting motion only when it clarifies the idea.\n\n## Runtime Skeletons\n\nGSAP:\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst id = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\ntl.to(\"<selector>\", {\n  keyframes: [\n    /* derive poses from the scene */\n  ],\n  ease: \"none\",\n});\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[id] = tl;\n```\n\nCSS:\n\n```css\n.<subject > {\n  animation: <name> <duration> <ease> both;\n  animation-iteration-count: 1;\n}\n@keyframes <name> {\n  0% {\n    transform: <pose-a>;\n    opacity: <a>;\n  }\n  100% {\n    transform: <pose-b>;\n    opacity: <b>;\n  }\n}\n```\n\nAnime.js:\n\n```js\nconst animation = anime.createTimeline({ autoplay: false });\nanimation.add(\"<selector>\", {\n  /* derived channels */\n});\nwindow.__hfAnime = window.__hfAnime || [];\nwindow.__hfAnime.push(animation);\n```\n\nThree/WebGL:\n\n```js\nconst state = { progress: 0 };\ntl.to(state, {\n  progress: 1,\n  duration: <duration>,\n  onUpdate: () => {\n    // derive camera/object/material values from state.progress\n    renderer.render(scene, camera);\n  },\n});\n```\n\n## Mechanisms\n\n| Mechanism           | Solves                                         | Keyframe                                                           | Runtime                                    | Verify                                         |\n| ------------------- | ---------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------ | ---------------------------------------------- |\n| Path travel         | Subject must visibly follow a route            | path progress, tangent rotation, follower offset, trail opacity    | GSAP MotionPath or sampled x/y/z           | strip shot at bends; final snapshot            |\n| Stroke draw         | A line, ring, or outline appears over time     | dash/draw range, stroke opacity, endpoint state                    | DrawSVG or SVG dash fallback               | partial mid snapshot; complete final           |\n| Shape interpolation | One silhouette becomes another                 | source path, middle path, target path, fill/stroke                 | MorphSVG or path tween                     | first/mid/final snapshots                      |\n| Shared element      | Same subject changes box or hierarchy          | source box, target box, x/y, scale, radius, context opacity        | GSAP Flip or manual FLIP                   | one identity moves; no substitute crossfade    |\n| Clip/mask reveal    | Animated boundary exposes content              | clip path, mask position/size, edge softness, inner counter-motion | CSS, SVG, GSAP, or shader                  | snapshot edge frames and final unclipped state |\n| Ordered repetition  | Many items enter, leave, or transform in order | indexed delay, x/y, scale, opacity, final alignment                | GSAP stagger, Anime stagger, CSS vars      | check first/middle/last item timing            |\n| Text subdivision    | Text motion needs readable internal timing     | line/word/char/band wrappers, y/x, opacity, final fit              | SplitText, authored spans, Anime splitText | strip shot plus final readability snapshot     |\n| Surface transform   | Image/card stretches, crops, or changes shape  | parent scale/skew/clip, child counter-scale, transform origin      | GSAP/CSS keyframes                         | no accidental warped final                     |\n| UI state machine    | Interface passes through semantic states       | closed, active, loading, success/error, final                      | GSAP/CSS/Anime                             | snapshots hit states in order                  |\n| DOM depth           | HTML elements need 3D separation               | perspective, z, rotationX/Y, opacity, crossing layer order         | CSS 3D + GSAP/CSS/Anime                    | angled `--shot`; overlap snapshot              |\n| Camera/object 3D    | Canvas/WebGL scene moves in depth              | camera, target, object transform, material opacity                 | Three.js/WebGL + GSAP proxy                | `--ghost`; snapshots at proof poses            |\n| Shader uniform      | Pixel effect is driven by scalar progress      | progress, edge width, noise, color mix, opacity                    | ShaderMaterial/WebGL uniforms              | `--ghost`; snapshot 0/edge/mid/final           |\n| Instanced system    | Many 3D objects move as one system             | instance transforms, scale, color/opacity, camera                  | Three InstancedMesh                        | snapshots, because DOM boxes miss internals    |\n| Imported model      | Model animation must scrub deterministically   | `AnimationMixer.setTime`, camera, material, lights                 | Three AnimationMixer                       | drive from HyperFrames time; `--ghost`         |\n\n## Source Links\n\n- GSAP keyframes: https://gsap.com/resources/keyframes/\n- GSAP timeline: https://gsap.com/docs/v3/GSAP/Timeline/\n- GSAP MotionPathPlugin: https://gsap.com/docs/v3/Plugins/MotionPathPlugin/\n- GSAP Flip: https://gsap.com/docs/v3/Plugins/Flip/\n- GSAP DrawSVGPlugin: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/\n- GSAP MorphSVGPlugin: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/\n- GSAP SplitText: https://gsap.com/docs/v3/Plugins/SplitText/\n- GSAP CSSPlugin: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/\n- Anime.js documentation: https://animejs.com/documentation/\n- Anime.js stagger grid: https://animejs.com/documentation/utilities/stagger/stagger-parameters/stagger-grid/\n- Anime.js timeline: https://animejs.com/documentation/timeline/\n- Anime.js SVG helpers: https://animejs.com/documentation/svg/createmotionpath/\n- MDN CSS animations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations\n- MDN `@keyframes`: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes\n- MDN `clip-path`: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path\n- MDN CSS masking: https://developer.mozilla.org/en-US/docs/Web/CSS/mask\n- MDN perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective\n- MDN transform-style: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style\n- Three.js AnimationMixer: https://threejs.org/docs/#api/en/animation/AnimationMixer\n- Three.js ShaderMaterial: https://threejs.org/docs/#api/en/materials/ShaderMaterial\n- Three.js InstancedMesh: https://threejs.org/docs/#api/en/objects/InstancedMesh\n\nFile v1.0.5:skill-card.md\n\n## Description:\n\nGuides agents to author seek-safe HyperFrames 2D/3D keyframes for zooms, reframes, camera moves, handoffs, masks, SVG motion, text trails, runtime diagnostics, and related animation mechanisms.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[heygen-com](https://clawhub.ai/user/heygen-com)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and video automation agents use this skill to select and author deterministic keyframe mechanisms for HyperFrames compositions, then verify visible motion with HyperFrames diagnostics and snapshots.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill instructs agents to run HyperFrames commands through unpinned npx, which can fetch and execute changing third-party code.\n\nMitigation: Run HyperFrames from a trusted, pinned local dependency or disable npx package downloads, and avoid executing these commands in environments with unnecessary secrets.\n\n## Reference(s):\n\n- [Keyframe Mechanism Reference](references/keyframe-patterns.md)\n- [ClawHub Skill Page](https://clawhub.ai/heygen-com/skills/hyperframes-keyframes)\n- [GSAP Keyframes](https://gsap.com/resources/keyframes/)\n- [GSAP Timeline](https://gsap.com/docs/v3/GSAP/Timeline/)\n- [Anime.js Documentation](https://animejs.com/documentation/)\n- [MDN CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)\n- [Three.js AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer)\n\n## Skill Output:\n\n**Output Type(s):** [Guidance, Code, Shell commands, Configuration]\n\n**Output Format:** [Markdown with inline code and shell commands]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Outputs are intended to be reviewed and verified with HyperFrames diagnostics before rendering or deployment.]\n\n## Skill Version(s):\n\n1.0.5 (source: server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v1.0.5:agents/openai.yaml\n\ninterface:\n  display_name: \"HyperFrames Keyframes\"\n  short_description: \"Author seek-safe video keyframes\"\n  default_prompt: \"Use $hyperframes-keyframes to author seek-safe 2D/3D keyframes and verify them with the CLI.\"\n\nArchive v1.0.4: 5 files, 9096 bytes\n\nFiles: agents/openai.yaml (220b), references/keyframe-patterns.md (6692b), skill-card.md (2716b), SKILL.md (11309b), _meta.json (140b)\n\nFile v1.0.4:SKILL.md\n\n---\nname: hyperframes-keyframes\ndescription: >\n  Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP\n  timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw,\n  text trails, 3D depth, or `hyperframes keyframes` diagnostics.\n  Don't use for broad scene strategy, brand design, media sourcing, captions, or\n  general video planning.\n---\n\n# HyperFrames Keyframes\n\nKeyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels.\n\nUse `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.\n\n## Procedure\n\n1. Identify the animated subject, visible states, final state, and runtime.\n2. Choose the smallest mechanism that proves the prompt. Read `references/keyframe-patterns.md` only if the mechanism is unclear.\n3. Author seek-safe keyframes in the declared runtime. Build synchronously and register the runtime instance.\n4. Verify with `hyperframes lint`, `hyperframes check`, `hyperframes keyframes`, one focused `--shot`, and snapshots at proof times.\n5. If proof fails, fix the source keyframes and rerun the smallest failing diagnostic before rendering.\n\n## Contract\n\n- Name the moving subject.\n- Name the poses needed to prove the intended motion, including the final state.\n- Keyframe visible channels, not hidden helper state.\n- Preserve object identity when continuity matters.\n- Crossfade only when the intended motion is replacement or dissolve.\n- Hold readable or semantic states long enough to see.\n- Final frame is part of the animation, not cleanup.\n- Do not reset to rest unless requested.\n- Do not end on black unless requested.\n- If editing a starter scene, preserve layout, copy, assets, colors, and final state unless asked to redesign.\n\n## Runtime Rules\n\nGSAP:\n\n- build synchronously at page load\n- use `gsap.timeline({ paused: true })`\n- register as `window.__timelines[compositionId]`\n- registry key must match `data-composition-id`\n- do not call `tl.play()` for render-critical motion\n- keep repeats finite\n\nCSS keyframes:\n\n- finite duration and iteration count\n- deterministic delay\n- `animation-fill-mode: both`\n- use `data-start` when timing belongs to a clip\n\nAnime.js:\n\n- create synchronously\n- `autoplay: false`\n- finite duration and loops\n- push every instance to `window.__hfAnime`\n\nWAAPI:\n\n- finite `duration`\n- `fill: \"both\"`\n- deterministic construction\n- the text surface does not list WAAPI; verify with `--shot` (it seeks WAAPI) and snapshots\n\nNever use for render-critical motion:\n\n- `Date.now()`\n- `performance.now()`\n- unseeded `Math.random()`\n- hover/scroll triggers\n- timers\n- async-created timelines\n- unregistered `requestAnimationFrame`\n- infinite loops\n\n## GSAP Skeleton\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst compositionId = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\n\ntl.addLabel(\"state-a\", 0);\ntl.to(\".subject\", {\n  keyframes: [\n    { x: 0, opacity: 1, duration: 0.2 },\n    { x: 120, opacity: 1, duration: 0.4, ease: \"power2.out\" },\n    { x: 100, opacity: 1, duration: 0.2, ease: \"power2.inOut\" },\n  ],\n  ease: \"none\",\n});\n\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[compositionId] = tl;\n```\n\nUse labels for semantic states. Use position parameters instead of chained delays. Use `immediateRender: false` for later `from()`/`fromTo()` tweens touching the same property.\n\n## Keyframe Forms\n\n- Array keyframes: pose ladder with per-step duration/ease.\n- Percentage keyframes: exact timing inside one tween.\n- Property arrays: compact multi-stop changes.\n- `ease: \"none\"` on the parent when each stop carries its own easing.\n- `easeEach` when every segment should share the same feel.\n\nDo not copy numeric distances or timing from examples. Derive them from the actual composition geometry and duration.\n\nFor 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.\n\n## Channels\n\nPrefer 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.\n\nAvoid layout/lifecycle channels: `top/left/right/bottom`, `width/height`, `margin/padding`, `display`, `visibility`, late DOM creation, helper overlays doing subject motion.\n\nFor 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`.\n\n## Mechanism Choice\n\nChoose the smallest mechanism that proves the prompt:\n\n| Need                                  | Mechanism                                          |\n| ------------------------------------- | -------------------------------------------------- |\n| Same subject changes box or hierarchy | shared element / FLIP                              |\n| Subject travels a visible route       | path travel                                        |\n| Stroke grows or traces                | stroke draw                                        |\n| Shape becomes another shape           | shape interpolation                                |\n| Reveal boundary is visible            | clip, mask, or shader uniform                      |\n| Many items move with order            | stagger / indexed delay                            |\n| Text itself moves                     | line, word, character, or band subdivision         |\n| Surface bends, stretches, or crops    | parent/child counter-transform                     |\n| UI has states                         | explicit state machine                             |\n| Scene has depth                       | DOM 3D, Three.js, or WebGL camera/object keyframes |\n\nMechanisms can combine, but each one must clarify the idea. Decoration is not proof.\n\n## Timing\n\n- Anticipation only when it clarifies cause or direction.\n- Acceleration leaves rest.\n- Peak proof shows the mechanism unmistakably.\n- Follow-through sells energy and direction.\n- Overshoot only when the subject should feel elastic or tactile.\n- Constant-speed path travel usually needs `ease: \"none\"`.\n- Discrete UI states usually need a sharp ease-out.\n- Repeated elements need ordered offsets, not identical timing.\n- Final lockups need longer holds than transition poses.\n- Smoothness means continuous velocity on the same subject.\n- Do not overlap tweens that write the same transform property unless the overlap is intentional and verified.\n- 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.\n\n## Text\n\nPreserve 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.\n\n## SVG\n\nFor 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.\n\n## 3D\n\nScale 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.\n\nUse one or two diagnostic angles that expose the depth relationship. If angled proof shows no depth crossing, improve z/camera/occlusion.\n\n## Canvas / WebGL\n\nKeyframe 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.\n\n## CLI Proof\n\n```bash\nnpx hyperframes lint\nnpx hyperframes check\nnpx hyperframes keyframes .\nnpx hyperframes keyframes . --json\nnpx hyperframes keyframes . --runtime all\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --samples <n>\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --layout strip --from <t0> --to <t1>\nnpx hyperframes keyframes . --shot \"<file>\" --ghost --angle <angle>\nnpx hyperframes snapshot . --at <times>\n```\n\nChoose `<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.\n\n| Tool             | Proves                                                                                              |\n| ---------------- | --------------------------------------------------------------------------------------------------- |\n| `keyframes`      | targets, explicit stops, paths, traces, composed parent/child motion, CSS stops, Anime registration |\n| `--shot`         | ghosts, route shape, time spacing, DOM 3D projection, focused selector proof                        |\n| `--layout strip` | in-place motion, overlaps, contact, subtle scale/opacity, text waves                                |\n| `--ghost`        | canvas, WebGL, shader motion, rendered 3D                                                           |\n| `snapshot --at`  | masks, text readability, full state, final lockup, black/reset tails                                |\n\nIf selector proof looks wrong:\n\n1. rerun `--json`\n2. find the actual animated target\n3. shoot that target\n4. snapshot full frames\n5. trust painted pixels over logs\n\n## Diagnostic Reading\n\n`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.\n\nEven ghost spacing means constant speed. Clustered ghosts mean slow-in or settle. Large gaps mean fast travel.\n\nA helper-selector shot is not proof. An onion shot over a broken full frame is not proof.\n\n## Error Handling\n\n| Failure            | Fix                                                                                |\n| ------------------ | ---------------------------------------------------------------------------------- |\n| endpoint-only      | add middle poses, hold peak proof, rerun `--shot`                                  |\n| identity break     | keep one element alive, use shared source/final boxes, remove substitute crossfade |\n| fake 3D            | add z/camera travel, occlusion, angled proof                                       |\n| wrong final        | add final hold, snapshot final-minus-hold and exact final                          |\n| unseekable runtime | pause autoplay, register instance, remove timers, build synchronously              |\n| unreadable text    | preserve line boxes, reduce displacement, add final hold, snapshot text frames     |\n\n## Done\n\nRun `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.\n\nFile v1.0.4:_meta.json\n\n{\n  \"ownerId\": \"kn77d06grj6xqp3dqwkk4bavhn89pegt\",\n  \"slug\": \"hyperframes-keyframes\",\n  \"version\": \"1.0.4\",\n  \"publishedAt\": 1786903382755\n}\n\nFile v1.0.4:references/keyframe-patterns.md\n\n# Keyframe Mechanism Reference\n\nUse this after `SKILL.md` when choosing a concrete implementation mechanism. It is a parts shelf, not a style guide. Start with one primary mechanism; add supporting motion only when it clarifies the idea.\n\n## Runtime Skeletons\n\nGSAP:\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst id = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\ntl.to(\"<selector>\", {\n  keyframes: [\n    /* derive poses from the scene */\n  ],\n  ease: \"none\",\n});\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[id] = tl;\n```\n\nCSS:\n\n```css\n.<subject > {\n  animation: <name> <duration> <ease> both;\n  animation-iteration-count: 1;\n}\n@keyframes <name> {\n  0% {\n    transform: <pose-a>;\n    opacity: <a>;\n  }\n  100% {\n    transform: <pose-b>;\n    opacity: <b>;\n  }\n}\n```\n\nAnime.js:\n\n```js\nconst animation = anime.createTimeline({ autoplay: false });\nanimation.add(\"<selector>\", {\n  /* derived channels */\n});\nwindow.__hfAnime = window.__hfAnime || [];\nwindow.__hfAnime.push(animation);\n```\n\nThree/WebGL:\n\n```js\nconst state = { progress: 0 };\ntl.to(state, {\n  progress: 1,\n  duration: <duration>,\n  onUpdate: () => {\n    // derive camera/object/material values from state.progress\n    renderer.render(scene, camera);\n  },\n});\n```\n\n## Mechanisms\n\n| Mechanism           | Solves                                         | Keyframe                                                           | Runtime                                    | Verify                                         |\n| ------------------- | ---------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------ | ---------------------------------------------- |\n| Path travel         | Subject must visibly follow a route            | path progress, tangent rotation, follower offset, trail opacity    | GSAP MotionPath or sampled x/y/z           | strip shot at bends; final snapshot            |\n| Stroke draw         | A line, ring, or outline appears over time     | dash/draw range, stroke opacity, endpoint state                    | DrawSVG or SVG dash fallback               | partial mid snapshot; complete final           |\n| Shape interpolation | One silhouette becomes another                 | source path, middle path, target path, fill/stroke                 | MorphSVG or path tween                     | first/mid/final snapshots                      |\n| Shared element      | Same subject changes box or hierarchy          | source box, target box, x/y, scale, radius, context opacity        | GSAP Flip or manual FLIP                   | one identity moves; no substitute crossfade    |\n| Clip/mask reveal    | Animated boundary exposes content              | clip path, mask position/size, edge softness, inner counter-motion | CSS, SVG, GSAP, or shader                  | snapshot edge frames and final unclipped state |\n| Ordered repetition  | Many items enter, leave, or transform in order | indexed delay, x/y, scale, opacity, final alignment                | GSAP stagger, Anime stagger, CSS vars      | check first/middle/last item timing            |\n| Text subdivision    | Text motion needs readable internal timing     | line/word/char/band wrappers, y/x, opacity, final fit              | SplitText, authored spans, Anime splitText | strip shot plus final readability snapshot     |\n| Surface transform   | Image/card stretches, crops, or changes shape  | parent scale/skew/clip, child counter-scale, transform origin      | GSAP/CSS keyframes                         | no accidental warped final                     |\n| UI state machine    | Interface passes through semantic states       | closed, active, loading, success/error, final                      | GSAP/CSS/Anime                             | snapshots hit states in order                  |\n| DOM depth           | HTML elements need 3D separation               | perspective, z, rotationX/Y, opacity, crossing layer order         | CSS 3D + GSAP/CSS/Anime                    | angled `--shot`; overlap snapshot              |\n| Camera/object 3D    | Canvas/WebGL scene moves in depth              | camera, target, object transform, material opacity                 | Three.js/WebGL + GSAP proxy                | `--ghost`; snapshots at proof poses            |\n| Shader uniform      | Pixel effect is driven by scalar progress      | progress, edge width, noise, color mix, opacity                    | ShaderMaterial/WebGL uniforms              | `--ghost`; snapshot 0/edge/mid/final           |\n| Instanced system    | Many 3D objects move as one system             | instance transforms, scale, color/opacity, camera                  | Three InstancedMesh                        | snapshots, because DOM boxes miss internals    |\n| Imported model      | Model animation must scrub deterministically   | `AnimationMixer.setTime`, camera, material, lights                 | Three AnimationMixer                       | drive from HyperFrames time; `--ghost`         |\n\n## Source Links\n\n- GSAP keyframes: https://gsap.com/resources/keyframes/\n- GSAP timeline: https://gsap.com/docs/v3/GSAP/Timeline/\n- GSAP MotionPathPlugin: https://gsap.com/docs/v3/Plugins/MotionPathPlugin/\n- GSAP Flip: https://gsap.com/docs/v3/Plugins/Flip/\n- GSAP DrawSVGPlugin: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/\n- GSAP MorphSVGPlugin: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/\n- GSAP SplitText: https://gsap.com/docs/v3/Plugins/SplitText/\n- GSAP CSSPlugin: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/\n- Anime.js documentation: https://animejs.com/documentation/\n- Anime.js stagger grid: https://animejs.com/documentation/utilities/stagger/stagger-parameters/stagger-grid/\n- Anime.js timeline: https://animejs.com/documentation/timeline/\n- Anime.js SVG helpers: https://animejs.com/documentation/svg/createmotionpath/\n- MDN CSS animations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations\n- MDN `@keyframes`: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes\n- MDN `clip-path`: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path\n- MDN CSS masking: https://developer.mozilla.org/en-US/docs/Web/CSS/mask\n- MDN perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective\n- MDN transform-style: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style\n- Three.js AnimationMixer: https://threejs.org/docs/#api/en/animation/AnimationMixer\n- Three.js ShaderMaterial: https://threejs.org/docs/#api/en/materials/ShaderMaterial\n- Three.js InstancedMesh: https://threejs.org/docs/#api/en/objects/InstancedMesh\n\nFile v1.0.4:skill-card.md\n\n## Description:\n\nUse when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[heygen-com](https://clawhub.ai/user/heygen-com)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and video engineers use this skill to author and verify deterministic HyperFrames keyframes for 2D, 3D, SVG, text, mask, path, and timeline-based animation work.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The agent may edit composition keyframes in ways that produce inaccurate, misleading, or poorly seekable animation.\n\nMitigation: Review generated animation code and verify first frame, proof poses, final-minus-hold, and exact final with HyperFrames diagnostics before rendering.\n\nRisk: `npx` diagnostics may invoke local project tooling.\n\nMitigation: Run commands only in trusted project workspaces and review CLI output before accepting final animation changes.\n\nRisk: Animation behavior can become nondeterministic if runtime motion depends on timers, autoplay, random values, or asynchronous timeline construction.\n\nMitigation: Use finite, synchronously registered timelines or animations and avoid Date.now, performance.now, unseeded Math.random, timers, hover or scroll triggers, and infinite loops for render-critical motion.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/heygen-com/skills/hyperframes-keyframes)\n- [Keyframe Mechanism Reference](references/keyframe-patterns.md)\n- [GSAP keyframes](https://gsap.com/resources/keyframes/)\n- [GSAP timeline](https://gsap.com/docs/v3/GSAP/Timeline/)\n- [Anime.js documentation](https://animejs.com/documentation/)\n- [MDN CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)\n- [Three.js AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer)\n\n## Skill Output:\n\n**Output Type(s):** [Code, Shell commands, Configuration instructions, Guidance]\n\n**Output Format:** [Markdown with inline code and shell commands]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Produces seek-safe animation implementation guidance and HyperFrames diagnostic commands for local verification.]\n\n## Skill Version(s):\n\n1.0.4 (source: server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v1.0.4:agents/openai.yaml\n\ninterface:\n  display_name: \"HyperFrames Keyframes\"\n  short_description: \"Author seek-safe video keyframes\"\n  default_prompt: \"Use $hyperframes-keyframes to author seek-safe 2D/3D keyframes and verify them with the CLI.\"\n\nArchive v1.0.3: 5 files, 8971 bytes\n\nFiles: agents/openai.yaml (220b), references/keyframe-patterns.md (6692b), skill-card.md (2623b), SKILL.md (11309b), _meta.json (140b)\n\nFile v1.0.3:SKILL.md\n\n---\nname: hyperframes-keyframes\ndescription: >\n  Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP\n  timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw,\n  text trails, 3D depth, or `hyperframes keyframes` diagnostics.\n  Don't use for broad scene strategy, brand design, media sourcing, captions, or\n  general video planning.\n---\n\n# HyperFrames Keyframes\n\nKeyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels.\n\nUse `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.\n\n## Procedure\n\n1. Identify the animated subject, visible states, final state, and runtime.\n2. Choose the smallest mechanism that proves the prompt. Read `references/keyframe-patterns.md` only if the mechanism is unclear.\n3. Author seek-safe keyframes in the declared runtime. Build synchronously and register the runtime instance.\n4. Verify with `hyperframes lint`, `hyperframes check`, `hyperframes keyframes`, one focused `--shot`, and snapshots at proof times.\n5. If proof fails, fix the source keyframes and rerun the smallest failing diagnostic before rendering.\n\n## Contract\n\n- Name the moving subject.\n- Name the poses needed to prove the intended motion, including the final state.\n- Keyframe visible channels, not hidden helper state.\n- Preserve object identity when continuity matters.\n- Crossfade only when the intended motion is replacement or dissolve.\n- Hold readable or semantic states long enough to see.\n- Final frame is part of the animation, not cleanup.\n- Do not reset to rest unless requested.\n- Do not end on black unless requested.\n- If editing a starter scene, preserve layout, copy, assets, colors, and final state unless asked to redesign.\n\n## Runtime Rules\n\nGSAP:\n\n- build synchronously at page load\n- use `gsap.timeline({ paused: true })`\n- register as `window.__timelines[compositionId]`\n- registry key must match `data-composition-id`\n- do not call `tl.play()` for render-critical motion\n- keep repeats finite\n\nCSS keyframes:\n\n- finite duration and iteration count\n- deterministic delay\n- `animation-fill-mode: both`\n- use `data-start` when timing belongs to a clip\n\nAnime.js:\n\n- create synchronously\n- `autoplay: false`\n- finite duration and loops\n- push every instance to `window.__hfAnime`\n\nWAAPI:\n\n- finite `duration`\n- `fill: \"both\"`\n- deterministic construction\n- the text surface does not list WAAPI; verify with `--shot` (it seeks WAAPI) and snapshots\n\nNever use for render-critical motion:\n\n- `Date.now()`\n- `performance.now()`\n- unseeded `Math.random()`\n- hover/scroll triggers\n- timers\n- async-created timelines\n- unregistered `requestAnimationFrame`\n- infinite loops\n\n## GSAP Skeleton\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst compositionId = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\n\ntl.addLabel(\"state-a\", 0);\ntl.to(\".subject\", {\n  keyframes: [\n    { x: 0, opacity: 1, duration: 0.2 },\n    { x: 120, opacity: 1, duration: 0.4, ease: \"power2.out\" },\n    { x: 100, opacity: 1, duration: 0.2, ease: \"power2.inOut\" },\n  ],\n  ease: \"none\",\n});\n\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[compositionId] = tl;\n```\n\nUse labels for semantic states. Use position parameters instead of chained delays. Use `immediateRender: false` for later `from()`/`fromTo()` tweens touching the same property.\n\n## Keyframe Forms\n\n- Array keyframes: pose ladder with per-step duration/ease.\n- Percentage keyframes: exact timing inside one tween.\n- Property arrays: compact multi-stop changes.\n- `ease: \"none\"` on the parent when each stop carries its own easing.\n- `easeEach` when every segment should share the same feel.\n\nDo not copy numeric distances or timing from examples. Derive them from the actual composition geometry and duration.\n\nFor 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.\n\n## Channels\n\nPrefer 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.\n\nAvoid layout/lifecycle channels: `top/left/right/bottom`, `width/height`, `margin/padding`, `display`, `visibility`, late DOM creation, helper overlays doing subject motion.\n\nFor 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`.\n\n## Mechanism Choice\n\nChoose the smallest mechanism that proves the prompt:\n\n| Need                                  | Mechanism                                          |\n| ------------------------------------- | -------------------------------------------------- |\n| Same subject changes box or hierarchy | shared element / FLIP                              |\n| Subject travels a visible route       | path travel                                        |\n| Stroke grows or traces                | stroke draw                                        |\n| Shape becomes another shape           | shape interpolation                                |\n| Reveal boundary is visible            | clip, mask, or shader uniform                      |\n| Many items move with order            | stagger / indexed delay                            |\n| Text itself moves                     | line, word, character, or band subdivision         |\n| Surface bends, stretches, or crops    | parent/child counter-transform                     |\n| UI has states                         | explicit state machine                             |\n| Scene has depth                       | DOM 3D, Three.js, or WebGL camera/object keyframes |\n\nMechanisms can combine, but each one must clarify the idea. Decoration is not proof.\n\n## Timing\n\n- Anticipation only when it clarifies cause or direction.\n- Acceleration leaves rest.\n- Peak proof shows the mechanism unmistakably.\n- Follow-through sells energy and direction.\n- Overshoot only when the subject should feel elastic or tactile.\n- Constant-speed path travel usually needs `ease: \"none\"`.\n- Discrete UI states usually need a sharp ease-out.\n- Repeated elements need ordered offsets, not identical timing.\n- Final lockups need longer holds than transition poses.\n- Smoothness means continuous velocity on the same subject.\n- Do not overlap tweens that write the same transform property unless the overlap is intentional and verified.\n- 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.\n\n## Text\n\nPreserve 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.\n\n## SVG\n\nFor 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.\n\n## 3D\n\nScale 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.\n\nUse one or two diagnostic angles that expose the depth relationship. If angled proof shows no depth crossing, improve z/camera/occlusion.\n\n## Canvas / WebGL\n\nKeyframe 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.\n\n## CLI Proof\n\n```bash\nnpx hyperframes lint\nnpx hyperframes check\nnpx hyperframes keyframes .\nnpx hyperframes keyframes . --json\nnpx hyperframes keyframes . --runtime all\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --samples <n>\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --layout strip --from <t0> --to <t1>\nnpx hyperframes keyframes . --shot \"<file>\" --ghost --angle <angle>\nnpx hyperframes snapshot . --at <times>\n```\n\nChoose `<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.\n\n| Tool             | Proves                                                                                              |\n| ---------------- | --------------------------------------------------------------------------------------------------- |\n| `keyframes`      | targets, explicit stops, paths, traces, composed parent/child motion, CSS stops, Anime registration |\n| `--shot`         | ghosts, route shape, time spacing, DOM 3D projection, focused selector proof                        |\n| `--layout strip` | in-place motion, overlaps, contact, subtle scale/opacity, text waves                                |\n| `--ghost`        | canvas, WebGL, shader motion, rendered 3D                                                           |\n| `snapshot --at`  | masks, text readability, full state, final lockup, black/reset tails                                |\n\nIf selector proof looks wrong:\n\n1. rerun `--json`\n2. find the actual animated target\n3. shoot that target\n4. snapshot full frames\n5. trust painted pixels over logs\n\n## Diagnostic Reading\n\n`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.\n\nEven ghost spacing means constant speed. Clustered ghosts mean slow-in or settle. Large gaps mean fast travel.\n\nA helper-selector shot is not proof. An onion shot over a broken full frame is not proof.\n\n## Error Handling\n\n| Failure            | Fix                                                                                |\n| ------------------ | ---------------------------------------------------------------------------------- |\n| endpoint-only      | add middle poses, hold peak proof, rerun `--shot`                                  |\n| identity break     | keep one element alive, use shared source/final boxes, remove substitute crossfade |\n| fake 3D            | add z/camera travel, occlusion, angled proof                                       |\n| wrong final        | add final hold, snapshot final-minus-hold and exact final                          |\n| unseekable runtime | pause autoplay, register instance, remove timers, build synchronously              |\n| unreadable text    | preserve line boxes, reduce displacement, add final hold, snapshot text frames     |\n\n## Done\n\nRun `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.\n\nFile v1.0.3:_meta.json\n\n{\n  \"ownerId\": \"kn77d06grj6xqp3dqwkk4bavhn89pegt\",\n  \"slug\": \"hyperframes-keyframes\",\n  \"version\": \"1.0.3\",\n  \"publishedAt\": 1784121758097\n}\n\nFile v1.0.3:references/keyframe-patterns.md\n\n# Keyframe Mechanism Reference\n\nUse this after `SKILL.md` when choosing a concrete implementation mechanism. It is a parts shelf, not a style guide. Start with one primary mechanism; add supporting motion only when it clarifies the idea.\n\n## Runtime Skeletons\n\nGSAP:\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst id = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\ntl.to(\"<selector>\", {\n  keyframes: [\n    /* derive poses from the scene */\n  ],\n  ease: \"none\",\n});\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[id] = tl;\n```\n\nCSS:\n\n```css\n.<subject > {\n  animation: <name> <duration> <ease> both;\n  animation-iteration-count: 1;\n}\n@keyframes <name> {\n  0% {\n    transform: <pose-a>;\n    opacity: <a>;\n  }\n  100% {\n    transform: <pose-b>;\n    opacity: <b>;\n  }\n}\n```\n\nAnime.js:\n\n```js\nconst animation = anime.timeline({ autoplay: false });\nanimation.add({ targets: \"<selector>\" /* derived channels */ });\nwindow.__hfAnime = window.__hfAnime || [];\nwindow.__hfAnime.push(animation);\n```\n\nThree/WebGL:\n\n```js\nconst state = { progress: 0 };\ntl.to(state, {\n  progress: 1,\n  duration: <duration>,\n  onUpdate: () => {\n    // derive camera/object/material values from state.progress\n    renderer.render(scene, camera);\n  },\n});\n```\n\n## Mechanisms\n\n| Mechanism           | Solves                                         | Keyframe                                                           | Runtime                                    | Verify                                         |\n| ------------------- | ---------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------ | ---------------------------------------------- |\n| Path travel         | Subject must visibly follow a route            | path progress, tangent rotation, follower offset, trail opacity    | GSAP MotionPath or sampled x/y/z           | strip shot at bends; final snapshot            |\n| Stroke draw         | A line, ring, or outline appears over time     | dash/draw range, stroke opacity, endpoint state                    | DrawSVG or SVG dash fallback               | partial mid snapshot; complete final           |\n| Shape interpolation | One silhouette becomes another                 | source path, middle path, target path, fill/stroke                 | MorphSVG or path tween                     | first/mid/final snapshots                      |\n| Shared element      | Same subject changes box or hierarchy          | source box, target box, x/y, scale, radius, context opacity        | GSAP Flip or manual FLIP                   | one identity moves; no substitute crossfade    |\n| Clip/mask reveal    | Animated boundary exposes content              | clip path, mask position/size, edge softness, inner counter-motion | CSS, SVG, GSAP, or shader                  | snapshot edge frames and final unclipped state |\n| Ordered repetition  | Many items enter, leave, or transform in order | indexed delay, x/y, scale, opacity, final alignment                | GSAP stagger, Anime stagger, CSS vars      | check first/middle/last item timing            |\n| Text subdivision    | Text motion needs readable internal timing     | line/word/char/band wrappers, y/x, opacity, final fit              | SplitText, authored spans, Anime splitText | strip shot plus final readability snapshot     |\n| Surface transform   | Image/card stretches, crops, or changes shape  | parent scale/skew/clip, child counter-scale, transform origin      | GSAP/CSS keyframes                         | no accidental warped final                     |\n| UI state machine    | Interface passes through semantic states       | closed, active, loading, success/error, final                      | GSAP/CSS/Anime                             | snapshots hit states in order                  |\n| DOM depth           | HTML elements need 3D separation               | perspective, z, rotationX/Y, opacity, crossing layer order         | CSS 3D + GSAP/CSS/Anime                    | angled `--shot`; overlap snapshot              |\n| Camera/object 3D    | Canvas/WebGL scene moves in depth              | camera, target, object transform, material opacity                 | Three.js/WebGL + GSAP proxy                | `--ghost`; snapshots at proof poses            |\n| Shader uniform      | Pixel effect is driven by scalar progress      | progress, edge width, noise, color mix, opacity                    | ShaderMaterial/WebGL uniforms              | `--ghost`; snapshot 0/edge/mid/final           |\n| Instanced system    | Many 3D objects move as one system             | instance transforms, scale, color/opacity, camera                  | Three InstancedMesh                        | snapshots, because DOM boxes miss internals    |\n| Imported model      | Model animation must scrub deterministically   | `AnimationMixer.setTime`, camera, material, lights                 | Three AnimationMixer                       | drive from HyperFrames time; `--ghost`         |\n\n## Source Links\n\n- GSAP keyframes: https://gsap.com/resources/keyframes/\n- GSAP timeline: https://gsap.com/docs/v3/GSAP/Timeline/\n- GSAP MotionPathPlugin: https://gsap.com/docs/v3/Plugins/MotionPathPlugin/\n- GSAP Flip: https://gsap.com/docs/v3/Plugins/Flip/\n- GSAP DrawSVGPlugin: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/\n- GSAP MorphSVGPlugin: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/\n- GSAP SplitText: https://gsap.com/docs/v3/Plugins/SplitText/\n- GSAP CSSPlugin: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/\n- Anime.js documentation: https://animejs.com/documentation/\n- Anime.js stagger grid: https://animejs.com/documentation/utilities/stagger/stagger-parameters/stagger-grid/\n- Anime.js timeline: https://animejs.com/documentation/timeline/\n- Anime.js SVG helpers: https://animejs.com/documentation/svg/createmotionpath/\n- MDN CSS animations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations\n- MDN `@keyframes`: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes\n- MDN `clip-path`: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path\n- MDN CSS masking: https://developer.mozilla.org/en-US/docs/Web/CSS/mask\n- MDN perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective\n- MDN transform-style: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style\n- Three.js AnimationMixer: https://threejs.org/docs/#api/en/animation/AnimationMixer\n- Three.js ShaderMaterial: https://threejs.org/docs/#api/en/materials/ShaderMaterial\n- Three.js InstancedMesh: https://threejs.org/docs/#api/en/objects/InstancedMesh\n\nFile v1.0.3:skill-card.md\n\n## Description: <br>\nUse when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, pat\n\nArchive v1.0.2: 5 files, 8712 bytes\n\nFiles: agents/openai.yaml (220b), references/keyframe-patterns.md (6692b), skill-card.md (2219b), SKILL.md (10951b), _meta.json (140b)\n\nArchive v1.0.1: 5 files, 8758 bytes\n\nFiles: agents/openai.yaml (220b), references/keyframe-patterns.md (6692b), skill-card.md (2457b), SKILL.md (10954b), _meta.json (140b)\n\nArchive v1.0.0: 5 files, 8876 bytes\n\nFiles: agents/openai.yaml (220b), references/keyframe-patterns.md (6692b), skill-card.md (2595b), SKILL.md (10968b), _meta.json (140b)","readmeExcerpt":"Skill: HyperFrames Keyframes Owner: heygen-com Summary: Author seek-safe video keyframes Tags: latest:1.0.8 Version history: v1.0.8 | 2026-10-04T19:18:22.934Z | user Synced from 173103d (main) v1.0.7 | 2026-09-27T21:20:33.868Z | user Synced from ff6e210 (main) v1.0.6 | 2026-09-20T16:23:00.652Z | user Synced from 0c158be (main) v1.0.5 | 2026-08-18T14:18:22.463Z | user Synced from afafca4 (main) v1.0.4 | 2026-08-16T18:","codeSnippets":[],"executableExamples":[{"language":"js","snippet":"const root = document.querySelector(\"[data-composition-id]\");\nconst compositionId = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\n\ntl.addLabel(\"state-a\", 0);\ntl.to(\".subject\", {\n  keyframes: [\n    { x: 0, opacity: 1, duration: 0.2 },\n    { x: 120, opacity: 1, duration: 0.4, ease: \"power2.out\" },\n    { x: 100, opacity: 1, duration: 0.2, ease: \"power2.inOut\" },\n  ],\n  ease: \"none\",\n});\n\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[compositionId] = tl;"},{"language":"bash","snippet":"npx hyperframes check\nnpx hyperframes keyframes .\nnpx hyperframes keyframes . --json\nnpx hyperframes keyframes . --runtime all\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --samples <n>\nnpx hyperframes keyframes . --selector \"<selector>\" --shot \"<file>\" --layout strip --from <t0> --to <t1>\nnpx hyperframes keyframes . --shot \"<file>\" --ghost --angle <angle>\nnpx hyperframes snapshot . --at <times>"},{"language":"js","snippet":"const root = document.querySelector(\"[data-composition-id]\");\nconst id = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\ntl.to(\"<selector>\", {\n  keyframes: [\n    /* derive poses from the scene */\n  ],\n  ease: \"none\",\n});\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[id] = tl;"},{"language":"css","snippet":".<subject > {\n  animation: <name> <duration> <ease> both;\n  animation-iteration-count: 1;\n}\n@keyframes <name> {\n  0% {\n    transform: <pose-a>;\n    opacity: <a>;\n  }\n  100% {\n    transform: <pose-b>;\n    opacity: <b>;\n  }\n}"},{"language":"js","snippet":"const animation = anime.createTimeline({ autoplay: false });\nanimation.add(\"<selector>\", {\n  /* derived channels */\n});\nwindow.__hfAnime = window.__hfAnime || [];\nwindow.__hfAnime.push(animation);"},{"language":"js","snippet":"const state = { progress: 0 };\ntl.to(state, {\n  progress: 1,\n  duration: <duration>,\n  onUpdate: () => {\n    // derive camera/object/material values from state.progress\n    renderer.render(scene, camera);\n  },\n});"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: hyperframes-keyframes\ndescription: >\n  Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe,\n  Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe\n  2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths,\n  masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics.\n  Don't use for broad scene strategy, brand design, media sourcing, captions, or\n  general video planning.\n---\n\n**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.\n\n# HyperFrames Keyframes\n\nKeyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels.\n\nUse `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.\n\n## Creator editing boundary\n\nKeyframes own visual motion, not clip assembly. Source-range hard cuts, trim,\nsplice, and reorder belong to `/hyperframes-core`: author one media element per\nkept range, place it with `data-start` and `data-duration`, and select its source\noffset with `data-media-start`. Adjacent ranges make a hard cut. A crossfade\nuses overlapping clips on different tracks plus visual opacity keyframes; sound\nfades use `/hyperframes-audio`.\n\n| Creator request                         | Truthful mechanism                                                                                                                                                                                                          |\n| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Punch-in / punch-out                    | Keyframe `scale` with `x`/`y` or percentage translation on a non-timed visual/crop wrapper inside the clip. Use a set/short tween for a hard punch and a tween for a smooth move.                                           |\n| Smooth multi-state zoom or reframe      | Keep one subject wrapper alive and author multiple zoom/reframe states as a pose ladder with per-segment easing.                                                                                                            |\n| Pan, reframe, or Ken Burns camera move  | Animate wrapper translation plus scale. Geometry is authored; this is not face tracking or automatic semantic reframing.                                                                                                    |\n| Chained camera moves                    | Chain labeled transform beats on one registered seek-safe timeline.                            "},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn77d06grj6xqp3dqwkk4bavhn89pegt\",\n  \"slug\": \"hyperframes-keyframes\",\n  \"version\": \"1.0.8\",\n  \"publishedAt\": 1791141502934\n}"},{"path":"references/keyframe-patterns.md","content":"# Keyframe Mechanism Reference\n\nUse this after `SKILL.md` when choosing a concrete implementation mechanism. It is a parts shelf, not a style guide. Start with one primary mechanism; add supporting motion only when it clarifies the idea.\n\n## Runtime Skeletons\n\nGSAP:\n\n```js\nconst root = document.querySelector(\"[data-composition-id]\");\nconst id = root.dataset.compositionId;\nconst tl = gsap.timeline({ paused: true });\ntl.to(\"<selector>\", {\n  keyframes: [\n    /* derive poses from the scene */\n  ],\n  ease: \"none\",\n});\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[id] = tl;\n```\n\nCSS:\n\n```css\n.<subject > {\n  animation: <name> <duration> <ease> both;\n  animation-iteration-count: 1;\n}\n@keyframes <name> {\n  0% {\n    transform: <pose-a>;\n    opacity: <a>;\n  }\n  100% {\n    transform: <pose-b>;\n    opacity: <b>;\n  }\n}\n```\n\nAnime.js:\n\n```js\nconst animation = anime.createTimeline({ autoplay: false });\nanimation.add(\"<selector>\", {\n  /* derived channels */\n});\nwindow.__hfAnime = window.__hfAnime || [];\nwindow.__hfAnime.push(animation);\n```\n\nThree/WebGL:\n\n```js\nconst state = { progress: 0 };\ntl.to(state, {\n  progress: 1,\n  duration: <duration>,\n  onUpdate: () => {\n    // derive camera/object/material values from state.progress\n    renderer.render(scene, camera);\n  },\n});\n```\n\n## Mechanisms\n\n| Mechanism           | Solves                                         | Keyframe                                                           | Runtime                                    | Verify                                         |\n| ------------------- | ---------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------ | ---------------------------------------------- |\n| Path travel         | Subject must visibly follow a route            | path progress, tangent rotation, follower offset, trail opacity    | GSAP MotionPath or sampled x/y/z           | strip shot at bends; final snapshot            |\n| Stroke draw         | A line, ring, or outline appears over time     | dash/draw range, stroke opacity, endpoint state                    | DrawSVG or SVG dash fallback               | partial mid snapshot; complete final           |\n| Shape interpolation | One silhouette becomes another                 | source path, middle path, target path, fill/stroke                 | MorphSVG or path tween                     | first/mid/final snapshots                      |\n| Shared element      | Same subject changes box or hierarchy          | source box, target box, x/y, scale, radius, context opacity        | GSAP Flip or manual FLIP                   | one identity moves; no substitute crossfade    |\n| Clip/mask reveal    | Animated boundary exposes content              | clip path, mask position/size, edge softness, inner counter-motion | CSS, SVG, GSAP, or shader                  | snapshot edge frames and final unclipped state |\n| Ordered repetition  | Many item"},{"path":"skill-card.md","content":"## Description:\n\nGuides creators in authoring and verifying seek-safe 2D and 3D keyframe motion for HyperFrames video compositions.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[heygen-com](https://clawhub.ai/user/heygen-com)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nVideo creators and developers use this skill to design zooms, reframes, reveals, and other keyframe motion in HyperFrames compositions and check that the results render consistently at chosen frames.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Unpinned HyperFrames CLI examples may fetch a changed or unreviewed dependency when run in a sensitive project.\n\nMitigation: Review the dependency guidance and use a reviewed, pinned CLI version or a lockfile-managed project dependency.\n\n## Reference(s):\n\n- [HyperFrames Keyframes release](https://clawhub.ai/heygen-com/skills/hyperframes-keyframes)\n- [Keyframe Mechanism Reference](references/keyframe-patterns.md)\n\n## Skill Output:\n\n**Output Type(s):** [Code, Shell commands, Guidance]\n\n**Output Format:** [Markdown with code and command examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Includes guidance for visual checks at key poses and the final frame.]\n\n## Skill Version(s):\n\n1.0.8 (source: server-resolved release)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."},{"path":"agents/openai.yaml","content":"interface:\n  display_name: \"HyperFrames Keyframes\"\n  short_description: \"Author seek-safe video keyframes\"\n  default_prompt: \"Use $hyperframes-keyframes to author seek-safe 2D/3D keyframes and verify them with the CLI.\""}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Author seek-safe video keyframes Skill: HyperFrames Keyframes Owner: heygen-com Summary: Author seek-safe video keyframes Tags: latest:1.0.8 Version history: v1.0.8 | 2026-10-04T19:18:22.934Z | user Synced from 173103d (main) v1.0.7 | 2026-09-27T21:20:33.868Z | user Synced from ff6e210 (main) v1.0.6 | 2026-09-20T16:23:00.652Z | user Synced from 0c158be (main) v1.0.5 | 2026-08-18T14:18:22.463Z | user Synced from afafca4 (main) v1.0.4 | 2026-08-16T18:","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1125,"uniquenessScore":57,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T17:59:58.164Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T17:59:58.164Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T21:38:40.811Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}