Lab
AI tools, creative workflows, developer deep-dives, and behind-the-scenes from RAXXO Studios.
41 articles
The Anatomy of a Good Empty State: 6 Patterns That Guide the Next Action
Three empty state types: first-run, cleared, error-empty, each needs different copy One primary action rule: never give an empty screen two equal buttons Copy teaches, never apologizes: replace "No items found" with a next step 6 patterns I ship across...
Read articleThe Native HTML Dialog Element: 6 Modal Patterns I Ship Without a Library
Native dialog removed a 14KB modal library from 9 sites method=dialog forms close and return values with zero JS @starting-style plus closedby="any" handle exit animation...
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...
Viral AI Photo Trends of 2026 (With the Exact Prompts)
The toy-figure, Chibi, film-look, Y2K and scrapbook AI photo trends of 2026, with the exact prompt templates I reuse before posting.
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...
Designing AI Thumbnails: 6 Layout Rules That Survive 1024x576 Crops
AI image models love the center, so design your thumbnails around that bias instead of fighting it Two focal subjects max, anything more turns into...
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...