@arolariu/components 0.0.36 → 0.0.38

package/src/components/ui/fireworks-background.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const rand = (min: number, max: number): number =>
+  Math.random() * (max - min) + min;
+const randInt = (min: number, max: number): number =>
+  Math.floor(Math.random() * (max - min) + min);
+const randColor = (): string => `hsl(${randInt(0, 360)}, 100%, 50%)`;
+
+interface ParticleType {
+  x: number;
+  y: number;
+  color: string;
+  speed: number;
+  direction: number;
+  vx: number;
+  vy: number;
+  gravity: number;
+  friction: number;
+  alpha: number;
+  decay: number;
+  size: number;
+  update: () => void;
+  draw: (ctx: CanvasRenderingContext2D) => void;
+  isAlive: () => boolean;
+}
+
+const createParticle = (
+  x: number,
+  y: number,
+  color: string,
+  speed: number,
+  direction: number,
+  gravity: number,
+  friction: number,
+  size: number
+): ParticleType => {
+  const vx = Math.cos(direction) * speed;
+  const vy = Math.sin(direction) * speed;
+  const alpha = 1;
+  const decay = rand(0.005, 0.02);
+
+  return {
+    x,
+    y,
+    color,
+    speed,
+    direction,
+    vx,
+    vy,
+    gravity,
+    friction,
+    alpha,
+    decay,
+    size,
+    update() {
+      this.vx *= this.friction;
+      this.vy *= this.friction;
+      this.vy += this.gravity;
+      this.x += this.vx;
+      this.y += this.vy;
+      this.alpha -= this.decay;
+    },
+    draw(ctx: CanvasRenderingContext2D) {
+      ctx.save();
+      ctx.globalAlpha = this.alpha;
+      ctx.beginPath();
+      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+      ctx.fillStyle = this.color;
+      ctx.fill();
+      ctx.restore();
+    },
+    isAlive() {
+      return this.alpha > 0;
+    },
+  };
+};
+
+interface FireworkType {
+  x: number;
+  y: number;
+  targetY: number;
+  color: string;
+  speed: number;
+  size: number;
+  angle: number;
+  vx: number;
+  vy: number;
+  trail: { x: number; y: number }[];
+  trailLength: number;
+  exploded: boolean;
+  update: () => boolean;
+  explode: () => void;
+  draw: (ctx: CanvasRenderingContext2D) => void;
+}
+
+const createFirework = (
+  x: number,
+  y: number,
+  targetY: number,
+  color: string,
+  speed: number,
+  size: number,
+  particleSpeed: { min: number; max: number } | number,
+  particleSize: { min: number; max: number } | number,
+  onExplode: (particles: ParticleType[]) => void
+): FireworkType => {
+  const angle = -Math.PI / 2 + rand(-0.3, 0.3);
+  const vx = Math.cos(angle) * speed;
+  const vy = Math.sin(angle) * speed;
+  const trail: { x: number; y: number }[] = [];
+  const trailLength = randInt(10, 25);
+
+  return {
+    x,
+    y,
+    targetY,
+    color,
+    speed,
+    size,
+    angle,
+    vx,
+    vy,
+    trail,
+    trailLength,
+    exploded: false,
+    update() {
+      this.trail.push({ x: this.x, y: this.y });
+      if (this.trail.length > this.trailLength) {
+        this.trail.shift();
+      }
+      this.x += this.vx;
+      this.y += this.vy;
+      this.vy += 0.02;
+      if (this.vy >= 0 || this.y <= this.targetY) {
+        this.explode();
+        return false;
+      }
+      return true;
+    },
+    explode() {
+      const numParticles = randInt(50, 150);
+      const particles: ParticleType[] = [];
+      for (let i = 0; i < numParticles; i++) {
+        const particleAngle = rand(0, Math.PI * 2);
+        const localParticleSpeed = getValueByRange(particleSpeed);
+        const localParticleSize = getValueByRange(particleSize);
+        particles.push(
+          createParticle(
+            this.x,
+            this.y,
+            this.color,
+            localParticleSpeed,
+            particleAngle,
+            0.05,
+            0.98,
+            localParticleSize
+          )
+        );
+      }
+      onExplode(particles);
+    },
+    draw(ctx: CanvasRenderingContext2D) {
+      ctx.save();
+      ctx.beginPath();
+      if (this.trail.length > 1) {
+        ctx.moveTo(this.trail[0].x, this.trail[0].y);
+        for (const point of this.trail) {
+          ctx.lineTo(point.x, point.y);
+        }
+      } else {
+        ctx.moveTo(this.x, this.y);
+        ctx.lineTo(this.x, this.y);
+      }
+      ctx.strokeStyle = this.color;
+      ctx.lineWidth = this.size;
+      ctx.lineCap = "round";
+      ctx.stroke();
+      ctx.restore();
+    },
+  };
+};
+
+const getValueByRange = (
+  range: { min: number; max: number } | number
+): number => {
+  if (typeof range === "number") {
+    return range;
+  }
+  return rand(range.min, range.max);
+};
+
+const getColor = (color: string | string[] | undefined): string => {
+  if (Array.isArray(color)) {
+    return color[randInt(0, color.length)];
+  }
+  return color ?? randColor();
+};
+
+interface FireworksBackgroundProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+  canvasProps?: React.HTMLAttributes<HTMLCanvasElement>;
+  population?: number;
+  color?: string | string[];
+  fireworkSpeed?: { min: number; max: number } | number;
+  fireworkSize?: { min: number; max: number } | number;
+  particleSpeed?: { min: number; max: number } | number;
+  particleSize?: { min: number; max: number } | number;
+}
+
+const FireworksBackground = React.forwardRef<
+  HTMLDivElement,
+  FireworksBackgroundProps
+>(
+  (
+    {
+      className,
+      canvasProps,
+      population = 1,
+      color,
+      fireworkSpeed = { min: 4, max: 8 },
+      fireworkSize = { min: 2, max: 5 },
+      particleSpeed = { min: 2, max: 7 },
+      particleSize = { min: 1, max: 5 },
+      ...props
+    },
+    ref
+  ) => {
+    const canvasRef = React.useRef<HTMLCanvasElement>(null);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    React.useImperativeHandle(
+      ref,
+      () => containerRef.current as HTMLDivElement
+    );
+
+    React.useEffect(() => {
+      const canvas = canvasRef.current;
+      const container = containerRef.current;
+      if (!canvas || !container) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+
+      let maxX = window.innerWidth;
+      let ratio = container.offsetHeight / container.offsetWidth;
+      let maxY = maxX * ratio;
+      canvas.width = maxX;
+      canvas.height = maxY;
+
+      const setCanvasSize = () => {
+        maxX = window.innerWidth;
+        ratio = container.offsetHeight / container.offsetWidth;
+        maxY = maxX * ratio;
+        canvas.width = maxX;
+        canvas.height = maxY;
+      };
+      window.addEventListener("resize", setCanvasSize);
+
+      const explosions: ParticleType[] = [];
+      const fireworks: FireworkType[] = [];
+
+      const handleExplosion = (particles: ParticleType[]) => {
+        explosions.push(...particles);
+      };
+
+      const launchFirework = () => {
+        const x = rand(maxX * 0.1, maxX * 0.9);
+        const y = maxY;
+        const targetY = rand(maxY * 0.1, maxY * 0.4);
+        const fireworkColor = getColor(color);
+        const speed = getValueByRange(fireworkSpeed);
+        const size = getValueByRange(fireworkSize);
+        fireworks.push(
+          createFirework(
+            x,
+            y,
+            targetY,
+            fireworkColor,
+            speed,
+            size,
+            particleSpeed,
+            particleSize,
+            handleExplosion
+          )
+        );
+        const timeout = rand(300, 800) / population;
+        setTimeout(launchFirework, timeout);
+      };
+
+      launchFirework();
+
+      let animationFrameId: number;
+      const animate = () => {
+        ctx.clearRect(0, 0, maxX, maxY);
+
+        for (let i = fireworks.length - 1; i >= 0; i--) {
+          const firework = fireworks[i];
+          if (!firework.update()) {
+            fireworks.splice(i, 1);
+          } else {
+            firework.draw(ctx);
+          }
+        }
+
+        for (let i = explosions.length - 1; i >= 0; i--) {
+          const particle = explosions[i];
+          particle.update();
+          if (particle.isAlive()) {
+            particle.draw(ctx);
+          } else {
+            explosions.splice(i, 1);
+          }
+        }
+
+        animationFrameId = requestAnimationFrame(animate);
+      };
+
+      animate();
+
+      const handleClick = (event: MouseEvent) => {
+        const x = event.clientX;
+        const y = maxY;
+        const targetY = event.clientY;
+        const fireworkColor = getColor(color);
+        const speed = getValueByRange(fireworkSpeed);
+        const size = getValueByRange(fireworkSize);
+        fireworks.push(
+          createFirework(
+            x,
+            y,
+            targetY,
+            fireworkColor,
+            speed,
+            size,
+            particleSpeed,
+            particleSize,
+            handleExplosion
+          )
+        );
+      };
+
+      container.addEventListener("click", handleClick);
+
+      return () => {
+        window.removeEventListener("resize", setCanvasSize);
+        container.removeEventListener("click", handleClick);
+        cancelAnimationFrame(animationFrameId);
+      };
+    }, [
+      population,
+      color,
+      fireworkSpeed,
+      fireworkSize,
+      particleSpeed,
+      particleSize,
+    ]);
+
+    return (
+      <div
+        ref={containerRef}
+        className={cn("relative size-full overflow-hidden", className)}
+        {...props}
+      >
+        <canvas
+          {...canvasProps}
+          ref={canvasRef}
+          className={cn("absolute inset-0 size-full", canvasProps?.className)}
+        />
+      </div>
+    );
+  }
+);
+
+FireworksBackground.displayName = "FireworksBackground";
+
+export { FireworksBackground, type FireworksBackgroundProps };

package/src/components/ui/flip-button.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import * as React from "react";
+import {
+  type HTMLMotionProps,
+  type Transition,
+  type Variant,
+  motion,
+} from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+type FlipDirection = "top" | "bottom" | "left" | "righ";
+
+interface FlipButtonProps extends HTMLMotionProps<"button"> {
+  frontText: string;
+  backText: string;
+  transition?: Transition;
+  frontClassName?: string;
+  backClassName?: string;
+  from?: FlipDirection;
+}
+
+const defaultSpanClassName =
+  "absolute inset-0 flex items-center justify-center rounded-lg";
+
+const FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(
+  (
+    {
+      frontText,
+      backText,
+      transition = { type: "spring", stiffness: 280, damping: 20 },
+      className,
+      frontClassName,
+      backClassName,
+      from = "top",
+      ...props
+    },
+    ref
+  ) => {
+    const isVertical = from === "top" || from === "bottom";
+    const rotateAxis = isVertical ? "rotateX" : "rotateY";
+
+    const frontOffset = from === "top" || from === "left" ? "50%" : "-50%";
+    const backOffset = from === "top" || from === "left" ? "-50%" : "50%";
+
+    const buildVariant = (
+      opacity: number,
+      rotation: number,
+      offset: string | null = null
+    ): Variant => ({
+      opacity,
+      [rotateAxis]: rotation,
+      ...(isVertical && offset !== null ? { y: offset } : {}),
+      ...(!isVertical && offset !== null ? { x: offset } : {}),
+    });
+
+    const frontVariants = {
+      initial: buildVariant(1, 0, "0%"),
+      hover: buildVariant(0, 90, frontOffset),
+    };
+
+    const backVariants = {
+      initial: buildVariant(0, 90, backOffset),
+      hover: buildVariant(1, 0, "0%"),
+    };
+
+    return (
+      <motion.button
+        ref={ref}
+        initial="initial"
+        whileHover="hover"
+        whileTap={{ scale: 0.95 }}
+        className={cn(
+          "relative inline-block h-10 px-4 py-2 text-sm font-medium cursor-pointer perspective-[1000px] focus:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <motion.span
+          variants={frontVariants}
+          transition={transition}
+          className={cn(
+            defaultSpanClassName,
+            "bg-muted text-black dark:text-white",
+            frontClassName
+          )}
+        >
+          {frontText}
+        </motion.span>
+        <motion.span
+          variants={backVariants}
+          transition={transition}
+          className={cn(
+            defaultSpanClassName,
+            "bg-primary text-primary-foreground",
+            backClassName
+          )}
+        >
+          {backText}
+        </motion.span>
+        <span className="invisible">{frontText}</span>
+      </motion.button>
+    );
+  }
+);
+
+FlipButton.displayName = "FlipButton";
+
+export { FlipButton, type FlipButtonProps, type FlipDirection };

package/src/components/ui/gradient-background.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as React from "react";
+import { HTMLMotionProps, motion, type Transition } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+interface GradientBackgroundProps extends HTMLMotionProps<"div"> {
+  transition?: Transition;
+}
+
+const GradientBackground = React.forwardRef<
+  HTMLDivElement,
+  GradientBackgroundProps
+>(
+  (
+    {
+      className,
+      transition = { duration: 15, ease: "easeInOut", repeat: Infinity },
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <motion.div
+        ref={ref}
+        className={cn(
+          "size-full bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 bg-[length:400%_400%]",
+          className
+        )}
+        animate={{
+          backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
+        }}
+        transition={transition}
+        {...props}
+      />
+    );
+  }
+);
+
+GradientBackground.displayName = "GradientBackground";
+
+export { GradientBackground, type GradientBackgroundProps };

package/src/components/ui/gradient-text.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import * as React from "react";
+import { motion, type Transition } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+interface GradientTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+  text: string;
+  gradient?: string;
+  neon?: boolean;
+  transition?: Transition;
+}
+
+const GradientText = React.forwardRef<HTMLSpanElement, GradientTextProps>(
+  (
+    {
+      text,
+      className,
+      gradient = "linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)",
+      neon = false,
+      transition = { duration: 50, repeat: Infinity, ease: "linear" },
+      ...props
+    },
+    ref
+  ) => {
+    const baseStyle: React.CSSProperties = {
+      backgroundImage: gradient,
+    };
+
+    return (
+      <span
+        ref={ref}
+        className={cn("relative inline-block", className)}
+        {...props}
+      >
+        <motion.span
+          className="m-0 text-transparent bg-clip-text bg-[length:700%_100%] bg-[position:0%_0%]"
+          style={baseStyle}
+          initial={{ backgroundPosition: "0% 0%" }}
+          animate={{ backgroundPosition: "500% 100%" }}
+          transition={transition}
+        >
+          {text}
+        </motion.span>
+
+        {neon && (
+          <motion.span
+            className="m-0 absolute top-0 left-0 text-transparent bg-clip-text blur-[8px] mix-blend-plus-lighter bg-[length:700%_100%] bg-[position:0%_0%]"
+            style={baseStyle}
+            initial={{ backgroundPosition: "0% 0%" }}
+            animate={{ backgroundPosition: "500% 100%" }}
+            transition={transition}
+          >
+            {text}
+          </motion.span>
+        )}
+      </span>
+    );
+  }
+);
+
+GradientText.displayName = "GradientText";
+
+export { GradientText, type GradientTextProps };

package/src/components/ui/highlight-text.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import * as React from "react";
+import {
+  motion,
+  useInView,
+  type HTMLMotionProps,
+  type Transition,
+  type UseInViewOptions,
+} from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+interface HighlightTextProps extends HTMLMotionProps<"span"> {
+  text: string;
+  inView?: boolean;
+  inViewMargin?: UseInViewOptions["margin"];
+  inViewOnce?: boolean;
+  transition?: Transition;
+}
+
+const animation = { backgroundSize: "100% 100%" };
+
+const HighlightText = React.forwardRef<HTMLSpanElement, HighlightTextProps>(
+  (
+    {
+      text,
+      className,
+      inView = false,
+      inViewMargin = "0px",
+      transition = { duration: 2, ease: "easeInOut" },
+      ...props
+    },
+    ref
+  ) => {
+    const localRef = React.useRef<HTMLSpanElement>(null);
+    React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);
+
+    const inViewResult = useInView(localRef, {
+      once: true,
+      margin: inViewMargin,
+    });
+    const isInView = !inView || inViewResult;
+
+    return (
+      <motion.span
+        ref={localRef}
+        initial={{
+          backgroundSize: "0% 100%",
+        }}
+        animate={isInView ? animation : undefined}
+        transition={transition}
+        style={{
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "left center",
+          display: "inline",
+        }}
+        className={cn(
+          `relative inline-block px-2 py-1 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-500 dark:to-purple-500`,
+          className
+        )}
+        {...props}
+      >
+        {text}
+      </motion.span>
+    );
+  }
+);
+HighlightText.displayName = "HighlightText";
+
+export { HighlightText, type HighlightTextProps };