gradient-forge 1.0.0

package/components/ui/gsap-animated.tsx

@@ -0,0 +1,436 @@
+"use client";
+
+import { useEffect, useRef, type ReactNode } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+// GSAP Animated Section Component
+interface AnimatedSectionProps {
+  children: ReactNode;
+  className?: string;
+  animation?: "fadeUp" | "fadeIn" | "slideLeft" | "slideRight" | "scale" | "none";
+  delay?: number;
+  duration?: number;
+}
+
+export function AnimatedSection({
+  children,
+  className = "",
+  animation = "fadeUp",
+  delay = 0,
+  duration = 0.6,
+}: AnimatedSectionProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || animation === "none") return;
+
+    const animations: Record<string, gsap.TweenVars> = {
+      fadeUp: { opacity: 0, y: 30 },
+      fadeIn: { opacity: 0 },
+      slideLeft: { opacity: 0, x: -50 },
+      slideRight: { opacity: 0, x: 50 },
+      scale: { opacity: 0, scale: 0.9 },
+    };
+
+    const fromVars = animations[animation];
+
+    gsap.fromTo(
+      element,
+      fromVars,
+      {
+        opacity: 1,
+        y: 0,
+        x: 0,
+        scale: 1,
+        duration,
+        delay,
+        ease: "power3.out",
+        scrollTrigger: {
+          trigger: element,
+          start: "top 85%",
+          toggleActions: "play none none none",
+        },
+      }
+    );
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => {
+        if (trigger.trigger === element) {
+          trigger.kill();
+        }
+      });
+    };
+  }, [animation, delay, duration]);
+
+  return (
+    <div ref={ref} className={className}>
+      {children}
+    </div>
+  );
+}
+
+// Stagger Container with GSAP
+interface StaggerContainerProps {
+  children: ReactNode;
+  className?: string;
+  stagger?: number;
+  start?: string;
+}
+
+export function StaggerContainer({
+  children,
+  className = "",
+  stagger = 0.1,
+  start = "top 80%",
+}: StaggerContainerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const children = container.children;
+    if (children.length === 0) return;
+
+    gsap.fromTo(
+      children,
+      { opacity: 0, y: 20 },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.5,
+        stagger,
+        ease: "power3.out",
+        scrollTrigger: {
+          trigger: container,
+          start,
+          toggleActions: "play none none none",
+        },
+      }
+    );
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => {
+        if (trigger.trigger === container) {
+          trigger.kill();
+        }
+      });
+    };
+  }, [stagger, start]);
+
+  return (
+    <div ref={containerRef} className={className}>
+      {children}
+    </div>
+  );
+}
+
+// Magnetic Button Component
+interface MagneticButtonProps {
+  children: ReactNode;
+  className?: string;
+  strength?: number;
+}
+
+export function MagneticButton({
+  children,
+  className = "",
+  strength = 0.3,
+}: MagneticButtonProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    // Skip on mobile
+    if (window.matchMedia("(pointer: coarse)").matches) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = element.getBoundingClientRect();
+      const x = e.clientX - rect.left - rect.width / 2;
+      const y = e.clientY - rect.top - rect.height / 2;
+
+      gsap.to(element, {
+        x: x * strength,
+        y: y * strength,
+        duration: 0.3,
+        ease: "power2.out",
+      });
+    };
+
+    const handleMouseLeave = () => {
+      gsap.to(element, {
+        x: 0,
+        y: 0,
+        duration: 0.5,
+        ease: "elastic.out(1, 0.3)",
+      });
+    };
+
+    element.addEventListener("mousemove", handleMouseMove);
+    element.addEventListener("mouseleave", handleMouseLeave);
+
+    return () => {
+      element.removeEventListener("mousemove", handleMouseMove);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [strength]);
+
+  return (
+    <div ref={ref} className={className}>
+      {children}
+    </div>
+  );
+}
+
+// Floating Animation Component
+interface FloatingElementProps {
+  children: ReactNode;
+  className?: string;
+  duration?: number;
+  distance?: number;
+  delay?: number;
+}
+
+export function FloatingElement({
+  children,
+  className = "",
+  duration = 3,
+  distance = 10,
+  delay = 0,
+}: FloatingElementProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    gsap.to(element, {
+      y: distance,
+      duration,
+      delay,
+      ease: "power1.inOut",
+      yoyo: true,
+      repeat: -1,
+    });
+  }, [duration, distance, delay]);
+
+  return (
+    <div ref={ref} className={className}>
+      {children}
+    </div>
+  );
+}
+
+// Text Reveal Animation
+interface TextRevealProps {
+  text: string;
+  className?: string;
+  delay?: number;
+  stagger?: number;
+}
+
+export function TextReveal({
+  text,
+  className = "",
+  delay = 0,
+  stagger = 0.03,
+}: TextRevealProps) {
+  const containerRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const chars = container.querySelectorAll(".char");
+
+    gsap.fromTo(
+      chars,
+      { opacity: 0, y: 20 },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.4,
+        stagger,
+        delay,
+        ease: "power3.out",
+      }
+    );
+  }, [delay, stagger, text]);
+
+  return (
+    <span ref={containerRef} className={className}>
+      {text.split("").map((char, i) => (
+        <span
+          key={i}
+          className="char inline-block"
+          style={{ opacity: 0 }}
+        >
+          {char === " " ? "\u00A0" : char}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+// Parallax Container
+interface ParallaxProps {
+  children: ReactNode;
+  className?: string;
+  speed?: number;
+}
+
+export function Parallax({ children, className = "", speed = 0.5 }: ParallaxProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    gsap.to(element, {
+      yPercent: speed * 100,
+      ease: "none",
+      scrollTrigger: {
+        trigger: element,
+        start: "top bottom",
+        end: "bottom top",
+        scrub: true,
+      },
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => {
+        if (trigger.trigger === element) {
+          trigger.kill();
+        }
+      });
+    };
+  }, [speed]);
+
+  return (
+    <div ref={ref} className={className}>
+      {children}
+    </div>
+  );
+}
+
+// Counter Animation
+interface CounterProps {
+  end: number;
+  duration?: number;
+  className?: string;
+  suffix?: string;
+  prefix?: string;
+}
+
+export function Counter({
+  end,
+  duration = 2,
+  className = "",
+  suffix = "",
+  prefix = "",
+}: CounterProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const obj = { value: 0 };
+    gsap.to(obj, {
+      value: end,
+      duration,
+      ease: "power2.out",
+      scrollTrigger: {
+        trigger: element,
+        start: "top 85%",
+        toggleActions: "play none none none",
+      },
+      onUpdate: () => {
+        element.textContent = prefix + Math.round(obj.value) + suffix;
+      },
+    });
+  }, [end, duration, prefix, suffix]);
+
+  return <span ref={ref} className={className}>0</span>;
+}
+
+// Reveal on Scroll
+interface RevealOnScrollProps {
+  children: ReactNode;
+  className?: string;
+  direction?: "up" | "down" | "left" | "right";
+  distance?: number;
+  delay?: number;
+}
+
+export function RevealOnScroll({
+  children,
+  className = "",
+  direction = "up",
+  distance = 30,
+  delay = 0,
+}: RevealOnScrollProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const fromVars: gsap.TweenVars = { opacity: 0 };
+
+    switch (direction) {
+      case "up":
+        fromVars.y = distance;
+        break;
+      case "down":
+        fromVars.y = -distance;
+        break;
+      case "left":
+        fromVars.x = distance;
+        break;
+      case "right":
+        fromVars.x = -distance;
+        break;
+    }
+
+    gsap.fromTo(
+      element,
+      fromVars,
+      {
+        opacity: 1,
+        x: 0,
+        y: 0,
+        duration: 0.6,
+        delay,
+        ease: "power3.out",
+        scrollTrigger: {
+          trigger: element,
+          start: "top 85%",
+          toggleActions: "play none none none",
+        },
+      }
+    );
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => {
+        if (trigger.trigger === element) {
+          trigger.kill();
+        }
+      });
+    };
+  }, [direction, distance, delay]);
+
+  return (
+    <div ref={ref} className={className} style={{ opacity: 0 }}>
+      {children}
+    </div>
+  );
+}

package/components/ui/input.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Input({
+  className,
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      className={cn(
+        "h-11 w-full rounded-2xl border border-border/60 bg-background/40 px-4 text-sm text-foreground shadow-inner shadow-black/5 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/components/ui/select.tsx

@@ -0,0 +1,176 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-react";
+
+interface SelectProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface SelectTriggerProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface SelectValueProps {
+  placeholder?: string;
+}
+
+interface SelectContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface SelectItemProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const SelectContext = React.createContext<{
+  value: string;
+  onValueChange: (value: string) => void;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+} | null>(null);
+
+function useSelect() {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error("Select components must be used within a Select provider");
+  }
+  return context;
+}
+
+export function Select({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  children,
+  className,
+}: SelectProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue || "");
+  const [isOpen, setIsOpen] = React.useState(false);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = React.useCallback(
+    (newValue: string) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+      setIsOpen(false);
+    },
+    [isControlled, onValueChange]
+  );
+
+  return (
+    <SelectContext.Provider
+      value={{ value, onValueChange: handleValueChange, isOpen, setIsOpen }}
+    >
+      <div className={cn("relative", className)}>{children}</div>
+    </SelectContext.Provider>
+  );
+}
+
+export function SelectTrigger({ children, className }: SelectTriggerProps) {
+  const { isOpen, setIsOpen } = useSelect();
+
+  return (
+    <button
+      type="button"
+      role="combobox"
+      aria-expanded={isOpen}
+      onClick={() => setIsOpen(!isOpen)}
+      className={cn(
+        "flex h-10 w-full items-center justify-between rounded-full border border-border/70 bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      {children}
+      <ChevronDown
+        className={cn(
+          "h-4 w-4 opacity-50 transition-transform",
+          isOpen && "rotate-180"
+        )}
+      />
+    </button>
+  );
+}
+
+export function SelectValue({ placeholder }: SelectValueProps) {
+  const { value } = useSelect();
+  const [selectedLabel, setSelectedLabel] = React.useState<string>("");
+
+  React.useEffect(() => {
+    // Find the selected item's label from the DOM
+    const selectedItem = document.querySelector(`[data-select-value="${value}"]`);
+    if (selectedItem) {
+      setSelectedLabel(selectedItem.textContent || "");
+    } else {
+      setSelectedLabel("");
+    }
+  }, [value]);
+
+  return (
+    <span className={cn(!selectedLabel && "text-muted-foreground")}>
+      {selectedLabel || placeholder}
+    </span>
+  );
+}
+
+export function SelectContent({ children, className }: SelectContentProps) {
+  const { isOpen } = useSelect();
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-40"
+        onClick={(e) => {
+          e.stopPropagation();
+          const selectContext = React.useContext(SelectContext);
+          selectContext?.setIsOpen(false);
+        }}
+      />
+      <div
+        className={cn(
+          "absolute z-50 min-w-[8rem] overflow-hidden rounded-2xl border border-border/70 bg-background/95 backdrop-blur-md shadow-lg animate-in fade-in-0 zoom-in-95",
+          "top-full mt-1 left-0 right-0",
+          className
+        )}
+      >
+        <div className="p-1 max-h-[300px] overflow-auto">{children}</div>
+      </div>
+    </>
+  );
+}
+
+export function SelectItem({ value, children, className }: SelectItemProps) {
+  const { value: selectedValue, onValueChange } = useSelect();
+  const isSelected = selectedValue === value;
+
+  return (
+    <button
+      type="button"
+      role="option"
+      aria-selected={isSelected}
+      data-select-value={value}
+      onClick={() => onValueChange(value)}
+      className={cn(
+        "relative flex w-full cursor-pointer select-none items-center rounded-xl py-2.5 px-3 text-sm outline-none transition-colors",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus:bg-accent focus:text-accent-foreground",
+        isSelected && "bg-accent text-accent-foreground",
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}