TailwindとFramer Motionでスタイリングされたアニメーションエフェクト付きのUIを提供するReactコンポーネント集・「SyntaxUI」

Ads

SyntaxUI

TailwindとFramer Motionでスタイリングされたアニメーションエフェクト付きのUIを提供するReactコンポーネント集・「SyntaxUI」
SyntaxUIはTailwindとFramer Motionでスタイリングされたアニメーションエフェクト付きのUIを提供するReactコンポーネント集です。

Tailwind.cssをベースにFramer MotionでアニメーションするUIコンポーネントをコピペで導入できる、というもの。例えば軽くバウンドするアコーディオンや、マウスホバーやクリックでアニメーションする様々なボタン、ユニークな数々のローダー、内容が切り替わったり数字が高速カウントされるテキストエフェクト、リストのインフィニティスクロールなどなど他にも様々なUIが提供されています。

いずれもコードのコピペで導入できるようコードが提示されています。特にアニメーションエフェクトは一から作ると手間がかかるので骨組みだけコピペして自身でカスタマイズする、という流れのほうがより効率的ですね。

よく見かけるようなエフェクトがある程度用意されていますし、気に入ればpro版の購入で更に多くのコンポーネントにアクセスできるみたいです。Framerでアニメーションを導入する予定の開発者の方はご覧になってみては如何でしょうか。

SyntaxUI