@m13v/seo-components 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.3.0",
+  "version": "0.5.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",

package/src/components/AnimatedBeam.tsx

@@ -59,9 +59,9 @@ export function AnimatedBeam({
       >
         <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" />
+            <stop offset="0%" stopColor="var(--seo-accent)" stopOpacity="0" />
+            <stop offset="50%" stopColor="var(--seo-accent)" stopOpacity="1" />
+            <stop offset="100%" stopColor="var(--seo-accent)" stopOpacity="0" />
           </linearGradient>
           <filter id="glow">
             <feGaussianBlur stdDeviation="3" result="blur" />
@@ -183,7 +183,7 @@ export function AnimatedBeam({
             width="144"
             height="72"
             rx="36"
-            fill="#14b8a6"
+            fill="var(--seo-accent)"
             filter="url(#glow)"
           />
           <rect

package/src/components/ArticleMeta.tsx

@@ -27,7 +27,7 @@ export function ArticleMeta({
 }: ArticleMetaProps) {
   const showUpdated = dateModified && dateModified !== datePublished;
   return (
-    <div className={`flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-zinc-500 ${className}`}>
+    <div className={`flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-zinc-500 max-w-4xl mx-auto px-6 ${className}`}>
       <div className="flex items-center gap-2">
         <div className="w-7 h-7 rounded-full bg-gradient-to-br from-teal-500/40 to-teal-500/10 flex items-center justify-center text-xs font-semibold text-white">
           {author.charAt(0)}

package/src/components/BackgroundGrid.tsx

@@ -26,8 +26,8 @@ export function BackgroundGrid({
 }: BackgroundGridProps) {
   const bg =
     pattern === "dots"
-      ? `radial-gradient(circle, rgba(20, 184, 166, 0.18) 1px, transparent 1px)`
-      : `linear-gradient(rgba(20, 184, 166, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 184, 166, 0.12) 1px, transparent 1px)`;
+      ? `radial-gradient(circle, rgba(var(--seo-accent-rgb), 0.18) 1px, transparent 1px)`
+      : `linear-gradient(rgba(var(--seo-accent-rgb), 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--seo-accent-rgb), 0.12) 1px, transparent 1px)`;
 
   return (
     <div
@@ -49,7 +49,7 @@ export function BackgroundGrid({
           className="absolute inset-0 pointer-events-none"
           style={{
             background:
-              "radial-gradient(ellipse at center, rgba(20, 184, 166, 0.15) 0%, transparent 60%)",
+              "radial-gradient(ellipse at center, rgba(var(--seo-accent-rgb), 0.15) 0%, transparent 60%)",
           }}
         />
       )}

package/src/components/Breadcrumbs.tsx

@@ -15,7 +15,7 @@ interface BreadcrumbsProps {
 export function Breadcrumbs({ items, className = "", align = "start" }: BreadcrumbsProps) {
   const justify = align === "center" ? "justify-center" : "justify-start";
   return (
-    <nav aria-label="Breadcrumb" className={className}>
+    <nav aria-label="Breadcrumb" className={`max-w-4xl mx-auto px-6 ${className}`}>
       <ol className={`flex flex-wrap items-center ${justify} gap-2 text-sm text-zinc-500`}>
         {items.map((item, i) => {
           const isLast = i === items.length - 1;

package/src/components/FaqSection.tsx

@@ -12,7 +12,7 @@ export function FaqSection({
   className = "",
 }: FaqSectionProps) {
   return (
-    <section className={className}>
+    <section className={`max-w-4xl mx-auto px-6 my-16 ${className}`}>
       <h2 className="text-3xl sm:text-4xl font-bold text-zinc-900 mb-8">{heading}</h2>
       <div className="space-y-4">
         {items.map((faq) => (

package/src/components/GlowCard.tsx

@@ -16,7 +16,7 @@ interface GlowCardProps {
 export function GlowCard({
   children,
   className = "",
-  glowColor = "rgba(20, 184, 166, 0.15)",
+  glowColor = "rgba(var(--seo-accent-rgb), 0.15)",
 }: GlowCardProps) {
   const ref = useRef<HTMLDivElement>(null);
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

package/src/components/GradientText.tsx

@@ -24,8 +24,8 @@ export function GradientText({
 }: GradientTextProps) {
   const gradient =
     variant === "rainbow"
-      ? "linear-gradient(90deg, #06b6d4, #14b8a6, #10b981, #14b8a6, #06b6d4)"
-      : "linear-gradient(90deg, #06b6d4, #14b8a6, #0d9488, #14b8a6, #06b6d4)";
+      ? "linear-gradient(90deg, var(--seo-accent-gradient-from), var(--seo-accent), #10b981, var(--seo-accent), var(--seo-accent-gradient-from))"
+      : "linear-gradient(90deg, var(--seo-accent-gradient-from), var(--seo-accent), var(--seo-accent-dark), var(--seo-accent), var(--seo-accent-gradient-from))";
 
   return (
     <motion.span

package/src/components/Particles.tsx

@@ -51,7 +51,8 @@ interface ParticlesProps {
   ease?: number;
   size?: number;
   refresh?: boolean;
-  /** Hex color for particles. Defaults to teal (#14b8a6). */
+  /** Hex color for particles. Pass your brand accent color. Defaults to teal (#14b8a6).
+   *  CSS custom properties are not supported here (canvas context). */
   color?: string;
   vx?: number;
   vy?: number;

package/src/components/ProofBand.tsx

@@ -15,9 +15,9 @@ export function ProofBand({
   const hasHalf = rating - fullStars >= 0.3;
 
   return (
-    <div className={`text-sm text-zinc-500 mb-8 w-full ${className}`}>
+    <div className={`text-sm text-zinc-500 mb-8 max-w-4xl mx-auto px-6 ${className}`}>
       {/* Stars + rating on its own line */}
-      <div className="flex items-center gap-2 mb-2 justify-center sm:justify-start">
+      <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
@@ -43,7 +43,7 @@ export function ProofBand({
 
       {/* Highlights as a clean vertical list */}
       {highlights.length > 0 && (
-        <div className="flex flex-col gap-1 items-center sm:items-start">
+        <div className="flex flex-col gap-1">
           {highlights.map((h, i) => (
             <div key={i} className="flex items-center gap-2">
               <svg

package/src/components/RemotionClip.tsx

@@ -14,6 +14,10 @@ interface ConceptRevealProps {
   subtitle?: string;
   captions: string[];
   accent?: "teal" | "cyan";
+  /** Override hex color for the primary gradient stop. If set, takes precedence over `accent`. */
+  accentHex?: string;
+  /** Override hex color for the secondary (dark) gradient stop. If set, takes precedence over `accent`. */
+  accentHexDark?: string;
 }
 
 export function ConceptReveal({
@@ -21,6 +25,8 @@ export function ConceptReveal({
   subtitle,
   captions,
   accent = "teal",
+  accentHex,
+  accentHexDark,
 }: ConceptRevealProps) {
   const frame = useCurrentFrame();
   const { fps, durationInFrames } = useVideoConfig();
@@ -42,8 +48,8 @@ export function ConceptReveal({
     extrapolateRight: "clamp",
   });
 
-  const bgA = accent === "teal" ? "#14b8a6" : "#06b6d4";
-  const bgB = accent === "teal" ? "#0d9488" : "#0891b2";
+  const bgA = accentHex ?? (accent === "teal" ? "#14b8a6" : "#06b6d4");
+  const bgB = accentHexDark ?? (accent === "teal" ? "#0d9488" : "#0891b2");
 
   return (
     <AbsoluteFill
@@ -166,6 +172,10 @@ interface RemotionClipProps {
   subtitle?: string;
   captions: string[];
   accent?: "teal" | "cyan";
+  /** Override hex color for the primary gradient stop. If set, takes precedence over `accent`. */
+  accentHex?: string;
+  /** Override hex color for the secondary (dark) gradient stop. If set, takes precedence over `accent`. */
+  accentHexDark?: string;
   durationInFrames?: number;
   fps?: number;
   width?: number;
@@ -186,6 +196,8 @@ export function RemotionClip({
   subtitle,
   captions,
   accent = "teal",
+  accentHex,
+  accentHexDark,
   durationInFrames = 150,
   fps = 30,
   width = 1280,
@@ -209,7 +221,7 @@ export function RemotionClip({
         loop={loop}
         controls
         style={{ width: "100%", height: "100%" }}
-        inputProps={{ title, subtitle, captions, accent }}
+        inputProps={{ title, subtitle, captions, accent, accentHex, accentHexDark }}
       />
     </div>
   );

package/src/components/ShineBorder.tsx

@@ -30,7 +30,8 @@ interface ShineBorderProps {
   borderRadius?: number;
   borderWidth?: number;
   duration?: number;
-  /** Hex color(s) for the shine gradient. Defaults to teal. */
+  /** Hex color(s) for the shine gradient. Pass your brand accent color. Defaults to teal.
+   *  CSS custom properties are not supported here (conic gradient border trick). */
   color?: TColorProp;
   className?: string;
   children: React.ReactNode;

package/src/styles.css

@@ -1,3 +1,24 @@
 /* @m13v/seo-components: import this file in your globals.css to scan component classes */
 /* Usage: @import "@seo/components/src/styles.css"; */
 @source ".";
+
+/*
+ * Accent color tokens. Override in your globals.css to match your brand.
+ * Example for amber brand:
+ *   :root {
+ *     --seo-accent: #f59e0b;
+ *     --seo-accent-light: #fbbf24;
+ *     --seo-accent-dark: #d97706;
+ *     --seo-accent-rgb: 245, 158, 11;
+ *     --seo-accent-gradient-from: #f59e0b;
+ *     --seo-accent-gradient-to: #d97706;
+ *   }
+ */
+:root {
+  --seo-accent: #14b8a6;
+  --seo-accent-light: #2dd4bf;
+  --seo-accent-dark: #0d9488;
+  --seo-accent-rgb: 20, 184, 166;
+  --seo-accent-gradient-from: #06b6d4;
+  --seo-accent-gradient-to: #14b8a6;
+}