# Build seek-safe HyperFrames keyframes

Animation can fail when playback is not deterministic or visible poses are unclear. This skill defines keyframes, runtime rules, and diagnostics for reliable HyperFrames motion.

## Install

```bash
npx skillstore add heygen-com/hyperframes-keyframes
```

## Metadata

- Status: approved
- Slug: heygen-com-hyperframes-keyframes
- Skillstore revision: r2
- Version status: missing
- Tree hash: d43d729335b21c91735273ed8936763968a24836f4839a9d43fee78fa3a8c9ad
- Author: heygen-com
- GitHub username: heygen-com
- License: MIT
- Repository: https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-keyframes/
- Ref: 77d0e66fbadeb1f5d1e6a5aada7861240b8ed2d7
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 74
- Public page: https://skillstore.pages.dev/skills/heygen-com-hyperframes-keyframes
- Manifest: https://skillstore.pages.dev/api/skills/heygen-com-hyperframes-keyframes/manifest

## Capabilities

- Defines visible poses and final states for 2D and 3D animation.
- Selects GSAP, CSS, Anime.js, WAAPI, FLIP, SVG, or WebGL mechanisms.
- Provides seek-safe runtime rules for deterministic rendering.
- Guides keyframe timing, path travel, text motion, masks, and depth.
- Recommends focused HyperFrames diagnostics and snapshot checks.

## Use Cases

- Refine product motion: Define visible UI state changes with deterministic timing and a verified final state.
- Implement animation runtime: Choose a seek-safe GSAP, CSS, Anime.js, or WAAPI implementation pattern.
- Verify rendered motion: Plan targeted diagnostics and snapshots for paths, masks, text, and 3D motion.

## Prompt Templates

### Create a simple keyframe plan

```
Create a seek-safe keyframe plan for a card that moves right, settles, and remains visible at the final frame.
```

### Choose an animation mechanism

```
Choose the smallest mechanism for one element moving between two layout boxes. Explain the visible poses and final state.
```

### Make a GSAP timeline seek-safe

```
Review this HyperFrames GSAP animation. List changes needed for synchronous construction, registration, finite playback, and seek-safe rendering.
```

### Design proof for 3D motion

```
Plan keyframes and diagnostics for a WebGL object that crosses depth layers. Include camera poses, proof times, and snapshot checks.
```

## Limitations

- Does not create broad scene strategy, brand direction, or media plans.
- Does not provide complete HyperFrames CLI documentation.
- Requires an existing HyperFrames composition and supported animation runtime.
- Does not guarantee visual quality without reviewing rendered snapshots.

## Best Practices

- Name the moving subject and every visible proof pose before implementation.
- Use finite, synchronous, registered animation instances for render-critical motion.
- Verify first frame, proof poses, final-minus-hold, and exact final with rendered snapshots.

## Anti Patterns

- Do not use timers, unseeded randomness, or uncontrolled playback for render-critical motion.
- Do not replace continuous motion with a crossfade unless replacement is the intended effect.
- Do not treat helper overlays or logs as proof when the rendered frame is incorrect.

## Security Audit

- Audited at: 2026-07-19T11:00:33.423\+00:00
- Summary: All 49 static detections are false positives. The scanner treated Markdown backticks and animation terminology as shell execution or system reconnaissance. The skill documents deterministic animation techniques and HyperFrames diagnostic commands; no prompt injection, data exfiltration, credential access, or malicious intent was found.

## Stats

- Views: 0
- Downloads: 7
- Favorites: 0
- Popularity score: 0