updates to init homepage

src/routes/init-2/(assets)/shines.svg

@@ -1,68 +0,0 @@
-<svg width="2722" height="1932" viewBox="0 0 2722 1932" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g filter="url(#filter0_f_389_1414)">
-    <path
-      d="M2422.71 461.532L1351.5 1634.13C1320.14 1668.47 1320.68 1721.21 1352.75 1754.89C1388.21 1792.14 1447.85 1791.43 1482.42 1753.35L2549.97 577.421C2584.7 539.158 2578.12 479.125 2535.92 449.298C2500.49 424.26 2451.97 429.504 2422.71 461.532Z"
-      fill="url(#paint0_linear_389_1414)" />
-  </g>
-  <g filter="url(#filter1_f_389_1414)">
-    <path
-      d="M2109.38 330.163L1038.18 1502.76C1006.81 1537.1 1007.36 1589.84 1039.42 1623.52C1074.88 1660.77 1134.52 1660.06 1169.09 1621.98L2236.64 446.052C2271.37 407.789 2264.79 347.756 2222.59 317.929C2187.16 292.891 2138.64 298.135 2109.38 330.163Z"
-      fill="url(#paint1_linear_389_1414)" />
-  </g>
-  <g filter="url(#filter2_f_389_1414)">
-    <path
-      d="M1631.57 269.315L560.361 1441.92C528.997 1476.25 529.541 1528.99 561.606 1562.67C597.07 1599.92 656.703 1599.21 691.273 1561.13L1758.82 385.204C1793.56 346.941 1786.98 286.908 1744.78 257.081C1709.35 232.043 1660.83 237.286 1631.57 269.315Z"
-      fill="url(#paint2_linear_389_1414)" />
-  </g>
-  <g filter="url(#filter3_f_389_1414)">
-    <path
-      d="M1243.9 177.054L172.688 1349.66C141.324 1383.99 141.868 1436.73 173.933 1470.41C209.397 1507.66 269.03 1506.95 303.6 1468.87L1371.15 292.943C1405.89 254.681 1399.31 194.648 1357.1 164.82C1321.68 139.782 1273.15 145.026 1243.9 177.054Z"
-      fill="url(#paint3_linear_389_1414)" />
-  </g>
-  <defs>
-    <filter id="filter0_f_389_1414" x="1179.48" y="284.659" width="1541.69" height="1646.57"
-      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-      <feGaussianBlur stdDeviation="74.4276" result="effect1_foregroundBlur_389_1414" />
-    </filter>
-    <filter id="filter1_f_389_1414" x="866.152" y="153.29" width="1541.69" height="1646.57" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-      <feGaussianBlur stdDeviation="74.4276" result="effect1_foregroundBlur_389_1414" />
-    </filter>
-    <filter id="filter2_f_389_1414" x="388.337" y="92.4422" width="1541.69" height="1646.57"
-      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-      <feGaussianBlur stdDeviation="74.4276" result="effect1_foregroundBlur_389_1414" />
-    </filter>
-    <filter id="filter3_f_389_1414" x="0.665085" y="0.181931" width="1541.69" height="1646.57"
-      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-      <feGaussianBlur stdDeviation="74.4276" result="effect1_foregroundBlur_389_1414" />
-    </filter>
-    <linearGradient id="paint0_linear_389_1414" x1="2148.63" y1="638.832" x2="1376.71" y2="1696.3"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="white" stop-opacity="0.08" />
-      <stop offset="1" stop-color="white" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="paint1_linear_389_1414" x1="1835.3" y1="507.462" x2="1063.38" y2="1564.93"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="white" stop-opacity="0.12" />
-      <stop offset="1" stop-color="white" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="paint2_linear_389_1414" x1="1357.48" y1="446.614" x2="585.564" y2="1504.09"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="white" stop-opacity="0.08" />
-      <stop offset="1" stop-color="white" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="paint3_linear_389_1414" x1="969.811" y1="354.354" x2="197.892" y2="1411.83"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="white" stop-opacity="0.12" />
-      <stop offset="1" stop-color="white" stop-opacity="0" />
-    </linearGradient>
-  </defs>
-</svg>

src/routes/init-2/(components)/Hero.svelte

@@ -1,125 +1,91 @@
 <script lang="ts">
-    import Heading from '$lib/components/animated/Heading.svelte';
+    const lines = Array.from({ length: 8 });
-
+    import Lockup from './Lockup.svelte';
-    const lines = Array.from({ length: 50 });
-
-    const randomNumber = (min: number, max: number) => {
-        return Math.random() * (max - min) + min;
-    };
-
-    const animationDirections = ['left', 'right'];
 </script>
 
 <div class="hero">
     <div class="lockup">
-        <Heading text="Init" />
+        <h1 class="sr-only">Init</h1>
-        <div class="glass" />
+        <Lockup />
-        {#each lines as _, i}
+        <div class="lines">
-            <div
+            {#each lines as _, i}
-                class="line"
+                <div class="line" style:left={`${i * 250}px`} style={`--delay:${i * 500}ms`} />
-                data-direction={animationDirections[
+            {/each}
-                    Math.floor(Math.random() * animationDirections.length)
+        </div>
-                ]}
-                style={`--animation-delay: ${randomNumber(200, 8000)}ms;--direction:${
-                    animationDirections[Math.floor(Math.random() * animationDirections.length)]
-                };top: ${i * 80}px`}
-            />
-        {/each}
     </div>
 </div>
 
 <style lang="scss">
-    @keyframes -global-left {
-        0% {
-            left: var(--starting-position);
-        }
-        100% {
-            left: 110%;
-        }
-    }
-
-    @keyframes -global-right {
-        0% {
-            right: var(--starting-position);
-        }
-        100% {
-            right: 110%;
-        }
-    }
-
     :root {
-        --line-width: 70vw;
+        --background: hsl(240 5.7% 10.4%);
-        --line-height: 2px;
+        --gradient: linear-gradient(
-        --animation-duration: 3s;
+            to bottom,
-        --starting-position: -70vw;
+            hsl(240 5.7% 10.4%),
-        --timing: cubic-bezier(0.1, -0.6, 0.2, 0);
+            rgba(51, 52, 52, 1),
+            rgba(122, 122, 122, 1),
+            hsl(240 5.7% 10.4%)
+        );
+        --width: 2px;
+        --height: 10vh;
+        --font-size: 25vw;
+        --starting-position: -50vh;
+        --duration: 5s;
+    }
+
+    @keyframes -global-line {
+        0% {
+            bottom: var(--starting-position);
+        }
+        100% {
+            bottom: 200%;
+        }
     }
 
     .hero {
-        .glass {
+        height: 80vh;
-            position: absolute;
+        display: flex;
-            inset: 0;
+        justify-content: center;
-            backdrop-filter: blur(6px);
+        align-items: center;
-            background: rgba(25, 25, 28, 0) url(https://grainy-gradients.vercel.app/noise.svg);
+        position: relative;
-            mix-blend-mode: color;
-            z-index: 99;
-        }
 
         .lockup {
             position: relative;
-            height: 90vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-grow: 1;
-            margin: 0 auto;
             overflow: hidden;
-
+            .lines {
-            .line {
                 position: absolute;
-                height: var(--line-height);
+                inset: 0;
-                width: 120vw;
+                z-index: -10;
-                transform: rotate(25deg);
 
-                overflow: hidden;
+                .line {
-
-                &[data-direction='left'] {
-                    &::after {
-                        left: var(--starting-position);
-                        animation: left var(--animation-duration) var(--animation-delay) infinite
-                            forwards var(--timing);
-                    }
-                }
-
-                &[data-direction='right'] {
-                    &::after {
-                        right: var(--starting-position);
-                        animation: right var(--animation-duration) var(--animation-delay) infinite
-                            forwards var(--timing);
-                    }
-                }
-
-                &::after {
-                    content: '';
-                    display: block;
                     position: absolute;
-                    width: var(--line-width);
+                    height: var(--height);
-                    height: var(--line-height);
+                    width: var(--width);
-                    top: 0;
-                    border-radius: 100px;
-                    background: linear-gradient(
-                        to left,
-                        rgba(254, 83, 109, 0) 0%,
-                        rgba(254, 83, 109, 0.6) 50%,
-                        rgba(59, 36, 85, 0.5) 80%,
-                        rgba(0, 0, 0, 0) 100%
-                    );
 
-                    animation-fill-mode: forwards;
+                    &::after {
-
+                        content: '';
-                    animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
+                        display: block;
+                        position: absolute;
+                        bottom: var(--starting-position);
+                        width: calc(var(--width) / 2);
+                        height: var(--height);
+                        background: var(--gradient);
+                        animation: line var(--duration) var(--delay) infinite forwards
+                            cubic-bezier(0.1, -0.6, 0.2, 0);
+                    }
                 }
             }
         }
+
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border-width: 0;
+        }
     }
 </style>

src/routes/init-2/(components)/HeroGradient.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-    import Lockup from './Lockup.svelte';
-</script>
-
-<div class="hero">
-    <h1 class="sr-only">init</h1>
-    <Lockup />
-</div>
-
-<style lang="scss">
-    .sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border-width: 0;
-    }
-</style>

src/routes/init-2/(components)/Lines.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+    import Heading from '$lib/components/animated/Heading.svelte';
+
+    const lines = Array.from({ length: 50 });
+
+    const randomNumber = (min: number, max: number) => {
+        return Math.random() * (max - min) + min;
+    };
+
+    const animationDirections = ['left', 'right'];
+</script>
+
+<div class="hero">
+    <div class="lockup">
+        <Heading text="Init" />
+        <div class="glass" />
+        {#each lines as _, i}
+            <div
+                class="line"
+                data-direction={animationDirections[
+                    Math.floor(Math.random() * animationDirections.length)
+                ]}
+                style={`--animation-delay: ${randomNumber(200, 8000)}ms;--direction:${
+                    animationDirections[Math.floor(Math.random() * animationDirections.length)]
+                };top: ${i * 80}px`}
+            />
+        {/each}
+    </div>
+</div>
+
+<style lang="scss">
+    @keyframes -global-left {
+        0% {
+            left: var(--starting-position);
+        }
+        100% {
+            left: 110%;
+        }
+    }
+
+    @keyframes -global-right {
+        0% {
+            right: var(--starting-position);
+        }
+        100% {
+            right: 110%;
+        }
+    }
+
+    :root {
+        --line-width: 70vw;
+        --line-height: 2px;
+        --animation-duration: 3s;
+        --starting-position: -70vw;
+        --timing: cubic-bezier(0.1, -0.6, 0.2, 0);
+    }
+
+    .hero {
+        .glass {
+            position: absolute;
+            inset: 0;
+            backdrop-filter: blur(6px);
+            background: rgba(25, 25, 28, 0) url(https://grainy-gradients.vercel.app/noise.svg);
+            mix-blend-mode: color;
+            z-index: 99;
+        }
+
+        .lockup {
+            position: relative;
+            height: 90vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-grow: 1;
+            margin: 0 auto;
+            overflow: hidden;
+
+            .line {
+                position: absolute;
+                height: var(--line-height);
+                width: 120vw;
+                transform: rotate(25deg);
+
+                overflow: hidden;
+
+                &[data-direction='left'] {
+                    &::after {
+                        left: var(--starting-position);
+                        animation: left var(--animation-duration) var(--animation-delay) infinite
+                            forwards var(--timing);
+                    }
+                }
+
+                &[data-direction='right'] {
+                    &::after {
+                        right: var(--starting-position);
+                        animation: right var(--animation-duration) var(--animation-delay) infinite
+                            forwards var(--timing);
+                    }
+                }
+
+                &::after {
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    width: var(--line-width);
+                    height: var(--line-height);
+                    top: 0;
+                    border-radius: 100px;
+                    background: linear-gradient(
+                        to left,
+                        rgba(254, 83, 109, 0) 0%,
+                        rgba(254, 83, 109, 0.6) 50%,
+                        rgba(59, 36, 85, 0.5) 80%,
+                        rgba(0, 0, 0, 0) 100%
+                    );
+
+                    animation-fill-mode: forwards;
+
+                    animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
+                }
+            }
+        }
+    }
+</style>

src/routes/init-2/(components)/Lockup.svelte

@@ -1,80 +1,195 @@
 <script lang="ts">
-    const width = 317;
+    const width = 874;
-    const height = 80;
+    const height = 438;
+    const dur = 8;
+
+    // I
+    const i1 =
+        'M53.9539 435.628V436.128H54.4539H122.654H123.154V435.628V132.776V132.276H122.654H1.28125H0.78125V132.776V192.884V193.384H1.28125H53.9539V435.628ZM45.2844 43.1913C45.2844 67.7464 64.0076 86.4606 89.1317 86.4606C114.256 86.4606 132.979 67.7464 132.979 43.1913C132.979 19.2098 114.251 0.5 89.1317 0.5C64.0121 0.5 45.2844 19.2098 45.2844 43.1913Z';
+    // N
+    const n =
+        'M192.548 436.366V436.866H193.048H261.248H261.748V436.366V257.776C261.748 219.898 289.852 191.232 327.135 191.232C361.528 191.232 387.899 217.007 387.899 254.308V436.366V436.866H388.399H456.599H457.099V436.366V238.125C457.099 206.802 446.513 178.645 427.561 158.314C408.606 137.979 381.307 125.5 347.942 125.5C307.462 125.5 279.604 144.522 266.161 167.691H261.748V133.513V133.013H261.248H193.048H192.548V133.513V436.366Z';
+    // I
+    const i2 =
+        'M549.557 435.628V436.128H550.057H618.257H618.757V435.628V132.776V132.276H618.257H496.885H496.385V132.776V192.884V193.384H496.885H549.557V435.628ZM540.888 43.1913C540.888 67.7464 559.611 86.4606 584.735 86.4606C609.859 86.4606 628.582 67.7464 628.582 43.1913C628.582 19.2098 609.855 0.5 584.735 0.5C559.616 0.5 540.888 19.2098 540.888 43.1913Z';
+
+    // T
+    const t =
+        'M665.033 193.069V193.569H665.533H717.628V345.073C717.628 377.254 727.344 400.095 744.533 414.88C761.707 429.653 786.262 436.313 815.804 436.313H868.976H869.476V435.813V375.127V374.627H868.976H816.382C806.04 374.627 798.835 372.328 794.202 367.485C789.565 362.637 787.406 355.136 787.406 344.495V193.569H872.444H872.944V193.069V132.961V132.461H872.444H787.406V48V47.5H786.906H722.174H721.674V48V132.461H665.533H665.033V132.961V193.069Z';
 </script>
 
-<svg width="875" height="441" viewBox="0 0 875 441" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
-    <path
+    {width}
-        d="M869.693 377.942H817.098C796.292 377.942 787.622 368.695 787.622 347.31V195.884H873.161V135.776H787.622V50.8149H722.89V135.776H666.25V195.884H718.845V347.888C718.845 412.042 757.568 438.628 816.521 438.628H869.693"
+    class="lockup"
-        stroke="white"
+    {height}
-        stroke-width="3.5"
+    viewBox={`0 0 ${width} ${height}`}
-    />
+    fill="none"
-    <path
+    xmlns="http://www.w3.org/2000/svg"
-        d="M869.693 377.942H817.098C796.292 377.942 787.622 368.695 787.622 347.31V195.884H873.161V135.776H787.622V50.8149H722.89V135.776H666.25V195.884H718.845V347.888C718.845 412.042 757.568 438.628 816.521 438.628H869.693"
+>
-        stroke="white"
+    <path d={i1} class="base" />
-        stroke-opacity="0.2"
+    <path d={i1} stroke="url(#i1)" />
-        stroke-width="3.5"
+
-    />
+    <path d={n} class="base" />
-    <path
+    <path d={n} stroke="url(#n)" />
-        d="M540.355 46.1913C540.355 71.4477 559.649 90.7106 585.453 90.7106C611.256 90.7106 630.55 71.4477 630.55 46.1913C630.55 21.4973 611.24 2.25 585.453 2.25C559.665 2.25 540.355 21.4973 540.355 46.1913Z"
+
-        stroke="white"
+    <path d={i2} class="base" />
-        stroke-width="3.5"
+    <path d={i2} stroke="url(#i2)" />
-    />
+
-    <path
+    <path d={t} class="base" />
-        d="M540.355 46.1913C540.355 71.4477 559.649 90.7106 585.453 90.7106C611.256 90.7106 630.55 71.4477 630.55 46.1913C630.55 21.4973 611.24 2.25 585.453 2.25C559.665 2.25 540.355 21.4973 540.355 46.1913Z"
+    <path d={t} stroke="url(#t)" />
-        stroke="white"
-        stroke-opacity="0.2"
-        stroke-width="3.5"
-    />
-    <path
-        d="M193.766 170.454V438.629H261.965V260.038C261.965 221.892 290.285 192.994 327.853 192.994C362.531 192.994 389.117 219.002 389.117 256.57V438.629H457.317V240.387C457.317 177.967 415.126 128.262 348.66 128.262C308.202 128.262 280.46 147.335 267.167 170.454H261.965V135.776H227.865"
-        stroke="white"
-        stroke-width="3.5"
-    />
-    <path
-        d="M193.766 170.454V438.629H261.965V260.038C261.965 221.892 290.285 192.994 327.853 192.994C362.531 192.994 389.117 219.002 389.117 256.57V438.629H457.317V240.387C457.317 177.967 415.126 128.262 348.66 128.262C308.202 128.262 280.46 147.335 267.167 170.454H261.965V135.776H227.865"
-        stroke="white"
-        stroke-opacity="0.2"
-        stroke-width="3.5"
-    />
-    <path
-        d="M55.1726 438.628V195.884H2V135.776H123.372V438.628"
-        stroke="url(#pulse-1)"
-        stroke-width="3.5"
-    />
-    <path
-        d="M55.1726 438.628V195.884H2V135.776H123.372V438.628"
-        stroke="white"
-        stroke-opacity="0.2"
-        stroke-width="3.5"
-    />
-    <path
-        d="M561.173 438.628V195.884H508V135.776H629.372V438.628"
-        stroke="white"
-        stroke-width="3.5"
-    />
-    <path
-        d="M561.173 438.628V195.884H508V135.776H629.372V438.628"
-        stroke="white"
-        stroke-opacity="0.2"
-        stroke-width="3.5"
-    />
-    <path
-        d="M120.719 16.0874C112.998 8.57411 102.211 4 89.8512 4C64.9987 4 46.5039 22.4948 46.5039 46.1913C46.5039 70.4658 64.9987 88.9606 89.8512 88.9606C100.589 88.9606 110.14 85.508 117.525 79.6284"
-        stroke="white"
-        stroke-width="3.5"
-    />
-    <path
-        d="M120.719 16.0874C112.998 8.57411 102.211 4 89.8512 4C64.9987 4 46.5039 22.4948 46.5039 46.1913C46.5039 70.4658 64.9987 88.9606 89.8512 88.9606C100.589 88.9606 110.14 85.508 117.525 79.6284"
-        stroke="white"
-        stroke-opacity="0.2"
-        stroke-width="3.5"
-    />
     <defs>
-        <linearGradient id="pulse-1" gradientUnits="userSpaceOnUse">
+        <linearGradient id="i1" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#2EB9DF" stop-opacity="0" />
+            <stop stop-color="#fff" stop-opacity="0" />
-            <stop stop-color="#2EB9DF" />
+            <stop stop-color="#fff" stop-opacity="0.5" />
-            <stop offset="1" stop-color="#9E00FF" stop-opacity="0" />
+            <stop stop-color="#fff" />
+            <stop offset="1" stop-color="#fff" stop-opacity="0" />
+            <animate
+                attributeName="x1"
+                values="0; {width * 2}; 0"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="x2"
+                values="0; {width}; 0"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="y1"
+                values="{height}; {height / 2}; {height}"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="y2"
+                values="{height * 2}; {height}; {height * 2}"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+        </linearGradient>
+        <linearGradient id="n" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff" stop-opacity="0" />
+            <stop stop-color="#fff" stop-opacity="0.5" />
+            <stop stop-color="#fff" />
+            <stop offset="1" stop-color="#fff" stop-opacity="0" />
+            <animate
+                attributeName="x1"
+                values="0; {width * 2}; 0"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="x2"
+                values="0; {width}; 0"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="y1"
+                values="{height}; {height / 2}; {height}"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="y2"
+                values="{height * 2}; {height}; {height * 2}"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+        </linearGradient>
+        <linearGradient id="i2" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff" stop-opacity="0" />
+            <stop stop-color="#fff" stop-opacity="0.5" />
+            <stop stop-color="#fff" />
+            <stop offset="1" stop-color="#fff" stop-opacity="0" />
+            <animate
+                attributeName="x1"
+                values="0; {width * 2}; 0"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="x2"
+                values="0; {width}; 0"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="y1"
+                values="{height}; {height / 2}; {height}"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="y2"
+                values="{height * 2}; {height}; {height * 2}"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+        </linearGradient>
+        <linearGradient id="t" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#fff" stop-opacity="0" />
+            <stop stop-color="#fff" stop-opacity="0.5" />
+            <stop stop-color="#fff" />
+            <stop offset="1" stop-color="#fff" stop-opacity="0" />
+            <animate
+                attributeName="x1"
+                values="0; {width * 2}; 0"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="x2"
+                values="0; {width * 1.5}; 0"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="y1"
+                values="{height}; {height / 2}; {height}"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
+            <animate
+                attributeName="y2"
+                values="{height * 2}; {height}; {height * 2}"
+                dur={`${dur}s`}
+                repeatCount="indefinite"
+                keyTimes="0; 1; 1"
+            />
         </linearGradient>
     </defs>
 </svg>
+
+<style lang="scss">
+    .lockup {
+        --stroke-color: #222;
+        --fill: hsl(240 5.7% 10.4%);
+
+        path {
+            stroke-width: 2;
+            stroke-linecap: round;
+        }
+
+        .base {
+            stroke: var(--stroke-color);
+            fill: var(--fill);
+        }
+    }
+</style>

src/routes/init-2/(components)/Switchboard.svelte

@@ -1,142 +0,0 @@
-<script lang="ts">
-    import { getRandomNumber } from '$lib/utils/numbers';
-    import { onMount } from 'svelte';
-
-    const rows = 5;
-    const columns = 18;
-    const transitionDuration = 250;
-    // Cherry-pick a few lights to animate
-    const indices = [7, 15, 19, 29, 26, 34, 46, 55, 60, 67, 70, 74, 83];
-    // Randomly animate between three states
-    const states = ['off', 'medium', 'high'];
-
-    let ref: HTMLElement;
-
-    onMount(() => {
-        const timeoutIds: Array<ReturnType<typeof setTimeout>> = [];
-
-        const interval = setInterval(() => {
-            indices.forEach((index) => {
-                const light = ref.querySelector(`[data-index="${index}"]`) as HTMLElement;
-
-                if (!light) {
-                    return;
-                }
-
-                // Pick a random next state
-                const nextState = states[Math.floor(Math.random() * states.length)];
-                const currentState = light.dataset.state;
-
-                const pulse =
-                    Math.random() > 0.2 &&
-                    // Make sure we only pulsate going from "off" → "medium" → "high"
-                    ((currentState === 'off' && nextState === 'high') ||
-                        (currentState === 'off' && nextState === 'medium') ||
-                        (currentState === 'medium' && nextState === 'high'));
-
-                if (pulse) {
-                    const delay = getRandomNumber(100, 500);
-
-                    timeoutIds.push(
-                        setTimeout(() => {
-                            light.style.transform = 'scale(2)';
-                        }, delay)
-                    );
-
-                    timeoutIds.push(
-                        setTimeout(() => {
-                            light.style.transform = 'scale(1)';
-                        }, transitionDuration + delay)
-                    );
-                }
-
-                // After a pulse, don't transition from "high" → "medium"
-                if (currentState === 'high' && nextState === 'medium' && pulse) {
-                    light.dataset.state = 'off';
-                } else {
-                    light.dataset.state = nextState;
-                }
-            });
-        }, 1000);
-
-        return () => {
-            clearInterval(interval);
-            timeoutIds.forEach(clearTimeout);
-        };
-    });
-</script>
-
-<div class="switchboard-box">
-    <div
-        bind:this={ref}
-        class="switchboard"
-        style:display="grid"
-        style:gap={`${columns}px`}
-        style:grid-template-columns={`repeat(${columns}, 1fr)`}
-    >
-        {#each Array.from({ length: columns * rows }) as _, i}
-            <div
-                class="light"
-                data-state="off"
-                data-index={i}
-                style={`--transition-duration: ${transitionDuration}ms`}
-            />
-        {/each}
-    </div>
-</div>
-
-<style lang="scss">
-    .switchboard-box {
-        width: 400px;
-        height: 250px;
-        display: flex;
-        position: relative;
-
-        .switchboard {
-            .light {
-                width: 1px;
-                height: 1px;
-                border-radius: 9999px;
-                position: relative;
-                transition: transform var(--transition-duration) ease;
-
-                &:after,
-                &:before {
-                    content: '';
-                    position: absolute;
-                    inset: 0;
-                    opacity: 0;
-                    width: inherit;
-                    height: inherit;
-                    border-radius: inherit;
-                    transition: opacity var(--transition-duration) ease;
-                }
-
-                &:before {
-                    /* Medium */
-                    background: #3291ff;
-                    box-shadow: 0px 0px 2px 1px rgba(50, 145, 255, 0.25);
-                }
-
-                &:after {
-                    background: #ffffff;
-                    box-shadow:
-                        0px 0px 1px 1px rgba(50, 145, 255, 0.8),
-                        0px 0px 2px 1px rgba(50, 145, 255, 0.25);
-                }
-
-                &:global([data-state='off']) {
-                    background: #707070;
-                }
-
-                &:global([data-state='medium']):before {
-                    opacity: 1;
-                }
-
-                &:global([data-state='high']):after {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-</style>

src/routes/init-2/+page.svelte

@@ -2,8 +2,7 @@
     import { FooterNav, MainFooter } from '$lib/components';
     import { Main } from '$lib/layouts';
     import { buildOpenGraphImage } from '$lib/utils/metadata';
-
+    import Lockup from './(components)/Hero.svelte';
-    import HeroGradient from './(components)/HeroGradient.svelte';
 
     const title = 'Init - Appwrite';
     const description = 'The start of something new.';
@@ -28,7 +27,7 @@
 </svelte:head>
 
 <Main>
-    <HeroGradient />
+    <Lockup />
 
     <div class="web-container">
         <FooterNav />

src/scss/1-css-variables/_fonts.scss

@@ -3,6 +3,7 @@
   --web-font-family-aeonik-pro: 'Aeonik Pro', arial, sans-serif;
   --web-font-family-inter: 'Inter', arial, sans-serif;
   --web-font-family-aeonik-fono: 'Aenoik Fono', monospace;
+  --web-font-family-archia: 'Archia', arial, sans-serif;
   --web-font-family-fira-code: 'Fira Code', monospace;
 }
 :root {

src/scss/3-fonts/_archia.scss

@@ -0,0 +1,49 @@
+@use '../abstract' as *;
+@font-face {
+  font-family: 'Archia';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: local('Archia'), local('Archia'), url('/fonts/archia/Archia-Thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Archia';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Archia'), local('Archia'), url('/fonts/archia/Archia-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Archia';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Archia'), local('Archia'), url('/fonts/archia/Archia-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Archia';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local('Archia'), local('Archia'), url('/fonts/archia/Archia-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Archia';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('Archia'), local('Archia'), url('/fonts/archia/Archia-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Archia';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Archia'), local('Archia'), url('/fonts/archia/Archia-Bold.woff2') format('woff2');
+  }
+  

src/scss/3-fonts/_index.scss

@@ -1,4 +1,5 @@
 @forward "aeonik-pro";
 @forward "aeonik-fono";
+@forward "archia";
 @forward "inter";
 @forward "fira-code";