Lab
AI tools, creative workflows, developer deep-dives, and behind-the-scenes from RAXXO Studios.
39 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...
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...
5 Type Scales I Use in 2026 (And the One I Quietly Dropped)
Major-third 1.250 stays my default for product UI because it scales without drama Perfect-fourth 1.333 carries marketing pages where the headline must do real work...
Magnific vs Topaz vs Krea: Which AI Upscaler Actually Works
Topaz wins on photo fidelity for portraits, product shots, and any source where the original detail must survive Magnific wins on creative invention, where you...