genoma-evolution 1.0.0

package/src/components/bits/ElectricBorder.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { useEffect, useRef, useCallback } from "react";
+
+interface ElectricBorderProps {
+  children: React.ReactNode;
+  color?: string;
+  speed?: number;
+  chaos?: number;
+  borderRadius?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  active?: boolean;
+}
+
+export default function ElectricBorder({
+  children,
+  color = "#8b5cf6",
+  speed = 1,
+  chaos = 0.12,
+  borderRadius = 16,
+  className = "",
+  style,
+  active = true,
+}: ElectricBorderProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const animationRef = useRef<number>(0);
+
+  const random = useCallback((x: number) => {
+    return ((Math.sin(x * 12.9898) * 43758.5453) % 1 + 1) % 1;
+  }, []);
+
+  const noise2D = useCallback(
+    (x: number, y: number) => {
+      const i = Math.floor(x);
+      const j = Math.floor(y);
+      const fx = x - i;
+      const fy = y - j;
+      const a = random(i + j * 57);
+      const b = random(i + 1 + j * 57);
+      const c = random(i + (j + 1) * 57);
+      const d = random(i + 1 + (j + 1) * 57);
+      const ux = fx * fx * (3 - 2 * fx);
+      const uy = fy * fy * (3 - 2 * fy);
+      return a * (1 - ux) * (1 - uy) + b * ux * (1 - uy) + c * (1 - ux) * uy + d * ux * uy;
+    },
+    [random]
+  );
+
+  useEffect(() => {
+    if (!active) return;
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let time = 0;
+
+    const resize = () => {
+      const rect = container.getBoundingClientRect();
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = rect.width * dpr;
+      canvas.height = rect.height * dpr;
+      canvas.style.width = `${rect.width}px`;
+      canvas.style.height = `${rect.height}px`;
+      ctx.scale(dpr, dpr);
+    };
+
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(container);
+
+    const hexToRgb = (hex: string) => {
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      return { r, g, b };
+    };
+
+    const rgb = hexToRgb(color);
+
+    const getPerimeterPoint = (t: number, w: number, h: number, r: number) => {
+      const straightW = w - 2 * r;
+      const straightH = h - 2 * r;
+      const cornerArc = (Math.PI * r) / 2;
+      const totalPerimeter = 2 * straightW + 2 * straightH + 4 * cornerArc;
+      const distance = t * totalPerimeter;
+
+      // Top edge
+      if (distance < straightW) return { x: r + distance, y: 0 };
+      // Top-right corner
+      let acc = straightW;
+      if (distance < acc + cornerArc) {
+        const angle = ((distance - acc) / cornerArc) * (Math.PI / 2);
+        return { x: w - r + r * Math.sin(angle), y: r - r * Math.cos(angle) };
+      }
+      // Right edge
+      acc += cornerArc;
+      if (distance < acc + straightH) return { x: w, y: r + (distance - acc) };
+      // Bottom-right corner
+      acc += straightH;
+      if (distance < acc + cornerArc) {
+        const angle = ((distance - acc) / cornerArc) * (Math.PI / 2);
+        return { x: w - r + r * Math.cos(angle), y: h - r + r * Math.sin(angle) };
+      }
+      // Bottom edge
+      acc += cornerArc;
+      if (distance < acc + straightW) return { x: w - r - (distance - acc), y: h };
+      // Bottom-left corner
+      acc += straightW;
+      if (distance < acc + cornerArc) {
+        const angle = ((distance - acc) / cornerArc) * (Math.PI / 2);
+        return { x: r - r * Math.sin(angle), y: h - r + r * Math.cos(angle) };
+      }
+      // Left edge
+      acc += cornerArc;
+      if (distance < acc + straightH) return { x: 0, y: h - r - (distance - acc) };
+      // Top-left corner
+      acc += straightH;
+      const angle = ((distance - acc) / cornerArc) * (Math.PI / 2);
+      return { x: r - r * Math.cos(angle), y: r - r * Math.sin(angle) };
+    };
+
+    const animate = () => {
+      const rect = container.getBoundingClientRect();
+      const w = rect.width;
+      const h = rect.height;
+      ctx.clearRect(0, 0, w, h);
+
+      time += 0.016 * speed;
+
+      // Draw electric border
+      ctx.beginPath();
+      const steps = 200;
+      for (let i = 0; i <= steps; i++) {
+        const t = i / steps;
+        const base = getPerimeterPoint(t, w, h, borderRadius);
+        const noise = (noise2D(t * 8, time * 3) - 0.5) * chaos * 20;
+        const nx = base.x + noise * (base.y < h / 2 ? -1 : 1);
+        const ny = base.y + noise * (base.x < w / 2 ? 1 : -1);
+        if (i === 0) ctx.moveTo(nx, ny);
+        else ctx.lineTo(nx, ny);
+      }
+      ctx.closePath();
+
+      ctx.strokeStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.8)`;
+      ctx.lineWidth = 2;
+      ctx.stroke();
+
+      // Glow
+      ctx.shadowColor = color;
+      ctx.shadowBlur = 15;
+      ctx.strokeStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`;
+      ctx.lineWidth = 4;
+      ctx.stroke();
+      ctx.shadowBlur = 0;
+
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      cancelAnimationFrame(animationRef.current);
+      ro.disconnect();
+    };
+  }, [active, color, speed, chaos, borderRadius, noise2D]);
+
+  return (
+    <div ref={containerRef} className={`relative ${className}`} style={style}>
+      {active && (
+        <canvas
+          ref={canvasRef}
+          className="absolute inset-0 pointer-events-none"
+          style={{ zIndex: 1 }}
+        />
+      )}
+      <div className="relative z-[2]">{children}</div>
+    </div>
+  );
+}

package/src/components/bits/GlitchText.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+export default function GlitchText({
+  children,
+  speed = 1,
+  enableShadows = true,
+  className = "",
+}: {
+  children: string;
+  speed?: number;
+  enableShadows?: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`relative inline-block font-bold ${className}`}
+      data-text={children}
+      style={{
+        animation: `glitch-anim ${speed * 3}s infinite linear alternate-reverse`,
+      }}
+    >
+      <style>{`
+        @keyframes glitch-anim {
+          0% { text-shadow: ${enableShadows ? "-2px 0 red, 2px 0 cyan" : "none"}; }
+          25% { text-shadow: ${enableShadows ? "2px 0 red, -2px 0 cyan" : "none"}; }
+          50% { text-shadow: ${enableShadows ? "-1px 2px red, 1px -2px cyan" : "none"}; }
+          75% { text-shadow: ${enableShadows ? "1px -1px red, -1px 1px cyan" : "none"}; }
+          100% { text-shadow: ${enableShadows ? "0 0 red, 0 0 cyan" : "none"}; }
+        }
+      `}</style>
+      {children}
+    </div>
+  );
+}

package/src/components/bits/ShinyText.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+
+export default function ShinyText({
+  text,
+  disabled = false,
+  speed = 3,
+  className = "",
+  color = "#a1a1aa",
+  shineColor = "#ffffff",
+}: {
+  text: string;
+  disabled?: boolean;
+  speed?: number;
+  className?: string;
+  color?: string;
+  shineColor?: string;
+}) {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (disabled || !ref.current) return;
+    let pos = -100;
+    let raf: number;
+
+    const animate = () => {
+      pos += 0.5;
+      if (pos > 200) pos = -100;
+      if (ref.current) {
+        ref.current.style.backgroundPosition = `${pos}% 0`;
+      }
+      raf = requestAnimationFrame(animate);
+    };
+
+    animate();
+    return () => cancelAnimationFrame(raf);
+  }, [disabled, speed]);
+
+  return (
+    <span
+      ref={ref}
+      className={`inline-block bg-clip-text text-transparent ${className}`}
+      style={{
+        color: disabled ? color : undefined,
+        backgroundImage: disabled
+          ? undefined
+          : `linear-gradient(90deg, ${color} 0%, ${color} 40%, ${shineColor} 50%, ${color} 60%, ${color} 100%)`,
+        backgroundSize: "200% 100%",
+      }}
+    >
+      {text}
+    </span>
+  );
+}

package/src/components/bits/SpotlightCard.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useRef } from "react";
+
+export default function SpotlightCard({
+  children,
+  className = "",
+  spotlightColor = "rgba(139, 92, 246, 0.15)",
+}: {
+  children: React.ReactNode;
+  className?: string;
+  spotlightColor?: string;
+}) {
+  const divRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!divRef.current) return;
+    const rect = divRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    divRef.current.style.setProperty("--mouse-x", `${x}px`);
+    divRef.current.style.setProperty("--mouse-y", `${y}px`);
+    divRef.current.style.setProperty("--spotlight-color", spotlightColor);
+  };
+
+  return (
+    <div
+      ref={divRef}
+      onMouseMove={handleMouseMove}
+      className={`relative overflow-hidden ${className}`}
+      style={{
+        background: `radial-gradient(
+          600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+          var(--spotlight-color, rgba(139,92,246,0.15)),
+          transparent 40%
+        )`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/bits/TextType.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+
+interface TextTypeProps {
+  text: string[];
+  typingSpeed?: number;
+  pauseDuration?: number;
+  deletingSpeed?: number;
+  loop?: boolean;
+  className?: string;
+  showCursor?: boolean;
+  cursorCharacter?: string;
+}
+
+export default function TextType({
+  text: textArray,
+  typingSpeed = 40,
+  pauseDuration = 2000,
+  deletingSpeed = 20,
+  loop = true,
+  className = "",
+  showCursor = true,
+  cursorCharacter = "▊",
+}: TextTypeProps) {
+  const [displayText, setDisplayText] = useState("");
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const currentText = textArray[currentIndex] || "";
+
+  const tick = useCallback(() => {
+    if (isPaused) {
+      timeoutRef.current = setTimeout(() => {
+        setIsPaused(false);
+        setIsDeleting(true);
+      }, pauseDuration);
+      return;
+    }
+
+    if (!isDeleting) {
+      // Typing
+      if (displayText.length < currentText.length) {
+        setDisplayText(currentText.slice(0, displayText.length + 1));
+        timeoutRef.current = setTimeout(tick, typingSpeed);
+      } else {
+        setIsPaused(true);
+        timeoutRef.current = setTimeout(tick, 0);
+      }
+    } else {
+      // Deleting
+      if (displayText.length > 0) {
+        setDisplayText(displayText.slice(0, -1));
+        timeoutRef.current = setTimeout(tick, deletingSpeed);
+      } else {
+        setIsDeleting(false);
+        const next = (currentIndex + 1) % textArray.length;
+        if (next === 0 && !loop) return;
+        setCurrentIndex(next);
+        timeoutRef.current = setTimeout(tick, typingSpeed);
+      }
+    }
+  }, [
+    displayText,
+    currentText,
+    currentIndex,
+    isDeleting,
+    isPaused,
+    textArray,
+    typingSpeed,
+    deletingSpeed,
+    pauseDuration,
+    loop,
+  ]);
+
+  useEffect(() => {
+    timeoutRef.current = setTimeout(tick, typingSpeed);
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [tick, typingSpeed]);
+
+  return (
+    <span className={className}>
+      {displayText}
+      {showCursor && (
+        <span className="inline-block animate-pulse ml-0.5 text-accent-violet">
+          {cursorCharacter}
+        </span>
+      )}
+    </span>
+  );
+}

package/src/components/bits/index.ts

@@ -0,0 +1,9 @@
+export { default as CountUp } from "./CountUp";
+// DecryptedText: available but not imported to avoid SSR issues
+// import { default as DecryptedText } from "./DecryptedText";
+export { default as ElectricBorder } from "./ElectricBorder";
+export { default as GlitchText } from "./GlitchText";
+export { default as SpotlightCard } from "./SpotlightCard";
+export { default as ShinyText } from "./ShinyText";
+export { default as TextType } from "./TextType";
+export { default as ClickSpark } from "./ClickSpark";