Frame adapters

A frame adapter is the five-line bridge between an animation library and the HyperFrames seek clock. Most adapters are auto-loaded — they detect the library at runtime, replace its real-time tick with an HF-driven one, and otherwise stay out of your way.

What you'll learn

• The 5-line pattern every adapter follows
• Drop-in adapters for the libraries you probably already use
• How to write a custom adapter for a non-seekable engine

Built-in adapters

The pattern, by library

Every adapter does the same thing: subscribe to hf-seek, push the time into the engine. Tabs below show the exact shape for the libraries you're most likely to use.

import gsap from "gsap";
gsap.ticker.remove(gsap.ticker.tick);
addEventListener("hf-seek", (e) => {
gsap.ticker.tick(e.detail.time);
});

Non-seekable engines

Impulse physics, particle systems, and other state-accumulating engines can't simply jump to time t. They have to replay deterministically from frame 0 each seek, or pre-bake the motion into a sampled buffer.

The common trick is to detect a backwards seek and reset the engine, then advance forward to the current time:

let last = 0;
addEventListener("hf-seek", (e) => {
  if (e.detail.time < last) engine.reset();
  while (last < e.detail.time) {
    engine.step(1 / 60);
    last += 1 / 60;
  }
});

This is slower than a true seekable engine but still deterministic — the same time always yields the same state.

Loading adapters

Adapters are tree-shakable. Import only the ones you use:

import "@hyperframes/adapters/gsap";
import "@hyperframes/adapters/lottie";

Or let the auto-loader handle it by adding <script src="https://cdn.hyperframes.dev/adapters/auto.js"></script> to your composition — it sniffs the page and loads matching adapters on demand.

Next

• Timing & tracks — what hf-seek is and how it fires
• AI agents — let a model pick the adapter for you