damus.io

EndThankYou.tsx (5413B)

---

 import { MotionValue, circOut, easeInOut, easeOut, motion, useMotionValue, useScroll, useTime, useTransform } from "framer-motion";
 import { PurpleIcon } from "../../icons/PurpleIcon";
 import { ArrowDown } from "lucide-react";import { useRef } from "react";
 
 export function EndThankYou() {
   const time = useTime()
   const ref = useRef<HTMLDivElement>(null)
   const { scrollYProgress } = useScroll({
     target: ref,
     offset: ["start start", "end end"]
   })
   const starProgress = useTransform(
     scrollYProgress,
     [0, 0.9],
     [0, 1],
     {
       clamp: true,
       ease: circOut
     }
   )
   const headingGradient = useTransform(
     time,
     [0, 3000],
     [
       "linear-gradient(to right, #000000 0%, #D34CD9 1000%, #F869B6 3000%)",
       "linear-gradient(to right, #000000 -10%, #D34CD9 0%, #F869B6 100%)"
     ],
     {
       clamp: true,
       ease: circOut
     }
   )
   const headingOpacity = useTransform(
     scrollYProgress,
     [0.5, 0.7],
     [0, 1],
     {
       clamp: true,
       ease: easeInOut
     }
   )
   const secondaryContentOpacity = useTransform(
     scrollYProgress,
     [0.7, 1.0],
     [0, 1],
     {
       clamp: true,
       ease: easeInOut
     }
   )
 
   return <div ref={ref} style={{ height: 3000 }} className="relative">
     <div className="sticky top-0 container z-30 mx-auto px-6 pt-12 h-auto min-h-screen flex flex-col gap-y-4 justify-center items-center pb-12">
       <PurpleStarIcon className="w-32 h-32 z-40" progress={starProgress} />
       <motion.h1
         className="text-4xl md:text-6xl text-center text-transparent bg-clip-text font-semibold break-keep tracking-tight z-30 pb-6"
         style={{
           backgroundImage: headingGradient,
           opacity: headingOpacity,
         }}
       >
         Thank you for your support in 2024!
       </motion.h1>
 
       <motion.div
         className="text-center text-purple-200/80 text-lg max-w-lg p-6 space-y-4 z-30"
         style={{ opacity: secondaryContentOpacity }}
       >
         <p>
           We would like to thank you for your continued support, from the bottom of our hearts. You help us make our mission possible. We are a small team, but we will keep working and doing our best to bring you the most innovative Nostr experience, and help build a better, freer future together in 2025!
         </p>
         <p className="text-3xl capitalize">
           Happy New Year!
         </p>
       </motion.div>
     </div>
   </div>
 }
 
 interface StarIconProps {
     className?: string;
     progress: MotionValue<number>;
 }
 
 function PurpleStarIcon(props: StarIconProps) {
   const { className, progress } = props;
 
   const purple1Color = "#D34CD9";
   const purple2Color = "#F869B6";
 
   const starScale = useTransform(
     progress,
     [0, 0.6],
     [3, 1.0],
     {
       clamp: true,
       ease: circOut
     }
   )
 
   const starOpacity = useTransform(
     progress,
     [0, 0.6],
     [0, 1],
     {
       clamp: true,
       ease: circOut
     }
   )
 
   const starShadowColor = useTransform(
     progress,
     [0, 0.8],
     [
       "#FFFFFF00",
       "#FFFFFFFF",
     ],
     {
       clamp: true,
       ease: circOut
     }
   )
 
   const gradientOffsetKeyframes = [0, 0.2, 1.0]
 
   const whiteGradientStopOffset = useTransform(
     progress,
     gradientOffsetKeyframes,
     ["0%", "0%", "70%"],
     {
       clamp: true,
       ease: circOut
     }
   );
 
   const purple2GradientStopOffset = useTransform(
     progress,
     gradientOffsetKeyframes,
     ["1%", "1%", "100%"],
     {
       clamp: true,
       ease: circOut
     }
   );
 
   const purple1GradientStopOffset = useTransform(
     progress,
     gradientOffsetKeyframes,
     ["2%", "2%", "125%"],
     {
       clamp: true,
       ease: circOut
     }
   );
 
   const blackGradientStopOffset = useTransform(
     progress,
     gradientOffsetKeyframes,
     ["3%", "3%", "250%"],
     {
       clamp: true,
       ease: circOut
     }
   );
 
   return (
     // Generated by Pixelmator Pro 3.6.8
     <motion.svg
       className={className}
       width="4267" height="4267" viewBox="0 0 4267 4267" xmlns="http://www.w3.org/2000/svg"
       style={{
         scale: starScale,
         opacity: starOpacity
       }}
     >
       <defs>
         <radialGradient id="purpleGradient" cx="150%" cy="-50%" r="250%">
           <motion.stop offset={whiteGradientStopOffset} style={{ stopColor: "#ffffff", stopOpacity: 1 }} />
           <motion.stop offset={purple2GradientStopOffset} style={{ stopColor: purple2Color, stopOpacity: 1 }} />
           <motion.stop offset={purple1GradientStopOffset} style={{ stopColor: purple1Color, stopOpacity: 1 }} />
           <motion.stop offset={blackGradientStopOffset} style={{ stopColor: "#000000", stopOpacity: 1 }} />
         </radialGradient>
         <filter id="whiteShadow" x="-50%" y="-50%" width="200%" height="200%">
           <motion.feDropShadow dx="0" dy="0" stdDeviation="500" floodColor={starShadowColor} />
         </filter>
       </defs>
       <path
         id="Star"
         fill="url(#purpleGradient)"
         stroke="url(#purpleGradient)"
         fill-rule="evenodd"
         stroke-width="400"
         stroke-linejoin="round"
         filter="url(#whiteShadow)"
         d="M 2133.5 750 L 1812.484985 1691.660645 L 817.713318 1705.975098 L 1614.086914 2302.267578 L 1320.299072 3252.774902 L 2133.5 2679.643311 L 2946.700928 3252.774902 L 2652.913086 2302.267578 L 3449.286621 1705.975098 L 2454.515137 1691.660645 Z"
       />
     </motion.svg>
   )
 }