Interactive Halftone Image
An image rendered live as a halftone dot grid the pointer drags through: dots swell, smear along the stroke and split into misregistered ink at speed, then settle back elastically.
About This Effect
A photograph rebuilt live as a halftone dot grid on a single canvas, running on GSAP's core ticker with zero plugins. Every dot is sized from the image's sampled luminance, so any same-origin photo drops straight in with no preprocessing.
Read the full effect overview
The pointer drags an ink wake through the print: dots swell with pointer speed, elongate and smear along the stroke, and above a velocity threshold split into misregistered cyan and orange ink layers, like a print pulled mid-pass. Lift off and the whole wake settles back with an elastic wave.
What's Included
- Live luminance sampling: the image is drawn to an offscreen canvas at grid resolution and read once, so any same-origin photo becomes a halftone with no preprocessing
- Velocity-reactive wake with three layered responses to one input: dot swell, directional smear, and misregistered ink splitting, all scaled by pointer speed
- Elastic settle driven by per-dot springs in typed arrays, so thousands of dots relax with natural overshoot and no per-dot tweens
- One-off print pass on load: a sweep resolves the image from scattered noise into the finished halftone in about a second
- Autonomous idle sweep keeps the print alive after a few seconds without input; any real pointer or touch input takes over instantly
- Touch-first pointer events, so a finger drag drives exactly the same wake as a mouse
- Batched rendering: the entire grid draws in at most three canvas fills per frame, with the resolution capped at 2x DPR
- Configured entirely through data attributes: cell size, ink colour, paper colour and wake strength
Perfect For
- Portfolio and agency hero portraits with a centrepiece visitors touch rather than scroll past
- Music, zine and editorial landing pages with a genuine print-shop texture
- Speaker, artist and founder profile pages where one photograph carries the whole design
- About and team pages with portraits that answer the visitor's pointer
- Campaign microsites built around a single striking image
How It Works
The source image is drawn to an offscreen canvas at one pixel per grid cell and sampled once with getImageData; each cell's luminance sets its resting dot radius, so bright areas print as big paper dots on the dark ground. A single gsap.ticker callback runs everything: pointer velocity is stamped into typed-array fields for swell, smear and ink split, per-dot springs relax those fields back toward rest with a slight elastic overshoot, and the grid is redrawn as batched Path2D fills, ink layers under paper. The load-in print pass and the idle sweep are ordinary GSAP tweens driving the same wake function as the real pointer, so every input shares one code path.