Dot Portrait Hero with Particle Image Canvas Animation
Overview
A hero section for React and Next.js where a photo is redrawn as about 30,000 dots in two inks. The cursor blows them away and they spring back, and every few seconds they fly to their places in the next picture.
All the dots start as a cloud of ink across the whole section and rush into the picture, with real overshoot from the springs. After that a slow wave keeps passing through, moving the dots and swelling them as it goes. A blower wanders over the picture until a cursor arrives. Then the cursor blows a hole wherever it moves, a click makes a bigger gust, and the dots spring back.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 113 / Cards
Scratch Card Reveal with Gold Foil on Canvas
On Load · Mouse Move · Drag · On Click
No. 111 / Cards
Water Ripple Image Hover Effect with Canvas
On Load · On Hover · Mouse Move · On Click
No. 109 / Hero
Pluck the Strings Hero Animation with Canvas
On Load · Mouse Move · Drag · On Click
(02)FAQ
Dot Portrait Hero with Particle Image Canvas Animation — FAQ
01What kind of photo works best?
One subject with strong light and dark. Dots gather in the dark parts, so a bright face on a dark ground reads as a dark ground with a pale face. Pass images as an array of src, alt, an optional caption and an optional focusY to choose the crop of a tall photo.
02Can I change the look?
Yes. inks takes two hex colours, one for shadows and one for midtones, and ground sets the paper. dots sets the count at about 1280 by 800, and it scales with the size of the picture. interval sets the seconds between pictures.
03Does it work without a mouse?
The Scatter it button blows the dots apart and moves to the next picture, and focusing it gives a small gust. On a phone, a tap makes a gust and a sideways drag blows the dots, while a vertical swipe scrolls the page.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. Give the stage a height through className. Set a CSS variable named --dot-serif for the heading font, or it uses Georgia. Photos must be same origin or served with CORS headers.
05What happens with reduced motion?
The first picture is plotted once as a still with no running loop, all text shows, and the button moves straight to the next picture.