few more animations

src/app.css

@@ -11,7 +11,7 @@ h3 { @apply text-xl md:text-2xl font-bold my-4; }
 h4 { @apply text-lg md:text-xl font-bold my-4; }
 h5 { @apply text-base md:text-lg font-bold my-4; }
 h6 { @apply text-sm md:text-base font-bold my-4; }
-a { @apply text-ctp-sapphire hover:text-ctp-sky underline; }
+a { @apply text-ctp-sapphire hover:text-ctp-sky underline focus:before:content-['>_'] focus:after:content-['_<'] focus:outline-none transition-none focus:no-underline; }
 article { @apply p-2 sm:p-4 text-ctp-subtext0; }
 p { @apply my-4 text-sm sm:text-base; }
 code { @apply bg-ctp-overlay0 p-0.5 rounded-md; }

src/routes/+layout.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
     import type { PageData } from './$types';
-    export let data: PageData;
     import "../app.css";
+    import { onMount } from 'svelte';
+    export let data: PageData;
+
+    let loaded = false;
+    onMount(() => {
+        loaded = true;
+    });
 </script>
 
 <svelte:head>
@@ -10,4 +16,6 @@
     <meta name="theme-color" content="#00e1ff" />
 </svelte:head>
 
+{#if loaded}
     <slot />
+{/if}

src/routes/+layout.ts

@@ -3,8 +3,9 @@ import info from '$lib';
 
 export const ssr = true;
 export const csr = true;
-export const load = (async () => {
+export const load = (async ({ url }) => {
     return {
         ...info,
+        url: url.pathname,
     };
 }) satisfies LayoutLoad;

src/routes/+page.svelte

@@ -4,6 +4,18 @@
     import { onMount } from "svelte";
     import type { PageData } from "./$types";
     export let data: PageData;
+    import {
+        blur,
+        crossfade,
+        draw,
+        fade,
+        fly,
+        scale,
+        slide
+    } from 'svelte/transition';
+    import {
+        cubicOut
+    } from 'svelte/easing';
 
     let days = daysUntilBirthday(data.birthday);
     let time = getTimeIn(data.timezone);
@@ -15,10 +27,13 @@
     });
 </script>
 
-<div class="fixed top-0 left-0 w-full h-full -bg-gradient-6 opacity-10 from-ctp-sapphire via-transparent to-ctp-green"></div>
+<div class="fixed top-0 left-0 w-full h-full -bg-gradient-6 opacity-10 from-ctp-green via-transparent to-ctp-lavender" transition:fade={{
+    duration: 1000, easing: cubicOut
+}}></div>
 
-
+<div class="fixed top-0 left-0 w-full h-full overflow-hidden flex justify-center items-center select-none" transition:blur={{
-<div class="fixed top-0 left-0 w-full h-full overflow-hidden flex justify-center items-center select-none">
+    duration: 1000, easing: cubicOut,
+}}>
     <div class="group whitespace-nowrap text-center text-5xl font-mono my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-base">
         <span class="inline-block animate-scrolling-text-to-l">{randomStr(charAmount)}</span><br>
         <span class="block">{randomStr(Math.round(charAmount-data.name.length/2))}<a href={'https://github.com/'+data.github+'/5th-site'} target="_blank" class="group-hover:px-8 no-underline text-ctp-subtext1 group-hover:text-ctp-text">{data.name.toUpperCase()}</a>{randomStr(Math.round(charAmount-data.name.length/2))}</span>
@@ -26,20 +41,27 @@
     </div>
 </div>
 
-{#if webring}
 <div class="fixed top-0 left-0 w-full text-base flex justify-center items-center">
     <nav class="py-2 px-4 backdrop-blur rounded-t-3xl border-ctp-base hover:border-ctp-sky">
+        {#if webring}
             <a href="https://nixwebr.ing" class="no-underline">nixwebr.ing:</a>
             <a href="https://nixwebr.ing/prev/" class="no-underline">&larr;</a>
             <a href="https://nixwebr.ing/rand/" class="no-underline">?</a>
             <a href="https://nixwebr.ing/next/" class="no-underline">&rarr;</a>
+        {:else}
+            <p class="animate-pulse italic text-base">
+                <span class="hidden sm:block">Press [Enter] to continue.</span>
+                <span class="sm:hidden">Scroll to continue</span>
+            </p>
+        {/if}
     </nav>
 </div>
-{/if}
     
 <div class="h-[calc(100%-8rem)] sm:h-[calc(100%-6rem)]"></div>
 
-<div class="backdrop-blur-md w-[calc(100%-2rem)] ml-4 pt-4 border-t-2 border-x-2 border-ctp-base hover:border-ctp-sky shadow-inner rounded-t-3xl">
+<div class="backdrop-blur-md w-[calc(100%-2rem)] ml-4 pt-4 border-t-2 border-x-2 border-ctp-base hover:border-ctp-sky shadow-inner rounded-t-3xl" transition:fly={{
+    duration: 1000, easing: cubicOut, y: 200, opacity: 0,
+}}>
     <div class="max-w-3xl mx-auto px-4 pt-2 sm:pt-4">
         <header>
             <nav class="flex flex-col-reverse sm:flex-row justify-center sm:justify-between items-center sm:gap-4 text-lg max-w-full w-full px-4 overflow-y-auto text-nowrap">

tailwind.config.js

@@ -16,8 +16,8 @@ export default {
       },
       keyframes: {
         scroll: {
-          '0%': { transform: 'translateX(-100%)' },
+          '0%': { transform: 'translateX(-90%)' },
-          '100%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(90%)' },
         },
       },
     },