Halftone Image Hover

Details

Bring your images to life with a captivating halftone particle image effect that reacts to user interaction. This component uses a grid of animated dots to reconstruct your image, dispersing and reforming in response to the cursor for a uniquely tactile visual feel. Perfect for creative portfolios, interactive hero banners, and immersive storytelling sites.

As users move their cursor across the image, dots are repelled within a customizable radius, creating fluid, physics-driven motion that draws attention and invites exploration. Fine-tune spacing, color, and scale to achieve your perfect look, and adjust motion properties for everything from subtle shimmer to dramatic scatter.

Features

• Real-time halftone particle animation for engaging interactivity

• Fully customizable dot spacing, scale, and color

• Adjustable repel radius, force, and return speed for tailored motion

• Optimized for smooth performance across modern browsers

• Works with any image, no setup required

Controls

• Image – Upload or select any image to animate in halftone style.

• Dot Spacing – Adjust the distance between each halftone dot.

• Dot Scale – Change the size of the halftone dots.

• Dot Color – Choose the color of the dots for your image effect.

• Repel Radius – Set the area of influence around the cursor.

• Repel Force – Control the strength of the particle push effect.

• Return Force – Adjust how quickly dots return to their original position.

• Max Speed – Limit the maximum movement speed of particles.