@m13v/seo-components 0.1.0

package/src/components/RemotionClip.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import { Player } from "@remotion/player";
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+/* ------------------------------------------------------------------ */
+/* Built-in composition: "ConceptReveal"                              */
+/* Dead simple: a stack of captions fading+sliding in, with a tinted  */
+/* gradient background and a growing progress bar.                    */
+/* ------------------------------------------------------------------ */
+
+interface ConceptRevealProps {
+  title: string;
+  subtitle?: string;
+  captions: string[];
+  accent?: "teal" | "cyan";
+}
+
+export function ConceptReveal({
+  title,
+  subtitle,
+  captions,
+  accent = "teal",
+}: ConceptRevealProps) {
+  const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+
+  const titleOpacity = spring({ frame, fps, config: { damping: 200 } });
+  const titleY = interpolate(
+    spring({ frame, fps, config: { damping: 200 } }),
+    [0, 1],
+    [24, 0]
+  );
+
+  const subtitleProgress = spring({
+    frame: frame - 8,
+    fps,
+    config: { damping: 200 },
+  });
+
+  const progress = interpolate(frame, [0, durationInFrames], [0, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  const bgA = accent === "teal" ? "#14b8a6" : "#06b6d4";
+  const bgB = accent === "teal" ? "#0d9488" : "#0891b2";
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: `linear-gradient(135deg, ${bgA} 0%, ${bgB} 100%)`,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        color: "white",
+        padding: 56,
+      }}
+    >
+      {/* Subtle grid overlay */}
+      <AbsoluteFill
+        style={{
+          backgroundImage:
+            "linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)",
+          backgroundSize: "48px 48px",
+          pointerEvents: "none",
+        }}
+      />
+
+      <div style={{ position: "relative", display: "flex", flexDirection: "column", height: "100%" }}>
+        <div
+          style={{
+            opacity: titleOpacity,
+            transform: `translateY(${titleY}px)`,
+            fontSize: 64,
+            fontWeight: 700,
+            lineHeight: 1.1,
+            letterSpacing: -1,
+            marginBottom: 16,
+          }}
+        >
+          {title}
+        </div>
+
+        {subtitle && (
+          <div
+            style={{
+              opacity: subtitleProgress * 0.85,
+              transform: `translateY(${interpolate(subtitleProgress, [0, 1], [20, 0])}px)`,
+              fontSize: 28,
+              fontWeight: 400,
+              lineHeight: 1.4,
+              marginBottom: 40,
+            }}
+          >
+            {subtitle}
+          </div>
+        )}
+
+        <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", gap: 18 }}>
+          {captions.map((caption, i) => {
+            const captionStart = 18 + i * 14;
+            const captionProgress = spring({
+              frame: frame - captionStart,
+              fps,
+              config: { damping: 200, stiffness: 120 },
+            });
+            const opacity = captionProgress;
+            const x = interpolate(captionProgress, [0, 1], [-20, 0]);
+            return (
+              <div
+                key={i}
+                style={{
+                  opacity,
+                  transform: `translateX(${x}px)`,
+                  fontSize: 32,
+                  fontWeight: 500,
+                  lineHeight: 1.35,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 16,
+                }}
+              >
+                <div
+                  style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: "50%",
+                    background: "white",
+                    opacity: 0.9,
+                    flexShrink: 0,
+                  }}
+                />
+                {caption}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Progress bar */}
+        <div
+          style={{
+            marginTop: 40,
+            height: 4,
+            background: "rgba(255,255,255,0.2)",
+            borderRadius: 2,
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              width: `${progress * 100}%`,
+              height: "100%",
+              background: "white",
+            }}
+          />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Public wrapper                                                     */
+/* ------------------------------------------------------------------ */
+
+interface RemotionClipProps {
+  title: string;
+  subtitle?: string;
+  captions: string[];
+  accent?: "teal" | "cyan";
+  durationInFrames?: number;
+  fps?: number;
+  width?: number;
+  height?: number;
+  autoPlay?: boolean;
+  loop?: boolean;
+  className?: string;
+}
+
+/**
+ * Remotion-powered video clip rendered in the browser via @remotion/player.
+ * Uses the built-in ConceptReveal composition. Pass a title, optional subtitle,
+ * and 3-6 captions; the clip animates them with spring physics on a gradient
+ * background. No video file, everything is code-generated.
+ */
+export function RemotionClip({
+  title,
+  subtitle,
+  captions,
+  accent = "teal",
+  durationInFrames = 150,
+  fps = 30,
+  width = 1280,
+  height = 720,
+  autoPlay = true,
+  loop = true,
+  className = "",
+}: RemotionClipProps) {
+  return (
+    <div
+      className={`my-10 rounded-2xl overflow-hidden border border-zinc-200 shadow-lg ${className}`}
+      style={{ aspectRatio: `${width} / ${height}` }}
+    >
+      <Player
+        component={ConceptReveal}
+        durationInFrames={durationInFrames}
+        compositionWidth={width}
+        compositionHeight={height}
+        fps={fps}
+        autoPlay={autoPlay}
+        loop={loop}
+        controls
+        style={{ width: "100%", height: "100%" }}
+        inputProps={{ title, subtitle, captions, accent }}
+      />
+    </div>
+  );
+}

package/src/components/SequenceDiagram.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface SequenceMessage {
+  from: number;
+  to: number;
+  label: string;
+  type?: "request" | "response" | "event" | "error";
+}
+
+interface SequenceDiagramProps {
+  title: string;
+  actors: string[];
+  messages: SequenceMessage[];
+}
+
+const typeStyles: Record<string, { stroke: string; text: string; dash?: string }> = {
+  request: { stroke: "stroke-emerald-500", text: "text-emerald-500" },
+  response: { stroke: "stroke-teal-500", text: "text-teal-600", dash: "6 3" },
+  event: { stroke: "stroke-amber-400", text: "text-amber-400" },
+  error: { stroke: "stroke-red-400", text: "text-red-400", dash: "4 4" },
+};
+
+export function SequenceDiagram({ title, actors, messages }: SequenceDiagramProps) {
+  const colWidth = 160;
+  const rowHeight = 48;
+  const headerHeight = 60;
+  const svgWidth = colWidth * actors.length;
+  const svgHeight = headerHeight + rowHeight * messages.length + 32;
+
+  return (
+    <motion.div
+      className="my-10 rounded-2xl border border-zinc-200 bg-white p-6 overflow-x-auto"
+      initial={{ opacity: 0, y: 16 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+    >
+      <p className="text-xs font-mono uppercase tracking-widest text-emerald-500 mb-4">
+        {title}
+      </p>
+      <svg
+        viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+        width={svgWidth}
+        height={svgHeight}
+        className="max-w-full"
+      >
+        {/* Actor headers */}
+        {actors.map((actor, i) => {
+          const cx = colWidth * i + colWidth / 2;
+          return (
+            <motion.g
+              key={`actor-${i}`}
+              initial={{ opacity: 0, y: -8 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: i * 0.06, duration: 0.3 }}
+            >
+              <rect
+                x={cx - 56}
+                y={8}
+                width={112}
+                height={32}
+                rx={8}
+                className="fill-white stroke-zinc-200"
+                strokeWidth={1}
+              />
+              <text
+                x={cx}
+                y={29}
+                textAnchor="middle"
+                className="fill-zinc-900 text-[11px] font-medium"
+                fontFamily="ui-monospace, monospace"
+              >
+                {actor}
+              </text>
+              {/* Lifeline */}
+              <line
+                x1={cx}
+                y1={44}
+                x2={cx}
+                y2={svgHeight - 8}
+                className="stroke-zinc-200"
+                strokeWidth={1}
+                strokeDasharray="3 3"
+              />
+            </motion.g>
+          );
+        })}
+
+        {/* Messages */}
+        {messages.map((msg, i) => {
+          const y = headerHeight + rowHeight * i + rowHeight / 2;
+          const fromX = colWidth * msg.from + colWidth / 2;
+          const toX = colWidth * msg.to + colWidth / 2;
+          const isLeft = toX < fromX;
+          const style = typeStyles[msg.type || "request"];
+          const arrowX = toX + (isLeft ? 6 : -6);
+
+          return (
+            <motion.g
+              key={`msg-${i}`}
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 1 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.3 + i * 0.1, duration: 0.3 }}
+            >
+              <line
+                x1={fromX}
+                y1={y}
+                x2={toX}
+                y2={y}
+                className={style.stroke}
+                strokeWidth={1.5}
+                strokeDasharray={style.dash}
+                markerEnd=""
+              />
+              {/* Arrowhead */}
+              <polygon
+                points={
+                  isLeft
+                    ? `${arrowX},${y} ${arrowX + 7},${y - 4} ${arrowX + 7},${y + 4}`
+                    : `${arrowX},${y} ${arrowX - 7},${y - 4} ${arrowX - 7},${y + 4}`
+                }
+                className={style.stroke.replace("stroke-", "fill-")}
+              />
+              {/* Label */}
+              <text
+                x={(fromX + toX) / 2}
+                y={y - 8}
+                textAnchor="middle"
+                className={`${style.text} text-[10px]`}
+                fontFamily="ui-monospace, monospace"
+              >
+                {msg.label}
+              </text>
+            </motion.g>
+          );
+        })}
+      </svg>
+    </motion.div>
+  );
+}

package/src/components/ShimmerButton.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import Link from "next/link";
+
+interface ShimmerButtonProps {
+  children: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+/**
+ * Magic UI style shimmer button. A continuous light shimmer sweeps
+ * across the button surface. Uses plain CSS keyframes with a
+ * diagonal linear-gradient mask so it works without extra deps.
+ */
+export function ShimmerButton({
+  children,
+  href,
+  onClick,
+  className = "",
+}: ShimmerButtonProps) {
+  const inner = (
+    <span
+      className={`relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full bg-gradient-to-br from-cyan-500 to-teal-600 px-8 py-3 text-sm font-semibold text-white shadow-lg shadow-teal-500/30 transition-transform hover:scale-[1.02] ${className}`}
+    >
+      <span className="pointer-events-none absolute inset-0 -translate-x-full animate-[shimmer_2.2s_infinite] bg-gradient-to-r from-transparent via-white/40 to-transparent" />
+      <span className="relative z-10 flex items-center gap-2">{children}</span>
+      <style>{`
+        @keyframes shimmer {
+          0% { transform: translateX(-100%); }
+          100% { transform: translateX(200%); }
+        }
+      `}</style>
+    </span>
+  );
+
+  if (href) {
+    return (
+      <Link href={href} className="inline-block">
+        {inner}
+      </Link>
+    );
+  }
+
+  return (
+    <button type="button" onClick={onClick} className="inline-block">
+      {inner}
+    </button>
+  );
+}

package/src/components/ShineBorder.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import React from "react";
+
+/**
+ * ShineBorder: wraps children in a container with an animated radial-gradient
+ * border that rotates continuously, creating a "shine" effect. Defaults to a
+ * teal glow. Use it around cards, CTAs, or featured sections.
+ *
+ * Requires the `shine-pulse` keyframe in your Tailwind config:
+ * ```
+ * keyframes: {
+ *   "shine-pulse": {
+ *     "0%": { "background-position": "0% 0%" },
+ *     "50%": { "background-position": "100% 100%" },
+ *     to: { "background-position": "0% 0%" },
+ *   },
+ * }
+ * ```
+ *
+ * @example
+ * <ShineBorder color="#14b8a6">
+ *   <p>Featured content</p>
+ * </ShineBorder>
+ */
+
+type TColorProp = `#${string}` | `#${string}`[];
+
+interface ShineBorderProps {
+  borderRadius?: number;
+  borderWidth?: number;
+  duration?: number;
+  /** Hex color(s) for the shine gradient. Defaults to teal. */
+  color?: TColorProp;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function ShineBorder({
+  borderRadius = 8,
+  borderWidth = 1,
+  duration = 14,
+  color = "#14b8a6",
+  className,
+  children,
+}: ShineBorderProps) {
+  const outerBase =
+    "relative grid min-h-[60px] w-fit min-w-[300px] place-items-center bg-white p-3 text-zinc-900";
+  const outerClass = className
+    ? `${outerBase} ${className}`
+    : outerBase;
+
+  return (
+    <div
+      style={
+        {
+          "--border-radius": `${borderRadius}px`,
+          borderRadius: `${borderRadius}px`,
+        } as React.CSSProperties
+      }
+      className={outerClass}
+    >
+      <div
+        style={
+          {
+            "--border-width": `${borderWidth}px`,
+            "--border-radius": `${borderRadius}px`,
+            "--border-radius-child": `${borderRadius * 0.2}px`,
+            "--shine-pulse-duration": `${duration}s`,
+            "--mask-linear-gradient":
+              "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+            "--background-radial-gradient": `radial-gradient(transparent,transparent, ${
+              Array.isArray(color) ? color.join(",") : color
+            },transparent,transparent)`,
+          } as React.CSSProperties
+        }
+        className="before:bg-shine-size before:absolute before:inset-[0] before:aspect-square before:h-full before:w-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[''] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:var(--background-radial-gradient)] before:[background-size:300%_300%] before:[mask:var(--mask-linear-gradient)] motion-safe:before:animate-[shine-pulse_var(--shine-pulse-duration)_infinite_linear]"
+      />
+      <div
+        className="z-[1] h-full w-full"
+        style={{ borderRadius: `${borderRadius * 0.2}px` }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/StepTimeline.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface TimelineStep {
+  title: string;
+  description: string;
+  icon?: string;
+  detail?: React.ReactNode;
+}
+
+interface StepTimelineProps {
+  title?: string;
+  steps: TimelineStep[];
+  className?: string;
+}
+
+/**
+ * Vertical timeline with animated step reveals.
+ * Each step connects via an animated line that draws downward.
+ */
+export function StepTimeline({
+  title,
+  steps,
+  className = "",
+}: StepTimelineProps) {
+  return (
+    <div className={`my-10 ${className}`}>
+      {title && (
+        <motion.h3
+          initial={{ opacity: 0, y: 12 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+          className="text-lg font-semibold text-zinc-900 mb-6"
+        >
+          {title}
+        </motion.h3>
+      )}
+
+      <div className="relative pl-8">
+        {/* Vertical line */}
+        <motion.div
+          initial={{ scaleY: 0 }}
+          whileInView={{ scaleY: 1 }}
+          viewport={{ once: true, margin: "-40px" }}
+          transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+          className="absolute left-3 top-2 bottom-2 w-px bg-gradient-to-b from-teal-400 via-teal-300 to-zinc-200 origin-top"
+        />
+
+        <div className="space-y-8">
+          {steps.map((step, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, x: -16 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true, margin: "-20px" }}
+              transition={{
+                duration: 0.45,
+                ease: [0.16, 1, 0.3, 1],
+                delay: i * 0.1,
+              }}
+              className="relative"
+            >
+              {/* Dot */}
+              <motion.div
+                initial={{ scale: 0 }}
+                whileInView={{ scale: 1 }}
+                viewport={{ once: true }}
+                transition={{
+                  duration: 0.3,
+                  delay: i * 0.1 + 0.15,
+                  type: "spring",
+                  stiffness: 300,
+                  damping: 20,
+                }}
+                className="absolute -left-8 top-1 w-6 h-6 rounded-full bg-teal-50 border-2 border-teal-400 flex items-center justify-center"
+              >
+                {step.icon ? (
+                  <span className="text-xs">{step.icon}</span>
+                ) : (
+                  <span className="text-[10px] font-mono font-bold text-teal-600">
+                    {i + 1}
+                  </span>
+                )}
+              </motion.div>
+
+              {/* Content */}
+              <div>
+                <h4 className="text-sm font-semibold text-zinc-900 mb-1">
+                  {step.title}
+                </h4>
+                <p className="text-sm text-zinc-500 leading-relaxed">
+                  {step.description}
+                </p>
+                {step.detail && (
+                  <div className="mt-3 rounded-lg border border-zinc-100 bg-zinc-50 p-3 text-sm">
+                    {step.detail}
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/StickyBottomCta.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface StickyBottomCtaProps {
+  description: string;
+  buttonLabel: string;
+  href: string;
+  scrollThreshold?: number;
+}
+
+export function StickyBottomCta({
+  description,
+  buttonLabel,
+  href,
+  scrollThreshold = 600,
+}: StickyBottomCtaProps) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const handler = () => setVisible(window.scrollY > scrollThreshold);
+    window.addEventListener("scroll", handler);
+    return () => window.removeEventListener("scroll", handler);
+  }, [scrollThreshold]);
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          initial={{ y: "100%" }}
+          animate={{ y: 0 }}
+          exit={{ y: "100%" }}
+          transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+          className="fixed bottom-0 left-0 right-0 z-40 border-t border-zinc-200 backdrop-blur-xl py-3 px-6"
+          style={{ backgroundColor: "var(--mobile-bg)" }}
+        >
+          <div className="mx-auto max-w-7xl flex items-center justify-between">
+            <p className="text-sm text-zinc-500 hidden sm:block">
+              {description}
+            </p>
+            <a
+              href={href}
+              className="text-sm font-medium px-4 py-2 rounded-lg bg-teal-500 text-accent-contrast hover:bg-accent-dim transition-colors"
+            >
+              {buttonLabel}
+            </a>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}