Card Stack

A pile of cards stacked in depth — the front one sits proud while the rest fan back; flick it away to deal the next.

A depth-stacked card deck rather than a turntable: the active card sits flat on top, and the cards behind it recede into Z, shrink, tilt back and dim, so the whole thing reads as a neat pile. Advancing deals the top card to the back of the stack; you can grab and fling the front card in either direction to dismiss it, or use arrow buttons, an animated dot indicator, keyboard arrows and autoplay that pauses on hover. It loops forever. Built on CSS 3D transforms with a little JavaScript — no dependencies, no build step — and it honours prefers-reduced-motion.

Open the live, editable demo →

Animshelf
MIT · v1.0

MOTION SPECIMEN LIBRARY · 131 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.

Browse specimens How it works
131
Specimens
5
Techniques
0
Dependencies
MIT
License
SPEC · 001 / SOFT AURORA
CANVAS · 60 FPS · LIVE
REGISTRATION · 16:12
FRAME000000
T0.000s
EASE.22, .61, .36, 1
§ 02
NOW PLAYING

Four specimens, one per technique.

HTML · CSS · JS · CANVAS · WEBGL
Dot Field
CANVAS · 2D
004
Decrypted Text
TEXT · JS
011
Click Spark
JS · rAF
023
Glare Hover
CSS · POINTER
007
§ 03
THE CATALOG

Seven shelves. One hundred and thirty-one specimens & counting.

UPDATED 06 · 2026
01 / TEXT
Text Animations
35 specimens
Split · Decrypted · ASCII · Wave · Neon Flicker · Variable Proximity
02 / MOTION
Animations
51 specimens
Text Scramble · Equalizer · Typewriter · Flip Clock · Pulse Rings · Click Spark · Laser Flow
03 / UI
Components
67 specimens
Segmented · Timeline · Tree View · Pagination · Circular Progress · FAB Menu · Reaction Bar
04 / SCENES
Backgrounds
59 specimens
Mandelbrot · Synthwave Grid · Spiral Galaxy · Fire · Honeycomb · Bokeh · Warp Speed · Julia Set
05 / TOOLS
Tools
7 instruments
CSS Grid · Gradient · Glass · Easing · Color Palette · Box Shadow · SVG Blob
06 / BLOCKS
UI Blocks
Hero Sections
Drop-in sections — starting with heroes
07 / LOADING
Skeleton
18 specimens
Shimmer placeholders — card, list, product, table, article, chat, profile, dashboard, media & gallery
§ 04
FIELD GUIDE

How a specimen works.

FOUR STEPS

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