モーションファーストなCSSフレームワーク・「AliveUI」

Ads

AliveUI

モーションファーストなCSSフレームワーク・「AliveUI」

AliveUIはモーションファーストなCSSフレームワークです。「動き」は装飾ではなく構造そのものなのだからUIの設計レベルに組み込むべき、という考えの元でデザインされたCSSフレームワークとして提供されています。

モーション = 構造、制約 = 品質維持装置、派手さ > 一貫性と言う考えを重視し、深さ・モーション・インタラクションの各意味づけをプリミティブ(基本要素)として扱い、後付けするのではなく全てのユーティリティに最初から組み込まれて設計されています。

動きは各コンポーネントに備えられているものの、いわゆる「酔い」を誘うような意味を持たない派手な動きは制限されています。例えばdurationは3つのみ、easingも3つのみ、といったもので、一貫性を守り、構造上必要なモーションのみを扱うように組まれています。

尚、class等は似ていますがTailwindやFramer Motionでは無く、あくまでモーションをおまけの装飾ではなくUIにあるべきものとして考えられているため自由度を無くすことでパフォーマンスもより良いものになっているみたいです。詳細などはプロジェクトサイトのドキュメントをご参照ください。

AliveUI