Animejs
Wire Anime.js animations into HeyGen HyperFrames so every frame is seek-driven, autoplay-off, and registered on `window.__hfAnime` for deterministic video renders.
Overview
Anime.js for HyperFrames is an agent skill for the Build phase that teaches seek-driven, autoplay-off Anime.js patterns registered on `window.__hfAnime` for deterministic HyperFrames renders.
Install
npx skills add https://github.com/heygen-com/hyperframes --skill animejsWhat is this skill?
- Documents HyperFrames `animejs` runtime contract: synchronous init, `autoplay: false`, finite durations/loops
- Requires registering every animation/timeline on `window.__hfAnime` for adapter `seek(timeMs)` control
- Includes basic single-animation and `anime.timeline` patterns with CDN-loaded Anime.js 4.x
- Forbids wall-clock callbacks, unseeded randomness, and self-running clocks that break frame-accurate seeks
- Translates common Anime.js examples into render-safe HyperFrames HTML
- Anime.js 4.0.2 CDN example pattern documented
- Adapter seeks via instance.seek(timeMs) in milliseconds
Adoption & trust: 62.3k installs on skills.sh; 25.6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Anime.js motion looks right in the browser but desyncs or auto-plays when HyperFrames seeks frames for export.
Who is it for?
Builders authoring HyperFrames layers with 2D DOM motion who already know Anime.js basics and need export-safe integration.
Skip if: General web apps that rely on real-time autoplay, rAF-driven loops, or animations not rendered through HyperFrames.
When should I use this skill?
Writing Anime.js animations or timelines inside HyperFrames compositions, registering on window.__hfAnime, or translating Anime.js examples into render-safe HTML.
What do I get? / Deliverables
You get composition HTML where Anime.js timelines are fully controlled by HyperFrames time via registered instances and safe initialization patterns.
- HyperFrames-ready HTML/JS with __hfAnime registrations
- Seek-safe single animations and timelines
Recommended Skills
Journey fit
HyperFrames compositions are built as render-ready HTML/JS layers; Anime.js adapter work is frontend motion inside that build step. Targets DOM/CSS animation timelines and easing inside composition markup—not backend APIs or deploy pipelines.
How it compares
Adapter contract for frame-accurate video layers—not standalone Anime.js tutorials or CSS-only motion.
Common Questions / FAQ
Who is animejs for?
Solo builders and designers using HeyGen HyperFrames who animate HTML layers with Anime.js and must match a master render clock.
When should I use animejs?
During Build when writing HyperFrames compositions, converting Anime.js examples to `autoplay: false` timelines, or fixing seek drift on export.
Is animejs safe to install?
Review the Security Audits panel on this Prism page and inspect the skill package before granting agent filesystem or network access in your repo.
SKILL.md
READMESKILL.md - Animejs
# Anime.js for HyperFrames HyperFrames can seek Anime.js instances through its `animejs` runtime adapter. The composition owns the animation objects; HyperFrames owns the clock. ## Contract - Create animations or timelines synchronously during composition initialization. - Set `autoplay: false` so Anime.js does not advance on its own clock. - Register every returned animation or timeline on `window.__hfAnime`. - Use finite durations and loop counts. - Avoid callbacks that mutate DOM based on wall-clock time, network state, or unseeded randomness. The adapter seeks every registered instance with `instance.seek(timeMs)`, where `timeMs` is HyperFrames time in milliseconds. ## Basic Pattern ```html <script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script> <script> const anim = anime({ targets: ".mark", translateX: 280, rotate: "1turn", opacity: [0, 1], duration: 1200, easing: "easeOutExpo", autoplay: false, }); window.__hfAnime = window.__hfAnime || []; window.__hfAnime.push(anim); </script> ``` ## Timeline Pattern ```html <script> const tl = anime.timeline({ autoplay: false, easing: "easeOutCubic", }); tl.add({ targets: ".title", translateY: [40, 0], opacity: [0, 1], duration: 650, }).add( { targets: ".accent", scaleX: [0, 1], duration: 450, }, 250, ); window.__hfAnime = window.__hfAnime || []; window.__hfAnime.push(tl); </script> ``` ## Module Builds If you use an ES module build, the adapter does not care how the instance was created. It only needs the returned object to expose `seek()`, `pause()`, and preferably `play()`: ```html <script type="module"> import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm"; const anim = animate(".chip", { x: "18rem", duration: 900, autoplay: false, }); window.__hfAnime = window.__hfAnime || []; window.__hfAnime.push(anim); </script> ``` ## Good Uses - Small SVG and DOM flourishes where Anime.js syntax is compact. - Imported Anime.js examples that can be made seek-driven. - Multiple independent micro-animations pushed into the same registry. Use GSAP for complex scene sequencing unless the user specifically asks for Anime.js. GSAP is still the primary HyperFrames authoring path. ## Avoid - Leaving `autoplay` at the Anime.js default. - Depending on `anime.running` auto-discovery instead of explicit `window.__hfAnime.push(...)`. - Infinite loops. Compute a finite repeat count from the composition duration. - Building animations in timers, promises, event handlers, or after async asset loads. ## Validation After editing a composition that uses Anime.js: ```bash npx hyperframes lint npx hyperframes validate ``` ## Credits And References - HyperFrames adapter source: `packages/core/src/runtime/adapters/animejs.ts`. - Anime.js documentation for `autoplay`, `pause()`, and `seek()`: https://animejs.com/documentation/