Aurora Blobs Background

"use client";

import { motion, useReducedMotion, type Variants } from "motion/react";

const container: Variants = {
  hidden: {},
  show: { transition: { staggerChildren: 0.12, delayChildren: 0.15 } },
};

const item: Variants = {
  hidden: { opacity: 0, y: 26, filter: "blur(6px)" },
  show: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },
  },
};

export default function BgAuroraBlobs() {
  const reduce = useReducedMotion();

  const drift = (x: number, y: number, s: number, duration: number) =>
    reduce
      ? undefined
      : {
          x: [0, x, 0],
          y: [0, y, 0],
          scale: [1, s, 1],
          transition: {
            duration,
            repeat: Infinity,
            ease: "easeInOut" as const,
          },
        };

  return (
    <section className="relative isolate flex min-h-[640px] w-full items-center justify-center overflow-hidden bg-slate-50 px-6 py-24 dark:bg-slate-950">
      {/* moving aurora field */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 -z-10 overflow-hidden"
      >
        <motion.div
          animate={drift(90, -70, 1.15, 15)}
          className="absolute -left-32 -top-24 h-[30rem] w-[30rem] rounded-full bg-fuchsia-300/50 mix-blend-multiply blur-3xl dark:bg-fuchsia-600/30 dark:mix-blend-screen"
        />
        <motion.div
          animate={drift(-80, 60, 1.2, 18)}
          className="absolute -right-24 top-8 h-[26rem] w-[26rem] rounded-full bg-sky-300/50 mix-blend-multiply blur-3xl dark:bg-sky-500/30 dark:mix-blend-screen"
        />
        <motion.div
          animate={drift(60, 80, 1.1, 21)}
          className="absolute -bottom-24 left-1/3 h-[24rem] w-[24rem] rounded-full bg-violet-300/50 mix-blend-multiply blur-3xl dark:bg-indigo-500/30 dark:mix-blend-screen"
        />
        <motion.div
          animate={drift(-70, -50, 1.18, 16)}
          className="absolute -bottom-16 right-1/4 h-[22rem] w-[22rem] rounded-full bg-emerald-300/40 mix-blend-multiply blur-3xl dark:bg-emerald-500/25 dark:mix-blend-screen"
        />
      </div>

      {/* soft vignette to seat the content */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,transparent_38%,rgba(248,250,252,0.72)_100%)] dark:bg-[radial-gradient(ellipse_at_center,transparent_32%,rgba(2,6,23,0.75)_100%)]"
      />

      <motion.div
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.3 }}
        className="relative mx-auto max-w-2xl text-center"
      >
        <motion.span
          variants={item}
          className="inline-flex items-center gap-2 rounded-full border border-slate-200/70 bg-white/70 px-4 py-1.5 text-sm font-medium text-slate-600 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/5 dark:text-slate-300"
        >
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
          </span>
          Now in open beta
        </motion.span>

        <motion.h1
          variants={item}
          className="mt-6 text-4xl font-semibold tracking-tight text-slate-900 sm:text-6xl dark:text-white"
        >
          Build brighter with living gradients
        </motion.h1>

        <motion.p
          variants={item}
          className="mx-auto mt-5 max-w-xl text-base leading-relaxed text-slate-600 sm:text-lg dark:text-slate-400"
        >
          A soft, ever-moving aurora backdrop that keeps your hero feeling alive
          without stealing attention from the words that matter.
        </motion.p>

        <motion.div
          variants={item}
          className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row"
        >
          <a
            href="#"
            className="group inline-flex items-center gap-2 rounded-full bg-slate-900 px-6 py-3 text-sm font-semibold text-white shadow-lg transition hover:bg-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200 dark:focus-visible:ring-white dark:focus-visible:ring-offset-slate-950"
          >
            Get started free
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
              className="h-4 w-4 transition group-hover:translate-x-0.5"
            >
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </a>
          <a
            href="#"
            className="inline-flex items-center gap-2 rounded-full border border-slate-300 bg-white/60 px-6 py-3 text-sm font-semibold text-slate-700 backdrop-blur transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 dark:border-white/15 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10"
          >
            Watch the demo
          </a>
        </motion.div>
      </motion.div>
    </section>
  );
}