こんにちわ。nap5です。

react-wavifyライブラリを使って波がウェーブするエフェクトを作ってみたので紹介したいと思います。

使用したライブラリは以下になります。

デモサイトはこちらになります。

デモコードはこちらになります。

デモコードでは波を表現したいので、青系の配色を選択しました。

デモコードではculoriライブラリを使っているので、colorhunt等を参考に配色をカスタマイズしたデモコードも載せてあります。

すでに使用しているものはコメントアウトしてから、コメントインすると動かせると思います。

culoriライブラリについては以下の記事で紹介していました。

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。