Aurora Background

"use client";

import { motion } from "motion/react";
import React from "react";
import { AuroraBackground } from "@/lab/aceternity/ui/aurora-background";

export default function AuroraBackgroundDemo() {
  return (
    <div className="relative h-full w-full overflow-hidden [container-type:inline-size]">
      <AuroraBackground>
        <motion.div
          initial={{ opacity: 0.0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3, duration: 0.8, ease: "easeInOut" }}
          className="relative flex flex-col gap-[2cqw] items-center justify-center px-4"
        >
          <div className="text-[clamp(1.1rem,6cqw,4.5rem)] leading-tight font-bold dark:text-white text-center">
            Background lights are cool you know.
          </div>
          <div className="font-extralight text-[clamp(0.8rem,3.2cqw,2.25rem)] dark:text-neutral-200 py-[1cqw]">
            And this, is chemical burn.
          </div>
          <button className="bg-black dark:bg-white rounded-full w-fit text-white dark:text-black px-4 py-2 text-[clamp(0.7rem,1.6cqw,1rem)]">
            Debug now
          </button>
        </motion.div>
      </AuroraBackground>
    </div>
  );
}