stars Open sourceMIT0 dependencies

Hand-drawn motion,
from simple shapes.

Describe a few poses as circles, lines and paths. geomotion morphs between them and re-inks every frame by hand — wobbly strokes, boiling lines, riso-offset fills. Export an animated SVG, a Lottie file, or just share a link.

Open the studio → Browse 30+ animations

one spec · five poses · zero keyframes drawn by hand

How it works

Three steps. No timeline, no tweening by hand.

Describe poses

Each keyframe is a list of shapes. Give the same id to things that should transform into each other.

{ "keyframes": [
  { "shapes": [{ "id": "orb",
      "type": "circle", "r": 240,
      "cx": 600, "cy": 600,
      "fill": "sun" }] },
  { "shapes": [{ "id": "orb",
      "type": "crescent", "r": 240,
      "cx": 560, "cy": 620,
      "fill": "heather" }] }
] }

2
geomotion draws it

Shapes are matched, morphed and redrawn with a living, hand-inked line on every frame.
3
Ship it anywhere

One spec, every format — with or without a background.
- Animated SVG
- Lottie JSON
- HTML page
- Transparent
- Share link
- <iframe>
- <geo-motion>
- PNG frame

Gallery

Start from a preset.

Every animation below is a few lines of JSON. Open it in the studio, change it, export it.

Why geomotion

Made to look drawn, built to be used.

Boiling ink

Lines are redrawn with a fresh wobble every few frames, tapered at the ends — like traced cel animation.

Smart morphing

Shapes are resampled and aligned automatically. Circles become stars, lines curl into loops, dots become hearts.

Riso fills

Soft fills sit slightly off the ink, like a two-colour print. A warm paper palette is built in.

Links, not uploads

The whole animation is compressed into the URL. Share it, embed it in an iframe, edit it in the studio.

Claude-ready

An MCP server and a skill let Claude design, render and share animations for you from a sentence.

Zero dependencies

Plain ES modules that run in the browser and in Node. Deterministic: same spec, same drawing.

Use it

Wherever you work.

Drop the web component on any page. It pauses itself when off-screen.

<script type="module" src="https://hacimertgokhan.github.io/geomotion/src/embed.js"></script>

<geo-motion preset="success" transparent style="width:160px"></geo-motion>
<geo-motion src="./my-animation.json"></geo-motion>
<geo-motion preset="bell" hover></geo-motion>   <!-- plays on hover -->

Or link to a player — play/#preset=sunrise, play/#preset=success&bg=0 (transparent).

Install as a Claude Code plugin (MCP server + skill in one go):

/plugin marketplace add hacimertgokhan/geomotion
/plugin install geomotion@geomotion

…or just the MCP server, in Claude Code or any MCP client:

claude mcp add geomotion -- npx -y github:hacimertgokhan/geomotion mcp

{
  "mcpServers": {
    "geomotion": { "command": "npx", "args": ["-y", "github:hacimertgokhan/geomotion", "mcp"] }
  }
}

Then ask: “Make a transparent loading animation where a paper plane turns into a check mark.” Claude writes the spec, renders SVG + Lottie and hands you a share link.

npx -y github:hacimertgokhan/geomotion list
npx -y github:hacimertgokhan/geomotion render sunrise --both
npx -y github:hacimertgokhan/geomotion render my-spec.json --formats svg,lottie,html --out public/anim
npx -y github:hacimertgokhan/geomotion presets --category interface --transparent
npx -y github:hacimertgokhan/geomotion link my-spec.json

import { render, makeLinks } from 'geomotion';

const anim = render(spec, { transparent: true });
anim.svg;      // animated SVG string
anim.lottie;   // Lottie JSON object
anim.frameSVG(1.5);   // still frame at 1.5s

const { player, studio, embed } = await makeLinks(spec);

Draw your first animation.

Pick a preset, nudge a few numbers, share the link.

Open the studio →Star on GitHub

Hand-drawn motion,from simple shapes.