# 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.

Canonical: https://gsapvault.com/effects/grid-shockwave
Live demo: https://gsapvault.com/demos/grid-shockwave/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | grid-animation, stagger, shockwave, micro-interaction, 3d-transforms, mouse-follow |
| Uses Lenis | No |

## Overview

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.

## Features

- 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

## Use Cases

- 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.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Add to your HTML `<head>`:**

```html
<link rel="stylesheet" href="path/to/style.css">
```

**2. Add before closing `</body>` tag:**

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="path/to/script.js"></script>
```

**3. Add the effect HTML anywhere in your `<body>`:**

```html
<div class="shockwave-grid" data-shockwave tabindex="0" role="button"
     aria-label="Shockwave tile wall. Click anywhere to detonate a wave, or press Enter to detonate one from the centre.">
  <div class="shock-tile"></div>
  <div class="shock-tile"></div>
  <div class="shock-tile"></div>
  <!-- repeat: 60 to 96 tiles fills the wall nicely -->
</div>
```

The script measures the real position of every tile, so the wave works with any column count, tile size, or gap. Change the layout freely in CSS; nothing in the JavaScript needs to know about it. The shipped stylesheet uses 12 columns on desktop, 8 below 900px, and 6 below 560px, hiding surplus tiles at narrow widths so the wall never becomes a scroll-length column.

### Options

All options are data attributes on the container element.

| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-shockwave` | (marker) | required | Identifies a container the script should power |
| `data-enabled` | `true`, `false` | `true` | Set `false` to leave the wall static |
| `data-wave-speed` | px per second | `1500` | Wavefront travel speed. Lower reads as a slower, heavier ripple; above ~2500 the stagger stops being visible |
| `data-intensity` | `0` to `1.5` | `1` | Scales the pop. Past ~1.5 neighbouring tiles visually collide at full scale |
| `data-tilt` | degrees | `16` | Maximum 3D tip of each tile away from the epicentre |
| `data-ring` | `true`, `false` | `true` | Expanding ring outline that traces the wavefront |
| `data-proximity` | `true`, `false` | `true` | Cursor-proximity idle field (fine pointers only; never runs on touch) |
| `data-proximity-radius` | px | `150` | Radius of the proximity field around the cursor |
| `data-colors` | comma-separated hex | (stylesheet accent) | Each detonation strikes in the next colour in the list, cycling. Overlapping waves retint the wall tile by tile as each front lands. Omit for a single-colour wall |

### Accessibility

- **Keyboard**: the grid is focusable (`tabindex="0"`, `role="button"`). Enter or Space detonates a wave from the centre of the wall.
- **Reduced motion**: with `prefers-reduced-motion: reduce`, the wall is static and a click or keypress answers with a single gentle opacity pulse. No wave, no tilt, no ring.
- **Touch**: taps detonate natively through pointer events with a movement threshold, so a scroll gesture that starts on the grid passes through without misfiring. The proximity field is skipped entirely on coarse pointers.
- **ARIA**: give the container an `aria-label` describing the interaction, as in the Quick Start markup. The tiles are decorative and need no labels.

### Dependencies

**Required:**
- GSAP 3.12+ (core only, no plugins)

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Grid Shockwave](https://gsapvault.com/effects/grid-shockwave)
- [Effects & Templates Vault (£29 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Hover Underline](https://gsapvault.com/effects/hover-underline.md): Animated link underlines with three GSAP variants: an exit-through slide, a marker-style fill sweep, and a hand-drawn SVG wave. One data attribute per link.
- [3D Card Flip Gallery](https://gsapvault.com/effects/3d-card-flip.md): Team/portfolio cards with 3D flip animation. Hover flip for desktop, tap for touch. Includes staggered entrance and scroll-triggered reveals.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt