`.
2. `width = element.offsetWidth` (700), `height = element.offsetHeight` (500).
3. `cols = Math.ceil(width / blockSize)` → `ceil(700/25)` = **28**; `rows = Math.ceil(height / blockSize)` → `ceil(500/25)` = **20**. So **28 × 20 = 560 cells**.
4. Loop `row` 0..rows-1, `col` 0..cols-1. For each cell create `
` and:
- `isEmpty = Math.random() < emptyRatio` (30%). `textContent = isEmpty ? "" : getRandomSymbol()`.
- Absolutely position it: `style.width/height = "25px"`, `style.left = col*25 + "px"`, `style.top = row*25 + "px"`.
- Append to the overlay, and push a state object into a `blocks[]` array:
```js
{
element,
x: col*blockSize + blockSize/2, // cell CENTER x (used for distance)
y: row*blockSize + blockSize/2, // cell CENTER y
gridX: col, gridY: row,
highlightEndTime: 0, // timestamp when this cell should turn off
isEmpty,
shouldScramble: !isEmpty && Math.random() < scrambleRatio, // ~25% of filled cells
scrambleInterval: null // holds the setInterval id while scrambling
}
```
5. Append `.grid-overlay` into `element`.
### Pointer interaction (`mousemove` on `.hover-img`)
On every `mousemove`:
1. `rect = element.getBoundingClientRect()`; `mouseX = e.clientX - rect.left`, `mouseY = e.clientY - rect.top`.
2. **Find the single closest cell** by scanning all `blocks` and computing Euclidean distance from the mouse to each cell center `(block.x, block.y)`; keep the minimum.
3. **Guard:** if there is no closest block **or** `closestDistance > detectionRadius` (50px), `return` — nothing happens when the pointer is far from any cell center.
4. `currentTime = Date.now()`. Activate the closest cell:
- `closestBlock.element.classList.add("active")`.
- `closestBlock.highlightEndTime = currentTime + blockLifetime` (now + 300 ms).
- If `closestBlock.shouldScramble && !closestBlock.scrambleInterval`: start `setInterval(() => el.textContent = getRandomSymbol(), scrambleInterval)` (change its glyph every 150 ms) and store the id.
5. **Random neighbor chain (the trail spread):**
- `clusterCount = Math.floor(Math.random() * clusterSize) + 1` → a random integer **1..7**.
- `currentBlock = closestBlock`, `activeBlocks = [closestBlock]`.
- Loop `i` from `0` to `clusterCount-1`:
- Build `neighbors` = all `blocks` **not already** in `activeBlocks` whose grid position is within the 8-cell Moore neighborhood of `currentBlock`: `Math.abs(gridX - currentBlock.gridX) <= 1 && Math.abs(gridY - currentBlock.gridY) <= 1`.
- If `neighbors` is empty, `break`.
- Pick a **random** neighbor. Add `active`, set its `highlightEndTime = currentTime + blockLifetime + i*10` (each successive link lives ~10 ms longer, so the tail fades slightly after the head). If it's a scrambler and not already scrambling, start its scramble interval too.
- Push it to `activeBlocks` and set `currentBlock = randomNeighbor`.
- Because `currentBlock` advances to the just-picked neighbor, this is a **random walk**: each `mousemove` lights the nearest cell then wanders 1–7 steps outward through touching cells, producing an irregular organic blob/trail rather than a neat radius.
### The rAF expiry loop (`updateHighlights`)
One `requestAnimationFrame` loop runs forever:
```js
function updateHighlights() {
const currentTime = Date.now();
blocks.forEach((block) => {
if (block.highlightEndTime > 0 && currentTime > block.highlightEndTime) {
block.element.classList.remove("active"); // turn the tile invisible again
block.highlightEndTime = 0;
if (block.scrambleInterval) {
clearInterval(block.scrambleInterval);
block.scrambleInterval = null;
if (!block.isEmpty) block.element.textContent = getRandomSymbol(); // reset to a fresh symbol
}
}
});
requestAnimationFrame(updateHighlights);
}
updateHighlights();
```
So each lit cell auto-deactivates once `Date.now()` passes its `highlightEndTime` (~300 ms after it was touched), its scramble ticker is cleared, and a scrambler cell is reset to a new static symbol. The cursor continually re-lights cells ahead of it while the loop extinguishes the ones behind → a self-erasing trail.
### Timing / feel summary
- No easing, no interpolation, no transitions. Visibility is a hard `opacity 0↔1` class toggle; the softness of the trail comes from many cells lighting/expiring around the moving pointer.
- Head cells live 300 ms; chained tail cells 300–360 ms. ~25% of touched non-empty cells flicker through the 6 symbols at 150 ms while lit. ~30% of cells are permanently blank, so the trail has gaps (reads as "digital noise", not a solid block).
- Triggered **only** by `mousemove` over the image; there is no load, scroll, or click animation.
## Assets / images
**One hero image**, sized to fill a **700×500 (7:5) landscape box** (`object-fit:cover`; the source asset is a square ~1:1 portrait that gets center-cropped to the landscape box). Role: the central subject the scramble grid overlays and appears to "scan". A stylized, graphic, high-contrast editorial illustration works best. The original is a hand-drawn, ink-and-wash / screenprint-style bust portrait of a young Black woman looking at the camera: she wears a white bucket hat, small gold hoop earrings, and a dark collared jacket over a white top. The palette is a striking two-tone duotone — her skin and clothing rendered almost entirely in bold cobalt/royal blue with near-black shadow linework, set against a flat warm cream/beige background; the hat and inner top read as off-white highlights. Any bold, poster-like portrait at ~7:5 with a single dominant accent color and a plain contrasting background is fine; do not use real brand imagery. Because the black glyph-tiles sit on top of it, an image with strong shapes and high color contrast reads well through the noise.
## Behavior notes
- **Desktop / pointer-driven only** — the whole effect is `mousemove`-based (no touch/click/scroll path in the original).
- The grid is regenerated from `offsetWidth/offsetHeight` at init, so it assumes the fixed 700×500 box; keep that size (or the cell count changes).
- Symbols, empty cells, and scrambler cells are randomized per page load, so the exact noise pattern differs each run — that's expected.
- No reduced-motion branch; the rAF loop always runs. The page background `#e3e3db`, tile background `#1a1a1a`, and glyph color `#e3e3db` must match these values for the look to read correctly.