Image Reveal
An image reveal component where the image appears and follows the cursor when hovering over any div
Image Mousetrail
Spotlight Cards
Sparkles Effects
Horizontal Scroll
MouseMove
const handleImageHover = useCallback(
(image: ImageData) => {
if (activeImage !== image) {
setActiveImage(image)
// setOpacity(0);
// setScale(0.5);
if (timeoutRef.current) clearTimeout(timeoutRef.current)
timeoutRef.current = setTimeout(() => {
setOpacity(1)
setScale(1)
}, 50)
} else {
setOpacity(1)
setScale(1)
}
},
[activeImage]
)MouseLeave
const handleMouseLeave = useCallback(() => {
setOpacity(0)
setScale(0.5)
if (timeoutRef.current) clearTimeout(timeoutRef.current)
timeoutRef.current = setTimeout(() => {
setActiveImage(null)
}, 300)
}, [])