Lab
AI tools, creative workflows, developer deep-dives, and behind-the-scenes from RAXXO Studios.
24 articles
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 Spinners beat skeletons under 300ms and for unknown-shape content Streaming SSR makes the skeleton honest...
Read article5 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...
View Transitions API: 5 Patterns I Use Across RAXXO Sites in 2026
Same-document transitions wrap state changes like filter chips and tab switches in a single startViewTransition call. Shared-element morphs use view-transition-name to animate a product card...
Motion Design Tokens That Actually Compose: Durations, Easings, Choreography
Three-tier motion tokens: primitives like --ms-200 and --ease-out-expo feed semantic and component layers, never the other way around Stagger groups with --stagger-step calc() unlock orchestrated...
OKLCH-First Color Systems: 5 Patterns and the Wide-Gamut Wins
OKLCH gives you perceptual uniformity, so a 5% lightness change reads as a 5% lightness change at any hue One base color generates a full...
CSS Anchor Positioning Is Production-Ready: 5 Patterns
5 production CSS Anchor Positioning patterns: tooltips, dropdowns, inline edit popovers, context menus, follow-cursor labels. When to pick it over Floating UI.
CSS Subgrid Made My Dashboard Layouts Trivial: 5 Patterns
5 production CSS Subgrid patterns for dashboards, forms, articles, and tables. When to reach for Subgrid vs grid-template-areas vs flex.
Tailwind v4 Theme: Design Tokens That Actually Scale
Tailwind v4 ships a native @theme directive that replaces tailwind.config.js and makes design tokens first-class CSS. Tokens live in one file, ship as CSS custom...