Blend Mouse Trailer Demo

1"use client";
2 
3import { useState } from "react";
4 
5import { BlendMouseTrailer } from "@/registry/react/atlasui/blend-mouse-trailer";
6 
7export const BlendMouseTrailerDemo = () => {
8  const [isHovered, setIsHovered] = useState(false);
9  return (
10    <div className="mx-auto flex h-full w-full max-w-7xl items-center justify-center">
11      <h1
12        onMouseEnter={() => setIsHovered(true)}
13        onMouseLeave={() => setIsHovered(false)}
14        className="text-center text-5xl text-balance"
15      >
16        AtlasUI is an open-source library offering a suite of prebuilt animated
17        components for React, Next.js, and Vanilla JS.
18      </h1>
19 
20      <BlendMouseTrailer isHovered={isHovered} />
21    </div>
22  );
23};