From 2efc1fe36adbada405a18a1ac85611c6c5958c85 Mon Sep 17 00:00:00 2001
From: Brandon Saldan <26472557+brandonsaldan@users.noreply.github.com>
Date: Wed, 1 Jan 2025 00:17:25 -0500
Subject: [PATCH] feat(ui): add animations

---
 src/app/page.tsx                   | 124 +++++++++++++++++++----------
 src/components/bento-card.tsx      |   8 ++
 src/components/interstate-rows.tsx |  53 +++++++++++-
 src/components/logo-cluster.tsx    | 101 +++++++++++++++++++++--
 src/components/map.tsx             |  33 ++++++++
 src/components/testimonials.tsx    |   4 +-
 src/hooks/useScrollAnimation.ts    |  57 +++++++++++++
 7 files changed, 331 insertions(+), 49 deletions(-)
 create mode 100644 src/hooks/useScrollAnimation.ts

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1ae691b..d75a1aa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,6 +16,7 @@ import { Heading, Subheading } from '@/components/text'
 import { ChevronRightIcon } from '@heroicons/react/16/solid'
 import dynamic from 'next/dynamic'
 import 'prismjs/themes/prism.css'
+import { useEffect, useRef } from 'react'
 
 const CodeBlock = dynamic(() => import('@/components/code-block'), {
   ssr: false,
@@ -116,6 +117,45 @@ function BentoSection() {
 }
 
 function SupportCTA() {
+  const ctaRef = useRef<HTMLDivElement>(null)
+  const imageRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            if (ctaRef.current) {
+              ctaRef.current.classList.remove('opacity-0', 'scale-95')
+              ctaRef.current.classList.add('opacity-100', 'scale-100')
+            }
+            if (imageRef.current) {
+              setTimeout(() => {
+                if (imageRef.current) {
+                  imageRef.current.classList.remove(
+                    'opacity-0',
+                    'translate-x-8',
+                  )
+                  imageRef.current.classList.add('opacity-100', 'translate-x-0')
+                }
+              }, 200)
+            }
+            observer.unobserve(entry.target)
+          }
+        })
+      },
+      {
+        threshold: 0.2,
+      },
+    )
+
+    if (ctaRef.current) {
+      observer.observe(ctaRef.current)
+    }
+
+    return () => observer.disconnect()
+  }, [])
+
   return (
     <Container>
       <Subheading>Support Nocturne</Subheading>
@@ -124,49 +164,53 @@ function SupportCTA() {
       </Heading>
 
       <div className="mt-10 pb-20 sm:mt-16">
-        <div className="relative isolate h-auto overflow-hidden rounded-3xl bg-[linear-gradient(145deg,var(--tw-gradient-stops))] from-[#7456c1] via-[#fa6767] via-[70%] to-[#ff4d4a] px-6 pb-0 pt-16 shadow-sm ring-1 ring-black/5 data-[dark]:bg-gray-800 data-[dark]:ring-white/15 sm:px-16 md:pt-24 lg:flex lg:h-[380px] lg:items-center lg:gap-x-20 lg:pb-0 lg:pl-16 lg:pr-20 lg:pt-0">
-          <div className="mx-auto max-w-md lg:mx-0 lg:flex-auto lg:text-left">
-            <h4 className="text-balance text-3xl font-medium tracking-tight text-white group-data-[dark]:text-white">
-              Choose Your Support Method
-            </h4>
-            <p className="mt-4 text-pretty text-lg/8 text-white">
-              Nocturne is a community-driven initiative. If you find it
-              valuable, consider supporting our work through a donation. All
-              contributions go towards development and maintenance.
-            </p>
-            <Link href="/about">
-              <p className="duration-350 mt-4 text-pretty text-lg/8 text-white/80 transition ease-in-out hover:text-white/60">
-                Learn more about our mission →
+        <div
+          ref={ctaRef}
+          className="transform opacity-0 transition-all duration-700 ease-out"
+        >
+          <div className="relative isolate h-auto overflow-hidden rounded-3xl bg-[linear-gradient(145deg,var(--tw-gradient-stops))] from-[#7456c1] via-[#fa6767] via-[70%] to-[#ff4d4a] px-6 pb-0 pt-16 shadow-sm ring-1 ring-black/5 data-[dark]:bg-gray-800 data-[dark]:ring-white/15 sm:px-16 md:pt-24 lg:flex lg:h-[380px] lg:items-center lg:gap-x-20 lg:pb-0 lg:pl-16 lg:pr-20 lg:pt-0">
+            <div className="mx-auto max-w-md lg:mx-0 lg:flex-auto lg:text-left">
+              <h4 className="text-balance text-3xl font-medium tracking-tight text-white group-data-[dark]:text-white">
+                Choose Your Support Method
+              </h4>
+              <p className="mt-4 text-pretty text-lg/8 text-white">
+                Nocturne is a community-driven initiative. If you find it
+                valuable, consider supporting our work through a donation. All
+                contributions go towards development and maintenance.
               </p>
-            </Link>
-            <div className="mt-6 flex flex-col gap-4 sm:flex-row sm:justify-start">
-              <div className="w-full sm:w-[220px]">
-                <Button
-                  href="https://buymeacoffee.com/brandonsaldan"
-                  className="w-full"
-                >
-                  Buy Me a Coffee
-                </Button>
-              </div>
-              <div className="w-full sm:w-[220px]">
-                <Button
-                  href="https://ko-fi.com/brandonsaldan"
-                  className="w-full"
-                >
-                  Ko-Fi
-                </Button>
+              <Link href="/about">
+                <p className="duration-350 mt-4 text-pretty text-lg/8 text-white/80 transition ease-in-out hover:text-white/60">
+                  Learn more about our mission →
+                </p>
+              </Link>
+              <div className="mt-6 flex flex-col gap-4 sm:flex-row sm:justify-start">
+                <div className="w-full sm:w-[220px]">
+                  <Button
+                    href="https://buymeacoffee.com/brandonsaldan"
+                    className="w-full"
+                  >
+                    Buy Me a Coffee
+                  </Button>
+                </div>
+                <div className="w-full sm:w-[220px]">
+                  <Button
+                    href="https://ko-fi.com/brandonsaldan"
+                    className="w-full"
+                  >
+                    Ko-Fi
+                  </Button>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div className="relative mt-8 h-64 sm:h-80 lg:mt-2">
-            <img
-              alt="Nocturne Screenshot"
-              src="/images/nocturne-2.png"
-              width={1824}
-              height={1080}
-              className="pointer-events-none absolute top-0 w-[41rem] max-w-none rounded-md sm:left-6 sm:w-[57rem]"
-            />
+            <div className="relative mt-8 h-64 sm:h-80 lg:mt-2">
+              <img
+                ref={imageRef}
+                alt="Nocturne Screenshot"
+                src="/images/nocturne-2.png"
+                className="pointer-events-none absolute top-0 w-[41rem] max-w-none translate-x-8 transform rounded-md opacity-0 transition-all duration-700 ease-out sm:left-6 sm:w-[57rem]"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -179,7 +223,7 @@ export default function Home() {
     <div className="overflow-hidden">
       <Hero />
       <main>
-        <div className="bg-gradient-to-b from-white from-50% to-gray-100 pt-20">
+        <div className="bg-gradient-to-b from-white from-50% to-gray-100 pt-8 sm:pt-20">
           <BentoSection />
           <Testimonials />
           <SupportCTA />
diff --git a/src/components/bento-card.tsx b/src/components/bento-card.tsx
index 9e8516a..798b8b7 100644
--- a/src/components/bento-card.tsx
+++ b/src/components/bento-card.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useScrollAnimation } from '@/hooks/useScrollAnimation'
 import { clsx } from 'clsx'
 import { motion } from 'framer-motion'
 import { Subheading } from './text'
@@ -21,8 +22,14 @@ export function BentoCard({
   graphic: React.ReactNode
   fade?: ('top' | 'bottom')[]
 }) {
+  const cardRef = useScrollAnimation<HTMLDivElement>({
+    y: 8,
+    threshold: 0.2,
+  })
+
   return (
     <motion.div
+      ref={cardRef}
       initial="idle"
       whileHover="active"
       variants={{ idle: {}, active: {} }}
@@ -32,6 +39,7 @@ export function BentoCard({
         'group relative flex flex-col overflow-hidden rounded-lg',
         'bg-white shadow-sm ring-1 ring-black/5',
         'data-[dark]:bg-gray-800 data-[dark]:ring-white/15',
+        'translate-y-8 transform opacity-0 transition-all duration-700 ease-out',
       )}
     >
       <div className="relative h-80 shrink-0">{graphic}</div>
diff --git a/src/components/interstate-rows.tsx b/src/components/interstate-rows.tsx
index 1c0cb53..1c46846 100644
--- a/src/components/interstate-rows.tsx
+++ b/src/components/interstate-rows.tsx
@@ -1,4 +1,5 @@
 import { clsx } from 'clsx'
+import { useEffect, useRef, useState } from 'react'
 
 function Row({ children }: { children: React.ReactNode }) {
   return (
@@ -14,10 +15,12 @@ function Logo({
   label,
   src,
   className,
+  isActive,
 }: {
   label: string
   src: string
   className: string
+  isActive: boolean
 }) {
   return (
     <div
@@ -25,7 +28,11 @@ function Logo({
         className,
         'absolute top-2 grid grid-cols-[1rem,1fr] items-center gap-2 whitespace-nowrap px-3 py-1',
         'rounded-full bg-gradient-to-t from-gray-50 from-50% to-gray-100 ring-1 ring-inset ring-white/10',
-        '[--move-x-from:-100%] [--move-x-to:calc(100%+100cqw)] [animation-iteration-count:infinite] [animation-name:move-x] [animation-play-state:paused] [animation-timing-function:linear] group-hover:[animation-play-state:running]',
+        '[--move-x-from:-100%] [--move-x-to:calc(100%+100cqw)] [animation-iteration-count:infinite] [animation-name:move-x] [animation-timing-function:linear]',
+        isActive
+          ? '[animation-play-state:running]'
+          : '[animation-play-state:paused]',
+        'group-hover:[animation-play-state:running]',
       )}
     >
       <img alt="" src={src} className="size-4" />
@@ -35,6 +42,38 @@ function Logo({
 }
 
 export function InterstateRows() {
+  const [isInView, setIsInView] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+  const hasAnimated = useRef(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setIsMobile(window.innerWidth < 640)
+  }, [])
+
+  useEffect(() => {
+    if (!isMobile || hasAnimated.current) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !hasAnimated.current) {
+            setIsInView(true)
+            hasAnimated.current = true
+            observer.disconnect()
+          }
+        })
+      },
+      { threshold: 0.3 },
+    )
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current)
+    }
+
+    return () => observer.disconnect()
+  }, [isMobile])
+
   return (
     <div aria-hidden="true" className="relative h-full overflow-hidden">
       <div className="absolute inset-0 grid grid-cols-1 pt-8 [container-type:inline-size]">
@@ -43,11 +82,13 @@ export function InterstateRows() {
             label="I-10"
             src="/interstate/I-10.svg"
             className="[animation-delay:-26s] [animation-duration:30s]"
+            isActive={isMobile && isInView}
           />
           <Logo
             label="I-95"
             src="/interstate/I-95.svg"
             className="[animation-delay:-8s] [animation-duration:30s]"
+            isActive={isMobile && isInView}
           />
         </Row>
         <Row>
@@ -55,11 +96,13 @@ export function InterstateRows() {
             label="I-90"
             src="/interstate/I-90.svg"
             className="[animation-delay:-40s] [animation-duration:40s]"
+            isActive={isMobile && isInView}
           />
           <Logo
             label="I-15"
             src="/interstate/I-15.svg"
             className="[animation-delay:-20s] [animation-duration:40s]"
+            isActive={isMobile && isInView}
           />
         </Row>
         <Row>
@@ -67,11 +110,13 @@ export function InterstateRows() {
             label="I-25"
             src="/interstate/I-25.svg"
             className="[animation-delay:-10s] [animation-duration:40s]"
+            isActive={isMobile && isInView}
           />
           <Logo
             label="I-42"
             src="/interstate/I-42.svg"
             className="[animation-delay:-32s] [animation-duration:40s]"
+            isActive={isMobile && isInView}
           />
         </Row>
         <Row>
@@ -79,11 +124,13 @@ export function InterstateRows() {
             label="I-55"
             src="/interstate/I-55.svg"
             className="[animation-delay:-45s] [animation-duration:45s]"
+            isActive={isMobile && isInView}
           />
           <Logo
             label="I-4"
             src="/interstate/I-4.svg"
             className="[animation-delay:-23s] [animation-duration:45s]"
+            isActive={isMobile && isInView}
           />
         </Row>
         <Row>
@@ -91,11 +138,13 @@ export function InterstateRows() {
             label="I-57"
             src="/interstate/I-57.svg"
             className="[animation-delay:-55s] [animation-duration:60s]"
+            isActive={isMobile && isInView}
           />
           <Logo
             label="I-68"
             src="/interstate/I-68.svg"
             className="[animation-delay:-20s] [animation-duration:60s]"
+            isActive={isMobile && isInView}
           />
         </Row>
         <Row>
@@ -103,11 +152,13 @@ export function InterstateRows() {
             label="I-76"
             src="/interstate/I-76.svg"
             className="[animation-delay:-9s] [animation-duration:40s]"
+            isActive={isMobile && isInView}
           />
           <Logo
             label="I-81"
             src="/interstate/I-81.svg"
             className="[animation-delay:-28s] [animation-duration:40s]"
+            isActive={isMobile && isInView}
           />
         </Row>
       </div>
diff --git a/src/components/logo-cluster.tsx b/src/components/logo-cluster.tsx
index bbbd72a..834e670 100644
--- a/src/components/logo-cluster.tsx
+++ b/src/components/logo-cluster.tsx
@@ -2,16 +2,21 @@
 
 import { clsx } from 'clsx'
 import { motion } from 'framer-motion'
+import { useEffect, useRef, useState } from 'react'
 import { Mark } from './logo'
 
 function Circle({
   size,
   delay,
   opacity,
+  isInView,
+  isMobile,
 }: {
   size: number
   delay: number
   opacity: string
+  isInView: boolean
+  isMobile: boolean
 }) {
   return (
     <motion.div
@@ -29,6 +34,9 @@ function Circle({
           },
         },
       }}
+      initial="idle"
+      animate={isMobile && isInView ? 'active' : undefined}
+      whileHover={!isMobile ? 'active' : undefined}
       style={{ '--opacity': opacity } as React.CSSProperties}
       className={clsx(
         'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full',
@@ -39,13 +47,43 @@ function Circle({
   )
 }
 
-function Circles() {
+function Circles({
+  isInView,
+  isMobile,
+}: {
+  isInView: boolean
+  isMobile: boolean
+}) {
   return (
     <div className="absolute inset-0">
-      <Circle size={528} opacity="3%" delay={0.45} />
-      <Circle size={400} opacity="5%" delay={0.3} />
-      <Circle size={272} opacity="5%" delay={0.15} />
-      <Circle size={144} opacity="10%" delay={0} />
+      <Circle
+        size={528}
+        opacity="3%"
+        delay={0.45}
+        isInView={isInView}
+        isMobile={isMobile}
+      />
+      <Circle
+        size={400}
+        opacity="5%"
+        delay={0.3}
+        isInView={isInView}
+        isMobile={isMobile}
+      />
+      <Circle
+        size={272}
+        opacity="5%"
+        delay={0.15}
+        isInView={isInView}
+        isMobile={isMobile}
+      />
+      <Circle
+        size={144}
+        opacity="10%"
+        delay={0}
+        isInView={isInView}
+        isMobile={isMobile}
+      />
       <div className="absolute inset-0 bg-gradient-to-t from-white to-35%" />
     </div>
   )
@@ -64,11 +102,15 @@ function Logo({
   left,
   top,
   hover,
+  isInView,
+  isMobile,
 }: {
   src: string
   left: number
   top: number
   hover: { x: number; y: number; rotate: number; delay: number }
+  isInView: boolean
+  isMobile: boolean
 }) {
   return (
     <motion.img
@@ -87,6 +129,9 @@ function Logo({
           },
         },
       }}
+      initial="idle"
+      animate={isMobile && isInView ? 'active' : undefined}
+      whileHover={!isMobile ? 'active' : undefined}
       alt=""
       src={src}
       style={{ left, top } as React.CSSProperties}
@@ -96,9 +141,41 @@ function Logo({
 }
 
 export function LogoCluster() {
+  const [isInView, setIsInView] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+  const hasAnimated = useRef(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setIsMobile(window.innerWidth < 640)
+  }, [])
+
+  useEffect(() => {
+    if (!isMobile || hasAnimated.current) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !hasAnimated.current) {
+            setIsInView(true)
+            hasAnimated.current = true
+            observer.disconnect()
+          }
+        })
+      },
+      { threshold: 0.3 },
+    )
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current)
+    }
+
+    return () => observer.disconnect()
+  }, [isMobile])
+
   return (
     <div aria-hidden="true" className="relative h-full overflow-hidden">
-      <Circles />
+      <Circles isInView={isInView} isMobile={isMobile} />
       <div className="absolute left-1/2 h-full w-[26rem] -translate-x-1/2">
         <MainLogo />
         <Logo
@@ -106,36 +183,48 @@ export function LogoCluster() {
           left={360}
           top={144}
           hover={{ x: 6, y: 1, rotate: 5, delay: 0.38 }}
+          isInView={isInView}
+          isMobile={isMobile}
         />
         <Logo
           src="/logo-cluster/nextjs.svg"
           left={285}
           top={20}
           hover={{ x: 4, y: -5, rotate: 6, delay: 0.3 }}
+          isInView={isInView}
+          isMobile={isMobile}
         />
         <Logo
           src="/logo-cluster/cloudflare.svg"
           left={255}
           top={210}
           hover={{ x: 3, y: 5, rotate: 7, delay: 0.2 }}
+          isInView={isInView}
+          isMobile={isMobile}
         />
         <Logo
           src="/logo-cluster/workers.svg"
           left={144}
           top={40}
           hover={{ x: -2, y: -5, rotate: -6, delay: 0.15 }}
+          isInView={isInView}
+          isMobile={isMobile}
         />
         <Logo
           src="/logo-cluster/spotify.svg"
           left={36}
           top={56}
           hover={{ x: -4, y: -5, rotate: -6, delay: 0.35 }}
+          isInView={isInView}
+          isMobile={isMobile}
         />
         <Logo
           src="/logo-cluster/postgresql.svg"
           left={96}
           top={176}
           hover={{ x: -3, y: 5, rotate: 3, delay: 0.15 }}
+          isInView={isInView}
+          isMobile={isMobile}
         />
       </div>
     </div>
diff --git a/src/components/map.tsx b/src/components/map.tsx
index 4df3f8f..d76032b 100644
--- a/src/components/map.tsx
+++ b/src/components/map.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { motion } from 'framer-motion'
+import { useEffect, useRef, useState } from 'react'
 
 function Marker({
   src,
@@ -13,6 +14,38 @@ function Marker({
   offset: number
   delay: number
 }) {
+  const [isInView, setIsInView] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+  const hasAnimated = useRef(false)
+
+  useEffect(() => {
+    setIsMobile(window.innerWidth < 640)
+  }, [])
+
+  useEffect(() => {
+    if (!isMobile || hasAnimated.current) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !hasAnimated.current) {
+            setIsInView(true)
+            hasAnimated.current = true
+            observer.disconnect()
+          }
+        })
+      },
+      { threshold: 0.5 },
+    )
+
+    const element = document.querySelector('.map-container')
+    if (element) {
+      observer.observe(element)
+    }
+
+    return () => observer.disconnect()
+  }, [isMobile])
+
   return (
     <motion.div
       variants={{
diff --git a/src/components/testimonials.tsx b/src/components/testimonials.tsx
index 4c526e5..e7bc437 100644
--- a/src/components/testimonials.tsx
+++ b/src/components/testimonials.tsx
@@ -163,7 +163,7 @@ export function Testimonials() {
         <div className="mt-10 sm:mt-16">
           <div
             ref={scrollRef}
-            className="flex snap-x snap-mandatory gap-4 overflow-x-auto [scrollbar-width:none] lg:grid lg:grid-cols-6 [&::-webkit-scrollbar]:hidden"
+            className="flex snap-x snap-mandatory gap-4 overflow-x-auto px-6 [scrollbar-width:none] lg:grid lg:grid-cols-6 lg:px-0 [&::-webkit-scrollbar]:hidden"
           >
             {testimonials.map(
               ({ img, name, title, quote }, testimonialIndex) => (
@@ -175,7 +175,7 @@ export function Testimonials() {
                   bounds={bounds}
                   scrollX={scrollX}
                   onClick={() => scrollTo(testimonialIndex)}
-                  className="w-[calc(100vw-3rem)] shrink-0 snap-start sm:w-[calc(100vw-4rem)] lg:col-span-2 lg:w-auto"
+                  className="w-[calc(100vw-5rem)] shrink-0 snap-start sm:w-[calc(100vw-6rem)] lg:col-span-2 lg:w-auto"
                 >
                   {quote}
                 </TestimonialCard>
diff --git a/src/hooks/useScrollAnimation.ts b/src/hooks/useScrollAnimation.ts
new file mode 100644
index 0000000..6d06741
--- /dev/null
+++ b/src/hooks/useScrollAnimation.ts
@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react'
+
+interface ScrollAnimationConfig {
+  threshold?: number
+  delay?: number
+  x?: number
+  y?: number
+  scale?: number
+}
+
+export function useScrollAnimation<T extends HTMLElement>(
+  config: ScrollAnimationConfig = {},
+) {
+  const { threshold = 0.2, delay = 0, x = 0, y = 8, scale = 1 } = config
+
+  const elementRef = useRef<T>(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && elementRef.current) {
+            setTimeout(() => {
+              if (elementRef.current) {
+                elementRef.current.classList.remove(
+                  'opacity-0',
+                  'translate-y-8',
+                  '-translate-x-4',
+                  'scale-95',
+                )
+                elementRef.current.classList.add(
+                  'opacity-100',
+                  'translate-y-0',
+                  'translate-x-0',
+                  'scale-100',
+                )
+              }
+            }, delay)
+            observer.unobserve(entry.target)
+          }
+        })
+      },
+      {
+        threshold,
+        rootMargin: '0px 0px -10% 0px',
+      },
+    )
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current)
+    }
+
+    return () => observer.disconnect()
+  }, [threshold, delay])
+
+  return elementRef
+}