JSFiddle - React, Tailwind, and code Playground

by prodouga

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - VantaJS Interactive BG</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="vantajs-bg"></div>

<div class="container">
  <h2> Vanta JS</h2>
<p>Vanta.js インタラクティブ背景のデモンストレーション</p><p>マウスの移動 / モバイル デバイスの傾き</p>
  <select class="form-select" id="effect">
    <option value="0">とり🦆</option>
    <option value="1">光✨</option>
    <option value="2">霧</option>
    <option value="3">なみ🌊</option>
    <option value="4">ドット</option>
    <option selected value="5">くも☁︎</option>
  </select>
</div>

<footer>
  <p>by <a href="https://prodouga.com"> Prodouga</a><strong>☕️</strong></p>
</footer>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.dots.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds2.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.halo.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Nunito:400,900|Montserrat|Roboto");
* {
  padding: 0;
  margin: 0;
}

#vantajs-bg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container h2 {
  font-size: 4em;
  font-family: "Montserrat", sans-serif;
  color: #FFFFFF;
  text-shadow: 1px 1px #D37E86;
}
.container p {
  font-size: 1.5em;
  font-family: "Nunito Sans", sans-serif;
  color: #FFFFFF;
  text-shadow: 1px 1px #070707;
  margin-bottom: 0.5rem;
}
.container select {
  width: 200px;
}

footer {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 0;
  right: 5px;
  text-align: right;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "Roboto", sans-serif;
  color: #FFFFFF;
  padding: 0.5rem;
}
footer p {
  border: none;
  padding: 0;
}
footer p strong {
  font-size: 2em;
  text-decoration: none;
}
footer p strong:hover {
  color: #cd6b74;
  transition: all 0.4s ease-in-out;
  font-weight: 1500;
  font-size: 2em;
  cursor: pointer;
}
footer a {
  color: #ffffff;
  text-decoration: none;
  transition: all 0.4s ease-in-out;
}
footer a:hover {
  color: #D37E86;
  font-weight: 900;
  font-size: 1.1em;
}

JavaScript

var bgEffects = {
  "0":VANTA.BIRDS,
  "1":VANTA.HALO,
  "2":VANTA.FOG,
  "3":VANTA.WAVES,
  "4":VANTA.DOTS,
  "5":VANTA.CLOUDS
}


document.getElementById("effect").addEventListener("change", ()=> run());

function run(){
  const effectID = document.getElementById("effect").value;
  bgEffects[effectID]({
    el: document.getElementById("vantajs-bg"),
    mouseControls: true,
    touchControls: true,
    gyroControls: true,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00
  });
}
run();