Animated Gradient

npx @galactrex/ui add animated-gradient

import { AnimatedGradient } from "@/components/galactrex/animated-gradient";

<section className="relative overflow-hidden">
  <AnimatedGradient />
  <h1 className="relative">Welcome</h1>
</section>

"use client";
import { useRef } from "react";
import { cx } from "@/components/galactrex/motion/cx";
import { useReducedMotion } from "@/components/galactrex/motion/use-reduced-motion";
import { useVisible } from "@/components/galactrex/motion/use-visible";

export type AnimatedGradientProps = {
  /** two or more CSS colours; defaults to the background lit by the theme spectrum's blue and violet */
  colors?: readonly string[];
  /** direction in degrees */
  angle?: number;
  /** seconds for one pass; the gradient flows there and back */
  duration?: number;
  /** strength over the parent's own background, 0 to 1 */
  opacity?: number;
  className?: string;
};

const QUIET = ["var(--gxui-bg)", "var(--gxui-spectrum-2)", "var(--gxui-spectrum-3)", "var(--gxui-bg)"] as const;

/** A linear gradient that drifts slowly across its colours, so a section feels lit rather than painted. Pure CSS.
    Place it inside a relative parent, behind content; keep text contrast in mind when you pass bright colours.
    Holds still offscreen and with reduced motion. */
export function AnimatedGradient({ colors = QUIET, angle = 120, duration = 14, opacity = 0.5, className }: AnimatedGradientProps) {
  const ref = useRef<HTMLDivElement>(null);
  const reduced = useReducedMotion();
  const visible = useVisible(ref);
  const stops = colors.length > 1 ? colors : QUIET;
  return (
    <div
      ref={ref}
      aria-hidden
      className={cx("pointer-events-none absolute inset-0", className)}
      style={{
        opacity: Math.min(1, Math.max(0, opacity)),
        backgroundImage: `linear-gradient(${angle}deg, ${[...stops, stops[0]].join(", ")})`,
        backgroundSize: "300% 300%",
        backgroundPosition: "0% 50%",
        animation: !reduced && visible && duration > 0 ? `gxui-gradient-flow ${duration}s ease-in-out infinite alternate` : undefined,
      }}
    />
  );
}