trix-ui 0.2.0 → 0.2.2

package/templates/sections/modern-hero.tsx

@@ -0,0 +1,1226 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+/* --------------------------------- Types --------------------------------- */
+
+export type GridRunnerBackgroundIntensity = "subtle" | "medium" | "vibrant";
+
+export type GridRunnerAction = {
+  /** Button label */
+  label: string;
+  /** If provided, renders as <a> via Button asChild */
+  href?: string;
+  target?: string;
+  rel?: string;
+  onClick?: () => void;
+  /** Extra classes for the Button */
+  className?: string;
+};
+
+type Point = { x: number; y: number };
+
+type RGBA = { r: number; g: number; b: number; a: number };
+
+type Particle = {
+  id: number;
+  path: Point[];
+  duration: number;
+  delay: number;
+  color: RGBA;
+  size: number;
+  glowIntensity: number;
+};
+
+export type GridRunnerHeroProps = Omit<
+  React.ComponentPropsWithoutRef<"section">,
+  "title"
+> & {
+  /* Content */
+  showBadge?: boolean;
+  badgeText?: string;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+
+  primaryAction?: GridRunnerAction;
+  softAction?: GridRunnerAction;
+
+  /* Layout */
+  minHeight?: number; // px
+
+  /* Grid / Particles */
+  gridSize?: number; // px
+  particleCount?: number;
+  maxParticleCount?: number; // safety clamp
+  seed?: number; // deterministic randomness (stable across renders)
+
+  /** Global speed multiplier for all particle animations. (0.25..4) */
+  particleSpeed?: number;
+
+  /** Cap the generated keyframe points per particle to keep CSS small. (12..80) */
+  maxPathPoints?: number;
+
+  /** Connection range (higher = more connections). Default 8. */
+  connectionRange?: number;
+
+  /** Base size of particles in px. (4..16) */
+  particleSize?: number;
+
+  /** Random size variance added/subtracted from base size. (0..8) */
+  particleSizeVariance?: number;
+
+  /** Overall glow strength multiplier for particles. (0..2.5) */
+  particleGlowStrength?: number;
+
+  /** Shadow ring strength multiplier (the 1px outline). (0..2) */
+  particleRingStrength?: number;
+
+  /** Motion trail length multiplier. (0.5..2.5) */
+  particleTrailLength?: number;
+
+  /** Ghost trail settings */
+  showGhostTrail?: boolean;
+  ghostTrailStrength?: number; // 0..1
+  ghostTrailCount?: number; // 0..4
+  ghostTrailSpacing?: number; // seconds between ghost offsets
+
+  /** Draw connection lines between particles */
+  showConnections?: boolean;
+
+  /* Background layers */
+  backgroundIntensity?: GridRunnerBackgroundIntensity;
+  showMesh?: boolean;
+  showNoise?: boolean;
+  showOrbs?: boolean;
+  showBeams?: boolean;
+
+  /* Accessibility / Motion */
+  reducedMotion?: boolean; // force disable motion
+};
+
+/* -------------------------------- Helpers -------------------------------- */
+
+const clamp = (n: number, min: number, max: number) =>
+  Math.max(min, Math.min(max, n));
+
+function mulberry32(seed: number) {
+  let a = seed >>> 0;
+  return function rand() {
+    a |= 0;
+    a = (a + 0x6d2b79f5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function sanitizeId(id: string) {
+  // React.useId() can contain ":" which isn't great for CSS animation names
+  return id.replace(/[^a-zA-Z0-9_-]/g, "");
+}
+
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    const mql = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (!mql) return;
+    const onChange = () => setReduced(!!mql.matches);
+    onChange();
+    mql.addEventListener?.("change", onChange);
+    return () => mql.removeEventListener?.("change", onChange);
+  }, []);
+  return reduced;
+}
+
+function rgbaToCss(c: RGBA, alphaOverride?: number) {
+  const a = typeof alphaOverride === "number" ? alphaOverride : c.a;
+  return `rgba(${c.r}, ${c.g}, ${c.b}, ${a})`;
+}
+
+function safeNumber(name: string, value: number, fallback: number) {
+  const ok = Number.isFinite(value);
+  if (process.env.NODE_ENV !== "production" && !ok) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[GridRunnerHero] Invalid "${name}" (${value}). Falling back to ${fallback}.`
+    );
+  }
+  return ok ? value : fallback;
+}
+
+function downsamplePath(path: Point[], maxPoints: number) {
+  if (path.length <= maxPoints) return path;
+
+  const out: Point[] = [];
+  const lastIdx = path.length - 1;
+  const step = lastIdx / (maxPoints - 1);
+
+  for (let i = 0; i < maxPoints; i++) {
+    out.push(path[Math.round(i * step)]);
+  }
+
+  // remove consecutive duplicates
+  return out.filter(
+    (p, i) => i === 0 || p.x !== out[i - 1]!.x || p.y !== out[i - 1]!.y
+  );
+}
+
+/* -------------------------- Particle Path Factory ------------------------- */
+
+function generatePath(
+  patternIndex: number,
+  cols: number,
+  rows: number,
+  rand: () => number
+): Point[] {
+  const safeCols = Math.max(cols, 8);
+  const safeRows = Math.max(rows, 8);
+
+  const clampPoint = (p: Point): Point => ({
+    x: clamp(p.x, 1, safeCols - 2),
+    y: clamp(p.y, 1, safeRows - 2),
+  });
+
+  const patterns: Array<() => Point[]> = [
+    // Perimeter clockwise
+    () => {
+      const margin = 2;
+      return [
+        { x: margin, y: margin },
+        { x: safeCols - margin, y: margin },
+        { x: safeCols - margin, y: safeRows - margin },
+        { x: margin, y: safeRows - margin },
+        { x: margin, y: margin },
+      ].map(clampPoint);
+    },
+
+    // Figure-8
+    () => {
+      const cx = Math.floor(safeCols / 2);
+      const cy = Math.floor(safeRows / 2);
+      const r = 4;
+      return [
+        { x: cx - r, y: cy },
+        { x: cx, y: cy - r },
+        { x: cx + r, y: cy },
+        { x: cx, y: cy },
+        { x: cx - r, y: cy },
+        { x: cx, y: cy + r },
+        { x: cx + r, y: cy },
+        { x: cx, y: cy },
+      ].map(clampPoint);
+    },
+
+    // Spiral inward
+    () => {
+      const path: Point[] = [];
+      let x = 1,
+        y = 1;
+      let w = safeCols - 2,
+        h = safeRows - 2;
+
+      while (w > 2 && h > 2) {
+        for (let i = 0; i < w - 1; i++) path.push({ x: x + i, y });
+        for (let i = 0; i < h - 1; i++)
+          path.push({ x: x + w - 1, y: y + i });
+        for (let i = 0; i < w - 1; i++)
+          path.push({ x: x + w - 1 - i, y: y + h - 1 });
+        for (let i = 0; i < h - 1; i++)
+          path.push({ x, y: y + h - 1 - i });
+
+        x += 2;
+        y += 2;
+        w -= 4;
+        h -= 4;
+      }
+
+      return (
+        path.length
+          ? path
+          : [{ x: Math.floor(safeCols / 2), y: Math.floor(safeRows / 2) }]
+      ).map(clampPoint);
+    },
+
+    // Horizontal wave
+    () => {
+      const path: Point[] = [];
+      const baseRow = Math.floor(safeRows / 2) + (patternIndex % 3) - 1;
+      const amp = 2;
+      for (let i = 0; i <= safeCols - 2; i++) {
+        const wave = Math.floor(Math.sin(i / 3) * amp);
+        path.push({ x: i + 1, y: baseRow + wave });
+      }
+      return path.map(clampPoint);
+    },
+
+    // Diagonal zigzag
+    () => {
+      const path: Point[] = [];
+      let x = 2,
+        y = 2;
+      const dir = patternIndex % 2 === 0 ? 1 : -1;
+
+      for (let k = 0; k < Math.min(safeCols + safeRows, 40); k++) {
+        path.push({ x, y });
+        x += 1;
+        y += dir;
+        y = clamp(y, 2, safeRows - 3);
+        if (x >= safeCols - 2) break;
+      }
+      return path.map(clampPoint);
+    },
+
+    // Cross pattern
+    () => {
+      const cx = Math.floor(safeCols / 2);
+      const cy = Math.floor(safeRows / 2);
+      const len = 5;
+      return [
+        { x: cx - len, y: cy },
+        { x: cx, y: cy },
+        { x: cx, y: cy - len },
+        { x: cx, y: cy },
+        { x: cx + len, y: cy },
+        { x: cx, y: cy },
+        { x: cx, y: cy + len },
+        { x: cx, y: cy },
+      ].map(clampPoint);
+    },
+
+    // Random walk
+    () => {
+      const path: Point[] = [];
+      let x =
+        Math.floor(safeCols / 4) +
+        (patternIndex % 2) * Math.floor(safeCols / 2);
+      let y = Math.floor(safeRows / 3);
+      path.push({ x, y });
+
+      const moves = 16;
+      for (let i = 0; i < moves; i++) {
+        const roll = rand();
+        const dir =
+          roll < 0.25
+            ? { dx: 1, dy: 0 }
+            : roll < 0.5
+            ? { dx: -1, dy: 0 }
+            : roll < 0.75
+            ? { dx: 0, dy: 1 }
+            : { dx: 0, dy: -1 };
+
+        x = clamp(x + dir.dx, 1, safeCols - 2);
+        y = clamp(y + dir.dy, 1, safeRows - 2);
+        path.push({ x, y });
+      }
+      return path.map(clampPoint);
+    },
+
+    // L-shaped sweep
+    () => {
+      const startX = patternIndex % 2 === 0 ? 2 : safeCols - 3;
+      const startY = 2;
+      const midY = Math.floor(safeRows / 2);
+      const endX = patternIndex % 2 === 0 ? safeCols - 3 : 2;
+      return [
+        { x: startX, y: startY },
+        { x: startX, y: midY },
+        { x: endX, y: midY },
+      ].map(clampPoint);
+    },
+  ];
+
+  return patterns[patternIndex % patterns.length]();
+}
+
+/* ------------------------------- Main Component ---------------------------- */
+
+export function GridRunnerHero(props: GridRunnerHeroProps) {
+  const {
+    showBadge = true,
+    badgeText = "Grid Runner Hero",
+    title = "Build premium UI, faster.",
+    subtitle = "A clean hero with a subtle grid and tiny particles that run on grid lines.",
+
+    primaryAction = { label: "Get Started" },
+    softAction = { label: "Explore Components" },
+
+    minHeight = 540,
+
+    gridSize: gridSizeProp = 48,
+    particleCount: particleCountProp = 8,
+    maxParticleCount = 24,
+    seed = 1,
+
+    particleSpeed: particleSpeedProp = 1,
+    maxPathPoints: maxPathPointsProp = 28,
+    connectionRange: connectionRangeProp = 8,
+
+    particleSize: particleSizeProp = 8,
+    particleSizeVariance: particleSizeVarianceProp = 2,
+    particleGlowStrength: particleGlowStrengthProp = 1,
+    particleRingStrength: particleRingStrengthProp = 1,
+    particleTrailLength: particleTrailLengthProp = 1,
+
+    showConnections = true,
+
+    showGhostTrail = true,
+    ghostTrailStrength: ghostTrailStrengthProp = 0.6,
+    ghostTrailCount: ghostTrailCountProp = 3,
+    ghostTrailSpacing: ghostTrailSpacingProp = 0.15,
+
+    backgroundIntensity = "vibrant",
+    showMesh = true,
+    showNoise = true,
+    showOrbs = true,
+    showBeams = true,
+
+    reducedMotion: reducedMotionProp,
+
+    className,
+    ...rest
+  } = props;
+
+  const prefersReduced = usePrefersReducedMotion();
+  const reducedMotion = !!reducedMotionProp || prefersReduced;
+
+  const gridSize = clamp(safeNumber("gridSize", gridSizeProp, 48), 16, 128);
+  const particleCount = clamp(
+    safeNumber("particleCount", particleCountProp, 8),
+    0,
+    clamp(maxParticleCount, 0, 64)
+  );
+  const minH = clamp(safeNumber("minHeight", minHeight, 540), 320, 920);
+
+  const particleSpeed = clamp(
+    safeNumber("particleSpeed", particleSpeedProp, 1),
+    0.25,
+    4
+  );
+  const maxPathPoints = clamp(
+    safeNumber("maxPathPoints", maxPathPointsProp, 28),
+    12,
+    80
+  );
+  const connectionRange = clamp(
+    safeNumber("connectionRange", connectionRangeProp, 8),
+    2,
+    40
+  );
+
+  const particleSizeBase = clamp(
+    safeNumber("particleSize", particleSizeProp, 8),
+    4,
+    16
+  );
+  const particleSizeVariance = clamp(
+    safeNumber("particleSizeVariance", particleSizeVarianceProp, 2),
+    0,
+    8
+  );
+  const particleGlowStrength = clamp(
+    safeNumber("particleGlowStrength", particleGlowStrengthProp, 1),
+    0,
+    2.5
+  );
+  const particleRingStrength = clamp(
+    safeNumber("particleRingStrength", particleRingStrengthProp, 1),
+    0,
+    2
+  );
+  const particleTrailLength = clamp(
+    safeNumber("particleTrailLength", particleTrailLengthProp, 1),
+    0.5,
+    2.5
+  );
+
+  const ghostTrailStrength = clamp(
+    safeNumber("ghostTrailStrength", ghostTrailStrengthProp, 0.6),
+    0,
+    1
+  );
+  const ghostTrailCount = clamp(
+    safeNumber("ghostTrailCount", ghostTrailCountProp, 3),
+    0,
+    4
+  );
+  const ghostTrailSpacing = clamp(
+    safeNumber("ghostTrailSpacing", ghostTrailSpacingProp, 0.15),
+    0.05,
+    0.5
+  );
+
+  const uidRaw = React.useId();
+  const uid = React.useMemo(() => sanitizeId(uidRaw), [uidRaw]);
+
+  const containerRef = React.useRef<HTMLElement | null>(null);
+
+  // DOM refs for particles so the canvas can draw EXACTLY at their real position
+  const particleElsRef = React.useRef<(HTMLDivElement | null)[]>([]);
+  React.useEffect(() => {
+    particleElsRef.current.length = particleCount;
+  }, [particleCount]);
+
+  const [metrics, setMetrics] = React.useState(() => ({
+    width: 0,
+    height: 0,
+    cols: 12,
+    rows: 10,
+  }));
+
+  // Measure with ResizeObserver
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      const width = Math.max(1, Math.floor(rect.width));
+      const height = Math.max(1, Math.floor(rect.height));
+      const cols = Math.max(8, Math.floor(width / gridSize));
+      const rows = Math.max(8, Math.floor(height / gridSize));
+      setMetrics((prev) => {
+        if (
+          prev.width === width &&
+          prev.height === height &&
+          prev.cols === cols &&
+          prev.rows === rows
+        )
+          return prev;
+        return { width, height, cols, rows };
+      });
+    };
+
+    update();
+
+    const ro = new ResizeObserver(() => update());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [gridSize]);
+
+  const intensityConfig = React.useMemo(() => {
+    const map: Record<
+      GridRunnerBackgroundIntensity,
+      { opacity: number; blurAmount: number }
+    > = {
+      subtle: { opacity: 0.4, blurAmount: 40 },
+      medium: { opacity: 0.6, blurAmount: 60 },
+      vibrant: { opacity: 0.8, blurAmount: 80 },
+    };
+    return map[backgroundIntensity] ?? map.medium;
+  }, [backgroundIntensity]);
+
+  const palette: Array<{ color: RGBA; glow: number }> = React.useMemo(
+    () => [
+      { color: { r: 255, g: 255, b: 255, a: 0.95 }, glow: 1.2 },
+      { color: { r: 147, g: 197, b: 253, a: 0.9 }, glow: 1.0 },
+      { color: { r: 167, g: 139, b: 250, a: 0.9 }, glow: 1.1 },
+      { color: { r: 251, g: 146, b: 168, a: 0.85 }, glow: 0.9 },
+      { color: { r: 134, g: 239, b: 172, a: 0.9 }, glow: 1.0 },
+      { color: { r: 253, g: 224, b: 71, a: 0.9 }, glow: 1.15 },
+      { color: { r: 252, g: 165, b: 165, a: 0.9 }, glow: 0.95 },
+      { color: { r: 165, g: 180, b: 252, a: 0.9 }, glow: 1.05 },
+    ],
+    []
+  );
+
+  const particles: Particle[] = React.useMemo(() => {
+    const list: Particle[] = [];
+
+    for (let i = 0; i < particleCount; i++) {
+      const colorData = palette[i % palette.length];
+      const localRand = mulberry32((seed + 1013 * (i + 1)) >>> 0);
+
+      // size with variance (stable per particle)
+      const sizeJitter = (localRand() - 0.5) * 2 * particleSizeVariance;
+      const size = clamp(particleSizeBase + sizeJitter, 4, 18);
+
+      // durations staggered but bounded
+      const duration = clamp(
+        5 + (i % 4) * 1.5 + (localRand() - 0.5) * 0.8,
+        3.5,
+        12
+      );
+      const delay = i * 0.6;
+
+      const raw = generatePath(i, metrics.cols, metrics.rows, localRand);
+      const path = downsamplePath(raw, maxPathPoints);
+
+      list.push({
+        id: i,
+        path,
+        duration,
+        delay,
+        color: colorData.color,
+        size,
+        glowIntensity: colorData.glow,
+      });
+    }
+
+    return list;
+  }, [
+    seed,
+    particleCount,
+    palette,
+    metrics.cols,
+    metrics.rows,
+    maxPathPoints,
+    particleSizeBase,
+    particleSizeVariance,
+  ]);
+
+  const cssText = React.useMemo(() => {
+    const backgroundKeyframes = `
+@keyframes grh-gradientShift {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
+  33% { transform: translate(10%, 10%) scale(1.1); opacity: 0.4; }
+  66% { transform: translate(-5%, 5%) scale(0.95); opacity: 0.35; }
+}
+@keyframes grh-gradientPulse {
+  0%, 100% { transform: scale(1); opacity: 0.1; }
+  50% { transform: scale(1.2); opacity: 0.15; }
+}
+@keyframes grh-noiseMove {
+  0%, 100% { transform: translate(0, 0); }
+  10% { transform: translate(-5%, -5%); }
+  20% { transform: translate(-10%, 5%); }
+  30% { transform: translate(5%, -10%); }
+  40% { transform: translate(-5%, 10%); }
+  50% { transform: translate(10%, -5%); }
+  60% { transform: translate(5%, 10%); }
+  70% { transform: translate(-10%, -10%); }
+  80% { transform: translate(10%, 10%); }
+  90% { transform: translate(-5%, 5%); }
+}
+@keyframes grh-float1 {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(30px, -40px); }
+  50% { transform: translate(-20px, -60px); }
+  75% { transform: translate(40px, -30px); }
+}
+@keyframes grh-float2 {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(-40px, 30px); }
+  50% { transform: translate(20px, 50px); }
+  75% { transform: translate(-30px, 20px); }
+}
+@keyframes grh-float3 {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(35px, 25px); }
+  50% { transform: translate(-25px, 45px); }
+  75% { transform: translate(45px, -20px); }
+}
+@keyframes grh-float4 {
+  0%, 100% { transform: translate(0, 0); }
+  33% { transform: translate(-30px, -25px); }
+  66% { transform: translate(25px, -35px); }
+}
+@keyframes grh-beamSlide1 {
+  0% { transform: translateX(0); opacity: 0; }
+  20% { opacity: 1; }
+  80% { opacity: 1; }
+  100% { transform: translateX(100vw); opacity: 0; }
+}
+@keyframes grh-beamSlide2 {
+  0% { transform: translateX(0); opacity: 0; }
+  20% { opacity: 1; }
+  80% { opacity: 1; }
+  100% { transform: translateX(-100vw); opacity: 0; }
+}
+@keyframes grh-beamSlide3 {
+  0% { transform: translateY(0); opacity: 0; }
+  20% { opacity: 1; }
+  80% { opacity: 1; }
+  100% { transform: translateY(-100vh); opacity: 0; }
+}
+@keyframes grh-gridPulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.5; }
+}
+`;
+
+    const particleKeyframes = particles
+      .map((p) => {
+        const pathLen = p.path.length;
+        const segments = Math.max(pathLen - 1, 1);
+        const nameP = `grh-${uid}-p-${p.id}`;
+        const nameT = `grh-${uid}-t-${p.id}`;
+
+        // NOTE: particle position in CSS is TOP-LEFT (we center for canvas via DOM rect)
+        const kfP = p.path
+          .map((pt, idx) => {
+            const pct = (idx / segments) * 100;
+            const isEndpoint = idx === 0 || idx === pathLen - 1;
+            const x = pt.x * gridSize - p.size / 2;
+            const y = pt.y * gridSize - p.size / 2;
+            const s = isEndpoint ? 0.6 : 1;
+            const o = isEndpoint ? 0.2 : 1;
+            return `${pct}% { transform: translate(${x}px, ${y}px) scale(${s}); opacity: ${o}; }`;
+          })
+          .join("\n");
+
+        const kfT = p.path
+          .map((pt, idx) => {
+            const pct = (idx / segments) * 100;
+            let rot = 0;
+            if (idx < pathLen - 1) {
+              const next = p.path[idx + 1];
+              const dx = next.x - pt.x;
+              const dy = next.y - pt.y;
+              rot = Math.atan2(dy, dx) * (180 / Math.PI);
+            }
+            const isEndpoint = idx === 0 || idx === pathLen - 1;
+            const x = pt.x * gridSize - p.size * 2.5 * particleTrailLength;
+            const y = pt.y * gridSize - p.size * 0.25;
+            return `${pct}% { transform: translate(${x}px, ${y}px) rotate(${rot}deg); opacity: ${
+              isEndpoint ? 0 : 0.7
+            }; }`;
+          })
+          .join("\n");
+
+        return `@keyframes ${nameP} {\n${kfP}\n}\n@keyframes ${nameT} {\n${kfT}\n}`;
+      })
+      .join("\n\n");
+
+    return `${backgroundKeyframes}\n${particleKeyframes}`;
+  }, [particles, uid, gridSize, particleTrailLength]);
+
+  const renderAction = (
+    action?: GridRunnerAction,
+    variant: "primary" | "soft" = "primary"
+  ) => {
+    if (!action?.label) return null;
+
+    const isLink = !!action.href;
+    const baseClassName = cn(
+      "rounded-2xl transition-all hover:scale-[1.02]",
+      action.className
+    );
+
+    if (variant === "primary") {
+      const primaryClassName = cn(
+        baseClassName,
+        "group relative overflow-hidden bg-white px-8 text-black font-semibold",
+        "shadow-[0_0_0_1px_rgba(255,255,255,0.1),0_1px_3px_rgba(0,0,0,0.3),0_8px_32px_rgba(0,0,0,0.4)]",
+        "hover:shadow-[0_0_0_1px_rgba(255,255,255,0.2),0_8px_48px_rgba(0,0,0,0.5)]"
+      );
+
+      if (isLink) {
+        return (
+          <Button  size="lg" className={"se"}>
+            <a
+              href={action.href}
+              target={action.target}
+              rel={action.rel}
+              onClick={action.onClick}
+
+            >
+              <span className="relative z-10">{action.label}</span>
+              <span className="absolute inset-0 z-0 bg-gradient-to-r from-white via-blue-50 to-purple-50 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+            </a>
+          </Button>
+        );
+      }
+
+      return (
+        <Button
+          size="lg"
+          onClick={action.onClick}
+          type="button"
+          className={""}
+        >
+          <span className="relative z-10">{action.label}</span>
+          <span className="absolute inset-0 z-0 bg-linear-to-r from-white via-blue-50 to-purple-50 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+        </Button>
+      );
+    }
+
+    const softClassName = cn(
+      baseClassName,
+      "border-white/10 bg-white/5 font-semibold",
+      "shadow-[0_0_0_1px_rgba(255,255,255,0.05),0_1px_3px_rgba(0,0,0,0.2)]",
+      "backdrop-blur-xl hover:border-white/20 hover:bg-white/10",
+      "hover:shadow-[0_0_0_1px_rgba(255,255,255,0.1),0_8px_32px_rgba(0,0,0,0.3)]"
+    );
+
+    if (isLink) {
+      return (
+        <Button  size="lg" variant="outline" className={""}>
+          <a
+            href={action.href}
+            target={action.target}
+            rel={action.rel}
+            onClick={action.onClick}
+          >
+            {action.label}
+          </a>
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        size="lg"
+        variant="soft"
+        onClick={action.onClick}
+        type="button"
+        className={""}
+      >
+        {action.label}
+      </Button>
+    );
+  };
+
+  return (
+    <section
+      ref={(node) => {
+        containerRef.current = node;
+      }}
+      className={cn("relative overflow-hidden bg-transparent", className)}
+      {...rest}
+    >
+      {/* One <style> for the whole instance */}
+      {!reducedMotion && <style dangerouslySetInnerHTML={{ __html: cssText }} />}
+
+      {/* Animated Gradient Mesh Background */}
+      {showMesh && !reducedMotion && (
+        <div className="pointer-events-none absolute inset-0 opacity-30">
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(99,102,241,0.15)_0%,transparent_50%)] animate-[grh-gradientShift_20s_ease-in-out_infinite]" />
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_70%,rgba(168,85,247,0.12)_0%,transparent_50%)] animate-[grh-gradientShift_25s_ease-in-out_infinite_reverse]" />
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(59,130,246,0.1)_0%,transparent_60%)] animate-[grh-gradientPulse_15s_ease-in-out_infinite]" />
+        </div>
+      )}
+
+      {/* Animated Noise Texture */}
+      {showNoise && !reducedMotion && (
+        <div
+          className="pointer-events-none absolute inset-0 opacity-20 mix-blend-soft-light"
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
+            animation: "grh-noiseMove 8s steps(10) infinite",
+          }}
+        />
+      )}
+
+      {/* Floating Light Orbs */}
+      {showOrbs && !reducedMotion && (
+        <div className="pointer-events-none absolute inset-0">
+          <div
+            className="absolute left-[15%] top-[20%] h-64 w-64 rounded-full"
+            style={{
+              background:
+                "radial-gradient(circle, rgba(99,102,241,0.25) 0%, transparent 70%)",
+              filter: `blur(${intensityConfig.blurAmount}px)`,
+              opacity: intensityConfig.opacity,
+              animation: "grh-float1 20s ease-in-out infinite",
+            }}
+          />
+          <div
+            className="absolute right-[20%] top-[40%] h-80 w-80 rounded-full"
+            style={{
+              background:
+                "radial-gradient(circle, rgba(168,85,247,0.2) 0%, transparent 70%)",
+              filter: `blur(${intensityConfig.blurAmount}px)`,
+              opacity: intensityConfig.opacity,
+              animation: "grh-float2 25s ease-in-out infinite",
+            }}
+          />
+          <div
+            className="absolute bottom-[25%] left-[40%] h-72 w-72 rounded-full"
+            style={{
+              background:
+                "radial-gradient(circle, rgba(34,211,238,0.18) 0%, transparent 70%)",
+              filter: `blur(${intensityConfig.blurAmount}px)`,
+              opacity: intensityConfig.opacity,
+              animation: "grh-float3 22s ease-in-out infinite",
+            }}
+          />
+          <div
+            className="absolute right-[10%] bottom-[20%] h-56 w-56 rounded-full"
+            style={{
+              background:
+                "radial-gradient(circle, rgba(236,72,153,0.15) 0%, transparent 70%)",
+              filter: `blur(${intensityConfig.blurAmount}px)`,
+              opacity: intensityConfig.opacity * 0.8,
+              animation: "grh-float4 18s ease-in-out infinite",
+            }}
+          />
+        </div>
+      )}
+
+      {/* Animated Light Beams */}
+      {showBeams && !reducedMotion && (
+        <div className="pointer-events-none absolute inset-0 opacity-20">
+          <div
+            className="absolute left-0 top-0 h-full w-0.5 bg-gradient-to-b from-transparent via-blue-400/40 to-transparent"
+            style={{ animation: "grh-beamSlide1 8s linear infinite" }}
+          />
+          <div
+            className="absolute right-[20%] top-0 h-full w-px bg-gradient-to-b from-transparent via-purple-400/30 to-transparent"
+            style={{ animation: "grh-beamSlide2 10s linear infinite" }}
+          />
+          <div
+            className="absolute bottom-0 left-0 h-0.5 w-full bg-gradient-to-r from-transparent via-cyan-400/40 to-transparent"
+            style={{ animation: "grh-beamSlide3 12s linear infinite" }}
+          />
+        </div>
+      )}
+
+      {/* Grid */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 opacity-40"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px)
+          `,
+          backgroundSize: `${gridSize}px ${gridSize}px`,
+          animation: !reducedMotion ? "grh-gridPulse 4s ease-in-out infinite" : undefined,
+        }}
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 opacity-20"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, rgba(255,255,255,0.12) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(255,255,255,0.12) 1px, transparent 1px)
+          `,
+          backgroundSize: `${gridSize * 4}px ${gridSize * 4}px`,
+        }}
+      />
+
+      {/* Vignette */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0"
+        style={{
+        //   background: `
+        //     radial-gradient(45% 35% at 50% 40%, rgba(255,255,255,0.03) 0%, transparent 70%),
+        //     radial-gradient(90% 90% at 50% 50%, transparent 30%, rgba(0,0,0,0.5) 100%),
+        //     linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.2) 100%)
+        //   `,
+        }}
+      />
+
+      {/* Particles */}
+      {!reducedMotion && (
+        <div aria-hidden className="pointer-events-none absolute inset-0">
+          {particles.map((p) => (
+            <GridParticle
+              key={p.id}
+              uid={uid}
+              particle={p}
+              showGhostTrail={showGhostTrail}
+              ghostTrailStrength={ghostTrailStrength}
+              ghostTrailCount={ghostTrailCount}
+              ghostTrailSpacing={ghostTrailSpacing}
+              speed={particleSpeed}
+              glowStrength={particleGlowStrength}
+              ringStrength={particleRingStrength}
+              trailLength={particleTrailLength}
+              setMainEl={(id, el) => {
+                particleElsRef.current[id] = el;
+              }}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Connection Lines (DOM-locked: perfectly sticks to particles) */}
+      {!reducedMotion && showConnections && (
+        <div aria-hidden className="pointer-events-none absolute inset-0">
+          <ParticleConnections
+            particles={particles}
+            particleElsRef={particleElsRef}
+            connectionRange={connectionRange}
+          />
+        </div>
+      )}
+
+      {/* Content */}
+      <div
+        className={cn(
+          "relative mx-auto flex max-w-4xl flex-col items-center justify-center px-8 py-24 text-center"
+        )}
+        style={{ minHeight: `${minH}px` }}
+      >
+        {showBadge && (
+          <div className="group inline-flex items-center gap-2.5 rounded-full border border-white/10 bg-slate-900/50 px-4 py-1.5 text-xs font-medium text-muted-foreground backdrop-blur-xl transition-all hover:border-white/20 hover:bg-slate-900/70">
+            <span className="relative flex h-2 w-2">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400/60 opacity-75 duration-1000" />
+              <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500/90 shadow-[0_0_12px_rgba(52,211,153,0.5)]" />
+            </span>
+            <span className="text-primary bg-clip-text ">
+              {badgeText}
+            </span>
+          </div>
+        )}
+
+        <h1 className="mt-8 bg-primary bg-clip-text text-balance text-5xl font-bold leading-[1.1] tracking-tight text-transparent sm:text-7xl">
+          {title}
+        </h1>
+
+        <div className="mt-6 max-w-2xl text-pretty text-base leading-relaxed text-stone-400 sm:text-lg">
+          {subtitle}
+        </div>
+
+        <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
+          {renderAction(primaryAction, "primary")}
+          {renderAction(softAction, "soft")}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ------------------------------- Subcomponents ----------------------------- */
+
+const GridParticle = React.memo(function GridParticle({
+  uid,
+  particle,
+  showGhostTrail,
+  ghostTrailStrength,
+  ghostTrailCount,
+  ghostTrailSpacing,
+  speed,
+  glowStrength,
+  ringStrength,
+  trailLength,
+  setMainEl,
+}: {
+  uid: string;
+  particle: Particle;
+  showGhostTrail: boolean;
+  ghostTrailStrength: number;
+  ghostTrailCount: number;
+  ghostTrailSpacing: number;
+  speed: number;
+  glowStrength: number;
+  ringStrength: number;
+  trailLength: number;
+  setMainEl?: (id: number, el: HTMLDivElement | null) => void;
+}) {
+  const animName = `grh-${uid}-p-${particle.id}`;
+  const trailName = `grh-${uid}-t-${particle.id}`;
+  const baseColor = rgbaToCss(particle.color);
+
+  const effectiveDuration = Math.max(0.2, particle.duration / speed);
+
+  // Glow sizes scale with particle size + multiplier
+  const glow1 = 12 * particle.glowIntensity * glowStrength;
+  const glow2 = 24 * particle.glowIntensity * glowStrength;
+  const glow3 = 36 * particle.glowIntensity * glowStrength;
+
+  const ringAlpha = 0.2 * ringStrength;
+
+  // Motion trail dims
+  const trailW = particle.size * 5 * trailLength;
+  const trailH = particle.size * 0.5;
+
+  const ghostOpacities =
+    ghostTrailCount <= 0
+      ? []
+      : Array.from({ length: ghostTrailCount }, (_, i) => {
+          const t = i / Math.max(ghostTrailCount - 1, 1);
+          const o = (1 - t) * ghostTrailStrength;
+          return clamp(o, 0, 1);
+        });
+
+  return (
+    <>
+      {/* Ghost trail */}
+      {showGhostTrail &&
+        ghostOpacities.map((o, idx) => (
+          <div
+            key={`ghost-${particle.id}-${idx}`}
+            className="absolute rounded-full blur-[1px]"
+            style={{
+              width: `${particle.size * 0.8}px`,
+              height: `${particle.size * 0.8}px`,
+              animationName: animName,
+              animationDuration: `${effectiveDuration}s`,
+              animationTimingFunction: "ease-in-out",
+              animationDelay: `${particle.delay - idx * ghostTrailSpacing}s`,
+              animationIterationCount: "infinite",
+              opacity: o,
+              backgroundColor: baseColor,
+              willChange: "transform",
+            }}
+          />
+        ))}
+
+      {/* Main particle (we attach DOM ref here for perfect connection sync) */}
+      <div
+        ref={(el) => setMainEl?.(particle.id, el)}
+        className="absolute"
+        style={{
+          width: `${particle.size}px`,
+          height: `${particle.size}px`,
+          animationName: animName,
+          animationDuration: `${effectiveDuration}s`,
+          animationTimingFunction: "ease-in-out",
+          animationDelay: `${particle.delay}s`,
+          animationIterationCount: "infinite",
+          willChange: "transform",
+        }}
+      >
+        <div
+          className="relative h-full w-full rounded-full"
+          style={{
+            backgroundColor: baseColor,
+            boxShadow: `
+              0 0 0 1px rgba(255,255,255,${ringAlpha}),
+              0 0 ${glow1}px ${baseColor},
+              0 0 ${glow2}px ${baseColor},
+              0 0 ${glow3}px ${baseColor}
+            `,
+          }}
+        >
+          <div className="absolute inset-0 rounded-full bg-gradient-to-br from-white/40 to-transparent" />
+        </div>
+      </div>
+
+      {/* Motion trail */}
+      <div
+        className="absolute"
+        style={{
+          width: `${trailW}px`,
+          height: `${trailH}px`,
+          animationName: trailName,
+          animationDuration: `${effectiveDuration}s`,
+          animationTimingFunction: "ease-in-out",
+          animationDelay: `${particle.delay}s`,
+          animationIterationCount: "infinite",
+          willChange: "transform",
+        }}
+      >
+        <div
+          className="h-full w-full rounded-full blur-[2px]"
+          style={{
+            background: `linear-gradient(90deg, ${baseColor} 0%, transparent 100%)`,
+          }}
+        />
+      </div>
+    </>
+  );
+});
+
+function ParticleConnections({
+  particles,
+  particleElsRef,
+  connectionRange,
+}: {
+  particles: Particle[];
+  particleElsRef: React.RefObject<(HTMLDivElement | null)[]>;
+  connectionRange: number;
+}) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const rafRef = React.useRef<number | null>(null);
+
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const parent = canvas.parentElement;
+    if (!parent) return;
+
+    let dpr = Math.max(1, Math.floor(window.devicePixelRatio || 1));
+
+    const resize = () => {
+      dpr = Math.max(1, Math.floor(window.devicePixelRatio || 1));
+      const w = parent.clientWidth;
+      const h = parent.clientHeight;
+
+      canvas.width = Math.max(1, w * dpr);
+      canvas.height = Math.max(1, h * dpr);
+      canvas.style.width = `${w}px`;
+      canvas.style.height = `${h}px`;
+
+      // draw in CSS pixels
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    };
+
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(parent);
+
+    const animate = () => {
+      const w = parent.clientWidth;
+      const h = parent.clientHeight;
+      ctx.clearRect(0, 0, w, h);
+
+      const parentRect = parent.getBoundingClientRect();
+      const els = particleElsRef.current;
+
+      const positions: Array<{ x: number; y: number; c: RGBA }> = [];
+
+      // Read REAL DOM positions -> lines are perfectly locked to particles
+      for (let i = 0; i < particles.length; i++) {
+        const el = els[i];
+        if (!el) continue;
+
+        const r = el.getBoundingClientRect();
+        const x = r.left + r.width / 2 - parentRect.left;
+        const y = r.top + r.height / 2 - parentRect.top;
+
+        if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
+
+        positions.push({ x, y, c: particles[i]!.color });
+      }
+
+      // Range mapped to layout size so it feels consistent at different hero sizes
+      const base = Math.min(w, h);
+      const maxDistance = Math.max(48, base * (connectionRange / 40));
+
+      for (let i = 0; i < positions.length; i++) {
+        for (let j = i + 1; j < positions.length; j++) {
+          const p1 = positions[i]!;
+          const p2 = positions[j]!;
+
+          const dx = p2.x - p1.x;
+          const dy = p2.y - p1.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+
+          if (dist < maxDistance) {
+            const falloff = 1 - dist / maxDistance;
+            const alpha = falloff * falloff * 0.42;
+
+            const grad = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
+            grad.addColorStop(0, rgbaToCss(p1.c, alpha));
+            grad.addColorStop(1, rgbaToCss(p2.c, alpha));
+
+            ctx.beginPath();
+            ctx.strokeStyle = grad;
+            ctx.lineWidth = 1.5;
+            ctx.moveTo(p1.x, p1.y);
+            ctx.lineTo(p2.x, p2.y);
+            ctx.stroke();
+          }
+        }
+      }
+
+      rafRef.current = requestAnimationFrame(animate);
+    };
+
+    rafRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      ro.disconnect();
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [particles, particleElsRef, connectionRange]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="absolute inset-0 h-full w-full"
+      style={{ mixBlendMode: "screen" }}
+    />
+  );
+}