saas-forge 0.0.1

package/packages/ui/src/components/aceternity/compare.tsx

@@ -0,0 +1,244 @@
+"use client";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { IconDotsVertical } from "@tabler/icons-react";
+import { cn } from "../../lib/utils";
+import { SparklesCore } from "./sparkles";
+
+interface CompareProps {
+  firstImage?: string;
+  secondImage?: string;
+  className?: string;
+  firstImageClassName?: string;
+  secondImageClassname?: string;
+  initialSliderPercentage?: number;
+  slideMode?: "hover" | "drag";
+  showHandlebar?: boolean;
+  autoplay?: boolean;
+  autoplayDuration?: number;
+}
+export const Compare = ({
+  firstImage = "",
+  secondImage = "",
+  className,
+  firstImageClassName,
+  secondImageClassname,
+  initialSliderPercentage = 50,
+  slideMode = "hover",
+  showHandlebar = true,
+  autoplay = false,
+  autoplayDuration = 5000,
+}: CompareProps) => {
+  const [sliderXPercent, setSliderXPercent] = useState(initialSliderPercentage);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const sliderRef = useRef<HTMLDivElement>(null);
+
+  const [isMouseOver, setIsMouseOver] = useState(false);
+
+  const autoplayRef = useRef<NodeJS.Timeout | null>(null);
+
+  const startAutoplay = useCallback(() => {
+    if (!autoplay) return;
+
+    const startTime = Date.now();
+    const animate = () => {
+      const elapsedTime = Date.now() - startTime;
+      const progress =
+        (elapsedTime % (autoplayDuration * 2)) / autoplayDuration;
+      const percentage = progress <= 1 ? progress * 100 : (2 - progress) * 100;
+
+      setSliderXPercent(percentage);
+      autoplayRef.current = setTimeout(animate, 16); // ~60fps
+    };
+
+    animate();
+  }, [autoplay, autoplayDuration]);
+
+  const stopAutoplay = useCallback(() => {
+    if (autoplayRef.current) {
+      clearTimeout(autoplayRef.current);
+      autoplayRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    startAutoplay();
+    return () => stopAutoplay();
+  }, [startAutoplay, stopAutoplay]);
+
+  function mouseEnterHandler() {
+    setIsMouseOver(true);
+    stopAutoplay();
+  }
+
+  function mouseLeaveHandler() {
+    setIsMouseOver(false);
+    if (slideMode === "hover") {
+      setSliderXPercent(initialSliderPercentage);
+    }
+    if (slideMode === "drag") {
+      setIsDragging(false);
+    }
+    startAutoplay();
+  }
+
+  const handleStart = useCallback(
+    (clientX: number) => {
+      if (slideMode === "drag") {
+        setIsDragging(true);
+      }
+    },
+    [slideMode]
+  );
+
+  const handleEnd = useCallback(() => {
+    if (slideMode === "drag") {
+      setIsDragging(false);
+    }
+  }, [slideMode]);
+
+  const handleMove = useCallback(
+    (clientX: number) => {
+      if (!sliderRef.current) return;
+      if (slideMode === "hover" || (slideMode === "drag" && isDragging)) {
+        const rect = sliderRef.current.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const percent = (x / rect.width) * 100;
+        requestAnimationFrame(() => {
+          setSliderXPercent(Math.max(0, Math.min(100, percent)));
+        });
+      }
+    },
+    [slideMode, isDragging]
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => handleStart(e.clientX),
+    [handleStart]
+  );
+  const handleMouseUp = useCallback(() => handleEnd(), [handleEnd]);
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => handleMove(e.clientX),
+    [handleMove]
+  );
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      if (!autoplay) {
+        if (e.touches[0]) {
+          handleStart(e.touches[0].clientX);
+        }
+      }
+    },
+    [handleStart, autoplay]
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    if (!autoplay) {
+      handleEnd();
+    }
+  }, [handleEnd, autoplay]);
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!autoplay) {
+        if (e.touches[0]) {
+          handleMove(e.touches[0].clientX);
+        }
+      }
+    },
+    [handleMove, autoplay]
+  );
+
+  return (
+    <div
+      ref={sliderRef}
+      className={cn("w-[400px] h-[400px] overflow-hidden", className)}
+      style={{
+        position: "relative",
+        cursor: slideMode === "drag" ? "grab" : "col-resize",
+      }}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={mouseLeaveHandler}
+      onMouseEnter={mouseEnterHandler}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      onTouchMove={handleTouchMove}
+    >
+      <AnimatePresence initial={false}>
+        <motion.div
+          className="h-full w-px absolute top-0 m-auto z-30 bg-gradient-to-b from-transparent from-[5%] to-[95%] via-indigo-500 to-transparent"
+          style={{
+            left: `${sliderXPercent}%`,
+            top: "0",
+            zIndex: 40,
+          }}
+          transition={{ duration: 0 }}
+        >
+          <div className="w-36 h-full [mask-image:radial-gradient(100px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-gradient-to-r from-indigo-400 via-transparent to-transparent z-20 opacity-50" />
+          <div className="w-10 h-1/2 [mask-image:radial-gradient(50px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-gradient-to-r from-cyan-400 via-transparent to-transparent z-10 opacity-100" />
+          <div className="w-10 h-3/4 top-1/2 -translate-y-1/2 absolute -right-10 [mask-image:radial-gradient(100px_at_left,white,transparent)]">
+            <MemoizedSparklesCore
+              background="transparent"
+              minSize={0.4}
+              maxSize={1}
+              particleDensity={1200}
+              className="w-full h-full"
+              particleColor="#FFFFFF"
+            />
+          </div>
+          {showHandlebar && (
+            <div className="h-5 w-5 rounded-md top-1/2 -translate-y-1/2 bg-white z-30 -right-2.5 absolute   flex items-center justify-center shadow-[0px_-1px_0px_0px_#FFFFFF40]">
+              <IconDotsVertical className="h-4 w-4 text-black" />
+            </div>
+          )}
+        </motion.div>
+      </AnimatePresence>
+      <div className="overflow-hidden w-full h-full relative z-20 pointer-events-none">
+        <AnimatePresence initial={false}>
+          {firstImage ? (
+            <motion.div
+              className={cn(
+                "absolute inset-0 z-20 rounded-2xl shrink-0 w-full h-full select-none overflow-hidden",
+                firstImageClassName
+              )}
+              style={{
+                clipPath: `inset(0 ${100 - sliderXPercent}% 0 0)`,
+              }}
+              transition={{ duration: 0 }}
+            >
+              <img
+                alt="first image"
+                src={firstImage}
+                className={cn(
+                  "absolute inset-0  z-20 rounded-2xl shrink-0 w-full h-full select-none",
+                  firstImageClassName
+                )}
+                draggable={false}
+              />
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+      </div>
+
+      <AnimatePresence initial={false}>
+        {secondImage ? (
+          <motion.img
+            className={cn(
+              "absolute top-0 left-0 z-[19]  rounded-2xl w-full h-full select-none",
+              secondImageClassname
+            )}
+            alt="second image"
+            src={secondImage}
+            draggable={false}
+          />
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+const MemoizedSparklesCore = React.memo(SparklesCore);

package/packages/ui/src/components/aceternity/container-scroll-animation.tsx

@@ -0,0 +1,95 @@
+"use client";
+import React, { useRef } from "react";
+import { useScroll, useTransform, motion, MotionValue } from "framer-motion";
+
+export const ContainerScroll = ({
+  titleComponent,
+  children,
+}: {
+  titleComponent: string | React.ReactNode;
+  children: React.ReactNode;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+  });
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
+
+  const scaleDimensions = () => {
+    return isMobile ? [0.7, 0.9] : [1.05, 1];
+  };
+
+  const rotate = useTransform(scrollYProgress, [1, 0], [20, 0]);
+  const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());
+  const translate = useTransform(scrollYProgress, [0, 1], [0, -40]);
+
+  return (
+    <div
+      className="h-[30rem] md:h-[40rem] flex items-center justify-center relative p-2 "
+      ref={containerRef}
+    >
+      <div
+        className=" w-full relative"
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <Header translate={translate} titleComponent={titleComponent} />
+        <Card rotate={rotate} translate={translate} scale={scale}>
+          {children}
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export const Header = ({ translate, titleComponent }: any) => {
+  return (
+    <motion.div
+      style={{
+        translateY: translate,
+      }}
+      className="div max-w-5xl mx-auto text-center"
+    >
+      {titleComponent}
+    </motion.div>
+  );
+};
+
+export const Card = ({
+  rotate,
+  scale,
+  children,
+}: {
+  rotate: MotionValue<number>;
+  scale: MotionValue<number>;
+  translate: MotionValue<number>;
+  children: React.ReactNode;
+}) => {
+  return (
+    <motion.div
+      style={{
+        rotateX: rotate,
+        scale,
+        boxShadow:
+          "0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003",
+      }}
+      className="max-w-7xl  mx-auto h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] p-2 md:p-6 bg-[#222222] rounded-[30px] shadow-2xl"
+    >
+      <div className=" h-full w-full  overflow-hidden rounded-2xl bg-gray-100 dark:bg-zinc-900 md:rounded-2xl md:p-4 ">
+        {children}
+      </div>
+    </motion.div>
+  );
+};

package/packages/ui/src/components/aceternity/lamp.tsx

@@ -0,0 +1,104 @@
+"use client";
+import React from "react";
+import { motion } from "motion/react";
+import { cn } from "../../lib/utils";
+
+export function LampDemo() {
+  return (
+    <LampContainer>
+      <motion.h1
+        initial={{ opacity: 0.5, y: 100 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{
+          delay: 0.3,
+          duration: 0.8,
+          ease: "easeInOut",
+        }}
+        className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
+      >
+        Build lamps <br /> the right way
+      </motion.h1>
+    </LampContainer>
+  );
+}
+
+export const LampContainer = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-slate-950 w-full rounded-md z-0",
+        className
+      )}
+    >
+      <div className="relative flex w-full flex-1 scale-y-125 items-center justify-center isolate z-0 ">
+        <motion.div
+          initial={{ opacity: 0.5, width: "15rem" }}
+          whileInView={{ opacity: 1, width: "30rem" }}
+          transition={{
+            delay: 0.3,
+            duration: 0.8,
+            ease: "easeInOut",
+          }}
+          style={{
+            backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
+          }}
+          className="absolute inset-auto right-1/2 h-56 overflow-visible w-[30rem] bg-gradient-conic from-cyan-500 via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top]"
+        >
+          <div className="absolute  w-[100%] left-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
+          <div className="absolute  w-40 h-[100%] left-0 bg-slate-950  bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)]" />
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0.5, width: "15rem" }}
+          whileInView={{ opacity: 1, width: "30rem" }}
+          transition={{
+            delay: 0.3,
+            duration: 0.8,
+            ease: "easeInOut",
+          }}
+          style={{
+            backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
+          }}
+          className="absolute inset-auto left-1/2 h-56 w-[30rem] bg-gradient-conic from-transparent via-transparent to-cyan-500 text-white [--conic-position:from_290deg_at_center_top]"
+        >
+          <div className="absolute  w-40 h-[100%] right-0 bg-slate-950  bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)]" />
+          <div className="absolute  w-[100%] right-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
+        </motion.div>
+        <div className="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-slate-950 blur-2xl"></div>
+        <div className="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md"></div>
+        <div className="absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-cyan-500 opacity-50 blur-3xl"></div>
+        <motion.div
+          initial={{ width: "8rem" }}
+          whileInView={{ width: "16rem" }}
+          transition={{
+            delay: 0.3,
+            duration: 0.8,
+            ease: "easeInOut",
+          }}
+          className="absolute inset-auto z-30 h-36 w-64 -translate-y-[6rem] rounded-full bg-cyan-400 blur-2xl"
+        ></motion.div>
+        <motion.div
+          initial={{ width: "15rem" }}
+          whileInView={{ width: "30rem" }}
+          transition={{
+            delay: 0.3,
+            duration: 0.8,
+            ease: "easeInOut",
+          }}
+          className="absolute inset-auto z-50 h-0.5 w-[30rem] -translate-y-[7rem] bg-cyan-400 "
+        ></motion.div>
+
+        <div className="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-slate-950 "></div>
+      </div>
+
+      <div className="relative z-50 flex -translate-y-80 flex-col items-center px-5">
+        {children}
+      </div>
+    </div>
+  );
+};