Reveal on Hover
NewPremiumText that reveals an image on hover, following the cursor position with spring animations.
effectshoverrevealimagecursor
Installation
Terminalbash
npx motioncraft add reveal-on-hoverUsage
reveal-on-hover.tsxtsx
import { RevealOnHover } from "@/components/effects/reveal-on-hover";
<RevealOnHover text="Hover Me" imageSrc="/reveal.jpg" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | — | Display text |
| imageSrc* | string | — | Image URL to reveal |
| imageAlt | string | — | Image alt text |
| imageWidth | number | 300 | Revealed image width |
| imageHeight | number | 400 | Revealed image height |
| className | string | — | Additional CSS classes |
Related Components
Custom Cursor
Custom cursor replacement with smooth trailing and hover state changes.
Fluid Cursor
NewMetaball-style cursor with trailing blobs that merge and separate. Direction-aware coloring with blend mode effects.
Magnetic Button
Button that magnetically attracts toward the cursor on hover.
Text Distortion
NewCanvas-based text that warps and distorts on hover with horizontal slice displacement.