# Create Deterministic WAAPI Motion

Native browser animations can drift in HyperFrames when timing is not deterministic. This skill shows WAAPI patterns for seekable, paused, finite animations.

## Install

```bash
npx skillstore add heygen-com/waapi
```

## Metadata

- Status: approved
- Slug: heygen-com-waapi
- Skillstore revision: r1
- Version status: missing
- Tree hash: 53e0e19bf2b2934e30925e80f5d424e4015da56355e6b3e9b63e2f48150edfb5
- Author: heygen-com
- GitHub username: heygen-com
- License: MIT
- Repository: https://github.com/heygen-com/hyperframes/tree/main/skills/waapi/
- Ref: a06681402992ceae98ba04d54cfd4ab004862696
- 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, network
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/heygen-com-waapi
- Manifest: https://skillstore.pages.dev/api/skills/heygen-com-waapi/manifest

## Capabilities

- Explains the HyperFrames WAAPI adapter contract for deterministic animation seeking.
- Shows how to create finite element.animate animations with fill: both.
- Demonstrates basic and staggered animation patterns for DOM elements.
- Describes how document.getAnimations and currentTime support timeline seeking.
- Lists animation patterns to avoid in render-critical HyperFrames compositions.

## Use Cases

- Build Seekable DOM Motion: Create browser-native animations that HyperFrames can seek by setting currentTime during render.
- Convert Motion Specs: Turn structured timing and keyframe requirements into finite WAAPI animations with predictable delays.
- Review Animation Reliability: Check HyperFrames compositions for timing choices that may break deterministic rendering.

## Prompt Templates

### Create a Basic WAAPI Animation

```
Use this skill to create a HyperFrames WAAPI animation for one DOM element. Keep timing finite and seekable.
```

### Add Staggered Motion

```
Use this skill to add staggered WAAPI motion to a list of tokens. Use delay, fill: both, and paused animations.
```

### Audit Timing Choices

```
Review my HyperFrames WAAPI composition. Identify any infinite iterations, separate clocks, callbacks, or layout animation risks.
```

### Design a Full Timeline

```
Use this skill to plan a multi-clip WAAPI timeline. Model clip offsets with delays and explain validation steps.
```

## Limitations

- It is documentation only and does not install HyperFrames or browser dependencies.
- It assumes the target browser supports the Web Animations API.
- It does not cover GSAP, CSS keyframes, or canvas animation systems.
- It does not validate a composition without running separate project tooling.

## Best Practices

- Create WAAPI animations synchronously during composition initialization.
- Use finite durations, finite iterations, and fill: both for seekable states.
- Pause animations after creation so HyperFrames controls the timeline.

## Anti Patterns

- Do not use infinite iterations for render-critical animations.
- Do not mutate render-critical DOM from animation.finished callbacks.
- Do not run separate animation clocks with timers or requestAnimationFrame.

## Security Audit

- Audited at: 2026-07-06T15:03:47.576\+00:00
- Summary: The static command findings are Markdown backticks, code fences, and WAAPI browser examples, not executable Ruby or shell code. The network findings are MDN documentation links, and the blocker findings are benign animation guidance. No prompt injection, exfiltration intent, or malicious behavior was found in SKILL.md.

## Stats

- Views: 54
- Downloads: 5
- Favorites: 0
- Popularity score: 0