Lab
AI tools, creative workflows, developer deep-dives, and behind-the-scenes from RAXXO Studios.
23 articles
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 of display none. ::details-content turns the native details element into a smooth disclosure with zero...
Read articleCSS 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...
The CSS :has() Patterns That Changed How I Write UI
Six concrete CSS :has() patterns that replaced roughly 400 lines of JavaScript across raxxo.shop.