@m13v/seo-components 0.1.0

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@m13v/seo-components",
+  "version": "0.1.0",
+  "description": "39 animated React components for programmatic SEO pages. Remotion video, Magic UI style animations, trust signals, JSON-LD helpers. Teal/cyan brand, light-theme only.",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./components/*": "./src/components/*",
+    "./lib/*": "./src/lib/*"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "seo",
+    "components",
+    "react",
+    "nextjs",
+    "framer-motion",
+    "remotion",
+    "magic-ui",
+    "animated",
+    "programmatic-seo",
+    "json-ld"
+  ],
+  "author": "m13v",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/m13v/appmaker.git",
+    "directory": "seo-components"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "next": ">=14",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "framer-motion": ">=11",
+    "remotion": ">=4",
+    "@remotion/player": ">=4",
+    "lottie-react": ">=2"
+  },
+  "peerDependenciesMeta": {
+    "remotion": { "optional": true },
+    "@remotion/player": { "optional": true },
+    "lottie-react": { "optional": true }
+  }
+}

package/src/components/AnimatedBeam.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface BeamNode {
+  label: string;
+  sublabel?: string;
+}
+
+interface AnimatedBeamProps {
+  /** Left side nodes (sources) */
+  from: BeamNode[];
+  /** Single center node (aggregator) */
+  hub: BeamNode;
+  /** Right side nodes (destinations) */
+  to: BeamNode[];
+  title?: string;
+  className?: string;
+}
+
+/**
+ * Magic UI style animated beam diagram. A central hub connects to
+ * sources on the left and destinations on the right. Animated
+ * gradient beams travel along each connection. Pure SVG, no deps
+ * beyond framer-motion.
+ */
+export function AnimatedBeam({
+  from,
+  hub,
+  to,
+  title,
+  className = "",
+}: AnimatedBeamProps) {
+  const width = 720;
+  const height = 380;
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const leftX = 96;
+  const rightX = width - 96;
+
+  const leftPositions = from.map(
+    (_, i) => (i + 1) * (height / (from.length + 1))
+  );
+  const rightPositions = to.map(
+    (_, i) => (i + 1) * (height / (to.length + 1))
+  );
+
+  return (
+    <div
+      className={`my-10 rounded-2xl border border-zinc-200 bg-white p-6 ${className}`}
+    >
+      {title && (
+        <h3 className="text-sm font-semibold text-zinc-900 mb-4">{title}</h3>
+      )}
+      <svg
+        viewBox={`0 0 ${width} ${height}`}
+        className="w-full h-auto"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        <defs>
+          <linearGradient id="beam-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#14b8a6" stopOpacity="0" />
+            <stop offset="50%" stopColor="#14b8a6" stopOpacity="1" />
+            <stop offset="100%" stopColor="#14b8a6" stopOpacity="0" />
+          </linearGradient>
+          <filter id="glow">
+            <feGaussianBlur stdDeviation="3" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+
+        {/* Base connection lines */}
+        {leftPositions.map((y, i) => (
+          <path
+            key={`from-line-${i}`}
+            d={`M ${leftX + 60} ${y} Q ${centerX - 80} ${y}, ${centerX - 40} ${centerY}`}
+            stroke="#e4e4e7"
+            strokeWidth="2"
+            fill="none"
+          />
+        ))}
+        {rightPositions.map((y, i) => (
+          <path
+            key={`to-line-${i}`}
+            d={`M ${centerX + 40} ${centerY} Q ${centerX + 80} ${y}, ${rightX - 60} ${y}`}
+            stroke="#e4e4e7"
+            strokeWidth="2"
+            fill="none"
+          />
+        ))}
+
+        {/* Animated beam overlays */}
+        {leftPositions.map((y, i) => (
+          <motion.path
+            key={`from-beam-${i}`}
+            d={`M ${leftX + 60} ${y} Q ${centerX - 80} ${y}, ${centerX - 40} ${centerY}`}
+            stroke="url(#beam-gradient)"
+            strokeWidth="3"
+            fill="none"
+            strokeDasharray="40 160"
+            filter="url(#glow)"
+            initial={{ strokeDashoffset: 200 }}
+            animate={{ strokeDashoffset: 0 }}
+            transition={{
+              duration: 2,
+              repeat: Infinity,
+              ease: "linear",
+              delay: i * 0.3,
+            }}
+          />
+        ))}
+        {rightPositions.map((y, i) => (
+          <motion.path
+            key={`to-beam-${i}`}
+            d={`M ${centerX + 40} ${centerY} Q ${centerX + 80} ${y}, ${rightX - 60} ${y}`}
+            stroke="url(#beam-gradient)"
+            strokeWidth="3"
+            fill="none"
+            strokeDasharray="40 160"
+            filter="url(#glow)"
+            initial={{ strokeDashoffset: 200 }}
+            animate={{ strokeDashoffset: 0 }}
+            transition={{
+              duration: 2,
+              repeat: Infinity,
+              ease: "linear",
+              delay: i * 0.3 + 1,
+            }}
+          />
+        ))}
+
+        {/* Left nodes */}
+        {from.map((node, i) => (
+          <g key={`from-${i}`}>
+            <rect
+              x={leftX - 60}
+              y={leftPositions[i] - 24}
+              width="120"
+              height="48"
+              rx="8"
+              fill="white"
+              stroke="#e4e4e7"
+              strokeWidth="1.5"
+            />
+            <foreignObject
+              x={leftX - 56}
+              y={leftPositions[i] - 20}
+              width="112"
+              height="40"
+            >
+              <div
+                // @ts-expect-error -- xmlns is valid in foreignObject
+                xmlns="http://www.w3.org/1999/xhtml"
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "100%",
+                  height: "100%",
+                  textAlign: "center",
+                  fontSize: 12,
+                  fontWeight: 600,
+                  lineHeight: 1.2,
+                  color: "#18181b",
+                  overflow: "hidden",
+                  wordBreak: "break-word",
+                }}
+              >
+                {node.label}
+              </div>
+            </foreignObject>
+          </g>
+        ))}
+
+        {/* Center hub */}
+        <g>
+          <rect
+            x={centerX - 72}
+            y={centerY - 36}
+            width="144"
+            height="72"
+            rx="36"
+            fill="#14b8a6"
+            filter="url(#glow)"
+          />
+          <rect
+            x={centerX - 72}
+            y={centerY - 36}
+            width="144"
+            height="72"
+            rx="36"
+            fill="none"
+            stroke="white"
+            strokeWidth="2"
+          />
+          <foreignObject
+            x={centerX - 64}
+            y={centerY - 28}
+            width="128"
+            height="56"
+          >
+            <div
+              // @ts-expect-error -- xmlns is valid in foreignObject
+              xmlns="http://www.w3.org/1999/xhtml"
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+                height: "100%",
+                textAlign: "center",
+                fontSize: 12,
+                fontWeight: 700,
+                lineHeight: 1.2,
+                color: "white",
+                overflow: "hidden",
+                wordBreak: "break-word",
+              }}
+            >
+              {hub.label}
+            </div>
+          </foreignObject>
+        </g>
+
+        {/* Right nodes */}
+        {to.map((node, i) => (
+          <g key={`to-${i}`}>
+            <rect
+              x={rightX - 60}
+              y={rightPositions[i] - 24}
+              width="120"
+              height="48"
+              rx="8"
+              fill="white"
+              stroke="#e4e4e7"
+              strokeWidth="1.5"
+            />
+            <foreignObject
+              x={rightX - 56}
+              y={rightPositions[i] - 20}
+              width="112"
+              height="40"
+            >
+              <div
+                // @ts-expect-error -- xmlns is valid in foreignObject
+                xmlns="http://www.w3.org/1999/xhtml"
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "100%",
+                  height: "100%",
+                  textAlign: "center",
+                  fontSize: 12,
+                  fontWeight: 600,
+                  lineHeight: 1.2,
+                  color: "#18181b",
+                  overflow: "hidden",
+                  wordBreak: "break-word",
+                }}
+              >
+                {node.label}
+              </div>
+            </foreignObject>
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+}

package/src/components/AnimatedChecklist.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface ChecklistItem {
+  text: string;
+  checked?: boolean;
+}
+
+interface AnimatedChecklistProps {
+  title: string;
+  items: ChecklistItem[];
+}
+
+export function AnimatedChecklist({ title, items }: AnimatedChecklistProps) {
+  return (
+    <motion.div
+      className="my-8 rounded-2xl border border-zinc-200 bg-white p-6"
+      initial={{ opacity: 0, y: 12 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <p className="text-xs font-mono uppercase tracking-widest text-emerald-500 mb-4">
+        {title}
+      </p>
+      <ul className="space-y-2.5">
+        {items.map((item, i) => (
+          <motion.li
+            key={i}
+            className="flex items-start gap-3"
+            initial={{ opacity: 0, x: -12 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 0.3,
+              ease: [0.16, 1, 0.3, 1],
+              delay: i * 0.06,
+            }}
+          >
+            <motion.span
+              className={`mt-0.5 flex items-center justify-center w-5 h-5 rounded-md border shrink-0 ${
+                item.checked !== false
+                  ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-500"
+                  : "border-zinc-200 bg-white text-zinc-500"
+              }`}
+              initial={{ scale: 0 }}
+              whileInView={{ scale: 1 }}
+              viewport={{ once: true }}
+              transition={{ delay: i * 0.06 + 0.15, type: "spring", stiffness: 300, damping: 20 }}
+            >
+              {item.checked !== false ? (
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                  <path d="M2 5l2.5 2.5L8 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              ) : (
+                <span className="w-1.5 h-1.5 rounded-full bg-zinc-400" />
+              )}
+            </motion.span>
+            <span className={`text-sm leading-relaxed ${item.checked !== false ? "text-zinc-900" : "text-zinc-500"}`}>
+              {item.text}
+            </span>
+          </motion.li>
+        ))}
+      </ul>
+    </motion.div>
+  );
+}

package/src/components/AnimatedCodeBlock.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { motion, useInView } from "framer-motion";
+import { useRef, useState, useEffect } from "react";
+
+interface AnimatedCodeBlockProps {
+  code: string;
+  language?: string;
+  filename?: string;
+  typingSpeed?: number;
+}
+
+export function AnimatedCodeBlock({
+  code,
+  language = "typescript",
+  filename,
+  typingSpeed = 12,
+}: AnimatedCodeBlockProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true, margin: "-60px" });
+  const [displayedLines, setDisplayedLines] = useState(0);
+  const lines = code.split("\n");
+
+  useEffect(() => {
+    if (!isInView) return;
+    let i = 0;
+    const interval = setInterval(() => {
+      i++;
+      setDisplayedLines(i);
+      if (i >= lines.length) clearInterval(interval);
+    }, typingSpeed);
+    return () => clearInterval(interval);
+  }, [isInView, lines.length, typingSpeed]);
+
+  return (
+    <motion.div
+      ref={ref}
+      className="my-6 rounded-2xl border border-zinc-800 bg-zinc-900 overflow-hidden"
+      initial={{ opacity: 0, y: 12 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+    >
+      {filename && (
+        <div className="flex items-center gap-2 px-5 py-2.5 border-b border-zinc-800 bg-zinc-900/50">
+          <div className="flex gap-1.5">
+            <span className="w-2.5 h-2.5 rounded-full bg-red-400/60" />
+            <span className="w-2.5 h-2.5 rounded-full bg-amber-400/60" />
+            <span className="w-2.5 h-2.5 rounded-full bg-emerald-400/60" />
+          </div>
+          <span className="text-[11px] font-mono text-zinc-400 ml-1">{filename}</span>
+        </div>
+      )}
+      <pre className="p-5 text-sm font-mono overflow-x-auto">
+        <code className="text-code-text">
+          {lines.slice(0, displayedLines).join("\n")}
+          {displayedLines < lines.length && isInView && (
+            <motion.span
+              className="inline-block w-[7px] h-[14px] bg-emerald-500 ml-0.5 align-middle"
+              animate={{ opacity: [1, 0] }}
+              transition={{ duration: 0.6, repeat: Infinity, repeatType: "reverse" }}
+            />
+          )}
+        </code>
+      </pre>
+    </motion.div>
+  );
+}

package/src/components/AnimatedDemo.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { motion, useInView } from "framer-motion";
+
+interface DemoStep {
+  /** What appears in the "screen" */
+  screen: string;
+  /** What appears in the narration/caption */
+  caption: string;
+  /** Duration in ms before advancing to next step */
+  duration?: number;
+}
+
+interface AnimatedDemoProps {
+  title: string;
+  steps: DemoStep[];
+  /** Optional code that reproduces this demo */
+  code?: string;
+  codeLanguage?: string;
+  className?: string;
+}
+
+export function AnimatedDemo({
+  title,
+  steps,
+  code,
+  codeLanguage = "tsx",
+  className = "",
+}: AnimatedDemoProps) {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [showCode, setShowCode] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true, margin: "-80px" });
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (isInView && !isPlaying) {
+      setIsPlaying(true);
+    }
+  }, [isInView, isPlaying]);
+
+  useEffect(() => {
+    if (!isPlaying) return;
+    const step = steps[currentStep];
+    const dur = step?.duration || 2000;
+
+    timerRef.current = setTimeout(() => {
+      setCurrentStep((prev) => (prev + 1) % steps.length);
+    }, dur);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [currentStep, isPlaying, steps]);
+
+  const step = steps[currentStep];
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 24 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-60px" }}
+      transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+      className={`my-10 ${className}`}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-xs font-mono font-medium text-teal-600 tracking-wider uppercase">
+          {title}
+        </span>
+        {code && (
+          <button
+            onClick={() => setShowCode(!showCode)}
+            className="text-xs text-zinc-400 hover:text-zinc-600 transition-colors font-mono"
+          >
+            {showCode ? "Hide code" : "View code"}
+          </button>
+        )}
+      </div>
+
+      {/* Demo screen */}
+      <div className="rounded-2xl border border-zinc-200 bg-zinc-950 overflow-hidden shadow-lg">
+        {/* Title bar */}
+        <div className="flex items-center gap-1.5 px-4 py-2.5 bg-zinc-900 border-b border-zinc-800">
+          <div className="w-2.5 h-2.5 rounded-full bg-red-400/80" />
+          <div className="w-2.5 h-2.5 rounded-full bg-yellow-400/80" />
+          <div className="w-2.5 h-2.5 rounded-full bg-green-400/80" />
+          <span className="ml-3 text-[11px] text-zinc-500 font-mono">
+            mk0r preview
+          </span>
+        </div>
+
+        {/* Screen content */}
+        <div className="relative min-h-[180px] flex items-center justify-center p-8">
+          <motion.div
+            key={currentStep}
+            initial={{ opacity: 0, scale: 0.96 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+            className="text-center"
+          >
+            <p className="text-white font-mono text-sm leading-relaxed whitespace-pre-line">
+              {step?.screen}
+            </p>
+          </motion.div>
+        </div>
+
+        {/* Progress bar */}
+        <div className="h-0.5 bg-zinc-800 overflow-hidden">
+          <motion.div
+            key={`progress-${currentStep}`}
+            initial={{ width: "0%" }}
+            animate={{ width: "100%" }}
+            transition={{
+              duration: (step?.duration || 2000) / 1000,
+              ease: "linear",
+            }}
+            className="h-full bg-gradient-to-r from-cyan-500 to-teal-500"
+          />
+        </div>
+      </div>
+
+      {/* Caption */}
+      <motion.p
+        key={`caption-${currentStep}`}
+        initial={{ opacity: 0, y: 6 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.25 }}
+        className="mt-3 text-sm text-zinc-500 text-center"
+      >
+        <span className="inline-flex items-center gap-2">
+          <span className="text-xs font-mono text-teal-500">
+            {currentStep + 1}/{steps.length}
+          </span>
+          {step?.caption}
+        </span>
+      </motion.p>
+
+      {/* Step indicators */}
+      <div className="flex items-center justify-center gap-1.5 mt-3">
+        {steps.map((_, i) => (
+          <button
+            key={i}
+            onClick={() => setCurrentStep(i)}
+            className={`w-1.5 h-1.5 rounded-full transition-all duration-200 ${
+              i === currentStep
+                ? "bg-teal-500 w-4"
+                : i < currentStep
+                  ? "bg-teal-300"
+                  : "bg-zinc-300"
+            }`}
+          />
+        ))}
+      </div>
+
+      {/* Code panel */}
+      {code && showCode && (
+        <motion.div
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: "auto" }}
+          exit={{ opacity: 0, height: 0 }}
+          transition={{ duration: 0.3 }}
+          className="mt-4"
+        >
+          <div className="rounded-xl border border-zinc-200 bg-zinc-950 overflow-hidden">
+            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
+              <span className="text-[11px] text-zinc-500 font-mono">
+                {codeLanguage}
+              </span>
+              <span className="text-[10px] text-zinc-600 font-mono">
+                How to build this
+              </span>
+            </div>
+            <pre className="p-4 text-sm text-zinc-300 font-mono overflow-x-auto leading-relaxed">
+              <code>{code}</code>
+            </pre>
+          </div>
+        </motion.div>
+      )}
+    </motion.div>
+  );
+}

package/src/components/AnimatedMetric.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { motion, useInView, useSpring, useMotionValue } from "framer-motion";
+import { useRef, useEffect, useState } from "react";
+
+interface AnimatedMetricProps {
+  value: number;
+  suffix?: string;
+  prefix?: string;
+  label: string;
+  decimals?: number;
+}
+
+export function AnimatedMetric({
+  value,
+  suffix = "",
+  prefix = "",
+  label,
+  decimals = 0,
+}: AnimatedMetricProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true, margin: "-40px" });
+  const motionVal = useMotionValue(0);
+  const spring = useSpring(motionVal, { stiffness: 60, damping: 20 });
+  const [display, setDisplay] = useState("0");
+
+  useEffect(() => {
+    if (isInView) motionVal.set(value);
+  }, [isInView, motionVal, value]);
+
+  useEffect(() => {
+    const unsubscribe = spring.on("change", (v: number) => {
+      setDisplay(v.toFixed(decimals));
+    });
+    return unsubscribe;
+  }, [spring, decimals]);
+
+  return (
+    <motion.div
+      ref={ref}
+      className="flex flex-col items-center p-4"
+      initial={{ opacity: 0, scale: 0.9 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <span className="text-3xl md:text-4xl font-bold text-teal-600 tabular-nums">
+        {prefix}{display}
+        {suffix && <span className="text-base font-semibold">{suffix}</span>}
+      </span>
+      <span className="text-xs text-zinc-500 mt-1 text-center">{label}</span>
+    </motion.div>
+  );
+}