counter animation

src/routes/init/+page.svelte

@@ -19,11 +19,13 @@
         },
         {
             title: 'Day 4',
-            release: new Date('2023-11-23')
+            // Half a day from today
+            release: new Date(Date.now() + 1000 * 60 * 60 * 24 * 0.5)
         },
         {
             title: 'Day 5',
-            release: new Date('2023-11-24')
+            // 1.5 days from today
+            release: new Date(Date.now() + 1000 * 60 * 60 * 24 * 1.5 - 30 * 60 * 1000 - 36 * 1000)
         }
     ];
 </script>

src/routes/init/Counter.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { fade } from 'svelte/transition';
+    import CounterDigit from './CounterDigit.svelte';
+
+    export let value = 0;
+    export let fontSize = 2;
+
+    const pad = (num: number) => num.toString().padStart(2, '0');
+
+    $: charStyle = `font-size: ${fontSize}rem`;
+    $: formattedValue = pad(value);
+</script>
+
+<div class="wrapper">
+    {#each formattedValue as char, index (index)}
+        <div transition:fade={{ duration: 200 }}>
+            {#if Number.isNaN(Number(char))}
+                <span style={charStyle}>{char}</span>
+            {:else}
+                <CounterDigit value={Number(char)} />
+            {/if}
+        </div>
+    {/each}
+</div>
+
+<style lang="scss">
+    .wrapper {
+        display: flex;
+    }
+</style>

src/routes/init/CounterDigit.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+
+    export let value = 0;
+
+    let initialized = false;
+    $: transformStyle = `translateY(-${(initialized ? value : 10) * 2.75}rem)`;
+
+    onMount(() => {
+        initialized = true;
+    });
+
+    const range = (start: number, end: number, step = 1) => {
+        const arr = [];
+        for (let i = start; i < end; i += step) {
+            arr.push(i);
+        }
+        return arr;
+    };
+</script>
+
+<ul>
+    {#each range(0, 10) as digit}
+        <li style:transform={transformStyle}>{digit}</li>
+    {/each}
+</ul>
+
+<style lang="scss">
+    ul {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-family: var(--p-font-mono);
+        font-size: var(--p-font-size);
+        height: var(--p-font-size, 1em);
+        overflow: var(--p-overflow, hidden);
+    }
+
+    * {
+        transition: 0.5s ease;
+    }
+</style>

src/routes/init/Day.svelte

@@ -8,6 +8,7 @@
 
 <script lang="ts">
     import { onMount } from 'svelte';
+    import Counter from './Counter.svelte';
 
     export let day: DayType;
     export let number: number;
@@ -20,8 +21,6 @@
     let minutes = 0;
     let hours = 0;
 
-    const pad = (num: number) => num.toString().padStart(2, '0');
-
     onMount(() => {
         let frame: number;
 
@@ -67,7 +66,7 @@
     <div class="release">
         <span class="aw-eyebrow">Day {number}<span class="aw-u-color-text-accent">_</span></span>
         <p class="countdown aw-title">
-            {pad(hours)}:{pad(minutes)}:{pad(seconds)}
+            <Counter value={hours} />:<Counter value={minutes} />:<Counter value={seconds} />
         </p>
         <button class="aw-button is-secondary">Remind me</button>
     </div>
@@ -149,6 +148,7 @@
         justify-content: center;
 
         .countdown {
+            display: flex;
             color: hsl(var(--aw-color-primary));
             margin-block-start: 0.5rem;
         }