CodePen Embed - HyperCSS

<main class="scene left">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>

<form>
  <button id="hyper" type="button">Go Hyper</button>
  <div class="range">
    <label for="range">Go Hyper</label>
    <input id="hyper-range" type="range" min="0" max="2" step=".2" value="0" />
  </div>
</form>

.scene {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  perspective: 10vmin;
}
.scene div {
  --unit: 1.5vmin;
  width: var(--unit);
  height: var(--unit);
  --rotate: rotateY(90deg);
  transform:
    translateZ(-100vmin)
    var(--rotate)
    rotateX(var(--rx))
    translateZ(var(--x))
    scaleX(1);
  position: absolute;
  top: 0%;
  left: 0%;
  
  animation: none 900ms infinite ease-in;
  
  background: white;
}

@keyframes hyper {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translateZ(0vmin)
      var(--rotate)
      rotateX(var(--rx))
      translateZ(var(--x))
      scaleX(6);
  }
}

body {
  overflow: hidden;
  background: black;
  background-image: 
    radial-gradient(circle at 40% 40%, hsl(343,80%,7%) 0%, hsla(343,80%,10%,0) 40%),
    radial-gradient(circle at 25% 52%, hsl(243,80%,9%) 0%, hsla(243,80%,10%,0) 50%),
    radial-gradient(circle at 65% 56%, hsl(143,80%,8%) 0%, hsla(143,80%,10%,0) 60%);
  background-blend-mode: screen
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

form {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding: .5rem;
}
button {
  margin: auto;
  background: transparent;
  border: .25rem solid currentColor;
  border-radius: 1rem;
  color: hsl(173, 100%, 50%);
  font-size: 1.2em;
  padding: .7rem 1.5rem
}
.hyper button {
  color: hsl(343, 100%, 50%);
}
.range {
  display: none;
}
.css-animations button {
  display: none;
}
.css-animations .range {
  margin: auto;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: hsl(173, 100%, 50%);
  color: black;
  font-size: 1.2em;
  padding: .7rem 1.5rem;
  border-radius: 1rem;
}

const stars = document.querySelectorAll('div');
const hyper = document.getElementById('hyper');
const hyperScale = document.getElementById('hyper-range');

stars.forEach((star,i) => {
  let x = `${Math.random() * 200}vmax`
  let y = `${Math.random() * 100}vh`
  let z = `${Math.random() * 200 - 100}vmin`
  let rx = `${Math.random() * 360}deg`
  star.style.setProperty('--x', x)
  star.style.setProperty('--y', y)
  star.style.setProperty('--z', z)
  star.style.setProperty('--rx', rx)
});

hyper && hyper.addEventListener('click', e => {
  if (document.documentElement.classList.contains('hyper')) {
    stars.forEach((star,i) => {
      star.style.animationName = null;
      //star.style.animationIterationCount = 1;
    });
    hyper.textContent = 'Go Hyper';
  } else {
    stars.forEach((star,i) => {
      let delay = `${Math.random() * 900}ms`;
      star.style.animationDelay = delay;
      star.style.animationName = 'hyper';
    });
    hyper.textContent = 'Stop Hyper';
  }
  document.documentElement.classList.toggle('hyper');
});





if (document.getAnimations) {
  stars.forEach((star,i) => {
    let delay = `${Math.random() * 900}ms`;
    star.style.animationDelay = delay;
    star.style.animationName = 'hyper';
  });
  const animations = document.getAnimations();
  animations.forEach(a => a.updatePlaybackRate(0));
  if (animations.length && animations[0].updatePlaybackRate) {
    document.documentElement.classList.add('css-animations')
    hyperScale.addEventListener('input', e => {
      const value = parseFloat(e.currentTarget.value);
      animations.forEach(a => a.updatePlaybackRate(value));
    })
  } else {
    stars.forEach((star,i) => {
      star.style.animationName = null;
    });
  }
}

This Pen is owned by Dan Wilson on CodePen.

See more by @danwilson on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.