Ambient animations that don’t tank your LCP
A client’s landing page felt dead and my first instinct was to import GSAP. Here is what I did instead: staggered CSS timings on a few SVG groups, transforms only, and a reduced-motion check.
Category: Design
Component variants beat a pile of CSS variables
Twenty near-identical buttons in one design file cost me three hours per border-radius tweak. Component variants in Penpot fixed that, and DTCG tokens made the handoff to CSS boring, which is exactly what you want.
Designing for panic: emergency UX design in WordPress
A hanging WooCommerce checkout on Black Friday taught me that a nicer spinner does not calm anyone down. Notes on cognitive tunneling, single-tasking flows, transient locks against panic clicks, and what an emergency mode looks like.
Animate SVG symbols with CSS custom properties
Seven avatars from one SVG symbol, each with its own animation. The CSS cascade dies at the Shadow DOM, but custom properties pass straight through it, which is how one symbol ends up blinking and tapping at a different rate per instance.
Winter wallpapers without the performance hit
A client dropped 8MB 4K PNGs into the media library for holiday backgrounds and the LCP went red within the hour. Here is what fixed it: a 200KB cap on hero images, one file per breakpoint, and WebP.
Real-time dashboards that people can actually read
A fleet dashboard flashed so hard that a broken-down truck went unnoticed for twenty minutes. Faster polling made it worse. What helped: delta indicators, sparklines, skeleton screens, an honest last-sync label and ARIA live regions.
Cutting site bloat is also cutting carbon
Trimming a legacy site cut page weights by 80%, and the same work cut its energy use. Five steps: pick one journey, benchmark it, set a page weight target, strip the WordPress junk nobody needs, then keep checking.
Adaptive SVGs with symbols instead of duplicate files
A hero illustration that looked right at 16:9 and collapsed on mobile. Instead of shipping two SVG files, I moved the artwork into a hidden symbol library and referenced it from two wrappers with different viewBox values, then animated the use elements.
Why AI-assisted prototyping needs a blueprint first
A client handed me an MVP he had built over a weekend in Cursor. It looked polished until I tried to add one calculation and found no schema underneath any of it. This is the case for settling the data model before you open a coding assistant.
Building functional personas with AI from your own data
A client once sent me a 50-page persona PDF that said nothing about why people abandon checkout. Functional personas built with AI from support tickets and order notes tell you what a customer is trying to finish and where they stop.