@m13v/seo-components 0.1.0

package/src/components/GlowCard.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { motion } from "framer-motion";
+
+interface GlowCardProps {
+  children: React.ReactNode;
+  className?: string;
+  glowColor?: string;
+}
+
+/**
+ * Card with a mouse-tracking glow effect (like Linear/Stripe).
+ * The glow follows the cursor position on hover.
+ */
+export function GlowCard({
+  children,
+  className = "",
+  glowColor = "rgba(20, 184, 166, 0.15)",
+}: GlowCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [isHovered, setIsHovered] = useState(false);
+
+  function handleMouseMove(e: React.MouseEvent) {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  }
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 16 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-40px" }}
+      transition={{ duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className={`relative rounded-2xl border border-zinc-200 bg-white overflow-hidden transition-shadow duration-300 ${
+        isHovered ? "shadow-lg border-teal-200" : ""
+      } ${className}`}
+    >
+      {/* Glow overlay */}
+      <div
+        className="pointer-events-none absolute inset-0 transition-opacity duration-300"
+        style={{
+          opacity: isHovered ? 1 : 0,
+          background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, ${glowColor}, transparent 60%)`,
+        }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10">{children}</div>
+    </motion.div>
+  );
+}

package/src/components/GradientText.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface GradientTextProps {
+  children: React.ReactNode;
+  /** "teal" (default) uses cyan → teal brand gradient. "rainbow" uses a wider cyan/teal/emerald spread. */
+  variant?: "teal" | "rainbow";
+  /** Animate the gradient sliding horizontally */
+  animate?: boolean;
+  className?: string;
+}
+
+/**
+ * Gradient text treatment for hero headings or standout words.
+ * Stays on-brand (teal/cyan, never violet). Optional animated
+ * background-position shift creates a subtle moving gradient.
+ */
+export function GradientText({
+  children,
+  variant = "teal",
+  animate = true,
+  className = "",
+}: GradientTextProps) {
+  const gradient =
+    variant === "rainbow"
+      ? "linear-gradient(90deg, #06b6d4, #14b8a6, #10b981, #14b8a6, #06b6d4)"
+      : "linear-gradient(90deg, #06b6d4, #14b8a6, #0d9488, #14b8a6, #06b6d4)";
+
+  return (
+    <motion.span
+      className={`inline-block bg-clip-text text-transparent ${className}`}
+      style={{
+        backgroundImage: gradient,
+        backgroundSize: "200% 100%",
+      }}
+      animate={animate ? { backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"] } : undefined}
+      transition={animate ? { duration: 6, ease: "linear", repeat: Infinity } : undefined}
+    >
+      {children}
+    </motion.span>
+  );
+}

package/src/components/InlineCta.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface InlineCtaProps {
+  heading: string;
+  body: string;
+  linkText?: string;
+  href?: string;
+}
+
+export function InlineCta({
+  heading,
+  body,
+  linkText = "Get Started",
+  href = "#",
+}: InlineCtaProps) {
+  return (
+    <motion.div
+      className="my-12 p-6 rounded-2xl border border-accent/20 bg-accent-surface"
+      initial={{ opacity: 0, y: 16 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <p className="text-sm font-semibold text-teal-600 mb-2">
+        {heading}
+      </p>
+      <p className="text-sm text-zinc-500 mb-4">
+        {body}
+      </p>
+      <a
+        href={href}
+        className="inline-flex items-center gap-2 text-sm font-medium text-teal-600 hover:text-accent-dim transition-colors"
+        onClick={() => {
+          const w = typeof window !== "undefined" ? (window as unknown as { posthog?: { capture: (e: string, p?: Record<string, unknown>) => void } }) : undefined;
+          w?.posthog?.capture("cta_clicked", {
+            component: "InlineCta",
+            heading,
+            label: linkText,
+            destination: href,
+            page: typeof window !== "undefined" ? window.location.pathname : undefined,
+          });
+        }}
+      >
+        {linkText} <span>&rarr;</span>
+      </a>
+    </motion.div>
+  );
+}

package/src/components/InlineTestimonial.tsx

@@ -0,0 +1,53 @@
+interface InlineTestimonialProps {
+  quote: string;
+  name: string;
+  role?: string;
+  stars?: 1 | 2 | 3 | 4 | 5;
+  className?: string;
+}
+
+function Stars({ count }: { count: number }) {
+  return (
+    <div className="flex items-center gap-0.5" aria-label={`${count} out of 5 stars`}>
+      {Array.from({ length: 5 }, (_, i) => (
+        <svg
+          key={i}
+          className={`w-4 h-4 ${i < count ? "text-teal-600" : "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>
+  );
+}
+
+export function InlineTestimonial({
+  quote,
+  name,
+  role,
+  stars = 5,
+  className = "",
+}: InlineTestimonialProps) {
+  return (
+    <figure
+      className={`p-6 sm:p-8 rounded-2xl bg-zinc-50 border border-zinc-200 ${className}`}
+    >
+      <Stars count={stars} />
+      <blockquote className="mt-4 text-lg sm:text-xl leading-relaxed text-zinc-800">
+        &ldquo;{quote}&rdquo;
+      </blockquote>
+      <figcaption className="mt-5 flex items-center gap-3">
+        <div className="w-9 h-9 rounded-full bg-gradient-to-br from-teal-500/40 to-teal-500/10 flex items-center justify-center text-sm font-semibold text-white">
+          {name.charAt(0)}
+        </div>
+        <div>
+          <div className="text-sm font-medium text-zinc-900">{name}</div>
+          {role && <div className="text-xs text-zinc-500">{role}</div>}
+        </div>
+      </figcaption>
+    </figure>
+  );
+}

package/src/components/LottiePlayer.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+
+const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
+
+interface LottiePlayerProps {
+  /** Lottie JSON data — inline or via import */
+  animationData?: unknown;
+  /** Path to a Lottie JSON file. Will be fetched at runtime. */
+  src?: string;
+  loop?: boolean;
+  autoplay?: boolean;
+  className?: string;
+  height?: number | string;
+  width?: number | string;
+}
+
+/**
+ * Lottie animation player. Pass either animationData (JSON object)
+ * or src (URL/path). Loads client-side only (ssr: false) because
+ * lottie-web needs window.
+ */
+export function LottiePlayer({
+  animationData,
+  src,
+  loop = true,
+  autoplay = true,
+  className = "",
+  height = 240,
+  width = "100%",
+}: LottiePlayerProps) {
+  const [data, setData] = useState<unknown>(animationData ?? null);
+
+  useEffect(() => {
+    if (data || !src) return;
+    fetch(src)
+      .then((r) => r.json())
+      .then(setData)
+      .catch(() => {});
+  }, [data, src]);
+
+  if (!data) {
+    return (
+      <div
+        className={`my-6 rounded-xl border border-zinc-200 bg-zinc-50 ${className}`}
+        style={{ height, width }}
+      />
+    );
+  }
+
+  return (
+    <div className={`my-6 ${className}`} style={{ height, width }}>
+      <Lottie
+        animationData={data}
+        loop={loop}
+        autoplay={autoplay}
+        style={{ height: "100%", width: "100%" }}
+      />
+    </div>
+  );
+}

package/src/components/Marquee.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+interface MarqueeProps {
+  children: React.ReactNode;
+  /** Duration of one full cycle in seconds. Lower = faster. */
+  speed?: number;
+  /** Reverse direction */
+  reverse?: boolean;
+  /** Pause on hover */
+  pauseOnHover?: boolean;
+  /** Fade edges for soft bleed */
+  fade?: boolean;
+  className?: string;
+}
+
+/**
+ * Infinite horizontal marquee. Duplicates children twice and
+ * translates the wrapper 50% so the loop is seamless. Wrap
+ * anything: logos, testimonials, tags, chips, metric cards.
+ */
+export function Marquee({
+  children,
+  speed = 30,
+  reverse = false,
+  pauseOnHover = true,
+  fade = true,
+  className = "",
+}: MarqueeProps) {
+  const [hover, setHover] = useState(false);
+
+  return (
+    <div
+      className={`relative overflow-hidden my-8 ${className}`}
+      onMouseEnter={() => pauseOnHover && setHover(true)}
+      onMouseLeave={() => pauseOnHover && setHover(false)}
+      style={{
+        maskImage: fade
+          ? "linear-gradient(90deg, transparent, black 8%, black 92%, transparent)"
+          : undefined,
+        WebkitMaskImage: fade
+          ? "linear-gradient(90deg, transparent, black 8%, black 92%, transparent)"
+          : undefined,
+      }}
+    >
+      <motion.div
+        className="flex gap-6 w-max"
+        animate={{
+          x: reverse ? ["-50%", "0%"] : ["0%", "-50%"],
+        }}
+        transition={{
+          duration: speed,
+          ease: "linear",
+          repeat: Infinity,
+        }}
+        style={{ animationPlayState: hover ? "paused" : "running" }}
+      >
+        <div className="flex gap-6 shrink-0">{children}</div>
+        <div className="flex gap-6 shrink-0" aria-hidden>
+          {children}
+        </div>
+      </motion.div>
+    </div>
+  );
+}

package/src/components/MetricsRow.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { AnimatedMetric } from "./AnimatedMetric";
+
+interface Metric {
+  value: number;
+  suffix?: string;
+  prefix?: string;
+  label: string;
+  decimals?: number;
+}
+
+interface MetricsRowProps {
+  metrics: Metric[];
+}
+
+export function MetricsRow({ metrics }: MetricsRowProps) {
+  return (
+    <motion.div
+      className="my-10 rounded-2xl border border-zinc-200 bg-white grid grid-cols-2 md:grid-cols-4 divide-x divide-zinc-200"
+      initial={{ opacity: 0, y: 12 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+    >
+      {metrics.map((m, i) => (
+        <AnimatedMetric key={i} {...m} />
+      ))}
+    </motion.div>
+  );
+}

package/src/components/MorphingText.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+
+/**
+ * MorphingText: cycles through an array of strings with a smooth blur/opacity
+ * morph transition. Useful for hero headlines that rotate through value props
+ * or keywords. Purely CSS + requestAnimationFrame, no framer-motion needed.
+ *
+ * @example
+ * <MorphingText texts={["Ship faster", "Convert more", "Rank higher"]} />
+ */
+
+const MORPH_TIME = 1;
+const COOLDOWN_TIME = 0.5;
+
+function useMorphingText(texts: string[]) {
+  const textIndexRef = useRef(0);
+  const morphRef = useRef(0);
+  const cooldownRef = useRef(0);
+  const timeRef = useRef(new Date());
+
+  const text1Ref = useRef<HTMLSpanElement>(null);
+  const text2Ref = useRef<HTMLSpanElement>(null);
+
+  const setStyles = useCallback(
+    (fraction: number) => {
+      const [current1, current2] = [text1Ref.current, text2Ref.current];
+      if (!current1 || !current2) return;
+
+      current2.style.filter = `blur(${Math.min(4 / fraction - 4, 4)}px)`;
+      current2.style.opacity = `${Math.pow(fraction, 1.5) * 100}%`;
+
+      const invertedFraction = 1 - fraction;
+      current1.style.filter = `blur(${Math.min(
+        4 / invertedFraction - 4,
+        4
+      )}px)`;
+      current1.style.opacity = `${Math.pow(invertedFraction, 3) * 100}%`;
+
+      current1.textContent = texts[textIndexRef.current % texts.length];
+      current2.textContent =
+        texts[(textIndexRef.current + 1) % texts.length];
+    },
+    [texts]
+  );
+
+  const doMorph = useCallback(() => {
+    morphRef.current -= cooldownRef.current;
+    cooldownRef.current = 0;
+
+    let fraction = morphRef.current / MORPH_TIME;
+
+    if (fraction > 1) {
+      cooldownRef.current = COOLDOWN_TIME;
+      fraction = 1;
+    }
+
+    setStyles(fraction);
+
+    if (fraction === 1) {
+      textIndexRef.current++;
+    }
+  }, [setStyles]);
+
+  const doCooldown = useCallback(() => {
+    morphRef.current = 0;
+    const [current1, current2] = [text1Ref.current, text2Ref.current];
+    if (current1 && current2) {
+      current2.style.filter = "none";
+      current2.style.opacity = "100%";
+      current1.style.filter = "none";
+      current1.style.opacity = "0%";
+    }
+  }, []);
+
+  useEffect(() => {
+    let animationFrameId: number;
+
+    const animate = () => {
+      animationFrameId = requestAnimationFrame(animate);
+
+      const newTime = new Date();
+      const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000;
+      timeRef.current = newTime;
+
+      cooldownRef.current -= dt;
+
+      if (cooldownRef.current <= 0) doMorph();
+      else doCooldown();
+    };
+
+    animate();
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [doMorph, doCooldown]);
+
+  return { text1Ref, text2Ref };
+}
+
+interface MorphingTextProps {
+  /** Array of strings to cycle through */
+  texts: string[];
+  /** Additional Tailwind classes for the outer wrapper */
+  className?: string;
+}
+
+function Texts({ texts }: { texts: string[] }) {
+  const { text1Ref, text2Ref } = useMorphingText(texts);
+  return (
+    <>
+      <span
+        className="absolute inset-x-0 top-0 m-auto inline-block w-full text-center text-zinc-900 [will-change:filter,opacity] antialiased"
+        ref={text1Ref}
+      />
+      <span
+        className="absolute inset-x-0 top-0 m-auto inline-block w-full text-center text-zinc-900 [will-change:filter,opacity] antialiased"
+        ref={text2Ref}
+      />
+    </>
+  );
+}
+
+export function MorphingText({ texts, className }: MorphingTextProps) {
+  const base =
+    "relative mx-auto h-16 w-full max-w-screen-xl text-center text-[40pt] leading-none font-extrabold tracking-tight md:h-24 lg:text-[6rem] [text-rendering:optimizeLegibility] [font-smooth:antialiased] [-webkit-font-smoothing:antialiased] [-moz-osx-font-smoothing:grayscale]";
+  return (
+    <div className={className ? `${base} ${className}` : base}>
+      <Texts texts={texts} />
+    </div>
+  );
+}

package/src/components/MotionSequence.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface SequenceFrame {
+  title?: string;
+  body?: React.ReactNode;
+  visual?: React.ReactNode;
+  duration?: number;
+}
+
+interface MotionSequenceProps {
+  title?: string;
+  frames: SequenceFrame[];
+  defaultDuration?: number;
+  loop?: boolean;
+  className?: string;
+}
+
+/**
+ * Video-style timeline animation. Plays through a list of frames
+ * with timed reveals, like a Remotion composition rendered live.
+ * Each frame has a duration; the sequence advances automatically
+ * when the component scrolls into view.
+ */
+export function MotionSequence({
+  title,
+  frames,
+  defaultDuration = 2400,
+  loop = true,
+  className = "",
+}: MotionSequenceProps) {
+  const [index, setIndex] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) setPlaying(true);
+      },
+      { threshold: 0.3 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!playing) return;
+    const current = frames[index];
+    const d = current?.duration ?? defaultDuration;
+    const t = setTimeout(() => {
+      if (index < frames.length - 1) {
+        setIndex(index + 1);
+      } else if (loop) {
+        setIndex(0);
+      }
+    }, d);
+    return () => clearTimeout(t);
+  }, [index, playing, frames, defaultDuration, loop]);
+
+  const current = frames[index];
+  const total = frames.length;
+
+  return (
+    <div
+      ref={containerRef}
+      className={`my-10 rounded-2xl border border-zinc-200 bg-white overflow-hidden ${className}`}
+    >
+      {title && (
+        <div className="border-b border-zinc-100 px-6 py-4 flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-zinc-900">{title}</h3>
+          <div className="flex items-center gap-2">
+            <div className="flex gap-1">
+              {frames.map((_, i) => (
+                <button
+                  key={i}
+                  onClick={() => setIndex(i)}
+                  className={`h-1.5 rounded-full transition-all ${
+                    i === index ? "w-6 bg-teal-500" : "w-1.5 bg-zinc-300"
+                  }`}
+                  aria-label={`Frame ${i + 1}`}
+                />
+              ))}
+            </div>
+            <span className="text-xs font-mono text-zinc-500 tabular-nums">
+              {String(index + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className="relative min-h-[280px] bg-gradient-to-br from-zinc-50 to-white">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={index}
+            initial={{ opacity: 0, y: 16, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: -16, scale: 0.98 }}
+            transition={{
+              duration: 0.5,
+              ease: [0.16, 1, 0.3, 1],
+            }}
+            className="absolute inset-0 p-8 flex flex-col items-center justify-center"
+          >
+            {current?.visual && (
+              <div className="mb-6 w-full flex justify-center">
+                {current.visual}
+              </div>
+            )}
+            {current?.title && (
+              <motion.h4
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.15, duration: 0.4 }}
+                className="text-xl font-semibold text-zinc-900 text-center mb-2"
+              >
+                {current.title}
+              </motion.h4>
+            )}
+            {current?.body && (
+              <motion.div
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.25, duration: 0.4 }}
+                className="text-sm text-zinc-500 text-center max-w-md leading-relaxed"
+              >
+                {current.body}
+              </motion.div>
+            )}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      <motion.div
+        key={index}
+        initial={{ width: "0%" }}
+        animate={{ width: "100%" }}
+        transition={{
+          duration: (current?.duration ?? defaultDuration) / 1000,
+          ease: "linear",
+        }}
+        className="h-0.5 bg-gradient-to-r from-cyan-500 to-teal-500"
+      />
+    </div>
+  );
+}