Open-source motion library · 86+ specimens · MIT
Animations you can take apart, free forever.
Animshelf is an open collection of animated effects, UI components, backgrounds and CSS tools — written in pure HTML, CSS, JavaScript and Canvas. Open any specimen, slow it down, read the source, and make it your own. Everything is free to use and free to edit. No build step, no dependencies, no signup.
A workshop for web motion — open on the bench, ready to be taken apart.
Most animation libraries hand you a black box: install a package, call a function, hope it fits. Animshelf does the opposite. Every effect is presented like a lab specimen — framed in a live preview, labelled, and accompanied by the exact HTML, CSS and JavaScript that makes it work. You can scrub the timing, swap the easing, toggle reduced motion, and watch the animation frame by frame.
Because each specimen is a single self-contained file with zero dependencies and no build step, taking one home is as simple as copy and paste. Drop it into any project — a static site, a React app, a landing page — change the props, and it just works. Animshelf is free to use and free to edit, today and forever, under the permissive MIT license.
Read the source
One file of HTML, CSS and JavaScript per specimen — no framework, no bundler, nothing hidden. What you see is what you ship.
Free & MIT licensed
Use it in personal and commercial work at no cost. Edit it, restyle it, remix it — attribution appreciated, never required.
Tweak everything live
Props panels, timing scrubbers and easing curves let you dial in the exact feel before you copy a single line of code.
Reduced-motion safe
Every specimen respects prefers-reduced-motion, so the motion you ship is accessible by default.
Real CSS tools
Generators for grids, gradients, glassmorphism and cubic-bézier easing — draw it, copy the code, paste it in.
Grown by the community
Anyone can submit new animations, components, backgrounds and tools — and every contributor is credited by name.
Free to use. Free to edit. Yours to keep.
Everything on Animshelf — every animation, component, background and tool — is completely free. Copy the code into any project, change it however you like, ship it to paying clients. There is no paywall, no premium tier, no signup wall, and no attribution requirement. It is open source under the MIT license, and it will stay that way.
A catalog you can open, read, and lift straight into your project.
Text Animations
25 specimens — split text, decrypted text, ASCII, wave, neon flicker, variable proximity and more, all driven by readable vanilla JavaScript.
Animations
30 specimens — click sparks, laser flow, magnetic cursors, pixel trails, ribbons and metaballs, in Canvas and pure CSS.
Components
28 specimens — theme switches, spotlight grids, liquid blobs, morphing buttons, tag inputs and drop zones, ready to drop in.
Backgrounds
30 specimens — aurora, plasma, silk, light rays, neon grids, the WebGL Strata contour field and the new Magic Rings ripple. Subtle scenes for any hero.
Tools
4 interactive CSS generators — a CSS Grid Generator, a Gradient Generator, a Glassmorphism builder and a cubic-bézier Easing Editor. Draw what you want, copy the code, paste it in.
Reactions from people building with Animshelf.
Designers, indie hackers and engineers reach for Animshelf because it is fast, readable and free. Here is a fresh wall of reactions — it reshuffles every time you load the page.
The community keeps Animshelf growing — and gets the credit.
Featured contributor
—
—
—
Anyone can add to Animshelf. Built a slick text effect, a canvas field, a handy component or a new CSS tool? Submit it. Once it is merged it joins the catalog as a first-class specimen — open, editable and free for everyone.
And contributors are never buried in a changelog. Your name is shown prominently on the specimen you build and in the contributor wall below, so the work you give away still carries your signature.