Animated Spinner

Preview

animate-spin is just a @keyframes rule under the hood — Takumi runs it the same as any CSS animation. Render a 1-second loop via renderAnimation() and you get a self-contained spinner WebP with no JS runtime needed on the consumer side.

import { Renderer } from "takumi-js/node";
import { fromJsx } from "takumi-js/helpers/jsx";

const renderer = new Renderer();

const { node, stylesheets } = await fromJsx(
  <div tw="flex w-full h-full items-center justify-center bg-slate-900">
    <div
      tw="w-24 h-24 rounded-full border-8 border-slate-700 animate-spin"
      style={{ borderTopColor: "#6366f1" }}
    />
  </div>,
);

const buf = await renderer.renderAnimation({
  width: 200,
  height: 200,
  fps: 30,
  format: "webp",
  stylesheets,
  scenes: [{ durationMs: 1000, node }],
});

See Animations for the full keyframe / timing-function API.