Eight animations.
One HTML file.
A single self-contained page. Every effect below is hand-written CSS and vanilla JavaScript — no libraries, no build step, no network calls. Hover the cards, move your mouse, drag the window narrower.
The gallery
scroll to reveal · hover to react
Morphing blob
Pure CSS @keyframes driving border-radius and rotation together.
Nested orbits
Counter-rotating satellites. Each dot spins around, then un-spins so it never tumbles.
Equalizer
Staggered animation delays turn seven identical bars into a travelling wave.
Chromatically split
Two pseudo-elements in cyan and magenta, clipped in slices on an unsynchronised loop.
Typewriter
JavaScript appends a character every few frames, with a blinking caret styled in CSS.
Live wave
A sine function re-sampled every frame and written straight into an SVG path.
3D tilt
Mouse position maps to rotateX/rotateY; the label floats on translateZ.
Sweeping ring
One animated stroke-dashoffset — no JavaScript and no raster asset.
About this page
and the honest caveats
What it is
A test landing page built to show what a single self-contained file can do. It has no dependencies, so it renders identically whether it is served from a CDN, a laptop, or opened straight off disk.
Why it is fast
Everything animates on the compositor where possible — transform and
opacity only — so the browser never has to re-layout mid-frame.
Accessibility
prefers-reduced-motion is respected: every animation collapses to a
single frame and scroll reveals become instant for anyone who has asked for that.