mirror of https://github.com/hanzoai/frames.git synced 2026-09-24 00:08:03 +00:00

Files

T

zooqueen 62bbc7766c skills: give each skill the directory its name declares

Every SKILL.md already declared the new name — name: frames, frames-cli,
frames-core, and so on — but the directories were never moved, so the tree
carried frames-* in content and hyperframes-* on disk. Everything that
resolves a skill by path missed: the core-skill list, the plugin marketplace
pin, and the docs the CLI reads at runtime. Eight tests failed on main because
the files they open do not exist.

The directories now match what the files say they are, and the guide the
claude-design contract reads takes the name that contract already used.

2026-08-13 18:17:24 -07:00

3.2 KiB

Raw Permalink Blame History

name, description

name	description
frames-animejs	Anime.js adapter patterns for Frames. Use when writing Anime.js animations or timelines inside Frames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe Frames HTML.

Anime.js for Frames

Frames can seek Anime.js instances through its animejs runtime adapter. The composition owns the animation objects; Frames 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 Frames time in milliseconds.

Basic Pattern

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

<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():

<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 Frames 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:

npx @hanzo/frames lint
npx @hanzo/frames check

Credits And References

Frames adapter source: packages/core/src/runtime/adapters/animejs.ts.
Anime.js documentation for autoplay, pause(), and seek(): https://animejs.com/documentation/

3.2 KiB Raw Permalink Blame History