damus.io

damus.io website
git clone git://jb55.com/damus.io
Log | Files | Refs | README | LICENSE

Year2024Intro.tsx (2421B)

      1 import { MotionValue, circOut, easeInOut, easeOut, motion, useMotionValue, useScroll, useTime, useTransform } from "framer-motion";
      2 import { PurpleIcon } from "../../icons/PurpleIcon";
      3 import { ArrowDown } from "lucide-react";
      4 import { Orbitron } from "next/font/google";
      5 import { cn } from "@/lib/utils";
      6 import NumberFlow from '@number-flow/react'
      7 import { MutableRefObject, RefObject, useEffect, useRef, useState } from "react";
      8 
      9 const orbitron = Orbitron({ subsets: ['latin'] })
     10 
     11 export function Year2024Intro() {
     12   const time = useTime()
     13   const [year, setYear] = useState<number>(1971)
     14   const headingOpacity = useTransform(
     15     time,
     16     [0, 3000],
     17     [0, 1],
     18     {
     19       clamp: true,
     20       ease: easeInOut
     21     }
     22   )
     23   const secondaryContentOpacity = useTransform(
     24     time,
     25     [2000, 4000],
     26     [0, 1],
     27     {
     28       clamp: true,
     29       ease: easeInOut
     30     }
     31   )
     32 
     33   useEffect(() => {
     34     setTimeout(() => {
     35       setYear(2024)
     36     }, 500)
     37   }, [])
     38 
     39   return <div className="container z-30 mx-auto px-6 pt-12 h-auto min-h-screen flex flex-col gap-y-4 justify-center items-center">
     40     <motion.div
     41       style={{ opacity: secondaryContentOpacity }}
     42     >
     43       <PurpleIcon className="w-16 h-16" />
     44     </motion.div>
     45     <motion.h1
     46       className={cn("text-6xl md:text-9xl text-center text-white font-bold break-keep tracking-tight z-30", orbitron.className)}
     47       style={{
     48         opacity: headingOpacity,
     49       }}
     50     >
     51       <NumberFlow
     52         value={year}
     53         format={{ useGrouping: false }}
     54         continuous={true}
     55         transformTiming={{ duration: 1000, easing: "ease-out" }}
     56         opacityTiming={{ duration: 1000, easing: "ease-out" }}
     57         trend={1}
     58       />
     59     </motion.h1>
     60     <motion.div
     61       className="text-center text-purple-200/80 text-lg max-w-lg p-6 space-y-4 z-30"
     62       style={{ opacity: secondaryContentOpacity }}
     63     >
     64       <p>
     65         2024 was a great year! We continue to fight for a freer, healthier, and more open social network, and as a Purple member you are a key part of that mission!
     66       </p>
     67       <p>
     68         So we would like to extend and share our gratitude with you — and share some nice memories from the past year.
     69       </p>
     70       <p className="text-3xl">
     71         Let’s rewind!!
     72       </p>
     73       <div className="pt-8 flex gap-3 w-full justify-center">
     74         <ArrowDown className="w-12 h-12 animate-bounce" />
     75       </div>
     76     </motion.div>
     77   </div>
     78 }