Blend Mouse Trailer

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

ReactHTML

Installation

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

Usage

Define the trailer in your HTML file.

<div class="trailer" id="trailer"></div>

Define the text you want to blend with the trailer onHover. Pass class="hero-text" to the text which you want to blend with the trailer.

<div class="hero-text">
  AtlasUI is an open-source library offering a suite of prebuilt animated
  components for React, Next.js, and Vanilla JS.
</div>
Blob Mouse TrailerLoki Text Effect