@m13v/seo-components 0.1.0

package/src/components/TerminalOutput.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { motion, useInView } from "framer-motion";
+import { useRef, useState, useEffect } from "react";
+
+interface TerminalLine {
+  text: string;
+  type?: "command" | "output" | "success" | "error" | "info";
+  delay?: number;
+}
+
+interface TerminalOutputProps {
+  lines: TerminalLine[];
+  title?: string;
+}
+
+const typeColors: Record<string, string> = {
+  command: "text-emerald-400",
+  output: "text-zinc-400",
+  success: "text-emerald-500",
+  error: "text-red-400",
+  info: "text-amber-400",
+};
+
+const prefixes: Record<string, string> = {
+  command: "$ ",
+  output: "  ",
+  success: "\u2713 ",
+  error: "\u2717 ",
+  info: "\u2139 ",
+};
+
+export function TerminalOutput({ lines, title = "Terminal" }: TerminalOutputProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true, margin: "-40px" });
+  const [visibleCount, setVisibleCount] = useState(0);
+
+  useEffect(() => {
+    if (!isInView) return;
+    let i = 0;
+    const showNext = () => {
+      i++;
+      setVisibleCount(i);
+      if (i < lines.length) {
+        const nextDelay = lines[i]?.delay ?? (lines[i]?.type === "command" ? 400 : 120);
+        setTimeout(showNext, nextDelay);
+      }
+    };
+    const firstDelay = lines[0]?.delay ?? 300;
+    setTimeout(showNext, firstDelay);
+  }, [isInView, lines]);
+
+  return (
+    <motion.div
+      ref={ref}
+      className="my-8 rounded-2xl border border-zinc-800 bg-[#0d1117] 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] }}
+    >
+      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-zinc-800">
+        <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-[#8b949e] ml-1">{title}</span>
+      </div>
+      <div className="p-4 font-mono text-sm min-h-[120px]">
+        {lines.slice(0, visibleCount).map((line, i) => (
+          <motion.div
+            key={i}
+            initial={{ opacity: 0, y: 4 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.15 }}
+            className={`${typeColors[line.type || "output"]} leading-relaxed`}
+          >
+            <span className="opacity-50">{prefixes[line.type || "output"]}</span>
+            {line.text}
+          </motion.div>
+        ))}
+        {visibleCount < lines.length && isInView && (
+          <motion.span
+            className="inline-block w-[7px] h-[14px] bg-emerald-500 align-middle"
+            animate={{ opacity: [1, 0] }}
+            transition={{ duration: 0.6, repeat: Infinity, repeatType: "reverse" }}
+          />
+        )}
+      </div>
+    </motion.div>
+  );
+}

package/src/components/TextShimmer.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { CSSProperties, ReactNode } from "react";
+
+/**
+ * TextShimmer: renders inline text with a teal shimmer highlight that
+ * sweeps across continuously. Useful for drawing attention to a tagline,
+ * status label, or short phrase.
+ *
+ * Requires the `shimmer` keyframe in your Tailwind config:
+ * ```
+ * keyframes: {
+ *   shimmer: {
+ *     "0%, 90%, 100%": {
+ *       "background-position": "calc(-100% - var(--shimmer-width)) 0",
+ *     },
+ *     "30%, 60%": {
+ *       "background-position": "calc(100% + var(--shimmer-width)) 0",
+ *     },
+ *   },
+ * },
+ * animation: { shimmer: "shimmer 8s infinite" }
+ * ```
+ *
+ * @example
+ * <TextShimmer>Now in beta</TextShimmer>
+ */
+
+interface TextShimmerProps {
+  children: ReactNode;
+  className?: string;
+  /** Width of the shimmer highlight in pixels. */
+  shimmerWidth?: number;
+}
+
+export function TextShimmer({
+  children,
+  className,
+  shimmerWidth = 100,
+}: TextShimmerProps) {
+  const base = [
+    "mx-auto max-w-md text-zinc-500",
+    "animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
+    "bg-gradient-to-r from-zinc-100 via-teal-600/80 via-50% to-zinc-100",
+  ].join(" ");
+
+  return (
+    <p
+      style={
+        {
+          "--shimmer-width": `${shimmerWidth}px`,
+        } as CSSProperties
+      }
+      className={className ? `${base} ${className}` : base}
+    >
+      {children}
+    </p>
+  );
+}

package/src/components/TypingAnimation.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * TypingAnimation: displays a string character by character, simulating a
+ * typewriter effect. Good for hero headlines, terminal-style intros, or
+ * any text you want to reveal progressively.
+ *
+ * @example
+ * <TypingAnimation text="Build and ship in minutes" duration={80} />
+ */
+
+interface TypingAnimationProps {
+  /** The full string to type out. */
+  text: string;
+  /** Milliseconds between each character. Defaults to 200. */
+  duration?: number;
+  /** Additional Tailwind classes. */
+  className?: string;
+}
+
+export function TypingAnimation({
+  text,
+  duration = 200,
+  className,
+}: TypingAnimationProps) {
+  const [displayedText, setDisplayedText] = useState<string>("");
+  const [i, setI] = useState<number>(0);
+
+  useEffect(() => {
+    const typingEffect = setInterval(() => {
+      if (i < text.length) {
+        setDisplayedText((prev) => prev + text.charAt(i));
+        setI(i + 1);
+      } else {
+        clearInterval(typingEffect);
+      }
+    }, duration);
+
+    return () => {
+      clearInterval(typingEffect);
+    };
+  }, [duration, i, text]);
+
+  const base =
+    "font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm text-zinc-900";
+
+  return (
+    <h1 className={className ? `${base} ${className}` : base}>
+      {displayedText ? displayedText : text}
+    </h1>
+  );
+}

package/src/index.ts

@@ -0,0 +1,69 @@
+// JSON-LD structured data helpers
+export {
+  breadcrumbListSchema,
+  faqPageSchema,
+  articleSchema,
+  howToSchema,
+} from "./lib/json-ld";
+export type {
+  BreadcrumbItem,
+  FaqItem,
+  ArticleSchemaInput,
+  HowToStepInput,
+} from "./lib/json-ld";
+
+// Trust-signal components
+export { Breadcrumbs } from "./components/Breadcrumbs";
+export type { BreadcrumbCrumb } from "./components/Breadcrumbs";
+export { ArticleMeta } from "./components/ArticleMeta";
+export { ProofBand } from "./components/ProofBand";
+export { FaqSection } from "./components/FaqSection";
+export { InlineTestimonial } from "./components/InlineTestimonial";
+export { ComparisonTable } from "./components/ComparisonTable";
+export type { ComparisonRow } from "./components/ComparisonTable";
+
+// Content display components
+export { AnimatedCodeBlock } from "./components/AnimatedCodeBlock";
+export { TerminalOutput } from "./components/TerminalOutput";
+export { FlowDiagram } from "./components/FlowDiagram";
+export { SequenceDiagram } from "./components/SequenceDiagram";
+export { CodeComparison } from "./components/CodeComparison";
+export { AnimatedChecklist } from "./components/AnimatedChecklist";
+export { AnimatedSection } from "./components/AnimatedSection";
+export { AnimatedMetric } from "./components/AnimatedMetric";
+export { MetricsRow } from "./components/MetricsRow";
+
+// CTA components
+export { InlineCta } from "./components/InlineCta";
+export { StickyBottomCta } from "./components/StickyBottomCta";
+
+// Proof / social proof
+export { ProofBanner } from "./components/ProofBanner";
+
+// Rich layout components
+export { BentoGrid } from "./components/BentoGrid";
+export type { BentoCard } from "./components/BentoGrid";
+export { BeforeAfter } from "./components/BeforeAfter";
+export { AnimatedDemo } from "./components/AnimatedDemo";
+export { GlowCard } from "./components/GlowCard";
+export { ParallaxSection } from "./components/ParallaxSection";
+export { StepTimeline } from "./components/StepTimeline";
+export { MotionSequence } from "./components/MotionSequence";
+
+// Remotion video + Lottie
+export { RemotionClip, ConceptReveal } from "./components/RemotionClip";
+export { LottiePlayer } from "./components/LottiePlayer";
+
+// Magic UI style components
+export { Marquee } from "./components/Marquee";
+export { AnimatedBeam } from "./components/AnimatedBeam";
+export { OrbitingCircles } from "./components/OrbitingCircles";
+export { NumberTicker } from "./components/NumberTicker";
+export { ShimmerButton } from "./components/ShimmerButton";
+export { GradientText } from "./components/GradientText";
+export { BackgroundGrid } from "./components/BackgroundGrid";
+export { MorphingText } from "./components/MorphingText";
+export { Particles } from "./components/Particles";
+export { ShineBorder } from "./components/ShineBorder";
+export { TextShimmer } from "./components/TextShimmer";
+export { TypingAnimation } from "./components/TypingAnimation";

package/src/lib/json-ld.ts

@@ -0,0 +1,116 @@
+/**
+ * Shared JSON-LD structured data helpers.
+ * Product-agnostic: caller provides publisher name, URL, logo, author, etc.
+ */
+
+export interface BreadcrumbItem {
+  name: string;
+  url: string;
+}
+
+export interface FaqItem {
+  q: string;
+  a: string;
+}
+
+export function breadcrumbListSchema(items: BreadcrumbItem[]) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: items.map((item, i) => ({
+      "@type": "ListItem",
+      position: i + 1,
+      name: item.name,
+      item: item.url,
+    })),
+  };
+}
+
+export function faqPageSchema(faqs: FaqItem[], id?: string) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    ...(id ? { "@id": id } : {}),
+    mainEntity: faqs.map((f) => ({
+      "@type": "Question",
+      name: f.q,
+      acceptedAnswer: {
+        "@type": "Answer",
+        text: f.a,
+      },
+    })),
+  };
+}
+
+export interface ArticleSchemaInput {
+  headline: string;
+  description: string;
+  url: string;
+  datePublished: string;
+  dateModified?: string;
+  author: string;
+  authorUrl?: string;
+  publisherName: string;
+  publisherUrl: string;
+  publisherLogo?: string;
+  image?: string;
+  articleType?: "Article" | "BlogPosting" | "TechArticle";
+}
+
+export function articleSchema({
+  headline,
+  description,
+  url,
+  datePublished,
+  dateModified,
+  author,
+  authorUrl,
+  publisherName,
+  publisherUrl,
+  publisherLogo,
+  image,
+  articleType = "Article",
+}: ArticleSchemaInput) {
+  return {
+    "@context": "https://schema.org",
+    "@type": articleType,
+    headline,
+    description,
+    datePublished,
+    dateModified: dateModified || datePublished,
+    author: {
+      "@type": "Person",
+      name: author,
+      ...(authorUrl ? { url: authorUrl } : {}),
+    },
+    publisher: {
+      "@type": "Organization",
+      name: publisherName,
+      url: publisherUrl,
+      ...(publisherLogo ? { logo: publisherLogo } : {}),
+    },
+    url,
+    mainEntityOfPage: url,
+    ...(image ? { image } : {}),
+  };
+}
+
+export interface HowToStepInput {
+  name: string;
+  text: string;
+}
+
+export function howToSchema(name: string, description: string, steps: HowToStepInput[]) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "HowTo",
+    name,
+    description,
+    step: steps.map((s, i) => ({
+      "@type": "HowToStep",
+      position: i + 1,
+      name: s.name,
+      text: s.text,
+    })),
+  };
+}