CodePen demos

CSS experiments and demos

Experiments in CSS, animation, Vue, React, maps, and UI. Poke around, fork anything, break stuff.

Find me on CodePen
29 demos indexed
CSS primary lane
Vue maps and UI
Fork anything

What you'll find

A quick map of the kinds of demos in the archive.

CSS

CSS experiments

Liquid glass morphism, CSS masks, highlight animations, complex gradients, and relative color syntax applied to real UI problems.

Motion

Animation

Keyframe backgrounds, staggered card reveals, and UI micro-interactions modeled on familiar product surfaces.

Maps

Map visualizations

Interactive Vue maps tracing expeditions, with timeline controls and animated compass overlays.

Components

UI components

Weather widgets, event dashboards, image sliders, and side-by-side visual diffing experiments.

Tools

Small tools

GradientMaker, a CSS Functions reference, GitHub profile search, and a Tailwind hue-theming playground.

Tailwind

Tailwind CSS

One brand color driving a full light and dark theme via CSS custom properties and relative color syntax.

Spotlight

A featured demo selected from the CodePen data file.

A smaller set of demos worth opening first.

All demos

More project and writing surfaces connected to these demos.

ProjectsLibraries, browser tools, games, and interactive apps built in my spare time. WritingNotes on CSS, HTML, AI tooling, and the parts of the web worth keeping. Tailwind Hue ThemeThe hue-theming plugin behind several related experiments.