Hero Highlight

"use client";
import { motion } from "motion/react";
import { HeroHighlight, Highlight } from "@/lab/aceternity/ui/hero-highlight";

export default function HeroHighlightDemo() {
  return (
    <div className="h-full w-full overflow-hidden [container-type:inline-size]">
      <HeroHighlight containerClassName="h-full">
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: [20, -5, 0] }}
          transition={{ duration: 0.5, ease: [0.4, 0.0, 0.2, 1] }}
          className="text-[clamp(1rem,4.6cqw,3rem)] px-4 font-bold text-neutral-700 dark:text-white max-w-4xl leading-relaxed lg:leading-snug text-center mx-auto"
        >
          With insomnia, nothing&apos;s real. Everything is far away. Everything is a{" "}
          <Highlight className="text-black dark:text-white">copy, of a copy, of a copy.</Highlight>
        </motion.h1>
      </HeroHighlight>
    </div>
  );
}