CSS Shapes & Animation Playground
A real, working CSS showcase — a live shape + color customizer, animated borders, CTA button animations, and box-shadow effects, with copyable CSS on every single demo.
Twelve real CSS techniques across four categories — shape morphing, animated borders, CTA button motion, and box-shadow effects — plus an interactive customizer where you pick a color and shape and get the exact CSS back. Every demo card ships its own copy-able CSS snippet. No canvas, no animation library, no JS driving the actual motion — only the customizer's shape/color state is React; everything else is plain, running CSS.
Case study
Problem
The first version of this page was four passive animation loops and one color picker — you could watch it, but you couldn't build anything from it. A CSS showcase that doesn't let you copy the CSS or change more than a color isn't actually useful to anyone trying to learn or reuse the techniques.
Approach
Rebuilt around two ideas: every demo needs its real CSS visible and copyable, and there needs to be at least one genuinely interactive centerpiece — not just recoloring, but actually changing the shape — so the page proves the techniques instead of just displaying them. Expanded from one category (shapes) to four (shapes, borders, buttons, box-shadow) so it reads as a reference, not a single trick shown four ways.
Key decisions
- Built a shared CssCodeBlock component with a real copy button instead of screenshotting code or leaving it out — a CSS showcase that hides its own CSS defeats the point.
- Made the customizer control shape AND color, not just color, since 'customization' that only changes a hex value isn't much of a customizer.
- Split into four named categories (shapes, borders, buttons, shadows) instead of one long undifferentiated grid, so a visitor looking for 'how do I animate a border' can find that section directly.
Outcome
// TODO: No analytics on this page yet — it's a self-initiated sample, not a deployed campaign.
Highlights
- Shape customizer with three real modes — 11 presets, 4 independent corner-radius sliders, or a drag-to-build polygon editor where every vertex is grabbable
- A real cubic-bezier(x1,y1,x2,y2) curve editor with draggable control handles, wired into every animated demo's easing
- 7 animation functions (spin, pulse, float, wobble, shake, bounce) and a 6-technique interactive border customizer (gradient sweep, conic spin, marching ants, dashed rotate, double ring, glow pulse)
- A 4-technique box-shadow customizer (glow pulse, depth lift, neon layering, inset press) with live color/blur/spread control
- 6 working CTA button hover effects — shine sweep, ripple pulse, lift, outline halo, icon slide, and a color-mix() tactile press
- Respects prefers-reduced-motion across every animated demo on the page