<svg viewBox="0 0 1200 800">
<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>
<label id="shadow-toggle">Shadows:<input type="checkbox" /></label>
<button title="Mute sound">
<svg class="mute-on" viewBox="0 0 24 24" aria-label="Mute on">
<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>
<svg class="mute-off hide" viewBox="0 0 24 24" aria-label="Mute off">
<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>
</button>
body {
height: 100dvh;
max-width: 1920px;
margin: 0;
background-color: black;
display: grid;
place-items: center;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
svg {
display: block;
width: 100%;
}
button {
--size: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
position: fixed;
top: 0.65rem;
right: 0.5rem;
width: var(--size);
height: var(--size);
background-color: white;
border: none;
border-radius: 50%;
}
button svg {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
button path {
fill: black;
}
.hide {
display: none;
}
#shadow-toggle {
position: fixed;
top: 0.5rem;
left: 0.5rem;
padding: 0.25rem;
display: flex;
align-items: center;
font-size: 1.25rem;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
background-color: white;
border-radius: 0.5rem;
cursor: pointer;
}
#shadow-toggle input {
--size: 1.25rem;
width: var(--size);
height: var(--size);
cursor: pointer;
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: async () => {
await playSong();
},
onRepeat: async () => {
await 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 title = document.querySelector("svg");
title.addEventListener("click", () => {
masterTimeline.restart();
});
// audio toggle
let muteButton = document.querySelector("button");
let muteOnIcon = muteButton.querySelector(".mute-on");
let muteOffIcon = muteButton.querySelector(".mute-off");
let muted = true;
let track = new Audio("audio/title.mp3");
muteButton.addEventListener("click", toggleMute);
async function toggleMute() {
// initiate playing the song if it was blocked
if (track.currentTime === 0) {
await playSong();
}
muteOnIcon.classList.toggle("hide");
muteOffIcon.classList.toggle("hide");
track.muted = !track.muted;
muted = !muted;
}
async function playSong() {
track.volume = 0.3;
track.currentTime = 0;
track.muted = muted;
try {
await track.play();
} catch (error) {
console.error(error);
}
}
// 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", "");
}
}
This is an animation of the title sequence for the television series Stranger Things.
Click the “Unmute” button (top right corner) to enable the soundtrack to be heard.
Check the “Shadows” checkbox (top left corner) for a more neon-y appearance. The shadows are demanding, so they are disabled by default. They slow down the animation significantly on wider viewports (> 1000 pixels), with Firefox struggling more than Chrome.
I wrote a tutorial if you want to read about the design and implementation of the animation.
The theme song for Stranger Things is the property of the copyright holders. The clip used here is part of a commentary of how well-chosen the song is. It is used under fair usage with no copyright infringement intended.