JavaScript animation libraries are heavy. GSAP, Framer Motion, anime.js - all runtime weight
for something CSS can handle natively, faster, and on the GPU.
So I built CSSFrames. A curated motion preset library built entirely on pure CSS keyframes.
Browse, preview, export, and ship — no JS runtime, no layout thrashing, no dropped frames.
Live at cssframes.vercel.app - open source, MIT licensed.
Why pure CSS?
Every preset runs on transform and opacity only - the two properties browsers composite
on the GPU. Zero layout shifts. Zero paint recalculations. Drop a class, the animation runs.
No framework required.
What you get
** Live preview grid** — every preset previews on real UI elements: buttons, cards,
loaders, icons. Hit Theater Mode to focus on one animation full-screen.
** Creator Suite** — Monaco-powered editor to build your own keyframes.
Set duration, easing, preview live, export instantly.
** One-click export** — every animation exports as:
- Raw CSS
@keyframes+ class - Tailwind config block with
keyframesandanimationkeys - Duration and easing metadata
** Community grid** — submit your own presets. Browse animations from other developers.
Submissions persist via a REST API on Railway so they survive reloads and are live for every user.
Animation categories
Buttons · Loaders · Entrances · Text · Cards · Icons · Shapes
Shimmer sweeps, typewriter effects, morphing blobs, staggered reveals, glitch systems,
pulse rings, stroke-draw icons — all GPU-composited, all pure CSS.
Tech stack
React + Vite · Tailwind CSS · Monaco Editor · Prism.js · Express.js (community API) ·
Railway (backend) · Vercel (frontend)
Run it locally
git clone https://github.com/byllzz/cssframes.git
cd cssframes && npm install && npm run dev
For the community API:
cd server && npm install && npm start
Add VITE_API_URL=http://localhost:3001 to your .env.
If CSSFrames helped you ship smoother UI without adding an animation library to your bundle -
a ⭐ on the GitHub repo means a lot.
Drop your favourite preset in the comments 👇
Top comments (0)