(BUSAN.SASHIMI)
terminal
Weekly Digest // STYLING — Week 30-2026
paletteWeekly Report

CSS and Styling — 2026 Week 30

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 30-2026
TOOLING

Motion UI: A Performance-Graded React Animation Library

Matt Perry has launched Motion UI, a production-ready animated component library for React distributed through the Motion+ membership. Every component carries a MotionScore grade — S for compositor-only animations down to C for paint-triggering ones — so teams can audit render cost before shipping. The library integrates into existing design systems via shadcn’s semantic tokens (bg-background, text-muted-foreground, --primary) with zero configuration, or adapts to non-shadcn stacks via an AI prompt builder or Motion AI Kit MCP. A motion.theme.ts file centralises five named transition personalities (snap, ui, gentle, lively, ambient) built on physics-backed springs, so a single edit retunes every installed animation sitewide; reducedMotion: “calm” is built in, preserving opacity fades while removing transforms.

Motion UI: A Performance-Graded React Animation Library
Read Articlearrow_forward
Video · CSS FEATURE5:30

Animating display: none — Two Properties, Pure CSS

Kevin Powell demonstrates that animating to and from display: none now requires exactly two additions: transition-behavior: allow-discrete to permit transitions on discrete-value properties, and @starting-style to define an element’s state before its first paint. The key constraint is cascade order — @starting-style must appear after the open state rule, or the last-rule-wins cascade will override it and the transition will silently fail. Using a <dialog> with Invoker Commands, Powell builds distinct entry and exit animations (translate up on enter, down on exit) plus an animated ::backdrop opacity — all without JavaScript. The technique works for any element toggling between display: none and any display value and is fully supported in all modern browsers.

WATCH_VIDEOarrow_forward
Article · CSS FEATUREREAD TIME: 2m

Responsive ASCII Art in Three Lines with text-fit

Temani Afif demonstrates how the emerging text-fit CSS property — currently Chromium-only — scales font size to fill a container, enabling fully responsive ASCII art with just white-space: pre and text-fit: shrink consistent. The property exposes three scaling modes: consistent (uniform scale across all lines, preserving the ASCII grid structure), per-line (each line scales independently to fill its row), and per-line-all (same as per-line but also includes the last line). The consistent mode is the critical one for ASCII art — without uniform scaling, the grid alignment breaks. No JavaScript, no SVG, and no container-query gymnastics are needed; the property handles the math. Browser support remains limited to Chromium for now, so treat this as a progressive enhancement or internal-tooling use case.

READ_FULL_LOGarrow_forward
Article · CSS FEATUREREAD TIME: 3m

writing-mode Is an Axis Reorientation, Not Just Rotated Text

Mojtaba Seyedi’s CSS-Tricks almanac entry makes the case that writing-mode — values horizontal-tb, vertical-rl, vertical-lr, sideways-rl, sideways-lr — does far more than rotate glyphs: it redefines the block and inline axes that all of modern CSS layout is built on. Under vertical-rl, flex-direction: row runs vertically, inline-size maps to the physical height dimension, and margin-inline-start resolves to the top edge. The property is inherited, not animatable, and enjoys full browser support under CSS Writing Modes Level 4. The practical takeaway is that layouts written with logical properties (inline-size, padding-block-end, margin-inline-start) adapt automatically to any writing mode, making internationalisation and creative vertical typography essentially free refactors.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

This week’s CSS & Styling issue lands during a moment of genuine browser convergence: discrete-value transitions, @starting-style, and writing-mode are now baseline across all modern engines, while text-fit arrives in Chromium as a taste of what’s next. The net effect is that animation, internationalisation, and layout work that once demanded JavaScript workarounds can now be written in pure CSS.

The featured piece is Motion UI, Matt Perry’s production-ready React animation library shipping inside the Motion+ membership. Its MotionScore grading (S for compositor-only down to F for paint-triggering) gives teams an instant render-cost audit, while a single motion.theme.ts file centralises five physics-backed transition personalities that retune every installed component sitewide. Motion UI is the first animation library that treats performance and design-system integration as first-class citizens rather than afterthoughts.

At the CSS level, Kevin Powell shows that animating to and from display: none now takes exactly two additions — transition-behavior: allow-discrete plus an @starting-style block — while Mojtaba Seyedi’s CSS-Tricks almanac entry makes the case that writing-mode is not a typographic novelty but a fundamental axis-reorientation that reshapes Flexbox, Grid, and every logical property at once. Temani Afif rounds out the issue with text-fit, a Chromium-only emerging property that scales font size to fill a container — already powerful enough to make responsive ASCII art a three-line snippet.

Taken together, the week’s content points toward a CSS that is increasingly expressive without requiring JavaScript scaffolding: transitions handle their own lifecycle, layout axes adapt to writing direction, and text scales itself to its container.

Key Takeaways
  • Add transition-behavior: allow-discrete and an @starting-style block (placed after the open state in cascade order) to animate any element to and from display: none in all modern browsers without JavaScript.
  • Before shipping an animation, check its MotionScore category — compositor-only transforms and opacity earn an S, while paint-triggering properties drop to C or below and should be used sparingly.
  • Adopt logical CSS properties (inline-size, margin-inline-start, padding-block-end) so your layouts automatically adapt when writing-mode changes, making internationalisation and vertical typography zero-cost refactors.