Loopkit

Schema-driven SVG animation engine. Under 5KB, zero dependencies. Works with React, SSR, and vanilla JS. Also on npm.

How To Use

npm versionLicense
$ npm install loopkit
import { createAnimation } from "loopkit";

createAnimation(container, schema);
npmGitHubDocs

How It Works

1

Install

npm install loopkit — zero dependencies, under 5KB minified.

2

Write a schema

A plain JS object: set width, height, background, then add elements (rect, circle, text, badge) with style and animate properties.

3

Render

Call createAnimation(container, schema). In React, use a ref in useEffect and call destroy() in the cleanup. For SSR, use renderToString(schema).

FAQ

Lottie renders After Effects animations from JSON exports — powerful but heavy (lottie-web is 250KB+). Loopkit is under 5KB, zero dependencies, and designed for simpler decorative animations: cover art, card graphics, hover effects. You write schemas by hand or generate them programmatically.
Yes. Create the animation in useEffect, pass a ref as the container, and call destroy() in the cleanup function. The schema should be stable (defined outside the component or memoized) to avoid recreating on every render.
Yes. renderToString(schema) outputs SVG markup at the final frame with no DOM required. Use it for static site generation, OG images, or no-JS fallbacks.
Autoplay starts immediately and loops infinitely. Hover renders the final frame on mount, loops while the mouse is over the container, and smoothly settles back to the final frame on mouse leave.
Yes. Use hex strings in [from, to] pairs — the engine detects colors automatically from the # prefix and interpolates in RGB space. Works for fill, color, bg, and any property that accepts hex values.

Built & Maintained by Varstatt

Varstatt is a one-person product studio run by Jurij Tokarski, product engineer since 2011. These tools are free and open — no signup, no catch.