Skill: lucas-kay8/animejs (version 1.0.0)

--- name: animejs description: Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML. --- # 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/


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)