Docs

Blend Mouse Trailer

Blend Mouse Trailer

A simple Lazy Mouse Trailer which blends with the content on hover.

Open in

AtlasUI is an open-source library offering a suite of prebuilt animated components for React, Next.js, and Vanilla JS.

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/blend-mouse-trailer.json

Usage

import { BlendMouseTrailer } from "@/components/blend-mouse-trailer";

Define a state to check if the desired component is hovered or not

import { useState } from "react";
 
const [isHovered, setIsHovered] = useState(false);

Track and update the hover state using onMouseEnter and onMouseLeave methods.

<h1
  onMouseEnter={() => setIsHovered(true)}
  onMouseLeave={() => setIsHovered(false)}
  className="text-center text-5xl"
>
  AtlasUI is an open-source library offering a suite of prebuilt animated
  components for React, Next.js, and Vanilla JS.
</h1>

Call the BlendMouseTrailer Component and pass the hovered state as props

<BlendMouseTrailer isHovered={isHovered} />
Blob Mouse TrailerLoki Text Effect