MOTION SPECIMEN LIBRARY · 88 SPECIMENS · MIT
Animations
you can take apart.
An open collection of animated effects in pure HTML, CSS, JavaScript and Canvas — text effects, canvas fields, motion — each a specimen you can open, slow down, and make your own.
87
Specimens
5
Techniques
0
Dependencies
MIT
License
REGISTRATION · 16:12
FRAME000000
T0.000s
EASE.22, .61, .36, 1
§ 02
NOW PLAYING
Four specimens, one per technique.
§ 03
THE CATALOG
Five shelves. Eighty-eight specimens & counting.
01 / TEXT
Text Animations
25 specimens
Split · Decrypted · ASCII · Wave · Neon Flicker · Variable Proximity
02 / MOTION
Animations
31 specimens
Click Spark · Laser Flow · Strands · Magnet · Pixel Trail · Crosshair
03 / UI
Components
29 specimens
Theme Switch · Spotlight Grid · Liquid Blob · Morphing Button · Tag Input · Drop Zone
04 / SCENES
Backgrounds
30 specimens
Neon Grid · Orb · Faulty Terminal · Light Rays · Soft Aurora · Pixel Blast · Side Rays
05 / TOOLS
Tools
4 instruments
CSS Grid · Gradient · Glass · Easing
§ 04
FIELD GUIDE
How a specimen works.
Every specimen is presented like lab equipment — framed, labelled, and ready to be taken apart.
STEP 01
Open the stage.
Each component sits inside a framed preview viewport with registration ticks, a live frame counter, and the easing curve plotted alongside it.
STAGE
STEP 02
Slow it down.
Step through frames, swap easing, toggle reduced motion. Read the animation the way you’d read a contact sheet.
SCRUB
STEP 03
Read the source.
Every specimen is one self-contained file — HTML markup, a CSS block, and vanilla JavaScript. No framework, no build step, no dependencies.
ONE FILE
STEP 04
Take it home.
Copy the file, drop it in your project, change the props. No CLI, no install, no lock-in. MIT licensed.
MIT