box-reveal

1import { Button } from "@/components/ui/button";
2import { BoxReveal } from "@/components/magicui/box-reveal";
3 
4export function BoxRevealDemo() {
5  return (
6    <div className="size-full max-w-lg items-center justify-center overflow-hidden pt-8">
7      <BoxReveal boxColor={"#5046e6"} duration={0.5}>
8        <p className="text-[3.5rem] font-semibold">
9          Magic UI<span className="text-[#5046e6]">.</span>
10        </p>
11      </BoxReveal>
12 
13      <BoxReveal boxColor={"#5046e6"} duration={0.5}>
14        <h2 className="mt-[.5rem] text-[1rem]">
15          UI library for{" "}
16          <span className="text-[#5046e6]">Design Engineers</span>
17        </h2>
18      </BoxReveal>
19 
20      <BoxReveal boxColor={"#5046e6"} duration={0.5}>
21        <div className="mt-6">
22          <p>
23            -&gt; 20+ free and open-source animated components built with
24            <span className="font-semibold text-[#5046e6]"> React</span>,
25            <span className="font-semibold text-[#5046e6]"> Typescript</span>,
26            <span className="font-semibold text-[#5046e6]"> Tailwind CSS</span>,
27            and
28            <span className="font-semibold text-[#5046e6]"> Framer Motion</span>
29            . <br />
30            -&gt; 100% open-source, and customizable. <br />
31          </p>
32        </div>
33      </BoxReveal>
34 
35      <BoxReveal boxColor={"#5046e6"} duration={0.5}>
36        <Button className="mt-[1.6rem] bg-[#5046e6]">Explore</Button>
37      </BoxReveal>
38    </div>
39  );
40}