tsParticles

TL;DR

・幾何学模様のパーティクルアニメーションを導入するライブラリ
・公式のデモページでtsParticlesの設定カスタマイズしたjsonを落としてきて読み込むだけ！！

概要

公式サイト

https://particles.js.org/

Github

https://github.com/matteobruni/tsparticles

デモページ(Among Us）

実装(React）

インストール

# npmの場合
$ npm install react-particles

# yarnの場合
$ yarn add react-particles

# インストール時に依存関係のエラーが出る場合は --f で対応してください。

CDNの場合

<script src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/2.8.0/tsparticles.min.js" integrity="sha512-+YPbXItNhUCZR3fn5KeWPtJrXuoqRYQ4Gd1rIjEFG+h8UJYekebhOMh84vv7q+Y1sy5kdIIVtfftehCiigriMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

particlesの設定ファイル

https://particles.js.org/samples/index.html#amongUs
上記デモページにて設定ファイルをjsonでダウンロードできます。

基本の形

import React from 'react';
import Particles from 'react-particles';              // react-particlesをインポート
import ParticlesParams from '../assets/particles.json';  // particlesの設定ファイルをインポート

export default function Background() {
    const params = ParticlesParams as typeof ParticlesParams

    <Particlese options={params as any} />
  )
}

export default Background

まとめ

three.js（WebGL）の技術を使って自作しなくても、tsParticlesを入れてプリセットを読み込むだけで高品質な背景が作成できるので良き！！
ただ、設定を下手にいじるとサイト自体に影響を与えかねない描画になりそう感もあるので注意が必要かもですね、、