From 25997d357669f8dbad04db7da981dbf0b66dd22d Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sun, 7 Jul 2024 23:29:07 +0200
Subject: [PATCH] Add animation for title

---
 src/components/molecules/PageTitle.svelte |  2 +
 src/lib/styles/neon-start.scss            | 50 +++++++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 src/lib/styles/neon-start.scss

diff --git a/src/components/molecules/PageTitle.svelte b/src/components/molecules/PageTitle.svelte
index 8b987c3..c00a840 100644
--- a/src/components/molecules/PageTitle.svelte
+++ b/src/components/molecules/PageTitle.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from "$app/stores";
+  import "$lib/styles/neon-start.scss";
 
   let title = "Trivernis";
   let secondaryTitle: string | undefined = undefined;
@@ -50,6 +51,7 @@
       );
       text-shadow: 0px 0px 0.5em var(--color-primary);
       user-select: none;
+      animation: neon-start 3s;
 
       @include portrait {
         font-size: 1.8em;
diff --git a/src/lib/styles/neon-start.scss b/src/lib/styles/neon-start.scss
new file mode 100644
index 0000000..35f92dc
--- /dev/null
+++ b/src/lib/styles/neon-start.scss
@@ -0,0 +1,50 @@
+@keyframes neon-start {
+  0% {
+    opacity: 0.1;
+  }
+
+  9% {
+    opacity: 0.1;
+  }
+
+  10% {
+    opacity: 0.7;
+  }
+
+  12% {
+    opacity: 0.2;
+  }
+
+  24% {
+    opacity: 0.2;
+  }
+
+  25% {
+    opacity: 0.75;
+  }
+
+  27% {
+    opacity: 0.2;
+  }
+
+
+  32% {
+    opacity: 0.2;
+  }
+
+  33% {
+    opacity: 0.75;
+  }
+
+  35% {
+    opacity: 0.2;
+  }
+
+  40% {
+    opacity: 0.75;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
\ No newline at end of file