<svg xmlns="http://www.w3.org/2000/svg" id="titleSvg" viewBox="0 0 1200 800" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs id="defs105">
<mask id="spotReveal">
<ellipse id="ellipse2" cx="600" cy="380" fill="white" stroke="#d6d6d6" stroke-width="120" rx="600" ry="300" />
</mask>
<linearGradient id="linear1" xlink:href="#linearGradient1605">
<stop id="stop1003" offset="0" stop-color="#e3280d" />
<stop id="stop1106" offset=".19" stop-color="#d00b0b" />
<stop id="stop1300" offset=".318" stop-color="#9d0707" />
<stop id="stop1558" offset=".318" stop-color="#a11111" />
<stop id="stop1624" offset=".445" stop-color="#ce1212" />
<stop id="stop1818" offset=".529" stop-color="#df0b40" />
<stop id="stop1884" offset=".636" stop-color="#ff4141" />
<stop id="stop2142" offset=".777" stop-color="#ce4e34" />
<stop id="stop2208" offset=".888" stop-color="#c75544" />
<stop id="stop2274" offset=".95" stop-color="#e8572a" />
<stop id="stop1005" offset="1" stop-color="#9f0000" />
</linearGradient>
<linearGradient id="linear2" x2="1" gradientUnits="objectBoundingBox">
<stop id="stop9806" offset="0" stop-color="#e3280d" />
<stop id="stop9808" offset="1" stop-color="#9f0000" />
</linearGradient>
<linearGradient id="linear3">
<stop id="stop20" offset="0" stop-color="#f03417" />
<stop id="stop22" offset=".25" stop-color="#ec4848" />
<stop id="stop24" offset=".621" stop-color="#b40e0e" />
<stop id="stop26" offset="1" stop-color="#7e1616" />
</linearGradient>
<linearGradient id="linear4" x2="1" gradientUnits="objectBoundingBox">
<stop id="stop17" offset="0" stop-color="#bd220a" />
<stop id="stop1852" offset=".46" stop-color="#ff673b" />
<stop id="stop1982" offset=".64" stop-color="#b0412d" />
<stop id="stop19" offset="1" stop-color="#af0000" />
</linearGradient>
<linearGradient id="linear10" x1="785.89" x2="719.036" y1="467.842" y2="484.328" gradientUnits="userSpaceOnUse" gradientTransform="scale(1.00056 .99944)">
<stop id="stop52" offset="0" stop-color="#f76430" />
<stop id="stop54" offset=".147" stop-color="#f93838" />
<stop id="stop16335" offset=".394" stop-color="#d31313" />
<stop id="stop56" offset=".904" stop-color="#e91e1e" />
<stop id="stop58" offset="1" stop-color="#9f0000" />
</linearGradient>
<linearGradient id="linear11" x1="193.438" x2="328.359" y1="238.877" y2="238.877" xlink:href="#linearGradient3689" gradientTransform="scale(.84123 1.18873)" gradientUnits="userSpaceOnUse">
<stop id="stop61" offset="0" stop-color="#c5230b" />
<stop id="stop65" offset=".16" stop-color="#800505" />
<stop id="stop75" offset=".28" stop-color="#ab402a" />
<stop id="stop77" offset=".486" stop-color="#e12506" />
<stop id="stop2647" offset=".77" stop-color="#fd2800" />
<stop id="stop81" offset="1" stop-color="#ff8050" />
</linearGradient>
<radialGradient id="radial6" cx="584.662" cy="132.79" r="76.168" gradientTransform="matrix(.2093 .9011 -1.39805 .32472 788.926 -398.7)" gradientUnits="userSpaceOnUse" spreadMethod="reflect" fx="584.662" fy="132.79">
<stop id="stop30" stop-color="#ff795e" offset="0" />
<stop id="stop32" stop-color="#dd0000" offset=".434" />
<stop id="stop34" stop-color="#8f0909" offset="1" />
</radialGradient>
<radialGradient id="radial7" cx="1024.078" cy="679.563" r="76.168" gradientTransform="matrix(1.04794 -.13125 .06762 .53503 -706.428 150.76)" gradientUnits="userSpaceOnUse" spreadMethod="reflect" fx="1024.078" fy="679.563" fr="0">
<stop id="stop1369" stop-color="#ff542e" offset="0" />
<stop id="stop7493" stop-color="#940606" offset=".468" />
<stop id="stop1371" stop-color="#ed490f" offset="1" />
</radialGradient>
<radialGradient id="radial8" cx="1119.217" cy="266.345" r="76.168" gradientTransform="matrix(.4586 -.1056 .25028 1.08687 395.6 196.343)" gradientUnits="userSpaceOnUse" spreadMethod="reflect" fx="1119.217" fy="266.345">
<stop id="stop53" stop-color="#f97c52" offset="0" />
<stop id="stop55" stop-color="#c01212" offset=".496" />
<stop id="stop2573" stop-color="#d40d0d" stop-opacity=".992" offset=".818" />
<stop id="stop57" stop-color="#ea0000" offset="1" />
</radialGradient>
<radialGradient id="radial10" cx="1255.604" cy="694.112" r="76.168" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.00303 -1.1965 .87627 -.00222 -111.133 2013.45)" spreadMethod="reflect" fx="1246417.1" fy="171296.59">
<stop id="stop19297" offset="0" stop-color="#fe744f" />
<stop id="stop19299" offset=".562" stop-color="#c70000" />
<stop id="stop19301" offset=".814" stop-color="#c70c0c" />
<stop id="stop19303" offset="1" stop-color="#ef0000" />
</radialGradient>
<radialGradient id="radial12" cx="599.01" cy="233.7" r="76.168" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.17493 .98458 -.42958 .07632 583.62 -389.03)" spreadMethod="reflect">
<stop id="stop88" offset="0" stop-color="#f76929" />
<stop id="stop90" offset=".652" stop-color="#c10606" />
<stop id="stop92" offset=".904" stop-color="#992929" />
<stop id="stop94" offset="1" stop-color="#9f0000" />
</radialGradient>
<radialGradient id="radial13" cx="599.01" cy="233.7" r="76.168" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.17493 .98458 -.42958 .07632 583.62 -389.03)" spreadMethod="reflect">
<stop id="stop108" offset="0" stop-color="#f76929" />
<stop id="stop110" offset=".652" stop-color="#c10606" />
<stop id="stop112" offset=".904" stop-color="#992929" />
<stop id="stop114" offset="1" stop-color="#9f0000" />
</radialGradient>
<radialGradient id="radial14" cx="1056.209" cy="436.324" r="76.168" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.20867 .29027 -.26166 1.08955 -303.787 -282.918)" fx="1246217.8" fy="171038.8" spreadMethod="reflect">
<stop id="stop117" offset="0" stop-color="#e64008" />
<stop id="stop119" offset=".182" stop-color="#e64008" />
<stop id="stop121" offset=".436" stop-color="#ad0808" />
<stop id="stop123" offset="1" stop-color="#ed0707" />
</radialGradient>
<radialGradient id="radial15" cx="1167.47" cy="467.231" r="76.168" gradientTransform="matrix(.53286 .20877 -.5097 1.29858 223.74 -487.17)" gradientUnits="userSpaceOnUse" spreadMethod="reflect" xlink:href="#radialGradient3093" fx="1167.47" fy="467.231">
<stop id="stop138" stop-color="#a41313" stop-opacity=".965" offset="0" />
<stop id="stop140" stop-color="#e64008" offset=".317" />
<stop id="stop142" stop-color="#780e0e" offset="1" />
</radialGradient>
<radialGradient id="radial16" cx="653.407" cy="323.265" r="76.168" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.45394 1.35856 -.41382 .13827 396.215 -653.42)" spreadMethod="reflect" fx="653.407" fy="323.265">
<stop id="stop130" offset="0" stop-color="#ed490f" />
<stop id="stop132" offset=".542" stop-color="#ed490f" />
<stop id="stop134" offset=".72" stop-color="#992929" />
<stop id="stop136" offset="1" stop-color="#9f0000" />
</radialGradient>
<filter id="shadow" width="1.02" height="1.068" x="-.01" y="-.033" color-interpolation-filters="sRGB">
<feFlood id="feFlood349" flood-opacity=".671" flood-color="rgb(255,51,51)" result="flood" />
<feComposite id="feComposite351" in="flood" in2="SourceGraphic" operator="in" result="composite1" />
<feGaussianBlur id="feGaussianBlur353" in="composite1" stdDeviation="3" result="blur" />
<feOffset id="feOffset355" result="offset" />
<feComposite id="feComposite357" in="SourceGraphic" in2="offset" result="composite2" />
</filter>
</defs>
<rect id="bg" width="1200" height="800" x=".067" y="-.066" />
<g id="title">
<rect id="top-box" width="898.19" height="12.222" x="153.11" y="259.4" fill="none" stroke="url(#linear1)" stroke-width="3" class="box" stroke-linecap="round" stroke-linejoin="round" />
<rect id="bottom-left-box" width="169" height="12.114" x="152.15" y="460.32" fill="none" stroke="url(#linear1)" stroke-width="3" class="box" stroke-linecap="round" stroke-linejoin="round" />
<rect id="bottom-right-box" width="149.8" height="12.317" x="923.83" y="457.42" fill="none" stroke="url(#linear1)" stroke-width="3" class="box" stroke-linecap="round" stroke-linejoin="round" />
<path id="word1-s" fill="none" stroke="url(#linear11)" stroke-width="3" d="M168.6 389.73l-3.558 50.234c2.807-2.22 1.657-4.497 9.423-6.643 13.99-.61 21.083 5.95 36.038 6.14 0 0 12.947.49 22.858-1.57 7.75-1.6 14.9-4.66 17.78-5.88 11.87-8.65 20.89-17.65 22.51-35.66 1.19-12.65 1.05-17.52-4.25-27.82-4.71-9.12-10.41-16.443-23.24-20.21-17.3-5.346-51.99-12.242-43.4-32.99 7.4-19.135 35.83-16.225 49.09 2.977l3.87 6.49 5.93-33.04-4.562 1.287c-8.216-1.794-2.46-.98-17.384-3.652-32.46-9.71-69.31 1.015-73.21 35.705-1.92 17.924 1.197 33.528 18.544 42.58l29.063 11.788 15.45 6.587c18.583 12.843 1.6 33.375-7.38 36.44-12.136 1.585-23.64 2.14-31.72-4.52-10.454-8.628-14.276-15.036-17.57-28.26z" />
<path id="word1-t" stroke="url(#linear3)" stroke-width="3" d="M288.34 406.53h50.96v-4.48c-8.8-.48-10.237-5.764-9.92-18.56v-80.68h2.08c14.56 0 24 9.64 28.8 25l4.48-.8-5.712-28.35-1.693-6.797c-26.363-.112-52.492-.053-79.715-.053-2.502 0-4.204-.004-7.57-.066l-.437 2.362-6.553 32.904 4.48.8c4.8-15.36 14.24-25 28.8-25h2.08v80.68c0 12.32-.96 17.92-10.08 18.56z" />
<path id="word1-r1" stroke="url(#radial7)" stroke-width="3" d="M366.755 404.63h46.324v-4.464c-7.366-1.275-7.686-5.898-7.686-16.42v-28.218l6.08-1.912c15.52 15.782 22.08 34.117 22.08 40.015 0 3.19-1.44 4.786-5.44 6.538v4.463h49.766v-4.465c-6.56-.956-8.64-6.535-12.32-15.622-7.04-17.22-14.4-31.406-24.162-42.087 14.402-8.61 21.604-19.928 21.604-31.088 0-11.795-7.68-17.055-23.203-17.055h-73.047v4.464c7.36 1.275 7.68 5.898 7.68 16.42v68.55c0 10.523-.32 15.147-7.68 16.42zm38.643-61.215v-29.813c0-6.06.32-8.77 11.04-8.77 9.44 0 13.92 3.51 13.92 11.64 0 11-8.8 23.433-24.96 26.943z" />
<path id="word1-a" stroke="url(#radial16)" stroke-width="3" d="M506.84 308.71l-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.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-.32-9.12-5.76-12.64-16l-24.32-75.44c-.48-1.6-.96-3.2-.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-.32 3.04-.96 4.64zm-.32 43.76l11.2-34.32 11.68 42c-6.56-4.32-13.92-6.72-22.88-7.68z" />
<path id="word1-g" fill="none" stroke="url(#radial6)" stroke-width="3" d="M762.66 362.15v15.52c0 10.72-.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.87-49.823 30.81-2.227 14.867-.86 29.565-1.34 44.36.22 1.398.528 2.8.958 4.086 6.746 20.175 17.09 32.45 50.53 32.898 25.9.61 40.803.356 63.042.27v-4.4c-8.32-1.6-9.127-5.464-9.127-15.704v-22.4c0-10.24.64-15.04 8.96-16.64v-4.32H753.7v4.32c8.32 1.6 8.96 6.4 8.96 16.64z" />
<path id="word1-e" stroke="url(#linear4)" stroke-width="3" 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.858-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-.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.52 7.68 20.08v64.8c0 10.56-.32 15.2-7.68 16.48z" />
<path id="word1-r2" stroke="url(#radial8)" stroke-width="3" d="M923.54 430.67h61.805v-5.73c-9.414-1.637-9.824-7.573-9.824-21.08v-36.223l7.78-2.456c19.85 20.27 28.24 43.8 28.24 51.37 0 4.1-1.84 6.14-6.95 8.39v5.73h63.65v-5.73c-8.39-1.22-11.05-8.39-15.76-20.05-9-22.1-18.42-40.31-30.9-54.03 18.42-11.05 27.63-20.46 27.63-34.79 0-15.14-9.82-21.9-29.67-21.9h-95.98v5.73c9.413 1.64 9.822 7.58 9.822 21.08v82.89c0 13.51-.41 19.45-9.822 21.08zm51.982-78.587V318.93c0-7.778.41-11.257 14.12-11.257 12.076 0 17.805 4.502 17.805 14.94 0 14.12-11.255 24.968-31.925 29.47z" />
<path id="word2-t" fill="#000000" stroke="url(#linear3)" stroke-width="3" d="M357.06 551.61h50.96v-4.48c-8.8-.48-10.237-5.764-9.92-18.56v-80.68h2.08c14.56 0 24 9.64 28.8 25l4.48-.8-5.712-28.35-1.693-6.797c-26.363-.112-52.492-.053-79.715-.053-2.502 0-4.204-.004-7.57-.066l-.437 2.362-6.553 32.904 4.48.8c4.8-15.36 14.24-25 28.8-25h2.08v80.68c0 12.32-.96 17.92-10.08 18.56z" />
<path id="word2-h" stroke="url(#radial10)" stroke-width="3" d="M477.1 482.15h27.04v48.84c0 10.56-.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.32-15.2 7.68-16.48v-4.48h-48.32v4.48c7.36 1.28 7.68 5.92 7.68 16.48v8.32H477.1v-8.32c0-10.56.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-.32 15.2-7.68 16.48v4.48h48.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48z" />
<path id="word2-i" stroke="url(#radial12)" stroke-width="3" d="M553.5 551.95h46.32v-4.48c-7.36-1.28-7.68-5.92-7.68-16.48v-68.2c0-10.56.32-15.2 7.68-16.48v-4.48H553.5v4.48c7.36 1.28 7.68 5.92 7.68 16.48v68.2c0 10.56-.32 15.2-7.68 16.48z" />
<path id="word2-n" stroke="url(#radial13)" stroke-width="3" d="M615.7 462.48v68.5c0 10.56-.32 15.2-7.68 16.48v4.48h31.36v-4.48c-9.28-.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.32-15.2 7.68-16.48v-4.48h-29.12V446c7.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-60V446c7.36 1.28 7.68 5.92 7.68 16.48z" />
<path id="word2-g" stroke="url(#linear10)" stroke-width="3" d="M782.51 509.38v15.52c0 10.72-.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.87-49.823 30.81-2.227 14.867-.86 29.565-1.34 44.36.22 1.398.528 2.8.958 4.086 6.746 20.175 17.09 32.45 50.53 32.898 25.9.61 40.803.356 63.042.27v-4.4c-8.32-1.6-9.127-5.464-9.127-15.704v-22.4c0-10.24.64-15.04 8.96-16.64v-4.32h-50.56v4.32c8.32 1.6 8.96 6.4 8.96 16.64z" />
<path id="word2-s" stroke="url(#radial14)" stroke-width="3" d="M892.84 479.29l-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-.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.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" />
<path id="word1-n" stroke="url(#radial15)" stroke-width="3" d="M595.98 315.248v68.44c0 9.986-.205 14.528-6.47 16.07-.354.086-.726.164-1.12.232l-.023 1.227-.067 3.41h31.36v-4.673c-9.28-.64-10.08-6.355-10.08-18.345v-67.32l58.56 69.24v3.67c0 8.953-1.12 12.63-9.92 12.95v4.476h31.36v-4.476c-7.36-1.28-7.68-5.914-7.68-16.464v-68.44c0-10.55.32-15.186 7.68-16.465v-4.474h-29.12v4.474c7.36 1.28 7.68 5.914 7.68 16.464v16.305l-20.64-22.86c-1.92-2.08-2.88-4.478-2.88-5.597 0-1.596 1.12-3.195 3.68-4.314v-4.476h-60v4.475c7.36 1.28 7.68 5.914 7.68 16.464z" />
<rect id="black-magic-box1" width="16.729" height="1.9" x="578.532" y="401.238" fill="#000000" stroke-width="1.027" ry="1.334" />
<rect id="black-magic-box2" width="13.629" height="5.9" x="463.535" y="397.223" stroke-width="1.01" />
</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>
<label id="shadow-toggle">Show shadows:<input type="checkbox"></label>/*
Best viewed in 'Full Page View'.
Click the unmute button to play accompanying audio. You need to restart animation for it to play because audio needs to be user-activated in the browser.
Check the "Show shadows" checkbox below the title to add a shadow to the title for a more neon appearance - it slows down the aninmation a lot in Firefox.
Tutorial on how it was made:
https://www.roboleary.net/animation/2023/05/30/how-to-make-a-slick-animation-stranger-things-title-sequence.html
Part of Title Sequences collection:
https://codepen.io/collection/nNmwgP
Source Code:
https://github.com/robole/title-sequences
*/
body {
--max-width: 1000px;
display: grid;
overflow: hidden;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
place-items: center;
}
svg {
display: block;
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
}
/* volume toggle */
label[for="volume"] {
position: fixed;
top: calc(0.5rem + 1vw);
right: clamp(
1rem,
calc(50vw - var(--max-width) / 2 + 0.5rem),
calc(50vw - var(--max-width) / 2 + 0.5rem)
);
width: clamp(1rem, calc(1.25rem + 1vw), 2rem);
height: clamp(1rem, calc(1.25rem + 1vw), 2rem);
background-color: white;
border-radius: 50%;
cursor: pointer;
}
label[for="volume"] > svg {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
label[for="volume"] path {
fill: black;
}
label .mute-off {
display: none;
}
#volume {
display: none;
width: 0;
height: 0;
}
:checked ~ label .mute-off {
display: block;
}
:checked ~ label .mute-on {
display: none;
}
#shadow-toggle {
display: flex;
align-items: center;
padding: 0.5rem 0;
font-size: 1.5rem;
}
#shadow-toggle input {
--size: 1.5rem;
width: var(--size);
height: var(--size);
box-shadow: 0 0 2px hsl(0deg 0% 0% / 30%), 0 1px 2px hsl(0deg 0% 0% / 20%);
}
gsap.registerPlugin(EasePack);
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;
}
function polish() {
let magicBoxesTimeline = gsap.timeline();
magicBoxesTimeline
.to("#black-magic-box1", {
opacity: 1,
ease: "power2.in",
duration: 0.8
})
.to(
"#black-magic-box2",
{
opacity: 1,
duration: 0.8,
ease: "power2.in"
},
"<+=2.2"
);
return magicBoxesTimeline;
}
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%" })
.set("#black-magic-box1, #black-magic-box2", {
opacity: 0
});
masterTimeline
.add(part1(), 0)
.add(part2(), 0)
.add(polish(), 5.3) // at 5.3 second mark
.add(part3(), 15)
.add(part4(), 19);
const titleSvg = document.querySelector("#titleSvg");
titleSvg.addEventListener("click", () => {
masterTimeline.restart();
});
// audio toggle
let song = new Audio(
"https://github.com/robole/title-sequences/raw/main/stranger-things/audio/title.mp3"
);
const muteToggle = document.querySelector("#volume");
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();
}
// shadow toggle
const shadowToggle = document.querySelector("#shadow-toggle input");
shadowToggle.addEventListener("click", toggleShadow);
function toggleShadow() {
const titleGroup = document.querySelector("#title");
const value = titleGroup.getAttribute("filter");
if (value === null || value === "") {
titleGroup.setAttribute("filter", "url(#shadow)");
} else {
titleGroup.setAttribute("filter", "");
}
}
External CSS
This Pen doesn't use any external CSS resources.