feat: landing - parallax logo in banner (#165)

website/landing/components/AdvancedUsage/AdvancedUsage.tsx

@@ -1,4 +1,4 @@
-import { useSpring, useTransform, useViewportScroll } from "framer-motion";
+import { useTransform, useViewportScroll } from "framer-motion";
 import React, { useLayoutEffect, useRef, useState } from "react";
 
 // import config from "../../website.config.json";
@@ -14,8 +14,6 @@ import { ParallaxLogo } from "../common/ParallaxLogo";
 
 import { UsageExample } from "./UsageExample";
 
-const SPRING_OPTIONS = { stiffness: 200, damping: 20 };
-
 export const AdvancedUsage: React.FC = () => {
   // TODO: investigate why the app isn't able to find the existing
   // content from the website config.
@@ -58,8 +56,6 @@ export const AdvancedUsage: React.FC = () => {
     [sectionTop - windowHeight / 2, sectionTop + windowHeight / 2],
     [20, -40]
   );
-  const leftY = useSpring(leftRange, SPRING_OPTIONS);
-  const rightY = useSpring(rightRange, SPRING_OPTIONS);
 
   useLayoutEffect(() => {
     const container = section.current;
@@ -83,7 +79,7 @@ export const AdvancedUsage: React.FC = () => {
             gap: "40px",
           }}
         >
-          <ParallaxLogo leftY={leftY} rightY={rightY} />
+          <ParallaxLogo leftRange={leftRange} rightRange={rightRange} />
           <SectionTitle dangerouslySetInnerHTML={{ __html: content.title }} />
         </SectionHeader>
         <List

website/landing/components/Banner/Banner.tsx

@@ -1,54 +1,70 @@
+import { useTransform, useViewportScroll } from "framer-motion";
+import { useLayoutEffect, useRef, useState } from "react";
+
 import content from "../../website.config.json";
-import { Box, Resources, SandpackLogo, Text } from "../common";
+import {
+  Resources,
+  SectionContainer,
+  SectionTitle,
+  SectionWrapper,
+} from "../common";
 import { Clipboard } from "../common";
+import { ParallaxLogo } from "../common/ParallaxLogo";
 
 export const Banner: React.FC = () => {
   const { banner } = content;
+
+  const section = useRef<HTMLDivElement>(null);
+  const [sectionTop, setSectionTop] = useState(0);
+  const [sectionHeight, setSectionHeight] = useState(0);
+
+  const { scrollY } = useViewportScroll();
+
+  const leftRange = useTransform(
+    scrollY,
+    [sectionTop - sectionHeight / 2, sectionTop + sectionHeight / 2],
+    [-20, 40]
+  );
+  const rightRange = useTransform(
+    scrollY,
+    [sectionTop - sectionHeight / 2, sectionTop + sectionHeight / 2],
+    [20, -40]
+  );
+
+  useLayoutEffect(() => {
+    const container = section.current;
+    if (!container || !window) return;
+
+    const onResize = () => {
+      setSectionTop(container.offsetTop);
+      setSectionHeight(container.offsetHeight);
+    };
+
+    onResize();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [section]);
+
   return (
-    <Box
-      as="section"
-      css={{
-        alignItems: "center",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        gap: "48px",
-        padding: "100px 16px 0",
-      }}
-    >
-      <Box
+    <SectionWrapper ref={section}>
+      <SectionContainer
         css={{
           alignItems: "center",
           display: "flex",
           flexDirection: "column",
-          gap: "40px",
+          gap: "50px",
+          overflow: "visible",
+
+          "@bp3": {
+            gap: "100px",
+          },
         }}
       >
-        <Box css={{ width: "60px", "@bp1": { width: "100px" } }}>
-          <SandpackLogo theme="light" />
-        </Box>
-        <Text
-          as="h2"
-          css={{
-            fontWeight: "$semiBold",
-            fontSize: "36px",
-            lineHeight: "100%",
-            textAlign: "center",
-            letterSpacing: "-0.05em",
-
-            "@bp1": {
-              fontSize: "72px",
-            },
-
-            "@bp2": {
-              fontSize: "96px",
-            },
-          }}
-          dangerouslySetInnerHTML={{ __html: banner.title }}
-        />
-      </Box>
-      <Clipboard />
-      <Resources />
-    </Box>
+        <ParallaxLogo leftRange={leftRange} rightRange={rightRange} />
+        <SectionTitle dangerouslySetInnerHTML={{ __html: banner.title }} />
+        <Clipboard />
+        <Resources />
+      </SectionContainer>
+    </SectionWrapper>
   );
 };

website/landing/components/common/ParallaxLogo.tsx

@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { motion, useSpring } from "framer-motion";
 import type { MotionValue } from "framer-motion";
 
 import { styled } from "../../stitches.config";
@@ -7,14 +7,14 @@ const LogoWraper = styled("div", {
   $$halfHeight: "150px",
   alignItems: "center",
   display: "flex",
-  height: "calc((2 * $$halfHeight) - $$halfHeight / 2)",
+  height: "$$halfHeight",
   justifyContent: "center",
   position: "relative",
 });
 
 const LogoHalf = styled("div", {
   $$borderWidth: "14px",
-  border: "$$borderWidth solid black",
+  border: "$$borderWidth solid $$primaryTextColor",
   height: "$$halfHeight",
   width: "82px",
 
@@ -27,19 +27,24 @@ const LogoHalf = styled("div", {
   },
 });
 
+const SPRING_OPTIONS = { stiffness: 200, damping: 20 };
+
 const baseStyles = {
   height: "100%",
   width: "100%",
 };
 
 interface ParallaxLogoProps {
-  leftY: MotionValue;
-  rightY: MotionValue;
+  leftRange: MotionValue;
+  rightRange: MotionValue;
 }
 export const ParallaxLogo: React.FC<ParallaxLogoProps> = ({
-  leftY,
-  rightY,
+  leftRange,
+  rightRange,
 }) => {
+  const leftY = useSpring(leftRange, SPRING_OPTIONS);
+  const rightY = useSpring(rightRange, SPRING_OPTIONS);
+
   return (
     <LogoWraper>
       <motion.div style={{ ...baseStyles, y: leftY }}>