CodePen Demos
Experiments in CSS, animation, Vue, React, maps, and UI. Hundreds interactive demos. Poke around, fork anything, break stuff.
What you'll find
CSS Experiments
Liquid glass morphism, CSS masks, highlight animations, complex gradients, and relative color syntax applied to real UI problems.
Animation
Keyframe backgrounds, the flying cicada principle, staggered card reveals, and UI micro-interactions modeled on YouTube and Netflix.
Map Visualizations
Interactive Vue maps tracing the Lewis and Clark and Marco Polo expeditions, with timeline controls and animated compass overlays.
UI Components
Glassmorphism weather widgets, event dashboards, image sliders, and side-by-side visual diffing with ResembleJS.
Tools
GradientMaker, a CSS Functions reference, GitHub profile search, and a Tailwind hue-theming playground.
Tailwind CSS
One brand color drives a full light and dark theme via CSS custom properties and a custom Tailwind plugin using relative color syntax.
Spotlight
Featured Picks
Apple Liquid Glass
Mimics Apple's liquid glass morphism effect with CSS.
Netflix Demo
Interactive demo recreating the Netflix UI.
GradientMaker v2
Interactive tool for creating beautiful CSS gradients.
Glassmorphism: Weather Widget
A weather widget demonstrating glassmorphism effects.
Lewis and Clark Expedition
An interactive Vue map tracing the Lewis and Clark expedition.
Realistic CSS Highlighter
Using CSS to create realistic text highlighting effects.
Light/Dark Theme with Relative Colors
One brand color drives an entire light/dark theme via Relative Color Syntax.
CSS Functions Reference
A comprehensive reference with examples for CSS functions.
Pretext: Instant Layout Engine
An advanced demo showcasing the capabilities of Pretext.
All Demos
Apple Liquid Glass
Netflix Demo
GradientMaker v2
Glassmorphism: Weather Widget
Lewis and Clark Expedition
Realistic CSS Highlighter
Marco Polo Map Timeline
Animated CSS Backgrounds
Interactive CSS Mask
Events Dashboard
ResembleJS Comparison
Youtube Subscribe Animation
Github User Search
Doggo Image Slider
CSS Mask Manipulation
Flying Cicada Principle
Light/Dark Theme with Relative Colors
CSS Functions Reference
Complex Themed Gradients
Tailwind Hue Theme
Word Counter v2
Washington's Winter Campaign1776 → 1778
Tailwind Card Styler
Box Shadow vs Drop Shadow
