@m13v/seo-components 0.1.0

package/src/components/NumberTicker.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { motion, useInView, useMotionValue, useSpring } from "framer-motion";
+import { useEffect, useRef } from "react";
+
+interface NumberTickerProps {
+  value: number;
+  /** Number of decimal places */
+  decimals?: number;
+  /** Duration of the count-up animation in seconds */
+  duration?: number;
+  /** Optional prefix (e.g. "$") */
+  prefix?: string;
+  /** Optional suffix (e.g. "%") */
+  suffix?: string;
+  className?: string;
+}
+
+/**
+ * Magic UI style number ticker. Counts up from 0 to the target
+ * value with spring physics when scrolled into view. Smoother
+ * than a plain `useEffect` interval because it uses framer-motion
+ * motion values.
+ */
+export function NumberTicker({
+  value,
+  decimals = 0,
+  duration = 1.6,
+  prefix = "",
+  suffix = "",
+  className = "",
+}: NumberTickerProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true, margin: "-40px" });
+  const motionValue = useMotionValue(0);
+  const springValue = useSpring(motionValue, {
+    duration: duration * 1000,
+    bounce: 0,
+  });
+
+  useEffect(() => {
+    if (inView) motionValue.set(value);
+  }, [inView, value, motionValue]);
+
+  useEffect(() => {
+    const unsub = springValue.on("change", (latest) => {
+      if (ref.current) {
+        ref.current.textContent =
+          prefix +
+          latest.toLocaleString("en-US", {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+          }) +
+          suffix;
+      }
+    });
+    return () => unsub();
+  }, [springValue, decimals, prefix, suffix]);
+
+  return (
+    <motion.span
+      ref={ref}
+      className={`tabular-nums font-bold text-zinc-900 ${className}`}
+    >
+      {prefix}0{suffix}
+    </motion.span>
+  );
+}

package/src/components/OrbitingCircles.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface OrbitingCirclesProps {
+  /** Center element (logo, icon, label) */
+  center: React.ReactNode;
+  /** Items orbiting around the center */
+  items: React.ReactNode[];
+  /** Radius in pixels */
+  radius?: number;
+  /** Duration of one full revolution in seconds */
+  duration?: number;
+  /** Reverse spin direction */
+  reverse?: boolean;
+  className?: string;
+}
+
+/**
+ * Magic UI style orbiting element. A central element with smaller
+ * items circling around it. Useful for "ecosystem" or "integrations"
+ * showcases where the center is the product and orbits are
+ * connected tools.
+ */
+export function OrbitingCircles({
+  center,
+  items,
+  radius = 140,
+  duration = 20,
+  reverse = false,
+  className = "",
+}: OrbitingCirclesProps) {
+  const size = radius * 2 + 80;
+
+  return (
+    <div
+      className={`my-10 relative flex items-center justify-center ${className}`}
+      style={{ width: size, height: size, maxWidth: "100%", margin: "2.5rem auto" }}
+    >
+      {/* Orbit ring */}
+      <div
+        className="absolute rounded-full border border-dashed border-zinc-200"
+        style={{ width: radius * 2, height: radius * 2 }}
+      />
+
+      {/* Center */}
+      <div className="relative z-10 flex items-center justify-center rounded-2xl bg-gradient-to-br from-cyan-500 to-teal-500 text-white font-semibold shadow-lg shadow-teal-500/30"
+        style={{ width: 96, height: 96 }}
+      >
+        {center}
+      </div>
+
+      {/* Orbiting items */}
+      <motion.div
+        className="absolute inset-0"
+        animate={{ rotate: reverse ? -360 : 360 }}
+        transition={{ duration, ease: "linear", repeat: Infinity }}
+      >
+        {items.map((item, i) => {
+          const angle = (i * 360) / items.length;
+          const rad = (angle * Math.PI) / 180;
+          const x = Math.cos(rad) * radius;
+          const y = Math.sin(rad) * radius;
+          return (
+            <motion.div
+              key={i}
+              className="absolute top-1/2 left-1/2 flex items-center justify-center rounded-xl bg-white border border-zinc-200 shadow-sm text-xs font-medium text-zinc-700"
+              style={{
+                width: 64,
+                height: 64,
+                transform: `translate(${x - 32}px, ${y - 32}px)`,
+              }}
+              animate={{ rotate: reverse ? 360 : -360 }}
+              transition={{ duration, ease: "linear", repeat: Infinity }}
+            >
+              {item}
+            </motion.div>
+          );
+        })}
+      </motion.div>
+    </div>
+  );
+}

package/src/components/ParallaxSection.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useRef } from "react";
+import { motion, useScroll, useTransform } from "framer-motion";
+
+interface ParallaxSectionProps {
+  children: React.ReactNode;
+  /** Background element that moves at a different scroll speed */
+  background?: React.ReactNode;
+  /** Parallax intensity: 0 = none, 1 = max. Default 0.3 */
+  intensity?: number;
+  className?: string;
+}
+
+/**
+ * Section with a parallax scrolling effect on the background.
+ * The foreground content scrolls normally while the background
+ * moves at a slower rate, creating depth.
+ */
+export function ParallaxSection({
+  children,
+  background,
+  intensity = 0.3,
+  className = "",
+}: ParallaxSectionProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start end", "end start"],
+  });
+
+  const y = useTransform(scrollYProgress, [0, 1], [
+    -80 * intensity,
+    80 * intensity,
+  ]);
+  const opacity = useTransform(scrollYProgress, [0, 0.2, 0.8, 1], [0, 1, 1, 0]);
+
+  return (
+    <div ref={ref} className={`relative overflow-hidden my-10 ${className}`}>
+      {/* Parallax background */}
+      {background && (
+        <motion.div
+          style={{ y }}
+          className="absolute inset-0 pointer-events-none"
+        >
+          {background}
+        </motion.div>
+      )}
+
+      {/* Foreground content */}
+      <motion.div style={{ opacity }} className="relative z-10">
+        {children}
+      </motion.div>
+    </div>
+  );
+}

package/src/components/Particles.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+/**
+ * Particles: renders an interactive canvas of floating particles that
+ * subtly follow the mouse cursor. Great for ambient hero backgrounds.
+ * Default color is teal (#14b8a6). Fully self-contained, canvas-based.
+ *
+ * @example
+ * <Particles className="absolute inset-0" quantity={80} />
+ */
+
+interface MousePosition {
+  x: number;
+  y: number;
+}
+
+function useMousePosition(): MousePosition {
+  const [mousePosition, setMousePosition] = useState<MousePosition>({
+    x: 0,
+    y: 0,
+  });
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      setMousePosition({ x: event.clientX, y: event.clientY });
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  return mousePosition;
+}
+
+function hexToRgb(hex: string): number[] {
+  hex = hex.replace("#", "");
+  const hexInt = parseInt(hex, 16);
+  const red = (hexInt >> 16) & 255;
+  const green = (hexInt >> 8) & 255;
+  const blue = hexInt & 255;
+  return [red, green, blue];
+}
+
+interface ParticlesProps {
+  className?: string;
+  quantity?: number;
+  staticity?: number;
+  ease?: number;
+  size?: number;
+  refresh?: boolean;
+  /** Hex color for particles. Defaults to teal (#14b8a6). */
+  color?: string;
+  vx?: number;
+  vy?: number;
+}
+
+type Circle = {
+  x: number;
+  y: number;
+  translateX: number;
+  translateY: number;
+  size: number;
+  alpha: number;
+  targetAlpha: number;
+  dx: number;
+  dy: number;
+  magnetism: number;
+};
+
+export function Particles({
+  className = "",
+  quantity = 100,
+  staticity = 50,
+  ease = 50,
+  size = 0.4,
+  refresh = false,
+  color = "#14b8a6",
+  vx = 0,
+  vy = 0,
+}: ParticlesProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const canvasContainerRef = useRef<HTMLDivElement>(null);
+  const context = useRef<CanvasRenderingContext2D | null>(null);
+  const circles = useRef<Circle[]>([]);
+  const mousePosition = useMousePosition();
+  const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+
+  const rgb = hexToRgb(color);
+
+  const circleParams = (): Circle => {
+    const x = Math.floor(Math.random() * canvasSize.current.w);
+    const y = Math.floor(Math.random() * canvasSize.current.h);
+    const pSize = Math.floor(Math.random() * 2) + size;
+    const alpha = 0;
+    const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
+    const dx = (Math.random() - 0.5) * 0.1;
+    const dy = (Math.random() - 0.5) * 0.1;
+    const magnetism = 0.1 + Math.random() * 4;
+    return {
+      x,
+      y,
+      translateX: 0,
+      translateY: 0,
+      size: pSize,
+      alpha,
+      targetAlpha,
+      dx,
+      dy,
+      magnetism,
+    };
+  };
+
+  const drawCircle = (circle: Circle, update = false) => {
+    if (context.current) {
+      const { x, y, translateX, translateY, size: s, alpha } = circle;
+      context.current.translate(translateX, translateY);
+      context.current.beginPath();
+      context.current.arc(x, y, s, 0, 2 * Math.PI);
+      context.current.fillStyle = `rgba(${rgb.join(", ")}, ${alpha})`;
+      context.current.fill();
+      context.current.setTransform(dpr, 0, 0, dpr, 0, 0);
+      if (!update) {
+        circles.current.push(circle);
+      }
+    }
+  };
+
+  const clearContext = () => {
+    if (context.current) {
+      context.current.clearRect(
+        0,
+        0,
+        canvasSize.current.w,
+        canvasSize.current.h
+      );
+    }
+  };
+
+  const resizeCanvas = () => {
+    if (canvasContainerRef.current && canvasRef.current && context.current) {
+      circles.current.length = 0;
+      canvasSize.current.w = canvasContainerRef.current.offsetWidth;
+      canvasSize.current.h = canvasContainerRef.current.offsetHeight;
+      canvasRef.current.width = canvasSize.current.w * dpr;
+      canvasRef.current.height = canvasSize.current.h * dpr;
+      canvasRef.current.style.width = `${canvasSize.current.w}px`;
+      canvasRef.current.style.height = `${canvasSize.current.h}px`;
+      context.current.scale(dpr, dpr);
+    }
+  };
+
+  const drawParticles = () => {
+    clearContext();
+    for (let i = 0; i < quantity; i++) {
+      const circle = circleParams();
+      drawCircle(circle);
+    }
+  };
+
+  const remapValue = (
+    value: number,
+    start1: number,
+    end1: number,
+    start2: number,
+    end2: number
+  ): number => {
+    const remapped =
+      ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
+    return remapped > 0 ? remapped : 0;
+  };
+
+  const initCanvas = () => {
+    resizeCanvas();
+    drawParticles();
+  };
+
+  const onMouseMove = () => {
+    if (canvasRef.current) {
+      const rect = canvasRef.current.getBoundingClientRect();
+      const { w, h } = canvasSize.current;
+      const x = mousePosition.x - rect.left - w / 2;
+      const y = mousePosition.y - rect.top - h / 2;
+      const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;
+      if (inside) {
+        mouse.current.x = x;
+        mouse.current.y = y;
+      }
+    }
+  };
+
+  const animate = () => {
+    clearContext();
+    circles.current.forEach((circle: Circle, i: number) => {
+      const edge = [
+        circle.x + circle.translateX - circle.size,
+        canvasSize.current.w - circle.x - circle.translateX - circle.size,
+        circle.y + circle.translateY - circle.size,
+        canvasSize.current.h - circle.y - circle.translateY - circle.size,
+      ];
+      const closestEdge = edge.reduce((a, b) => Math.min(a, b));
+      const remapClosestEdge = parseFloat(
+        remapValue(closestEdge, 0, 20, 0, 1).toFixed(2)
+      );
+      if (remapClosestEdge > 1) {
+        circle.alpha += 0.02;
+        if (circle.alpha > circle.targetAlpha) {
+          circle.alpha = circle.targetAlpha;
+        }
+      } else {
+        circle.alpha = circle.targetAlpha * remapClosestEdge;
+      }
+      circle.x += circle.dx + vx;
+      circle.y += circle.dy + vy;
+      circle.translateX +=
+        (mouse.current.x / (staticity / circle.magnetism) -
+          circle.translateX) /
+        ease;
+      circle.translateY +=
+        (mouse.current.y / (staticity / circle.magnetism) -
+          circle.translateY) /
+        ease;
+
+      drawCircle(circle, true);
+
+      if (
+        circle.x < -circle.size ||
+        circle.x > canvasSize.current.w + circle.size ||
+        circle.y < -circle.size ||
+        circle.y > canvasSize.current.h + circle.size
+      ) {
+        circles.current.splice(i, 1);
+        const newCircle = circleParams();
+        drawCircle(newCircle);
+      }
+    });
+    window.requestAnimationFrame(animate);
+  };
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      context.current = canvasRef.current.getContext("2d");
+    }
+    initCanvas();
+    animate();
+    window.addEventListener("resize", initCanvas);
+    return () => {
+      window.removeEventListener("resize", initCanvas);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [color]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => { onMouseMove(); }, [mousePosition.x, mousePosition.y]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => { initCanvas(); }, [refresh]);
+
+  return (
+    <div className={className} ref={canvasContainerRef} aria-hidden="true">
+      <canvas ref={canvasRef} className="h-full w-full" />
+    </div>
+  );
+}

package/src/components/ProofBand.tsx

@@ -0,0 +1,66 @@
+interface ProofBandProps {
+  rating: number;
+  ratingCount: string;
+  highlights?: string[];
+  className?: string;
+}
+
+export function ProofBand({
+  rating,
+  ratingCount,
+  highlights = [],
+  className = "",
+}: ProofBandProps) {
+  const fullStars = Math.floor(rating);
+  const hasHalf = rating - fullStars >= 0.3;
+
+  return (
+    <div className={`text-sm text-zinc-500 mb-8 ${className}`}>
+      {/* Stars + rating on its own line */}
+      <div className="flex items-center gap-2 mb-2">
+        <div className="flex items-center gap-0.5" aria-label={`${rating} out of 5`}>
+          {Array.from({ length: 5 }, (_, i) => (
+            <svg
+              key={i}
+              className={`w-4 h-4 ${
+                i < fullStars
+                  ? "text-teal-500"
+                  : i === fullStars && hasHalf
+                    ? "text-teal-300"
+                    : "text-zinc-200"
+              }`}
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              aria-hidden="true"
+            >
+              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.37 2.448a1 1 0 00-.363 1.118l1.287 3.957c.3.922-.755 1.688-1.54 1.118l-3.37-2.448a1 1 0 00-1.175 0l-3.37 2.448c-.784.57-1.838-.196-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.05 9.384c-.783-.57-.38-1.81.588-1.81h4.162a1 1 0 00.95-.69l1.286-3.957z" />
+            </svg>
+          ))}
+        </div>
+        <span className="text-zinc-700 font-medium">{rating.toFixed(1)}</span>
+        <span className="text-zinc-400">from {ratingCount}</span>
+      </div>
+
+      {/* Highlights as a clean vertical list */}
+      {highlights.length > 0 && (
+        <div className="flex flex-col gap-1">
+          {highlights.map((h, i) => (
+            <div key={i} className="flex items-center gap-2">
+              <svg
+                className="w-3.5 h-3.5 text-teal-500 flex-shrink-0"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2.5}
+                aria-hidden="true"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              <span className="text-zinc-600">{h}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ProofBanner.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface ProofBannerProps {
+  quote: string;
+  source?: string;
+  metric: string;
+}
+
+export function ProofBanner({ quote, source, metric }: ProofBannerProps) {
+  return (
+    <motion.div
+      className="my-8 p-4 rounded-xl border border-zinc-200 bg-white flex items-start gap-4"
+      initial={{ opacity: 0, x: -16 }}
+      whileInView={{ opacity: 1, x: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <div className="shrink-0 text-center">
+        <span className="text-2xl font-bold text-teal-600">{metric}</span>
+      </div>
+      <div>
+        <p className="text-sm text-subtle-text italic">
+          &ldquo;{quote}&rdquo;
+        </p>
+        {source ? <p className="text-xs text-zinc-500 mt-1">{source}</p> : null}
+      </div>
+    </motion.div>
+  );
+}