Loopkit

Lightweight, zero-dependency SVG animation engine. Define animations as plain JS objects, get smooth requestAnimationFrame-driven playback. Built as a Lottie alternative for short decorative animations.

$ npm install loopkit

Playground

Pick an example or edit the schema JSON below. The animation updates in real-time.

{
  "width": 460,
  "height": 280,
  "background": "#fef9c3",
  "stagger": 0.3,
  "trigger": "autoplay",
  "hold": 2,
  "elements": [
    {
      "type": "rect",
      "style": {
        "x": 97,
        "y": 145,
        "width": 55,
        "height": 70,
        "fill": "#fbbf24",
        "rx": 8,
        "opacity": 0.4
      },
      "animate": {
        "height": [
          0,
          70
        ],
        "y": [
          215,
          145
        ],
        "opacity": [
          0,
          0.4
        ],
        "sequence": 0,
        "duration": 0.5,
        "easing": "ease-out"
      }
    },
    {
      "type": "rect",
      "style": {
        "x": 167,
        "y": 105,
        "width": 55,
        "height": 110,
        "fill": "#f59e0b",
        "rx": 8,
        "opacity": 0.45
      },
      "animate": {
        "height": [
          0,
          110
        ],
        "y": [
          215,
          105
        ],
        "opacity": [
          0,
          0.45
        ],
        "sequence": 1,
        "duration": 0.5,
        "easing": "ease-out"
      }
    },
    {
      "type": "rect",
      "style": {
        "x": 237,
        "y": 65,
        "width": 55,
        "height": 150,
        "fill": "#d97706",
        "rx": 8,
        "opacity": 0.5
      },
      "animate": {
        "height": [
          0,
          150
        ],
        "y": [
          215,
          65
        ],
        "opacity": [
          0,
          0.5
        ],
        "sequence": 2,
        "duration": 0.5,
        "easing": "ease-out"
      }
    },
    {
      "type": "rect",
      "style": {
        "x": 307,
        "y": 120,
        "width": 55,
        "height": 95,
        "fill": "#b45309",
        "rx": 8,
        "opacity": 0.4
      },
      "animate": {
        "height": [
          0,
          95
        ],
        "y": [
          215,
          120
        ],
        "opacity": [
          0,
          0.4
        ],
        "sequence": 3,
        "duration": 0.5,
        "easing": "ease-out"
      }
    }
  ]
}

Quick Start

import { createAnimation } from 'loopkit';

const anim = createAnimation(document.getElementById('cover'), {
  width: 460,
  height: 280,
  background: '#f0fdf4',
  stagger: 0.3,
  trigger: 'autoplay',
  hold: 2,
  elements: [
    {
      type: 'rect',
      style: { x: 40, y: 40, width: 200, height: 80, fill: '#34d399', rx: 8 },
      animate: {
        width: [0, 200],
        opacity: [0, 1],
        sequence: 0,
        duration: 0.6,
        easing: 'ease-out',
      },
    },
  ],
});

Element Types

rect

Rectangles, lines, bars, progress indicators. Supports rx for rounded corners.

text

SVG text with fontSize, color, fontWeight, textAnchor. Color maps to fill.

circle

Circles with cx, cy, r. Supports scale animation that multiplies the radius.

badge

Composite element: shape + centered text. Circle or pill (isLabel). Scale animates the group.

Features

Schema in, animation out

Declarative JSON schema defines elements and keyframes. No imperative animation code.

Zero dependencies

Pure TypeScript, under 5KB minified. No React, no framework lock-in.

Smooth transitions

Starts at final frame, fades out before restarting, settles smoothly on hover leave.

Two trigger modes

Autoplay loops infinitely. Hover loops while hovered, settles on leave.

SSR support

renderToString() outputs SVG at final frame. No DOM needed.

Color interpolation

Hex color animation with RGB lerp. Detected automatically from # prefix.

React Integration

import { createAnimation } from 'loopkit';
import { useEffect, useRef } from 'react';

function AnimatedCover({ schema }) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    const anim = createAnimation(ref.current, schema);
    return () => anim.destroy();
  }, [schema]);

  return <div ref={ref} className="w-full aspect-3/2" />;
}

How It Works

Define a schema

Write a plain JS/JSON object with canvas dimensions, element types (rect, text, circle, badge), and animation keyframes.

Mount with createAnimation()

Pass a DOM container and your schema. The engine creates an SVG, applies the final frame immediately (no flash), and starts playback.

Control playback

Use play(), pause(), reset(), settle(), and destroy() to control the animation lifecycle. Trigger modes handle autoplay and hover automatically.

Schema-Driven SVG Animation

Loopkit follows a declarative model: you define what elements look like and how they animate, the engine handles rendering and timing. Each element has a style (resting state) and an optional animate config with [from, to] keyframe pairs. The engine interpolates between values using requestAnimationFrame.

4 element types: rect, text, circle, badge (composite with centered text)
Sequence + stagger timing: delay = sequence × stagger, auto-computed per element
4 easing functions: linear, ease-in, ease-out, ease-in-out
Hex color interpolation with automatic detection from # prefix
Smooth cycle transitions: fade-out → animate forward → hold → loop

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.