Add random shape positions and fun movements

components/ShapesBackground.module.css

@@ -17,6 +17,8 @@
   position: absolute;
   filter: var(--blue);
   opacity: 20%;
+
+  transition: 0.5s;
 }
 
 .homeDots {

components/ShapesBackground.tsx

@@ -30,16 +30,19 @@ export function ShapesBackground({ getConfig }: Props) {
   );
 }
 
-export type ShapeType =
-  | "asterisk"
-  | "circle"
-  | "cross"
-  | "dots"
-  | "hash"
-  | "plus"
-  | "ring"
-  | "triangle"
-  | "waves";
+export const shapeTypes = [
+  "asterisk",
+  "circle",
+  "cross",
+  "dots",
+  "hash",
+  "plus",
+  "ring",
+  "triangle",
+  "waves",
+] as const;
+
+export type ShapeType = typeof shapeTypes[number];
 
 export type ShapesConfig = {
   [key in ShapeType]?: CSSProperties[];

pages/get-involved.tsx

@@ -3,6 +3,11 @@ import React from "react";
 import { ConnectWithUs } from "@/components/ConnectWithUs";
 import { EmailSignup } from "@/components/EmailSignup";
 import { Image } from "@/components/Image";
+import {
+  GetShapesConfig,
+  ShapesConfig,
+  shapeTypes,
+} from "@/components/ShapesBackground";
 
 import Content from "../content/get-involved.mdx";
 
@@ -33,3 +38,18 @@ export default function GetInvolved() {
     </div>
   );
 }
+
+GetInvolved.getShapesConfig = (() => {
+  const config: ShapesConfig = {};
+
+  shapeTypes.forEach((shape) => {
+    const [top, left] = [
+      Math.trunc(Math.random() * (window.innerWidth <= 500 ? 50 : 90)),
+      Math.trunc(Math.random() * 100),
+    ];
+
+    config[shape] = [{ top: `${top}vh`, left: `${left}vw` }];
+  });
+
+  return config;
+}) as GetShapesConfig;

pages/index.tsx

@@ -6,7 +6,11 @@ import { EmailSignup } from "@/components/EmailSignup";
 import { EventDescriptionCard } from "@/components/EventDescriptionCard";
 import { Image } from "@/components/Image";
 import { NewsCard } from "@/components/NewsCard";
-import { GetShapesConfig } from "@/components/ShapesBackground";
+import {
+  GetShapesConfig,
+  ShapesConfig,
+  shapeTypes,
+} from "@/components/ShapesBackground";
 import { SocialLinks } from "@/components/SocialLinks";
 
 import AltTab, {
@@ -95,8 +99,16 @@ Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
 };
 
 Home.getShapesConfig = (() => {
-  return {
-    triangle: [{ left: "2rem" }, { bottom: "2rem" }],
-    dots: [{ top: "100px", right: "50vw" }],
-  };
+  const config: ShapesConfig = {};
+
+  shapeTypes.forEach((shape) => {
+    const [top, left] = [
+      Math.trunc(Math.random() * (window.innerWidth <= 500 ? 50 : 90)),
+      Math.trunc(Math.random() * 100),
+    ];
+
+    config[shape] = [{ top: `${top}vh`, left: `${left}vw` }];
+  });
+
+  return config;
 }) as GetShapesConfig;