fix(Lightning, RippleGrid): cancel the render loop on cleanup

[noron12234]

The problem

Lightning and RippleGrid each run a self-scheduling requestAnimationFrame loop and never cancel it:

const render = () => {
  ...
  gl.drawArrays(gl.TRIANGLES, 0, 6);
  requestAnimationFrame(render);      // schedules itself forever
};
requestAnimationFrame(render);

return () => {
  window.removeEventListener('resize', resizeCanvas);   // the loop is not touched
};

So the loop outlives the component. RippleGrid makes it starker — its cleanup drops the WebGL context and removes the canvas, and the loop then keeps calling renderer.render(...) on a context that has been deliberately lost.

Lightning has a second problem on top. Its effect depends on [hue, xOffset, speed, intensity, size], so every prop change re-runs the effect and starts another loop without stopping the previous one.

Measurement

Lightning in a stock Vite React app, with requestAnimationFrame wrapped to count callbacks per second:

	current main	this PR
1 mount, no prop changes	~60/s	~60/s
after changing hue 4 times	~300/s (5 loops)	~60/s
after unmounting	~305/s (all 5 still running)	~0/s

The middle row is the prop-change pile-up; the last row is the leak. On main the component is gone from the tree and five render loops are still driving WebGL every frame.

RippleGrid has the identical loop shape and cleanup omission — I verified that by reading all four variants, but I could not get it to initialise inside my minimal probe harness, so I am not claiming a measured number for it.

The change

Capture the frame id and cancel it in the cleanup:

let animationFrameId;
const render = () => {
  ...
  animationFrameId = requestAnimationFrame(render);
};
animationFrameId = requestAnimationFrame(render);

return () => {
  cancelAnimationFrame(animationFrameId);
  window.removeEventListener('resize', resizeCanvas);
};

Nothing else changes. On Lightning this also means a prop change now cancels the old loop before the effect re-runs, which is what the existing cleanup was always supposed to do.

Scope

Both components, all four variants — 8 files, +32/-16.

Verification

• The measurement above, before and after.
• npx tsc --noEmit: no errors mentioning either component.
• npx prettier --check clean on all eight files.
• npx vite build passes.

Found by scanning effects that create a resource without releasing it in the same effect. Three more components (SplashCursor, FallingText, Crosshair) show the same shape; I left them out of this PR so the diff stays to the two I could reason about fully, and can follow up if you want them.

[Copilot]

Pull request overview

This PR fixes a WebGL render-loop resource leak in the Lightning and RippleGrid backgrounds by tracking the requestAnimationFrame id and canceling it during effect cleanup, preventing render loops from continuing after unmount (and preventing loop pile-up on Lightning prop changes).

Changes:

• Store the requestAnimationFrame return value in an animationFrameId variable.
• Replace self-scheduling requestAnimationFrame(render) calls with assignments to animationFrameId.
• Call cancelAnimationFrame(animationFrameId) in the React effect cleanup for all four variants of both components.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/ts-tailwind/Backgrounds/RippleGrid/RippleGrid.tsx	Track/cancel the RAF loop during cleanup to stop rendering after unmount.
src/ts-tailwind/Backgrounds/Lightning/Lightning.tsx	Track/cancel the RAF loop during cleanup to prevent stacked loops across prop changes/unmount.
src/ts-default/Backgrounds/RippleGrid/RippleGrid.tsx	Same RAF cancellation fix for the TS default variant.
src/ts-default/Backgrounds/Lightning/Lightning.tsx	Same RAF cancellation fix for the TS default variant.
src/tailwind/Backgrounds/RippleGrid/RippleGrid.jsx	Same RAF cancellation fix for the Tailwind JS variant.
src/tailwind/Backgrounds/Lightning/Lightning.jsx	Same RAF cancellation fix for the Tailwind JS variant.
src/content/Backgrounds/RippleGrid/RippleGrid.jsx	Same RAF cancellation fix for the content JS variant.
src/content/Backgrounds/Lightning/Lightning.jsx	Same RAF cancellation fix for the content JS variant.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.