An adapter pattern skill that enables deterministic, seek-driven Anime.js animations and timelines inside HyperFrames compositions.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install animejs
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install animejs using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Anime.js Adapter for HyperFrames?
The Anime.js adapter pattern for HyperFrames allows developers to seamlessly write complex UI animations or timeline sequences that sync perfectly with the HyperFrames internal clock. Instead of executing animations on an unmanaged wall-clock timeline, this skill configures Anime.js to become fully deterministic and seek-driven. By enforcing a strict runtime contract, it guarantees that every animation renders predictably across different frames and environments.
Using this skill ensures proper registration of animation timelines directly within the global execution scope (window.__hfAnime). This is highly valuable when translating standard Anime.js snippets into render-safe HyperFrames HTML, avoiding typical asynchronous pitfalls, and controlling animation states smoothly without broken layout rendering loops.
Anime.js Adapter for HyperFrames Use Cases
- Creating compact SVG and DOM decorative flourishes where Anime.js syntax is cleaner or more lightweight than alternatives.
- Translating existing open-source Anime.js design examples into fully seek-driven and render-safe HyperFrames compositions.
- Managing multiple micro-animations independently by registering them to a single centralized timeline execution array.
- Constructing deterministic, script-driven UI transitions that must synchronize precisely with systemic frame capture clocks.
How Anime.js Adapter for HyperFrames Works
- Initialization: The animation or timeline instance is declared and initialized synchronously while the HTML composition loads.
- Clock Detachment: The instance is explicitly declared with
autoplay: falseto detach it from the browser's native frame clock. - Global Registration: The generated animation reference is pushed to the global
window.__hfAnimeregistry array. - Frame Stepping: The HyperFrames runtime execution engine reads from the registry and issues explicit
instance.seek(timeMs)calls based on its internal millisecond clock counter.
Anime.js Adapter for HyperFrames Setup
To use this pattern, include the Anime.js runtime in your HTML template along with your custom initialization script. After writing or editing your code, run the verification CLI tools:
npx hyperframes lint
npx hyperframes validate
Anime.js Adapter for HyperFrames Data Schema & Taxonomy
Global State Registry
The HyperFrames adapter depends on a global array to track stateful animation instances. Developers must comply with the following taxonomy structure:
| Object Location | Array Element Type | Required Property Hooks | Purpose |
|---|---|---|---|
window.__hfAnime |
Anime.js Instance or Timeline | seek(timeMs), pause() |
Holds references for the adapter to update frame states manually. |
Parameter Rules
- autoplay: Must always be set explicitly to
false. - duration: Must use a defined, finite duration (in milliseconds).
- loops: Infinite loops are prohibited; bounds must be computed from the composition's overall lifetime duration.
Anime.js Adapter for HyperFrames Advanced Features
- ES Module Integration: Fully supports importing modern ES module builds (
https://cdn.jsdelivr.net/npm/animejs/+esm) via theanimatekeyword while maintaining complete compatibility with theseek()runner. - Multi-Instance Registry Hooking: Allows multiple isolated micro-animations, single transitions, and nested timelines to be stacked inside the
window.__hfAnimequeue concurrently. - Deterministic Seeking: Synchronizes third-party animation engines to external system-driven clocks, turning standard canvas or DOM mutations into completely replayable assets.
SKILL.md
Loading
Related Openclaw Skills
Contribute Catalog
A structured workflow skill to author, validate, and submit new HyperFrames registry blocks or components to the public upstream repository.
GSAP Animation for HyperFrames
A comprehensive developer reference for building high-performance, frame-accurate GSAP animations integrated with the HyperFrames video rendering engine.
Dreamina CLI
A local CLI integration that enables AI agents to command Dreamina (即梦) for high-performance image and video generation workflows.
Markdown to PPTX Slides Converter (md-to-slides)
An automated utility to parse structured Markdown documents and compile them into fully editable PPTX presentations.
Ensemble Poster Prompt Generator
An AI coding agent skill that systematically generates structured, high-fidelity prompt frameworks for multi-character ensemble posters from any book, game, or television series.
AI SaaS Demo Script
An AI-powered storyboard and script generator optimized for creating highly engaging, conversion-focused product demo videos for SaaS applications.
Featured*
