<svg id="titleSvg" viewBox="0 0 1200 800">
  <defs>
    <mask id="spotReveal">
      <ellipse fill="white" stroke="#d6d6d6" cx="600" rx="600" stroke-width="120" ry="300" cy="380"></ellipse>
    </mask>
    <linearGradient id="new1">
      <stop style="stop-color: #e3280d" offset="0" id="stop1003" />
      <stop style="stop-color: #d00b0b" offset="0.19041669" id="stop1106" />
      <stop style="stop-color: #9d0707" offset="0.31840381" id="stop1300" />
      <stop style="stop-color: #a11111" offset="0.31840381" id="stop1558" />
      <stop style="stop-color: #ce1212" offset="0.44549781" id="stop1624" />
      <stop style="stop-color: #df0b40" offset="0.52902949" id="stop1818" />
      <stop style="stop-color: #ff4141" offset="0.63628668" id="stop1884" />
      <stop style="stop-color: #ce4e34" offset="0.77737433" id="stop2142" />
      <stop style="stop-color: #c75544" offset="0.88792109" id="stop2208" />
      <stop style="stop-color: #e8572a" offset="0.95003206" id="stop2274" />
      <stop style="stop-color: #9f0000" offset="1" id="stop1005" />
    </linearGradient>
    <radialGradient id="radial2" cx="1038.5" cy="213.52" r="76.168" gradientTransform="matrix(.020383 1.1666 -1.3959 .02439 1236.4 -1010)" gradientUnits="userSpaceOnUse" spreadMethod="repeat">
      <stop id="stop1369" stop-color="#a41313" stop-opacity=".96525" offset="0" />
      <stop id="stop1441" stop-color="#ff3636" stop-opacity=".98132" offset=".31701" />
      <stop id="stop1371" stop-color="#780e0e" offset="1" />
    </radialGradient>
    <radialGradient id="radial3" cx="599.01" cy="233.7" r="76.168" gradientTransform="matrix(.17493 .98458 -.42958 .076323 583.62 -389.03)" gradientUnits="userSpaceOnUse" spreadMethod="reflect">
      <stop id="stop32104" stop-color="#ff3c3c" offset="0" />
      <stop id="stop32242" stop-color="#601414" offset=".39687" />
      <stop id="stop32106" stop-color="#a41313" offset="1" />
    </radialGradient>
  </defs>
  <rect id="bg" width="1200" height="800" />
  <g id="title">
    <rect id="top-box" class="box" x="153.11" y="259.4" width="898.19" height="12.222" fill="none" stroke="url(#new1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
    <rect id="bottom-left-box" class="box" x="152.15" y="460.32" width="169" height="12.114" fill="none" stroke="url(#new1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
    <rect id="bottom-right-box" class="box" x="923.83" y="457.42" width="149.8" height="12.317" fill="none" stroke="url(#new1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.7973" />
    <path id="word1-s" d="m168.6 389.73-3.5578 50.234c2.807-2.2194 1.6564-4.4968 9.4225-6.6434 13.99-0.61876 21.083 5.9413 36.038 6.1371 0 0 12.947 0.48292 22.858-1.5716 7.7487-1.6062 14.891-4.6608 17.774-5.8862 11.871-8.6555 20.885-17.656 22.51-35.666 1.1835-12.651 1.0453-17.521-4.2534-27.82-4.7127-9.121-10.409-16.446-23.246-20.213-17.3-5.3467-51.99-12.243-43.401-32.989 7.4003-19.136 35.827-16.226 49.092 2.9757l3.8702 6.491 5.9274-33.042-4.5653 1.2883c-8.2155-1.7953-2.4604-0.98236-17.384-3.6527-32.461-9.7138-69.306 1.0122-73.206 35.702-1.9216 17.924 1.1965 33.528 18.543 42.58l29.065 11.788 15.453 6.5867c18.582 12.844 1.5992 33.376-7.3793 36.442-12.137 1.584-23.641 2.1384-31.72-4.5209-10.455-8.628-14.277-15.036-17.572-28.26z" fill="none" stroke="url(#new1)" stroke-width="4" />
    <path id="word1-t" d="m288.34 406.53h50.96v-4.48c-8.8-0.48-10.237-5.7639-9.92-18.56v-80.68h2.08c14.56 0 24 9.6403 28.8 25l4.48-0.8-5.7119-28.349-1.6927-6.7984c-26.363-0.11171-52.492-0.0526-79.715-0.0526-2.5019 0-4.2045-4e-3 -7.5712-0.0656l-0.43658 2.3619-6.5522 32.904 4.48 0.8c4.8-15.36 14.24-25 28.8-25h2.08v80.68c0 12.32-0.96 17.92-10.08 18.56z" stroke="url(#radial3)" stroke-width="4" />
    <path id="word1-r1" d="m366.76 404.63h46.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-28.32l6.08-1.92c15.52 15.84 22.08 34.24 22.08 40.16 0 3.2-1.44 4.8-5.44 6.56v4.48h49.76v-4.48c-6.56-0.96-8.64-6.56-12.32-15.68-7.04-17.28-14.4-31.52-24.16-42.24 14.4-8.64 21.6-20 21.6-31.2 0-11.84-7.68-17.12-23.2-17.12h-73.04v4.48c7.36 1.28 7.68 5.92 7.68 16.48v68.8c0 10.56-0.32 15.2-7.68 16.48zm38.64-61.44v-29.92c0-6.08 0.32-8.8 11.04-8.8 9.44 0 13.92 3.52 13.92 11.68 0 11.04-8.8 23.52-24.96 27.04z" stroke="url(#radial2)" stroke-width="4" />
    <path id="word1-a" d="m506.84 308.71-24.64 71.44c-4 11.04-6.72 18.08-16.48 20v4.48h36.16v-4.48c-5.44 0-8.32-2.56-8.32-7.52 0-2.56 0.8-6.24 2.4-10.88l6.24-17.6c22.88 1.44 37.12 14.08 37.12 27.04 0 5.28-2.4 8-8.16 8.96v4.48h54.56v-4.48c-6.88-0.32-9.12-5.76-12.64-16l-24.32-75.44c-0.48-1.6-0.96-3.2-0.96-5.12 0-1.76 1.44-3.68 4.32-4.8v-4.48h-48.64v4.48c3.04 1.28 4.32 2.88 4.32 5.28 0 1.44-0.32 3.04-0.96 4.64zm-0.32 43.76 11.2-34.32 11.68 42c-6.56-4.32-13.92-6.72-22.88-7.68z" stroke="url(#radial2)" stroke-width="4" />
    <path id="word1-n" d="m596.28 315.27v68.5c0 10.56-0.32 15.2-7.68 16.48v4.48h31.36v-4.48c-9.28-0.64-10.08-6.56-10.08-18.56v-67.38l58.56 69.3v3.68c0 8.96-1.12 12.64-9.92 12.96v4.48h31.36v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.5c0-10.56 0.32-15.2 7.68-16.48v-4.48h-29.12v4.48c7.36 1.28 7.68 5.92 7.68 16.48v16.32l-20.64-22.88c-1.92-2.08-2.88-4.48-2.88-5.6 0-1.6 1.12-3.2 3.68-4.32v-4.48h-60v4.48c7.36 1.28 7.68 5.92 7.68 16.48z" stroke="url(#radial3)" stroke-width="4" />
    <path id="word1-g" d="m762.66 362.15v15.52c0 10.72-0.8 16.48-11.68 16.48-16.16 0-30.72-19.36-30.72-48.16 0-22.56 11.68-40.16 30.24-40.16 12.8 0 22.24 6.88 30.56 20.96h3.84l-4.96-35.2c-4.16 2.4-7.52 3.84-10.72 3.84-5.92 0-14.88-3.2-28.16-3.2-23.964 0-42.424 11.871-49.823 30.809-2.2267 14.868-0.85946 29.566-1.3397 44.36 0.21956 1.3994 0.5279 2.801 0.95774 4.0866 6.7456 20.175 17.091 32.451 50.531 32.898 25.898 0.60938 40.802 0.35609 63.041 0.27039v-4.4006c-8.32-1.6-9.1267-5.4632-9.1267-15.703v-22.4c0-10.24 0.64-15.04 8.96-16.64v-4.32h-50.56v4.32c8.32 1.6 8.96 6.4 8.96 16.64z" stroke="url(#radial3)" stroke-width="4" />
    <path id="word1-e" d="m814.78 404.63h83.92c2.88 0 5.6 0 8.48 1.76l13.6-43.52-4.16-1.28c-10.56 21.92-23.68 32.32-41.28 32.32-11.52 0-13.276-3.8583-13.92-15.2v-35.2h8.16c13.28 0 18.72 5.44 22.72 18.72l3.2-1.28-6.88-40.8h-3.2c-1.28 10.72-4.96 12.32-15.04 12.32h-8.96v-11.04c0-9.12 1.28-16.24 11.04-16.24 17.28 0 29.44 8 35.84 23.68l4.16-0.96-8.96-36.8c-1.76 2.24-4.8 3.2-9.12 3.2h-79.6v4.48c7.36 1.28 7.68 9.5197 7.68 20.08v64.8c0 10.56-0.32 15.2-7.68 16.48z" stroke="url(#radial3)" stroke-width="4" />
    <path id="word1-r2" d="m923.54 430.67h61.805v-5.7301c-9.4143-1.6374-9.8236-7.5725-9.8236-21.079v-36.224l7.7769-2.4558c19.852 20.261 28.242 43.796 28.242 51.368 0 4.093-1.8423 6.1396-6.9571 8.3908v5.7301h63.646v-5.7301c-8.393-1.2281-11.05-8.3908-15.76-20.056-9.0018-22.103-18.418-40.317-30.9-54.028 18.418-11.052 27.627-20.466 27.627-34.791 0-15.144-9.8222-21.898-29.675-21.898h-95.982v5.7301c9.4139 1.6374 9.8233 7.5725 9.8233 21.079v82.885c0 13.507-0.40942 19.442-9.8233 21.079zm51.982-78.587v-33.154c0-7.7769 0.40932-11.256 14.121-11.256 12.075 0 17.804 4.5023 17.804 14.94 0 14.121-11.255 24.968-31.925 29.47z" stroke="url(#radial2)" stroke-width="5.1163" />
    <path id="word2-t" d="m357.06 551.61h50.96v-4.48c-8.8-0.48-10.237-5.7639-9.92-18.56v-80.68h2.08c14.56 0 24 9.6403 28.8 25l4.48-0.8-5.7119-28.349-1.6927-6.7984c-26.363-0.11171-52.492-0.0526-79.715-0.0526-2.5019 0-4.2045-4e-3 -7.5712-0.0656l-0.43658 2.3619-6.5522 32.904 4.48 0.8c4.8-15.36 14.24-25 28.8-25h2.08v80.68c0 12.32-0.96 17.92-10.08 18.56z" stroke="url(#radial3)" stroke-width="4" />
    <path id="word2-h" d="m477.1 482.15h27.04v48.84c0 10.56-0.32 15.2-7.68 16.48v4.48h48.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.2c0-10.56 0.32-15.2 7.68-16.48v-4.48h-48.32v4.48c7.36 1.28 7.68 5.92 7.68 16.48v8.32h-27.04v-8.32c0-10.56 0.32-15.2 7.68-16.48v-4.48h-48.32v4.48c7.36 1.28 7.68 5.92 7.68 16.48v68.2c0 10.56-0.32 15.2-7.68 16.48v4.48h48.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48z" stroke="url(#radial2)" stroke-width="4" />
    <path id="word2-i" d="m553.5 551.95h46.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.2c0-10.56 0.32-15.2 7.68-16.48v-4.48h-46.32v4.48c7.36 1.28 7.68 5.92 7.68 16.48v68.2c0 10.56-0.32 15.2-7.68 16.48z" stroke="url(#radial3)" stroke-width="4" />
    <path id="word2-n" d="m615.7 462.48v68.5c0 10.56-0.32 15.2-7.68 16.48v4.48h31.36v-4.48c-9.28-0.64-10.08-6.56-10.08-18.56v-67.38l58.56 69.3v3.68c0 8.96-1.12 12.64-9.92 12.96v4.48h31.36v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.5c0-10.56 0.32-15.2 7.68-16.48v-4.48h-29.12v4.48c7.36 1.28 7.68 5.92 7.68 16.48v16.32l-20.64-22.88c-1.92-2.08-2.88-4.48-2.88-5.6 0-1.6 1.12-3.2 3.68-4.32v-4.48h-60v4.48c7.36 1.28 7.68 5.92 7.68 16.48z" stroke="url(#radial2)" stroke-width="4" />
    <path id="word2-g" d="m782.51 509.38v15.52c0 10.72-0.8 16.48-11.68 16.48-16.16 0-30.72-19.36-30.72-48.16 0-22.56 11.68-40.16 30.24-40.16 12.8 0 22.24 6.88 30.56 20.96h3.84l-4.96-35.2c-4.16 2.4-7.52 3.84-10.72 3.84-5.92 0-14.88-3.2-28.16-3.2-23.964 0-42.424 11.871-49.823 30.809-2.2267 14.868-0.85946 29.566-1.3397 44.36 0.21956 1.3994 0.5279 2.801 0.95774 4.0866 6.7456 20.175 17.091 32.451 50.531 32.898 25.898 0.60938 40.802 0.35609 63.041 0.27039v-4.4006c-8.32-1.6-9.1267-5.4632-9.1267-15.703v-22.4c0-10.24 0.64-15.04 8.96-16.64v-4.32h-50.56v4.32c8.32 1.6 8.96 6.4 8.96 16.64z" stroke="url(#radial2)" stroke-width="4" />
    <path id="word2-s" d="m892.84 479.29-13.44-4.16c-8.96-2.88-14.08-5.28-14.08-12 0-6.24 5.76-11.2 14.88-11.2 11.52 0 22.56 7.84 30.08 22.56l4.48-0.64-3.36-33.92c-2.88 1.6-5.28 2.56-7.52 2.56-8.8 0-19.52-3.2-32.16-3.2-25.92 0-40.64 13.76-40.64 33.28 0 15.52 8.8 26.64 26.56 32.4l12.8 4.16c12.8 4.16 20.8 5.76 20.8 16.16 0 8.8-7.36 14.24-21.28 14.24-19.84 0-32.96-11.68-36.32-32.8l-4.32 0.16 2.72 45.12c3.2-2.24 5.76-3.36 8.96-3.36 6.24 0 17.12 3.84 33.28 3.84 31.68 0 51.36-16.16 51.36-38.88 0-19.04-11.52-27.6-32.8-34.32z" stroke="url(#radial2)" stroke-width="4" />
  </g>
</svg>
<input id="volume" type="checkbox" />
<label for="volume" title="Toggle sound">
  <svg class="mute-off" viewBox="0 0 24 24">
    <path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"></path>
  </svg>
  <svg class="mute-on" viewBox="0 0 24 24">
    <path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"></path>
  </svg>
</label>

/*

Click the unmute button for accompanying audio that skips between tracks featured in the show.

Part of Title Sequences collection:
https://codepen.io/collection/nNmwgP

Source Code:
https://github.com/robole/title-sequences

*/

body {
  overflow: hidden;
}

svg {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* volume toggle */

label {
  position: fixed;
  top: calc(0.5rem + 1vw);
  right: clamp(
    0.5rem,
    calc(50vw - 400px + 0.5rem),
    calc(50vw - 400px + 0.5rem)
  );
  width: clamp(1rem, calc(1.25rem + 2vw), 2rem);
  height: clamp(1rem, calc(1.25rem + 2vw), 2rem);
  background-color: white;
  border-radius: 50%;
  cursor: pointer;
}

label > svg {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}

label path {
  fill: black;
}

label .mute-off {
  display: none;
}

input[type="checkbox"] {
  display: none;
  width: 0;
  height: 0;
}

:checked ~ label .mute-off {
  display: block;
}

:checked ~ label .mute-on {
  display: none;
}

gsap.registerPlugin(EasePack);

let song = new Audio("https://github.com/robole/title-sequences/raw/main/stranger-things/audio/title.mp3");
const muteToggle = document.querySelector("input[type='checkbox']");

muteToggle.addEventListener("click", toggleMute);

function toggleMute() {
  song.muted = !song.muted;
}

function playSong() {
  song.volume = 0.3;
  song.currentTime = 0;
  song.muted = !muteToggle.checked;
  song.play();
}

function part1() {
  let scaleTimeline = gsap.timeline();

  scaleTimeline.set("#title", { transformOrigin: "48% 70%", scale: 4.9 });

  scaleTimeline.to("#title", {
    duration: 20,
    scale: 0.8,
    ease: EasePack.ExpoScaleEase.config(4.9, 0.8),
  });

  return scaleTimeline;
}

function part2() {
  let lettersTimeline = gsap.timeline();

  let batch1Distance = 30;
  let batch3Distance = 50;
  let batch6and8Distance = 180;
  let batch9and10Distance = 150;

  // first word: STRANGER
  lettersTimeline.set("#word1-s", { x: `-${batch9and10Distance}` });
  lettersTimeline.set("#word1-t", { y: `-${batch6and8Distance}` });
  lettersTimeline.set("#word1-r1", { x: -60 });
  lettersTimeline.set("#word1-a", { x: `-${batch1Distance}` });
  lettersTimeline.set("#word1-n", { x: `${batch1Distance}` });
  lettersTimeline.set("#word1-g", { x: `${batch3Distance}` });
  lettersTimeline.set("#word1-e", { y: -180 });
  lettersTimeline.set("#word1-r2", { x: `${batch9and10Distance}` });

  // second word: THINGS
  // 'T' is static
  lettersTimeline.set("#word2-h", { y: `${batch6and8Distance}` });
  lettersTimeline.set("#word2-i", { x: -130 });
  lettersTimeline.set("#word2-n", { y: 140 });
  lettersTimeline.set("#word2-g", { x: `${batch3Distance}` });
  lettersTimeline.set("#word2-s", { y: 180 });

  lettersTimeline
    .addLabel("batch1", 0)
    .addLabel("batch2", 0.2)
    .addLabel("batch3", 1)
    .addLabel("batch4", 4)
    .addLabel("batch5", 5)
    .addLabel("batch6", 8.75)
    .addLabel("batch7", 9)
    .addLabel("batch8", 9.5)
    .addLabel("batch9", 11)
    .addLabel("batch10", 12.75)

    .to("#word1-a, #word1-n", { x: 0, duration: 6 }, "batch1")
    .to("#word2-i", { x: 0, duration: 9 }, "batch2")
    .to("#word1-g, #word2-g", { x: 0, duration: 11 }, "batch3")
    .to("#word1-r1", { x: 0, duration: 6 }, "batch4")
    .to("#word2-n", { y: 0, duration: 5 }, "batch5")
    .to("#word1-t", { y: 0, duration: 6 }, "batch6")
    .to("#word2-h", { y: 0, duration: 4.5 }, "batch7")
    .to("#word1-e, #word2-s", { y: 0, duration: 7 }, "batch8")
    .to("#word1-r2", { x: 0, duration: 6 }, "batch9")
    .to("#word1-s", { x: 0, duration: 4.25 }, "batch10");

  return lettersTimeline;
}

function part3() {
  let boxesTimeline = gsap.timeline();

  boxesTimeline
    .to("#top-box", { scaleX: 1, duration: 1, ease: "power2.out" })
    .to(
      "#bottom-left-box, #bottom-right-box",
      { scaleX: 1, duration: 0.75 },
      "-=.5"
    );

  return boxesTimeline;
}

function part4() {
  let visibilityTimeline = gsap.timeline();

  visibilityTimeline.set("#spotReveal ellipse", {
    transformOrigin: "50% 50%",
  });

  visibilityTimeline.to("#spotReveal ellipse", {
    scale: 0.6,
    opacity: 0,
    duration: 2,
    onStart: () => {
      document.querySelector("#title").setAttribute("mask", "url(#spotReveal)");
    },
  });

  return visibilityTimeline;
}

const masterTimeline = gsap.timeline({
  onStart: () => {
    playSong();
  },
  onRepeat: () => {
    playSong();
  },
});

// since we want this to be set at the very start
masterTimeline
  .set("#top-box", { scaleX: 0, transformOrigin: "50% 50%" })
  .set("#bottom-left-box", { scaleX: 0, transformOrigin: "100% 50%" })
  .set("#bottom-right-box", { scaleX: 0, transformOrigin: "0% 50%" });

masterTimeline
  .add(part1(), 0)
  .add(part2(), 0)
  .add(part3(), 15) // at 15 seconds
  .add(part4(), 19);

const titleSvg = document.querySelector("#titleSvg");

titleSvg.addEventListener("click", () => {
  masterTimeline.restart();
});