# Specimens

> A growing catalogue of live web interaction effects (animations, transitions, physics, generative graphics, type and interface details) in plain HTML, CSS and JavaScript, with no libraries. Every specimen is one self-contained HTML file, free to copy under the Unlicense or MIT-0, with no credit needed.

Each link below is a specimen's complete source: one HTML file that runs on its own when opened, and can be copied whole into a project. Read agents.md before adapting one.

- [Instructions for AI agents](https://specimens.llmvuln.xyz/agents.md): how to find a specimen, fetch it and adapt it
- [Catalogue as JSON](https://specimens.llmvuln.xyz/specimens.json): every specimen with its technique, inputs, description, details and source URL

## Depth & light

Perspective, layers and light: flat screens pretending to have a third dimension.

- [Ridgeline parallax](https://specimens.llmvuln.xyz/s/parallax): Clip-path layers. Seven mountain ridges stacked by depth. Near ridges travel farther than distant ones, so the scene reads as three-dimensional with no 3D engine at all.
- [Holographic foil card](https://specimens.llmvuln.xyz/s/foil): Blend modes. A trading card that tilts toward your pointer on a damped spring. A rainbow foil and a glare highlight slide across it through blend modes, so the shine follows the light.
- [Carousel ring](https://specimens.llmvuln.xyz/s/carousel): Preserve-3d ring. Twelve month calendars for 2026 stand on a ring in 3D space, with today marked in blue. Drag to spin it; it coasts with friction and snaps to the nearest panel. Left alone for a few seconds, it turns slowly on its own.
- [Point sphere](https://specimens.llmvuln.xyz/s/sphere): Projection. Nine hundred points spread evenly over a sphere with the golden-angle spiral, rotated and projected with plain trigonometry. Nearer points grow larger and brighter, and your pointer raises a bulge on the side facing you.
- [Extruded type](https://specimens.llmvuln.xyz/s/extrude): Stacked slices. A word built from 28 copies of itself, each pushed 1.6 px further back in 3D space and shaded darker. Together they read as a solid block of type that turns toward your pointer.
- [Layer explode](https://specimens.llmvuln.xyz/s/explode): Exploded view. A notification card pulled apart into the five layers it is built from, like an exploded technical drawing. One spring drives the separation, the isometric turn and the labels.
- [Halftone light](https://specimens.llmvuln.xyz/s/halftone): Lambert shading. A raised word printed in halftone dots. Each dot's size is a base that shows the letters, plus how much light its patch of slope catches, so the sides facing the lamp lighten and the far sides fall into shadow.
- [Paper fold](https://specimens.llmvuln.xyz/s/fold): Hinged panels. A letter folded in thirds. Unfolding, the top flap leads and the bottom follows; folding, the order reverses. Each flap darkens as it turns away from the light.
- [Focus pull](https://specimens.llmvuln.xyz/s/focus): Depth of field. Eleven cards stand at different depths, and each one blurs by how far it sits from the focal plane, like a wide-open lens. A spring racks focus from card to card with a slight lag, the way a focus puller turns the wheel.
- [Rolling die](https://specimens.llmvuln.xyz/s/die): Edge pivot. A die tips over its bottom edge one square at a time, a quarter turn about that edge. Its orientation is kept as a rotation matrix, so the pips facing up always agree with the way it rolled.
- [Shadow casting](https://specimens.llmvuln.xyz/s/shadows): Visibility polygon. A lamp over a floor of blocks. Rays go out to every block corner and stop at the first wall they hit; joined in order, the hits outline everything the lamp can see. Three lamp positions a few pixels apart soften the shadow edges.
- [Glass lens](https://specimens.llmvuln.xyz/s/lens): Barrel distortion. A magnifier over a page of type and graph paper. Each pixel inside the lens reads from a point nearer its centre, so the middle is enlarged and the rim bends straight lines. Red and blue bend by slightly different amounts, which fringes the edge like real glass.
- [Isometric field](https://specimens.llmvuln.xyz/s/iso): Isometric projection. A grid of columns in isometric projection, drawn from the back corner forward so nearer columns cover farther ones. Each height is a spring chasing a slow swell and a bump under the pointer; a click sends a ring across the field.
- [Lenticular card](https://specimens.llmvuln.xyz/s/lenticular): Interleaved strips. A ridged card hiding several pictures in thin interleaved strips. Which strip each ridge shows depends on the viewing angle, and that angle changes slightly across the card, so a tilt sweeps the change from one edge to the other.
- [Platonic solids](https://specimens.llmvuln.xyz/s/solids): Back-face culling. The five regular solids, written down only as lists of corners. Faces are found by brute force: a plane through three corners is a face when every other corner lies behind it. Faces turned away are culled and their edges dashed, like hidden lines on a technical drawing.
- [Light shafts](https://specimens.llmvuln.xyz/s/shafts): Radial blur. Light streaming past a word. A small buffer holds the light with the word blacked out over it, then it is smeared outward from the light by drawing it onto itself at growing scales. The gaps between letters stretch into beams.
- [Page curl](https://specimens.llmvuln.xyz/s/curl): Fold reflection. Peeling a page is a reflection. The fold is the line halfway between the corner and your finger; everything past it is mirrored across that line and shows the paper's back, while the page below shows through. Let go past the middle and the page turns.
- [Perspective room](https://specimens.llmvuln.xyz/s/room): Vanishing point. A small gallery seen from inside, drawn with nothing but division by depth. Moving your eye sideways shifts near things more than far ones, and that difference is all the depth the picture needs.
- [Wire terrain](https://specimens.llmvuln.xyz/s/terrain): Perspective divide. An endless wireframe landscape flying toward you. Hills come from three crossed sine waves, each grid point is projected by dividing by its distance, and far rows fade into blue haze.

## Physics

Springs, gravity and pressure, worked out one frame at a time.

- [Spring dot field](https://specimens.llmvuln.xyz/s/field): Canvas springs. A grid of dots, each tied to its home position by its own spring. Your pointer pushes them aside, and a click sends a shockwave rippling outward.
- [Gooey blobs](https://specimens.llmvuln.xyz/s/goo): SVG filter. Blurring a group of circles and then sharpening the blur's edge back to a hard line makes nearby shapes melt into each other, like drops of liquid.
- [Flocking boids](https://specimens.llmvuln.xyz/s/boids): Steering rules. Each bird follows three local rules: keep some distance, match its neighbours' heading, and drift toward the group. Flocks emerge from that alone. Your pointer is a predator.
- [Verlet cloth](https://specimens.llmvuln.xyz/s/cloth): Verlet integration. A sheet of 600 points held together by springy links, hanging from pins. Points remember where they were a frame ago, and that difference is their speed. Pull too hard and links snap.
- [Slosh meter](https://specimens.llmvuln.xyz/s/slosh): Spring chain. A progress gauge with a liquid inside. The surface is a row of springs that pass energy to their neighbours, so changing the level or shaking the glass sends waves across.
- [String harp](https://specimens.llmvuln.xyz/s/harp): Web audio. Eight strings tuned to a pentatonic scale, so any strum sounds right. Each string bows out and rings down when you cross it. Sound is off until you turn it on.
- [Orbit sandbox](https://specimens.llmvuln.xyz/s/orbits): Inverse square. A star and its planets under real inverse-square gravity. Drag to launch a new planet like a slingshot, and a dotted line shows where it will go before you let go.
- [Soft-body jelly](https://specimens.llmvuln.xyz/s/jelly): Pressure body. A blob made of a springy skin with air pressure inside. The skin keeps its edge lengths, the pressure keeps its area, and between the two it squashes, wobbles and recovers.
- [Newton's cradle](https://specimens.llmvuln.xyz/s/cradle): Momentum exchange. Five pendulums whose balls just touch. When two meet and are closing, they swap speeds, which is what an elastic collision between equal masses does. Repeating that pass along the row many times a frame carries a hit straight through to the far end.
- [Ball pit](https://specimens.llmvuln.xyz/s/ballpit): Circle collisions. Hundreds of Verlet balls in a box. Every step they fall, then a few passes push apart any pair that overlaps, keep them inside, and shove them out of the pointer's disc. A grid of buckets means each ball only checks its neighbours.
- [Iron filings](https://specimens.llmvuln.xyz/s/filings): Dipole field. Two bar magnets and a scatter of filings. Each magnet is a pair of poles, and the field anywhere is the sum of their pulls. Every filing turns toward it on a spring, longer and darker where the field is strong.
- [Double pendulum](https://specimens.llmvuln.xyz/s/double): Sensitive dependence. Two double pendulums, identical except that one starts a thousandth of a radian further round. For a few seconds they move as one; then the gap doubles and doubles again until their paths have nothing in common.
- [Particle fluid](https://specimens.llmvuln.xyz/s/fluid): Density relaxation. Water made of particles. Each one measures how crowded it is twice: a plain density that pushes toward a resting value, and a near density that only ever pushes apart. Neighbours are nudged by both, and velocity is simply how far a particle moved.
- [Grass field](https://specimens.llmvuln.xyz/s/grass): Damped springs. Hundreds of blades, each a damped spring rooted in the ground. Wind is a slow travelling wave plus gusts, so neighbours lean together, and the pointer pushes blades away harder the faster it moves. Back rows are shorter and paler.
- [Buoyancy](https://specimens.llmvuln.xyz/s/buoyancy): Archimedes. Blocks of different densities in water. Each outline is cut by the waterline; the part below is the displaced water, and it pushes up through its own centre. A block floats with the same fraction under as its density, turning until the two forces line up.
- [Gear train](https://specimens.llmvuln.xyz/s/gears): Gear ratios. Five meshing gears. Gears in contact move the same distance at their rims, so each turns at minus the ratio of their tooth counts. Every angle comes from the first gear's angle plus an offset that keeps teeth in gaps.
- [Magnet pendulum](https://specimens.llmvuln.xyz/s/magnets): Basins of attraction. A pendulum over three magnets. Which one it settles on is chaotic: start points a hair apart can finish on different magnets. Behind the live bob, a map of every start point and its magnet fills in, and its borders are fractal.
- [Fireworks](https://specimens.llmvuln.xyz/s/fireworks): Ballistics. Shells are aimed to peak where you click: the launch speed that reaches a height is the square root of twice gravity times that height. At the top they burst into sparks that keep the shell's motion, then fall under gravity and drag.
- [Pendulum wave](https://specimens.llmvuln.xyz/s/pendulum): Phase drift. Fifteen pendulums, each tuned to swing once more per cycle than its neighbour. They drift in and out of step, tracing travelling snakes, splits and braids, and line up again every 30 seconds.

## Simulation & math

Fields, automata and transforms where simple rules draw complicated pictures.

- [Pointer ribbons](https://specimens.llmvuln.xyz/s/ribbons): Eased chains. Three ribbons chase your pointer. Each is a chain of points where every point eases toward the one ahead of it, so the tail swings behind like a silk streamer.
- [Falling sand](https://specimens.llmvuln.xyz/s/sand): Cellular automaton. A cellular automaton. Each grain checks the cell below it, then the two diagonals, and moves into the first empty one. Piles, slopes and avalanches come out of that one rule.
- [Fourier epicycles](https://specimens.llmvuln.xyz/s/epicycles): Fourier series. Any closed drawing can be rebuilt from circles spinning at whole-number speeds. Draw a shape and a discrete Fourier transform turns it into a chain of circles that trace it back.
- [Topographic metaballs](https://specimens.llmvuln.xyz/s/contours): Marching squares. Six drifting blobs and your pointer add up to one height field, drawn as contour lines like a hiking map. Marching squares finds where each height crosses the grid.
- [Voronoi cells](https://specimens.llmvuln.xyz/s/voronoi): Nearest seed. Every point on the stage belongs to its nearest seed. The borders are where two seeds tie, so the cells reshape themselves as the seeds drift.
- [Infinite zoom](https://specimens.llmvuln.xyz/s/zoom): Self-similar. An endless dive through nested frames, each a little smaller and a little turned. Only the fractional part of the depth decides the picture, so the zoom never has to stop.
- [Game of Life](https://specimens.llmvuln.xyz/s/life): B3/S23. Conway's rules on a grid that wraps at the edges. A dead cell with exactly three live neighbours is born, a live cell with two or three survives, and every other cell dies. Newborns show in blue.
- [Reaction-diffusion](https://specimens.llmvuln.xyz/s/rd): Gray–Scott. Two simulated chemicals. One is fed in everywhere, the other eats it to make more of itself and slowly decays, and both spread, one twice as fast. Two numbers, the feed and kill rates, decide whether you get coral, dividing cells or a maze.
- [Harmonograph](https://specimens.llmvuln.xyz/s/harmonograph): Damped sinusoids. A pen moved by pendulums that each swing at their own frequency and slowly lose energy. Near-whole-number ratios close into figures, a slight detune lands each loop beside the last, and the decay draws them inward.
- [Lorenz attractor](https://specimens.llmvuln.xyz/s/lorenz): Strange attractor. Three points following the Lorenz equations, started almost together. They loop round one wing, then the other, in an order no one can predict, and before long they part for good.
- [Fractal tree](https://specimens.llmvuln.xyz/s/tree): Recursive branching. One rule applied to itself: a branch ends by splitting into two shorter, thinner branches. Random angles and lengths make every tree different, and the wind bends twigs more than limbs.
- [Flow field](https://specimens.llmvuln.xyz/s/flow): Noise field. Smooth noise gives every point on the stage an angle. Particles walk that way and leave faint marks, so the field draws itself as streamlines. The noise drifts over time, and the pointer stirs a whirlpool.
- [Julia set](https://specimens.llmvuln.xyz/s/julia): Escape time. For every pixel, square it and add c, over and over, and count the steps before it escapes. Points that never escape form the Julia set for that c. Your pointer picks c, so the set morphs between dust, dendrites and spirals.
- [Maze solver](https://specimens.llmvuln.xyz/s/maze): Depth-first carving. A depth-first walk carves the maze, knocking down walls to random unvisited neighbours and backing up when stuck. Then a breadth-first flood spreads from the entrance; the first time it reaches the exit, its trail back is the shortest path.
- [Circle packing](https://specimens.llmvuln.xyz/s/packing): Grow to touch. Seeds land at random free points and grow until they touch a neighbour or the edge. Later seeds have to fit the gaps, so the circles shrink as the space fills, the way bubbles and pebbles pack.
- [Galton board](https://specimens.llmvuln.xyz/s/galton): Binomial. Every peg sends a ball left or right with even odds. The bin a ball lands in counts how many times it went right, so the bins fill like the binomial coefficients, which the blue curve shows as they build.
- [Water ripples](https://specimens.llmvuln.xyz/s/ripples): Wave equation. A small wave simulation runs on a grid behind the canvas. Every frame, each cell averages its neighbours, and the slope of the surface bends and lights the picture underneath.

## Type & drawing

Letters that move, and tools that draw.

- [Proximity type](https://specimens.llmvuln.xyz/s/proximity): Variable font. Each letter is set in a variable font, and its weight follows your pointer. Letters near it swell from hairline to black, while the rest stay thin.
- [Text decoder](https://specimens.llmvuln.xyz/s/decoder): Glyph scramble. Words resolve out of random glyphs, letter by letter, like a terminal cracking a code. Each letter gets its own random start and finish frame, so the word settles unevenly.
- [Velocity marquee](https://specimens.llmvuln.xyz/s/marquee): Velocity skew. Two endless rows of type drift in opposite directions. Throw them with a drag and they speed up, lean into the motion, and ease back to cruising speed.
- [Broad-nib pen](https://specimens.llmvuln.xyz/s/nib): Nib sweep. A calligraphy pen with a flat nib held at a fixed angle. Strokes swell when they cross the nib and thin to a hairline when they run along it, just like ink on paper.
- [Hanging letters](https://specimens.llmvuln.xyz/s/letters): Pendulums. A word hung from a rail, one letter per thread. Each letter is a pendulum, so brushing past sets it swinging and longer threads swing slower.
- [Split-flap board](https://specimens.llmvuln.xyz/s/flap): Web animations. A departures board. Each cell steps through the alphabet one flap at a time: the old top half folds down over the seam, then the new bottom half drops into place.
- [Typewriter](https://specimens.llmvuln.xyz/s/typewriter): Ink jitter. Type on a sheet of paper. Each key lands with its own ink weight, tilt and baseline like a real type bar, the bell rings near the margin, and the paper rolls up as it fills.
- [Kaleidoscope](https://specimens.llmvuln.xyz/s/kaleido): Mirror symmetry. Everything you draw is copied around the centre and mirrored in every other slice, so even a scribble comes out symmetrical. Strokes turn bluer the further they reach.
- [Text on a path](https://specimens.llmvuln.xyz/s/textpath): Arc length. A sentence flowing along a line you draw. The line is measured by length, so each letter can sit at its own distance along it, turned to the line's direction there. Spacing stays even however the curve bends.
- [Glyph scatter](https://specimens.llmvuln.xyz/s/scatter): Glyph springs. Every letter is its own spring. The pointer pushes letters away within a radius, harder the faster it moves, and spins them a little, while each spring pulls its letter home.
- [ASCII render](https://specimens.llmvuln.xyz/s/ascii): Luminance ramp. A spinning 3D shape drawn entirely in characters. Points are sampled over the surface, rotated and projected into character cells; a depth buffer keeps the nearest, and its brightness picks a character from sparse to dense.
- [Bristle brush](https://specimens.llmvuln.xyz/s/bristle): Bristle springs. A brush made of separate bristles, each at its own spot in the head and each trailing your hand on its own spring. Fast strokes splay them, and every bristle runs out of paint at its own rate, so strokes end in dry streaks.
- [Spray paint](https://specimens.llmvuln.xyz/s/spray): Drip threshold. Each frame the can lays down a cloud of fine dots, densest in the middle. The wall keeps a tally of how much paint each patch has taken; past a limit a drip starts there and runs down, slowing as it thins.
- [Elastic headline](https://specimens.llmvuln.xyz/s/elastic): Stretch springs. Letters stand on a baseline and stretch up from it. Drag one to set its height and its neighbours follow part of the way, so the word bends like rubber. Let go and each springs back through a squat.
- [Text cylinder](https://specimens.llmvuln.xyz/s/cylinder): rotateY rings. Lines of text wrapped round a turning cylinder in CSS 3D, every letter turned to its angle and pushed out by the radius. Alternate rings turn opposite ways, and letters fade as they face away.
- [Signature replay](https://specimens.llmvuln.xyz/s/signature): Recorded timing. Sign the pad and it plays your signature back exactly as you wrote it. Every pointer sample keeps its timestamp, and the replay reveals each stroke with a dash offset that follows the recorded clock, pauses and flourishes included.
- [Spirograph](https://specimens.llmvuln.xyz/s/spiro): Hypotrochoid. A gear rolls inside a ring with a pen through one of its holes. The gear's centre circles the ring while it spins backwards, and the pen traces a looping rosette that closes after a whole number of laps.
- [Dot-matrix sign](https://specimens.llmvuln.xyz/s/dotmatrix): Bitmap font. A scrolling LED sign with a hand-made 5 × 7 bitmap font. Each lamp eases toward on or off, switching on fast and cooling more slowly, so lit dots trail a little behind the scroll.

## Interface

Small interactions that make controls feel physical.

- [Magnetic buttons](https://specimens.llmvuln.xyz/s/magnetic): Spring offset. Buttons lean toward your pointer when it comes close, and their labels lean a little further, which gives each one a sense of depth. A spring pulls them home when you move away.
- [Scroll-driven cards](https://specimens.llmvuln.xyz/s/scrolling): Scroll timeline. Cards rise into place as they scroll into view, and a bar tracks how far you've read. It's all CSS with no JavaScript, using scroll-driven animations.
- [Card to detail morph](https://specimens.llmvuln.xyz/s/morph): View transitions. Click a plate and its pattern and title glide into the detail view as one continuous shape. The browser snapshots both states and animates between them.
- [Rolling odometer](https://specimens.llmvuln.xyz/s/odometer): Digit strips. Each digit is a strip of numbers behind a window. Changing the value slides every strip to its new digit with a little overshoot, the leftmost digits arriving last.
- [Rubber-band list](https://specimens.llmvuln.xyz/s/rubber): Overscroll. A list with real momentum. Fling it and it coasts; pull past either end and it resists more and more, then springs back when you let go.
- [Toggle personalities](https://specimens.llmvuln.xyz/s/toggles): Role = switch. Four switches with the same job and different characters. One bounces, one stretches with speed, one pours its colour out of the knob, and one turns over like a coin.
- [Picker wheel](https://specimens.llmvuln.xyz/s/picker): Momentum snap. A time picker built as two drums in CSS 3D. Each row sits at its own angle round the drum, so turning the drum is a single number. A flick coasts on its own speed, then a spring settles it on the nearest row.
- [Swipe stack](https://specimens.llmvuln.xyz/s/swipe): Fling threshold. A deck of cards you sort with a flick. The top card follows your finger and leans as it goes; past a third of its width, or with enough speed, it flies off and the next card rises into place.
- [Sortable list](https://specimens.llmvuln.xyz/s/sortable): Spring slots. Drag a row by its handle and the others glide out of the way. Every row has a spring toward its slot; the held row follows the pointer exactly and the order updates from where its centre is.
- [Bottom sheet](https://specimens.llmvuln.xyz/s/sheet): Detent snapping. A sheet with three resting heights. Dragging moves it one to one, with resistance past the ends. On release it projects where its speed would carry it and snaps to the nearest height, so a flick goes further than a slow drag.
- [Hold to confirm](https://specimens.llmvuln.xyz/s/hold): Press and hold. A destructive button you have to hold. Progress fills only while it's held and drains faster if you let go early, so a slip is easy to undo. The label is drawn twice, one copy clipped to the fill, so it stays readable across the edge.
- [Sliding tabs](https://specimens.llmvuln.xyz/s/tabs): Two-edge springs. Tabs with two indicators. The pill glides as one shape on a spring. The underline has a spring on each end: the leading end is stiff and leaves first, the trailing end is soft and catches up, so the line stretches mid-move.
- [Toast stack](https://specimens.llmvuln.xyz/s/toasts): Stacked layout. Notifications that pile up neatly. Older toasts tuck behind the newest, each a little higher and smaller; hovering or focusing the pile fans it into a list and pauses the timers. Swipe a toast sideways to dismiss it.
- [Morphing pill](https://specimens.llmvuln.xyz/s/pill): Size morph. One container with four faces: a clock, a timer, music and a player. Width, height and corner radius ride springs toward the next face's size, and the new face waits until the shape is mostly there, so content never squeezes.
- [Like burst](https://specimens.llmvuln.xyz/s/like): Particle burst. Liking plays three things at once: the heart squashes and springs past its size, a thin ring flashes outward, and a dozen dots fly out on two radii. The count rolls up a line instead of swapping in place.
- [Elastic slider](https://specimens.llmvuln.xyz/s/eslider): Rubber band. A volume slider that stretches. Inside the range it tracks the finger exactly; pulled past an end it keeps following with growing resistance, the bar stretching and thinning like a strap, and the icon at that end swells to match.
- [Spring shuffle grid](https://specimens.llmvuln.xyz/s/shuffle): FLIP. The tiles really change places in the page layout. Each one remembers where it was, jumps to its new spot, then springs back across the gap so the move looks continuous. This trick is called FLIP.

## Optional

- [The page for people](https://specimens.llmvuln.xyz/): every specimen running live, with its code a click away
- [License](https://specimens.llmvuln.xyz/LICENSE.txt): Unlicense OR MIT-0, no credit needed