fix: reduce html size

Author: rayriffy

src/packlets/playground/kanokLines.svelte

@@ -13,11 +13,12 @@
 
 <div class="flex">
   <div style={`padding-left: ${basePadding * padding}rem`}></div>
-  {#each Array.from({ length }) as _}
+  {#each Array.from({ length }) as _, i}
     <Kanok
       size={size}
       color={pickRandom(['yellow', 'orange', 'blue', 'green'])}
       variant={pickRandom(['invert-x', 'invert-xy', 'normal'])}
+      col={i}
       animate
     />
   {/each}

src/packlets/sprites/kanok.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { clsx } from 'clsx'
+  import {onMount} from "svelte";
 
   type Color = 'yellow' | 'green' | 'orange' | 'blue'
   type Variant = 'invert-y' | 'invert-x' | 'invert-xy' | 'hidden' | 'normal'
@@ -8,6 +9,15 @@
   export let color: Color
   export let variant: Variant = 'normal'
   export let animate: boolean = false
+  export let col: number = 0
+
+  let start = false
+
+  onMount(() => {
+    setTimeout(() => {
+      start = true
+    }, col * 100)
+  })
 </script>
 
 <div class="p-0.5 group" {...$$props}>
@@ -34,7 +44,10 @@
       variant === 'invert-xy' ? 'scale-x-[-1] scale-y-[-1]' :
       variant === 'hidden' ? 'hidden' :
       undefined,
-      animate ? `duration-200 transform-gpu ${['invert-x', 'invert-xy'].includes(variant) ? 'group-hover:scale-x-[1]' : 'group-hover:scale-x-[-1]'}` : undefined,
+      animate ? `duration-200 transform-gpu ${
+        ['invert-x', 'invert-xy'].includes(variant) ? 'group-hover:scale-x-[1]' : 'group-hover:scale-x-[-1]'
+      }` : undefined,
+      animate && !start ? 'scale-x-[0]' : undefined,
     )}
   >
     <path d="M233.235 105.043C231.607 106.53 231.607 108.941 233.235 110.419L253.541 128.892V128.908L266.929 141.105C275.298 148.723 279.999 159.056 279.999 169.831V239.23C279.999 262.749 259.047 281.825 233.21 281.825H152.702C170.456 273.934 175.987 255.807 177.003 249.307V231.685C177.003 223.104 184.382 216.089 193.682 215.623C194.01 215.599 194.345 215.591 194.681 215.591C199.088 215.591 203.117 217.061 206.215 219.496L217.992 230.215C219.62 231.702 222.264 231.702 223.893 230.215C225.521 228.729 225.521 226.326 223.893 224.839L203.722 206.479L190.333 194.282C181.964 186.665 177.263 176.331 177.263 165.556V117.024C177.263 106.241 181.754 95.8593 189.838 87.9688L279.999 0V101.082C279.999 101.211 279.999 101.331 279.991 101.468C279.806 109.262 273.888 115.762 265.922 117.635C264.42 117.988 262.85 118.173 261.23 118.173C256.621 118.173 252.399 116.662 249.134 114.147L246.884 112.09L239.145 105.043C237.516 103.557 234.864 103.557 233.235 105.043Z" fill="currentColor"/>

src/pages/index.astro

@@ -15,10 +15,10 @@ import Schedule from "$new-front/schedule.astro";
   <div class="max-w-[88rem] mx-auto h-screen md:h-[64rem] bg-white overflow-hidden relative">
     <Logo />
     <div class="max-w-[128rem] mx-auto hidden md:block">
-      <Patterns client:idle />
+      <Patterns client:only="svelte" />
     </div>
     <div class="max-w-[128rem] mx-auto md:hidden absolute bottom-0 -left-8">
-      <MobileStrip client:idle />
+      <MobileStrip client:only="svelte" />
     </div>
   </div>
   <Dates />