A visual editor for CSS keyframe animations — built with the timeline and property panels of a video editor, not a form. Design an animation by dragging keyframes and properties, drop into hand-written CSS or JSON when you need to, and export straight to CSS, SCSS, Tailwind, React, or Framer Motion. Publish animations to a community catalog and pull others' work straight into your own editor.
- Visual keyframe editor — a draggable timeline, snap-to-grid, and a property panel covering transforms (2D and 3D), filters, shadows, text properties, and color, each independently toggleable per keyframe.
- 100+ built-in presets, searchable and categorized.
- Loop controls — finite repeat counts, a loop delay (a real pause between passes, not just a visual gap), and one-click ping-pong.
- A real code editor — hand-write CSS keyframes or the full animation as JSON, with syntax highlighting, auto-indent, and live error checking, and test it immediately against the same preview.
- Multi-format export — CSS, SCSS, Tailwind (v3 and v4), React, Framer Motion, and JSON, all generated from one animation model so they never drift from each other.
- Community catalog — publish, browse, like, and remix animations other people have published, each shown as a live-previewing card.
- Shareable links — the entire animation state compresses into the URL itself; no account or server round-trip needed to share one.
- Resizable, persistent layout, light/dark/system theming with an adjustable accent color, and a fully responsive mobile layout.
npm install
npm run devOpen the URL it prints. The community catalog is optional and works fine
left unconfigured — see docs/SUPABASE_SETUP.md
if you want to enable it.
docs/DEPLOY.md— generic self-hosting guide: build, run under PM2 (or systemd), put any reverse proxy or tunnel — including Cloudflare Tunnel — in front of it.docs/AUTOUPDATE.md— a GitHub Webhook listener that pulls, rebuilds, and restarts the app automatically on every push, so you don't have to redeploy by hand after every commit.docs/SUPABASE_SETUP.md— enabling the community catalog.
docs/USER_GUIDE.md covers every feature in detail —
timing controls, the timeline, every animatable property, presets, the
code editor, export formats, settings, sharing, and the catalog.
- TanStack Start (React, file-based routing, server rendering) on Vite
- Tailwind CSS v4 + shadcn/ui
- CodeMirror 6 for the code editor
- Supabase (Postgres + auth) for the community catalog
- Ships as a plain Node server — no framework lock-in for hosting
src/
components/ UI components (Timeline, KeyframeEditor, Preview,
PresetsPanel, ExportPanel, CodeEditor, Catalog/*, ui/*)
contexts/ SettingsContext (appearance/editor prefs, panel sizes),
AuthContext (catalog auth)
exporters/ One file per export format, all built on css.ts
lib/ Small standalone helpers (easings, theming, the
catalog API client, schema validation)
presets/ Built-in animation presets
routes/ File-based routes (/. /catalog, /catalog/$id)
types/ Shared TypeScript types
supabase/
schema.sql Full catalog database schema (RLS included)
scripts/ Autoupdate script + GitHub webhook listener
deploy/ PM2 process config (app + webhook listener)
docs/ Everything linked above
See docs/CONTRIBUTING.md — local setup, the
checks CI runs, and code style expectations.
GPL-3.0. You're free to use, modify, and redistribute this
project under those terms. In short: if you distribute this software or a
modified version of it — conveying copies to others — those copies must
stay under GPL-3.0 too, with source available. Simply running a modified
copy as a hosted service that people use over the network is generally
not considered "distribution" under plain GPL-3.0 (that's the specific
distinction AGPL-3.0 adds, and this project doesn't use AGPL). This is a
plain-language summary, not legal advice — read LICENSE for
the actual terms, and check with a lawyer if the distinction matters for
your situation.