Interactive Canvas Particle Image Effect

This is an Interactive Canvas Particle Image Effect. It reconstructs standard raster images using thousands of autonomous floating particles. Its function is to create a highly tactile visual experience that reacts to cursor proximity, morphing colors based on hidden alternate image data to remove the static barrier between user and interface.

Specs

• Weight: ~15 KB logic + GSAP dependency (~60 KB).
• Performance: High CPU/GPU demand. Runs requestAnimationFrame with loops over thousands of particles per frame, extracting pixel data via getImageData.
• Theming: Fully customizable through JS object configurations (shapes, radius, jump behavior, edge bouncing).
• Responsiveness: Grid-based layout. Canvas dimensions are strictly fixed upon initialization based on the parent wrapper.
• Web APIs: Heavy reliance on the Canvas API, requestAnimationFrame, FileReader, and XMLHttpRequest for image buffering.
• Graceful Degradation: [!] Minimal. If JS or Canvas fails, the cards render as empty boxes. A standard <img> fallback tag is mandatory for production use.

Anatomy

• HTML (The Skeleton): A minimalist DOM structure. Empty .card__image--inner containers wait as placeholder vessels for Canvas injection.
• CSS (The Skin): Handles the layout matrix and typography styling. It manages absolute positioning for the text layers and hides visual overflows.
• JS (The Nervous System): A strict Object-Oriented structure (App, Canvas, Particles, Particle). It orchestrates an XHR preloader, GSAP entrance timelines, and a continuous mathematical render loop that maps underlying image matrices directly to particle fill colors.

Logic

The architectural elegance lies in how the hover state is calculated. It does not swap DOM elements; it shifts the color lookup matrix based on cursor coordinates.

if (d < this.mouse.radius + particle.radius && this.hovered) {
    this.updateParticleColor(this.imagesData.hovered, particle);
} else {
    this.updateParticleColor(this.imagesData.default, particle);
}

Instead of altering the particle’s physical nature or trajectory, the algorithm dynamically fetches RGB values from a secondary, invisible imageData array strictly where the mouse radius intersects a particle. The rest of the canvas continues reading from the default image matrix.

Feel

Fluid and highly responsive. Moving the cursor over the canvas feels physical, like wiping away dust to reveal a glowing, high-contrast layer beneath. The kinetic energy of the particles provides an organic, breathing quality to an otherwise strict grid layout.