feat(website): new homepage animation

Summary: New background animation of the memlab website Reviewed By: twobassdrum Differential Revision: D54887603 fbshipit-source-id: c0da0559e6a809252648f67c9c287c89f05def4d
facebook · Mar 14, 2024 · a267a72 · a267a72
1 parent 19ef63a
commit a267a72
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/website/package.json b/website/package.json
@@ -29,7 +29,9 @@
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typedoc": "^0.22.17"
+    "three": "0.134.0",
+    "typedoc": "^0.22.17",
+    "vanta": "0.5.24"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.0.0-beta.21",

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -142,12 +142,13 @@ code {
 }
 
 #title, #sub-title {
-  color: black;
-  text-shadow: 2px 2px 2px rgb(209, 183, 61);
+  color: #323330;
+  font-family: circular, 'Segoe UI', sans-serif, Tahoma, Geneva, Verdana;
+  text-shadow: 1px 1px 1px rgb(209, 183, 61);
 }
 
 #learn-more {
-  color: black;
+  color: #323330;
   backdrop-filter: blur(10px);
 }
 

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -8,7 +8,7 @@
  * @oncall web_perf_infra
  */
 
-import React, {ReactNode, useLayoutEffect} from 'react';
+import React, {ReactNode, useEffect, useRef, useState} from 'react';
 import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
@@ -19,7 +19,9 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 import TerminalReplay from '../components/TerminalReplay';
 import Showcase from '../components/Showcase';
-import startAnimation from '../lib/ContainerAnimation';
+import * as Three from 'three';
+import NET from 'vanta/dist/vanta.net.min';
+
 import nomralizeTypeSpeed from '../lib/TypeSpeedNormalization';
 import homePageStdouts from '../data/HomePageMainTerminal';
 
@@ -130,15 +132,40 @@ const stdouts = nomralizeTypeSpeed(homePageStdouts);
 export default function Home(): React.ReactElement {
   const {siteConfig} = useDocusaurusContext();
   const headerContainerID = 'css-animated-bg-container';
+  const [vantaEffect, setVantaEffect] = useState(null);
+  const headerRef = useRef(null);
 
-  useLayoutEffect(() => {
-    startAnimation(headerContainerID);
-  }, []);
+  useEffect(() => {
+    if (!vantaEffect) {
+      setVantaEffect(
+        NET({
+          el: headerRef.current,
+          THREE: Three,
+          mouseControls: true,
+          touchControls: true,
+          gyroControls: false,
+          minHeight: 200.0,
+          minWidth: 200.0,
+          scale: 0.9,
+          scaleMobile: 0.8,
+          color: 0x63822b,
+          backgroundColor: 0xf0db4f,
+          points: 12.0,
+          maxDistance: 30.0,
+          spacing: 22.0,
+        }),
+      );
+    }
+    return () => {
+      if (vantaEffect) vantaEffect.destroy();
+    };
+  }, [vantaEffect]);
 
   return (
     <Layout description="memlab is an E2E testing, memory leak detection, and heap analysis framework for front-end JavaScript.">
       <header
         id={headerContainerID}
+        ref={headerRef}
         className={clsx('hero hero--primary', styles.heroBanner)}>
         <div id="header-container" className="container">
           <div id="left-header-section" className="container-section">