<!--Recreated southernshotty's rocket cartoon. See: https://www.youtube.com/watch?v=wMBu4ctUxn8-->

<div class="fire-wrapper">

  <img class="fire" src="https://stivs.dev/assets/rocket/fire.svg" />

</div>

​

<div class="rain rain1"></div>

<div class="rain rain2">

  <div class="drop drop2"></div>

</div>

<div class="rain rain3"></div>

<div class="rain rain4"></div>

<div class="rain rain5">

  <div class="drop drop5"></div>

</div>

<div class="rain rain6"></div>

<div class="rain rain7"></div>

<div class="rain rain8">

  <div class="drop drop8"></div>

</div>

<div class="rain rain9"></div>

<div class="rain rain10"></div>

<div class="drop drop11"></div>

<div class="drop drop12"></div>

<div id="canvas"></div>

html,

body {

  margin: 0;

  height: 100%;

  background: #1a032b;

  overflow: hidden;

  perspective: 10rem;

}

​

#canvas {

  position: absolute;

  width: 100%;

  height: 100%;

  overflow: hidden;

}

​

.fire-wrapper {

  left: 50%;

  position: absolute;

  top: 50%;

  transform-origin: top center;

  transform: translate(-50%, 0) rotate3d(1, 0, 0, 60deg);

  width: 3.5rem;

}

​

.fire {

  animation: whoosh 1s linear infinite both;

  width: 100%;

}

​

@keyframes whoosh {

  from {

    transform: translateY(-25%);

  }

  to {

    transform: translateY(0);

  }

}

​

.rain {

  position: absolute;

  width: 1rem;

  height: 10rem;

  background: #ffffff;

  border-radius: 20%;

  opacity: 0.2;

  z-index: -1;

}

​

.drop {

  width: 1rem;

  height: 7rem;

  background: #ffffff;

  position: absolute;

  border-radius: 20%;

  opacity: 0.2;

}

​

.rain1 {

  left: 5rem;

  top: 2rem;

  animation: raining 2s linear infinite both;

}

​

.rain2 {

  left: 15rem;

  top: 10rem;

  animation: raining 3s linear infinite both;

}

​

.drop2 {

  top: 12rem;

  animation: raining 4s linear infinite both -2s;

}

​

.rain3 {

  left: 5rem;

  top: 35rem;

  animation: raining 3s linear infinite both;

}

​

.rain4 {

  right: 23rem;

  top: 6rem;

  animation: raining 4s linear infinite both;

}

​

.rain5 {

  left: 25rem;

  top: 47rem;

  animation: raining 3s linear infinite both -3s;

}

​

.drop5 {

  top: -6rem;

  animation: raining 2s linear infinite both;

}

​

.rain6 {

  right: 10rem;

  top: 34rem;

  animation: raining 3s linear infinite both;

}

​

.rain7 {

  left: 34rem;

  top: 10rem;

  animation: raining 2s linear infinite both -5s;

}

​

.rain8 {

  right: 25rem;

  top: 40rem;

  animation: raining 3s linear infinite both;

}

​

.drop8 {

  top: -7rem;

  animation: raining 4s linear infinite both -6s;

}

​

.rain9 {

  right: 5rem;

  top: 15.5rem;

  animation: raining 3s linear infinite both;

}

​

.rain10 {

  left: 24rem;

  top: -4rem;

  animation: raining 2s linear infinite both -3s;

}

​

.drop11 {

  right: 17rem;

  top: 20rem;

  animation: raining 3s linear infinite both;

}

​

.drop12 {

  right: 15rem;

  top: 50rem;

  animation: raining 4s linear infinite both -1s;

}

​

@keyframes raining {

  from {

    transform: translateY(-1200px);

  }

  to {

    transform: translateY(869px);

  }

}

​

let scene,

  camera,

  fieldOfView,

  aspectRatio,

  nearPlane,

  farPlane,

  renderer,

  container,

  rocket,

  HEIGHT,

  WIDTH;

​

const createScene = () => {

  HEIGHT = window.innerHeight;

  WIDTH = window.innerWidth;

​

  scene = new THREE.Scene();

​

  scene.fog = new THREE.Fog(0x5d0361, 10, 1500);

​

  aspectRatio = WIDTH / HEIGHT;

  fieldOfView = 60;

  nearPlane = 1;

  farPlane = 10000;

  camera = new THREE.PerspectiveCamera(

    fieldOfView,

    aspectRatio,

    nearPlane,

    farPlane

  );

​

  camera.position.x = 0;

  camera.position.z = 500;

  camera.position.y = -10;

​

  renderer = new THREE.WebGLRenderer({

    alpha: true,

    antialias: true

  });

  renderer.setSize(WIDTH, HEIGHT);

​

  renderer.shadowMap.enabled = true;

​

  container = document.getElementById("canvas");

  container.appendChild(renderer.domElement);

​

  window.addEventListener("resize", handleWindowResize, false);

​

  let loader = new THREE.GLTFLoader();

  loader.load( "https://stivs.dev/assets/rocket/rocket.gltf",

    (gltf) => {

      rocket = gltf.scene;

      rocket.position.y = 50;

      scene.add(rocket);

    }

  );

};

​

const handleWindowResize = () => {

  HEIGHT = window.innerHeight;

  WIDTH = window.innerWidth;

  renderer.setSize(WIDTH, HEIGHT);

  camera.aspect = WIDTH / HEIGHT;

  camera.updateProjectionMatrix();

};

​

const createLights = () => {

  const ambientLight = new THREE.HemisphereLight(0x404040, 0x404040, 1);

​

  const directionalLight = new THREE.DirectionalLight(0xdfebff, 1);

  directionalLight.position.set(-300, 0, 600);

​

  const pointLight = new THREE.PointLight(0xa11148, 2, 1000, 2);

  pointLight.position.set(200, -100, 50);

​

  scene.add(ambientLight, directionalLight, pointLight);

};

​

const targetRocketPosition = 40;

const animationDuration = 2000;

​

const loop = () => {

  const t = (Date.now() % animationDuration) / animationDuration;

​

  renderer.render(scene, camera);

​

  const delta = targetRocketPosition * Math.sin(Math.PI * 2 * t);

  if (rocket) {

    rocket.rotation.y += 0.1;

    rocket.position.y = delta;

  }

​

  requestAnimationFrame(loop);

};

​

const main = () => {

  createScene();

  createLights();

​

  renderer.render(scene, camera);

  loop();

};

​

main();

​