An open-source CSS animation library with a live preview grid, creator suite, and community submissions

An open-source CSS animation library with a live preview grid, creator suite, and community submissions



Tópico: An open-source CSS animation library with a live preview grid, creator suite, and community submissions
Categoria: Tutoriais | Programação & Tecnologia
Idioma Principal: Português (Conteúdo de Tecnologia)

Descrição do Conteúdo / Informações:
-------------------------------------------------------------------------
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 keyframes and animation keys

• 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 👇