🏎 Improve those blobs

keithrfung · Jan 27, 2023 · a4cb2cd · a4cb2cd
1 parent dc2add5
commit a4cb2cd
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/src/components/AnimatedBackground.tsx b/src/components/AnimatedBackground.tsx
@@ -21,6 +21,8 @@ const blobVariations = [
     startY: "0vh",
     endX: "100vw",
     endY: "100vh",
+    duration: 5,
+    rotate: 35,
   },
   {
     color: "spiroDiscoBall",
@@ -36,6 +38,8 @@ const blobVariations = [
     startY: "60vh",
     endX: "20vw",
     endY: "0vh",
+    duration: 35,
+    ease: "easeIn",
   },
   {
     color: "darkTopaz",
@@ -44,6 +48,14 @@ const blobVariations = [
     endX: "95vw",
     endY: "20vh",
   },
+  {
+    color: "darkLavender",
+    startX: "80vw",
+    startY: "30vh",
+    endX: "10vw",
+    endY: "50vh",
+    duration: 5,
+  },
 ];
 
 export const AnimatedBackground: FC = () => {
@@ -91,7 +103,7 @@ export const AnimatedBackground: FC = () => {
       }}
     >
       {blobs.map((Blob, index) => {
-        const { color, startX, startY, endX, endY, ease } =
+        const { color, startX, startY, endX, endY, duration, rotate, ease } =
           blobVariations[index];
         return (
           <motion.div
@@ -111,12 +123,12 @@ export const AnimatedBackground: FC = () => {
             transition={{
               repeatType: "reverse",
               repeat: Infinity,
-              duration: 30,
-              rotate: 20,
+              duration: duration || 30,
+              rotate: rotate || 20,
               ease: ease || "linear",
             }}
           >
-            <Blob sx={{ height: blobHeight, color }} />
+            <Blob sx={{ height: blobHeight, color: color || "white" }} />
           </motion.div>
         );
       })}

diff --git a/src/gatsby-plugin-theme-ui/index.js b/src/gatsby-plugin-theme-ui/index.js
@@ -1,7 +1,7 @@
 const COLORS = {
   cultured: "#f8f8f8",
   spaceCadet: "#212650",
-  purpleHeart: "#724e96",
+  purpleHeart: "#8957a0",
   darkLavender: "#724e96",
   diamond: "#c1e5f3",
   spiroDiscoBall: "#1abbee",

diff --git a/src/svgs/blobs/blob-5.svg b/src/svgs/blobs/blob-5.svg
diff --git a/src/svgs/blobs/index.ts b/src/svgs/blobs/index.ts
@@ -2,5 +2,6 @@ import { default as Blob1 } from "./blob-1.svg";
 import { default as Blob2 } from "./blob-2.svg";
 import { default as Blob3 } from "./blob-3.svg";
 import { default as Blob4 } from "./blob-4.svg";
+import { default as Blob5 } from "./blob-5.svg";
 
-export const blobs = [Blob1, Blob2, Blob3, Blob4];
+export const blobs = [Blob1, Blob2, Blob3, Blob4, Blob5];