Grid Shockwave
An interactive tile wall where every click detonates a radial shockwave: tiles pop, flash, and tip away from the epicentre in a distance-staggered ring wave, then settle with elastic overshoot.
About This Effect
A click-detonated tile wall built on GSAP core alone, no plugins. Every click or tap becomes an epicentre: a shockwave ripples outward tile by tile, with each tile's delay computed from its real pixel distance to the click point rather than its grid index, so any CSS grid layout works unmodified. As the wavefront passes, tiles pop in scale and translateZ, flash with a purple accent burst, and tip away from the epicentre in 3D before settling back with elastic overshoot, while an expanding ring outline traces the wavefront so the eye can follow it. Rapid double-clicks spawn overlapping waves that visibly interfere, and on fine pointers a subtle cursor-proximity field keeps the wall alive between detonations.
What's Included
- Real-distance wavefront: per-tile delays computed from actual pixel distance to the click point, so any column count or tile size works without configuration
- Layered response to a single click: scale pop, translateZ lift, accent flash keyed to the wavefront, and a 3D tip directed away from the epicentre
- Expanding ring outline that traces the wavefront at exactly the wave's travel speed
- Colour cycling per detonation: pass a list of hex colours and every hit strikes in the next one, with overlapping waves retinting the wall tile by tile as each front lands
- Overlapping waves interfere cleanly: deliberate GSAP overwrite handling lets a new wavefront take over mid-settle tiles at the moment of impact, never leaving a tile stuck
- Elastic settle with distance-based energy falloff, so far tiles pop softer than the epicentre
- Cursor-proximity idle field on fine pointers: nearby tiles lift and tint faintly before the first click, skipped entirely on touch
- Tap-native on mobile via pointer events with a movement threshold, so scroll gestures over the grid never misfire a wave
- Keyboard and reduced-motion support: Enter or Space detonates from the centre, and prefers-reduced-motion users get a static wall with a single gentle opacity pulse per click
Perfect For
- Agency and portfolio hero sections that reward visitors for touching the page
- 404, coming-soon, and waitlist pages with one irresistible interactive toy
- Product launch and event pages built around an energy or impact metaphor
- Interactive backdrops behind headlines on landing pages for games, music, or hardware
- Feature walls and logo grids that respond to clicks instead of sitting inert
How It Works
Tile centre positions are cached from offsetLeft/offsetTop (recomputed lazily after resize) so the wave loop never touches layout. On each click, the script computes every tile's distance to the epicentre and schedules two delayed gsap.to() tweens per tile: a keyframed scale/translateZ/rotation pop that settles with elastic.out, and a fast-decaying accent flash on a CSS custom property, with delay equal to distance divided by wave speed and amplitude attenuated by distance.
Because overwrite: 'auto' resolves when a tween starts rendering, after its delay, overlapping waves take over each tile exactly when the new wavefront arrives, which is what makes hammered clicks interfere without stuck tiles. The ring overlay is a linear-eased scale tween sized to match the wavefront's travel, the proximity field runs on gsap.quickTo instances that only animate properties the wave never touches, and gsap.matchMedia routes coarse pointers past the proximity field and reduced-motion users to a single opacity pulse.