Lab
AI tools, creative workflows, developer deep-dives, and behind-the-scenes from RAXXO Studios.
30 articles
The Micro-Interactions I Add Last That Make a UI Feel Fast
Optimistic UI updates before the server confirms feel instant to users 150ms is my default transition duration for hover and press states Skeleton screens beat spinners because they show layout, not just waiting Focus rings and press feedback make an...
Read articleAccessible Color Contrast Without Killing the Brand
I keep a dark UI with a bright accent WCAG-AA readable at 4.5:1 Shift lightness not hue to fix failing text Two documented exceptions: decorative...
The CSS color-mix Patterns I Use Across Every RAXXO Theme
One brand variable feeds hover, disabled, surface, and text colors 5 color-mix patterns replaced a 40-line hand-curated palette Accessible text picks itself from the background...
Form UX in 2026 Native HTML Validation Is Finally Enough
Removed a 12 KB validation library across 3 surfaces using native HTML :user-valid and :user-invalid fire only after interaction, killing premature error noise accent-color styles...
Starting Style and Entry Animations in CSS Without JavaScript
@starting-style ships in every modern browser as of 2024 Five patterns: dialog, sheet, list reveal, toast, route swap Pair it with transition-behavior and @starting-style for...
The Native Popover API: 4 Menus and Tooltips I Built Without JavaScript
Popover attribute gives top-layer rendering and light-dismiss free Anchor positioning ties menus to triggers with no JavaScript Built 4 components: dropdown, tooltip, command menu, confirm...
Loading Skeletons That Don't Lie: 5 Patterns for Honest Perceived Performance
Content-shaped skeletons cut layout shift to zero versus 0.18 CLS for spinners Match placeholder dimensions to final DOM exactly or you are lying to users...
5 CSS Animations That Needed JavaScript Until 2026
interpolate-size and calc-size finally let a panel transition to height auto with no measuring script. transition-behavior allow-discrete plus @starting-style animates elements both into and out...
CSS Carousels With Zero JavaScript: 5 Patterns
A scroll-snap track plus the new pseudo-elements replaced a 14KB carousel dependency in my UI. scroll-marker-group and ::scroll-marker render the dot navigation with no script...
CSS Scroll-Driven Animations: 6 Patterns I Ship in 2026
CSS scroll-driven animations in 2026: 6 copy-paste patterns using animation-timeline scroll() and view(), zero JavaScript.
CSS :has() in Production: 6 Selectors That Replaced JavaScript Across My Sites
Six :has() selectors deleted roughly 240 lines of JS across my sites Form validation styling now uses form:has(:user-invalid), zero input listeners nav:has(a[aria-current]) styles parent menus...
Why I Standardized on Phosphor Icons Across 15 Repos (And Cut 60% of Icon Bundle Size)
Five icon systems across 15 repos created visual drift and 84KB bundles in the worst Next.js app. Phosphor ships six weights from one designer, so...