Next.js向けにTailwindとMotionで構築されたアニメーションUIのコレクション・「Systaliko UI」

Ads

Systaliko UI

Next.js向けにTailwindとMotionで構築されたアニメーションUIのコレクション・「Systaliko UI」
Systaliko UIはNext.js向けにTailwindとMotionで構築されたアニメーションUIのコレクションです。shadcn/ui及びanimate-uiにインスパイアされて開発しているそうです。

よくある一般的なアニメーションUIはあまり用意されておらず、例えばスクロールするとバラバラに配置されていた画像が拡大して綺麗な段組レイアウトになったり、スクロールに応じて流れてくるカードUIを積み重なる様に表現したり、マウスホバーで1文字ずつテキストがアニメーションしたり、遅延表示とアニメーションスケルトンを組みわせたり、ユニークなアニメーションのカスタムカーソルにスタイリングする、といった、使いどころは多少限られるものの、印象的でリッチなエフェクトでコンテンツを表現する事が出来ます。

UIコンポーネントは他にも沢山用意されており、導入手順も分かりやすく書かれています。印象に残るようなアニメーションエフェクトを加えたい、とお考えの開発者の方は是非チェックしてみてください。ライセンスはMIT。

Systaliko UI