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

Motion UI: パフォーマンス評価付き React アニメーションライブラリ — 2026年 第30週 CSS・スタイリング

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 30-2026
ツール

Motion UI: パフォーマンス評価付き React アニメーションライブラリ

Matt Perry が Motion+ メンバーシップを通じて配布するプロダクション品質の React アニメーションコンポーネントライブラリ Motion UI を公開しました。すべてのコンポーネントにはコンポジターのみのアニメーションに S、ペイントを引き起こすものに C を付与する MotionScore グレードが表示されており、チームはリリース前にレンダーコストを即座に把握できます。shadcn のセマンティックトークン (bg-background, --primary) を通じてゼロ設定で既存のデザインシステムに統合でき、shadcn を使わない場合は AI プロンプトビルダーや Motion AI Kit MCP で適応させられます。motion.theme.ts ファイル一つが物理ベーススプリングで動く 5 つのトランジション性格 (snap, ui, gentle, lively, ambient) を一元管理し、一箇所の編集でサイト全体のアニメーションが再調整されます。

Motion UI: パフォーマンス評価付き React アニメーションライブラリ
Read Articlearrow_forward
Video · CSS機能5:30

display: none のアニメーション — プロパティ二つ、純粋 CSS

Kevin Powell は、display: none への・からのアニメーションが今や正確に二つの追加だけで実現できることを実演します。離散値プロパティのトランジションを許可する transition-behavior: allow-discrete と、要素の初回ペイント前の状態を定義する @starting-style です。重要な制約はカスケード順序で、@starting-style は open 状態のルールの後に配置しなければなりません。Invoker Commands を使った <dialog> で入場と退場のアニメーションを異なる動きにし、::backdrop の透明度もアニメーションしますが、JavaScript は一行も不要です。このテクニックはすべてのモダンブラウザーで完全サポートされています。

WATCH_VIDEOarrow_forward
Article · CSS機能READ TIME: 2m

text-fit で 3 行のコードによるレスポンシブ ASCII アート

Temani Afif は、新興 CSS プロパティ text-fit — 現時点では Chromium のみ — がフォントサイズをコンテナに合わせてスケールし、white-space: pre と text-fit: shrink consistent の二宣言だけで完全なレスポンシブ ASCII アートを実現できることを実演します。三つのスケーリングモードがあります: consistent（全行に同一倍率を適用し ASCII グリッド構造を保持）、per-line（各行が独立してスケール）、per-line-all（最終行も含む）。ASCII アートで重要なのは consistent モードで、均一な倍率がなければグリッドの整列が崩れます。JavaScript も SVG もコンテナクエリも不要です。ブラウザーサポートは現在 Chromium に限られるため、プログレッシブエンハンスメントまたは社内ツール用途として活用するのが適切です。

READ_FULL_LOGarrow_forward
Article · CSS機能READ TIME: 3m

writing-mode はテキスト回転ではなく軸の再定義です

Mojtaba Seyedi の CSS-Tricks アルマナック項目は、writing-mode — horizontal-tb・vertical-rl・vertical-lr・sideways-rl・sideways-lr — がグリフを回転させるだけでなく、現代の CSS レイアウト全体の基盤であるブロック軸とインライン軸を再定義することを論じています。vertical-rl を適用すると flex-direction: row は垂直方向に流れ、inline-size は物理的な高さにマッピングされ、margin-inline-start は上端に解決されます。継承されアニメーション不可、CSS Writing Modes Level 4 で全ブラウザーサポート済みです。論理プロパティ (inline-size, padding-block-end) で記述したレイアウトはどの writing-mode でも自動適応するため、国際化と縦書きタイポグラフィ対応が実質ゼロコストのリファクタリングになります。

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

今週の CSS & Styling 号は、ブラウザー実装の収束が実感できる時期に届きます。離散値トランジション・@starting-style・writing-modeはモダンブラウザー全体でベースラインに達し、text-fitは Chromium に先行実装されて次の段階を予告しています。かつて JavaScript の回避策が必要だったアニメーション・国際化・レイアウト処理を、純粋な CSS で記述できるようになりました。

今号のフィーチャードは、Matt Perry が Motion+ メンバーシップ向けに公開したプロダクション品質の React アニメーションライブラリ Motion UI です。コンポジターのみのアニメーションに S、ペイントを引き起こすものに F を付与する MotionScore 評価制度はチームに即座のレンダーコスト監査を提供し、単一の motion.theme.ts ファイルが物理ベースの 5 つのトランジション性格をサイト全体で一元管理します。Motion UI は、パフォーマンスとデザインシステム統合を後付けではなく第一級の設計原則として扱う、初めてのアニメーションライブラリです。

CSS レベルでは、Kevin Powell が display: none への・からのトランジションを transition-behavior: allow-discrete と @starting-style ブロックの二つだけで実現する方法を実演し、Mojtaba Seyedi の CSS-Tricks アルマナック項目は writing-mode が単なるテキスト回転ではなく Flexbox・Grid・論理プロパティ全体を再構成する軸の再定義であることを明快に解説しています。Temani Afif は Chromium 限定の新興プロパティ text-fit で締めくくり、3 行のコードでレスポンシブ ASCII アートを実現するほどの実用性をすでに備えています。

今週のコンテンツを総合すると、CSS は JavaScript のスキャフォールディングなしでも表現力を増し続けていることが読み取れます。

Key Takeaways
  • モダンブラウザーで JavaScript を使わずに display: none 要素をアニメーションするには、カスケード内で open 状態の後に @starting-style ブロックを配置し、transition-behavior: allow-discrete とセットで宣言してください。
  • アニメーションをリリースする前に MotionScore カテゴリーを確認しましょう — コンポジターのみの transform・opacity は S を獲得しますが、ペイントを引き起こすプロパティは C 以下になるため慎重に使う必要があります。
  • inline-size・margin-inline-start・padding-block-end などの論理的 CSS プロパティを採用すると、writing-mode が変わったときにレイアウトが自動で適応し、国際化と縦書きタイポグラフィ対応がゼロコストのリファクタリングになります。