feat: squiggly animation (#21)

cesium · Feb 20, 2024 · f723423 · f723423
1 parent 0180e17
commit f723423
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 17 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -7,5 +7,5 @@ import react from "@astrojs/react";
 // https://astro.build/config
 export default defineConfig({
   site: "https://astro-moon-landing.netlify.app/",
-  integrations: [tailwind(), icon(), react()]
-});
+  integrations: [tailwind(), icon(), react()],
+});
diff --git a/src/components/splash.astro b/src/components/splash.astro
@@ -3,6 +3,7 @@ import { Image } from "astro:assets";
 import { Icon } from "astro-icon/components";
 import gubImage from "~/assets/Bicho.svg";
 import background from "/public/background.jpg";
+import SquigglyAnimation from "~/components/squigglyAnimation.astro";
 ---
 
 <section class="relative h-full bg-black overflow-y-hidden select-none">
@@ -32,7 +33,7 @@ import background from "/public/background.jpg";
     >
       <div class="tracking-tighter text-5xl sm:text-7xl text-center">
         <h2 class="text-left text-4xl tracking-wider">HACKATHON</h2>
-        <h1 class="tracking-wide">BUGSBYTE</h1>
+        <h1 class="tracking-wide animate-squiggle">BUGSBYTE</h1>
         <p class="text-left tracking-wide text-3xl">5 - 7 APRIL</p>
       </div>
       <div class="flex flex-row sm:hidden">
@@ -41,6 +42,7 @@ import background from "/public/background.jpg";
     </div>
   </div>
 </section>
+<SquigglyAnimation />
 
 <noscript>
   <style>

diff --git a/src/components/squigglyAnimation.astro b/src/components/squigglyAnimation.astro
@@ -0,0 +1,61 @@
+<div class="hidden">
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <defs>
+      <filter id="squiggly-0">
+        <feTurbulence
+          id="turbulence"
+          baseFrequency="0.01"
+          numOctaves="3"
+          result="noise"
+          seed="0"></feTurbulence>
+        <feDisplacementMap
+          id="displacement"
+          in="SourceGraphic"
+          in2="noise"
+          scale="6"></feDisplacementMap>
+      </filter>
+      <filter id="squiggly-1">
+        <feTurbulence
+          id="turbulence"
+          baseFrequency="0.01"
+          numOctaves="3"
+          result="noise"
+          seed="1"></feTurbulence>
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="8"
+        ></feDisplacementMap>
+      </filter>
+
+      <filter id="squiggly-2">
+        <feTurbulence
+          id="turbulence"
+          baseFrequency="0.01"
+          numOctaves="3"
+          result="noise"
+          seed="2"></feTurbulence>
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="6"
+        ></feDisplacementMap>
+      </filter>
+      <filter id="squiggly-3">
+        <feTurbulence
+          id="turbulence"
+          baseFrequency="0.01"
+          numOctaves="3"
+          result="noise"
+          seed="3"></feTurbulence>
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="8"
+        ></feDisplacementMap>
+      </filter>
+
+      <filter id="squiggly-4">
+        <feTurbulence
+          id="turbulence"
+          baseFrequency="0.01"
+          numOctaves="3"
+          result="noise"
+          seed="4"></feTurbulence>
+        <feDisplacementMap in="SourceGraphic" in2="noise" scale="6"
+        ></feDisplacementMap>
+      </filter>
+    </defs>
+  </svg>
+</div>
diff --git a/src/data/faqs.json b/src/data/faqs.json
@@ -1,42 +1,35 @@
 [
   {
-    "question":
-      "I'm not a student from Universidade do Minho, can I still participate in the event?",
-    "answer":
-      "Yes, all higher education students over 18 can participate in the event."
+    "question": "I'm not a student from Universidade do Minho, can I still participate in the event?",
+    "answer": "Yes, all higher education students over 18 can participate in the event."
   },
   {
     "question": "Is it free to participate in the BugsByte Hackathon?",
     "answer": "Yes, the event is completely free."
   },
   {
     "question": "Do I need to register to be able to participate in the event?",
-    "answer":
-      "Yes, it is necessary to register to be able to participate in the event. Very soon we'll make a link available on our website to do so."
+    "answer": "Yes, it is necessary to register to be able to participate in the event. Very soon we'll make a link available on our website to do so."
   },
   {
     "question": "Do I need to register as a team?",
-    "answer":
-      "No, only individual registration is required. Once registered, you can form a team with other participants at your convenience."
+    "answer": "No, only individual registration is required. Once registered, you can form a team with other participants at your convenience."
   },
   {
     "question": "How many people can a team contain?",
     "answer": "The sizes of the teams may vary between 2 to 5 elements."
   },
   {
     "question": "Can I leave the space of the event during the weekend?",
-    "answer":
-      "Yes, you're completely free to enter and exit the premisses of the event during the weekend."
+    "answer": "Yes, you're completely free to enter and exit the premisses of the event during the weekend."
   },
   {
     "question": "Which technology/tools are we gonna work with?",
-    "answer":
-      "You're going to be totally free to choose the stack you'll work on."
+    "answer": "You're going to be totally free to choose the stack you'll work on."
   },
   {
     "question": "Where am I going to sleep?",
-    "answer":
-      "If you intend to sleep during the event, we will have a dedicated place for you to rest. Only bring what you find essential such as pillows, sleeping bags, blankets, etc."
+    "answer": "If you intend to sleep during the event, we will have a dedicated place for you to rest. Only bring what you find essential such as pillows, sleeping bags, blankets, etc."
   },
   {
     "question": "What am I going to eat during the event?",

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -22,6 +22,18 @@ module.exports = {
       borderColor: {
         default: "var(--color-border)",
       },
+      keyframes: {
+        squiggle: {
+          "0%": { filter: "url('#squiggly-0')" },
+          "25%": { filter: "url('#squiggly-1')" },
+          "50%": { filter: "url('#squiggly-2')" },
+          "75%": { filter: "url('#squiggly-3')" },
+          "100%": { filter: "url('#squiggly-4')" },
+        },
+      },
+      animation: {
+        squiggle: "squiggle 0.45s ease-in-out infinite",
+      },
     },
   },
   corePlugins: {