ref: update animated blocks

dmitrytavern · Nov 6, 2024 · 5f20d4d · 5f20d4d
1 parent 0c8b6a1
commit 5f20d4d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/src/assets/stylesheets/globals.css b/src/assets/stylesheets/globals.css
@@ -19,19 +19,20 @@ html::-webkit-scrollbar {
 }
 
 body {
-  @apply bg-gradient-to-br from-zinc-50/50 to-blue-100/50;
+  @apply relative z-10 bg-gradient-to-br from-zinc-50/100 to-blue-100/100;
 }
 
 body::after,
 body::before {
   content: '';
-  @apply fixed -z-10 w-[480px] h-[480px] rounded-full;
+  filter: blur(78px);
+  @apply fixed -z-10 w-[540px] h-[540px] rounded-full;
 }
 
 body::after {
-  @apply animate-vibrate-1 top-[3%] left-[5%] bg-blue-500 blur-3xl opacity-15;
+  @apply animate-vibrate-1 top-[8%] left-[8%] bg-blue-500 opacity-20;
 }
 
 body::before {
-  @apply animate-vibrate-2 top-[48%] left-[55%] bg-yellow-500 blur-3xl opacity-15;
+  @apply animate-vibrate-2 top-[40%] left-[57%] bg-yellow-500 opacity-15;
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,21 +11,22 @@ const config: Config = {
   theme: {
     extend: {
       animation: {
-        'vibrate-1': 'vibrate 15s linear infinite',
-        'vibrate-2': 'vibrate 18s linear infinite',
+        'vibrate-1': 'vibrate 25s linear infinite',
+        'vibrate-2': 'vibrate 20s linear infinite',
       },
       keyframes: {
         vibrate: {
-          '0%, 100%': { transform: 'translate(0)' },
-          '10%': { transform: 'translate(-20%, -20%)' },
-          '20%': { transform: 'translate(20%, -20%)' },
-          '30%': { transform: 'translate(-20%, 20%)' },
-          '40%': { transform: 'translate(20%, 20%)' },
-          '50%': { transform: 'translate(-20%, -20%)' },
-          '60%': { transform: 'translate(20%, -20%)' },
-          '70%': { transform: 'translate(-20%, 20%)' },
-          '80%': { transform: 'translate(-20%, -20%)' },
-          '90%': { transform: 'translate(20%, -20%)' },
+          '0%': { transform: 'translate(0, 0)' },
+          '10%': { transform: 'translate(-24%, -24%)' },
+          '20%': { transform: 'translate(24%, -24%)' },
+          '30%': { transform: 'translate(-24%, 24%)' },
+          '40%': { transform: 'translate(24%, 24%)' },
+          '50%': { transform: 'translate(24%, -24%)' },
+          '60%': { transform: 'translate(-24%, 24%)' },
+          '70%': { transform: 'translate(-24%, -24%)' },
+          '80%': { transform: 'translate(24%, -24%)' },
+          '90%': { transform: 'translate(-24%, -24%)' },
+          '100%': { transform: 'translate(0, 0)' },
         }
       }
     },