Magic Rings II

A glowing ripple — concentric arcs that break from near-full circles into smaller pieces as they travel outward.

Large circles centred on the stage, so only their left and right limbs show as twin glowing arcs. Each ring is cut away around the top and bottom; the cut grows outward, so the inner arcs read almost full and the outer ones shatter into small bright pieces. The whole field drifts outward and fades like a ripple in water, colour interpolating from one hue to a second across the rings. A self-contained Canvas recreation of the reactbits “Magic Rings” look — colour ramp, ring count, gap, glow, thickness and speed all live.

Open the live, editable demo →

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

§ 03

THE CATALOG

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

UPDATED 06 · 2026

Text Animations

Split · Decrypted · ASCII · Wave · Neon Flicker · Variable Proximity

Text Scramble · Equalizer · Typewriter · Flip Clock · Pulse Rings · Click Spark · Laser Flow

Segmented · Timeline · Tree View · Pagination · Circular Progress · FAB Menu · Reaction Bar

Mandelbrot · Synthwave Grid · Spiral Galaxy · Fire · Honeycomb · Bokeh · Warp Speed · Julia Set

CSS Grid · Gradient · Glass · Easing · Color Palette · Box Shadow · SVG Blob

Drop-in sections — starting with heroes

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