perf(Grainient): split useEffect, pause RAF when offscreen/tab hidden

[mohamed-younes16]

perf(Grainient): eliminate WebGL teardown on prop changes + pause RAF when offscreen

Problem

Two performance issues discovered during real-world usage:

1. Full WebGL context teardown on every prop change

The entire component lived inside a single useEffect with all 22 props in the
dependency array. Changing any prop triggered:

• cancelAnimationFrame → RAF stopped
• container.removeChild(canvas) → canvas torn out of the DOM
• new Renderer(...) → fresh WebGL context allocated on the GPU
• new Program(...) → shader recompiled and re-uploaded

A full GPU pipeline rebuild for something as minor as tweaking a color value.
This is most noticeable in the interactive demo — every slider drag caused a
visible flicker and a full context reset.

2. RAF loop ran unconditionally — even when completely offscreen

requestAnimationFrame fired 60 times/sec regardless of visibility. The
fragment shader (running noise(), sin(), mix(), pow() on every pixel,
every frame) kept burning GPU cycles even when scrolled off screen or in a
background tab. In practice: audible fan spin-up when Grainient is used as a
section background on a scrollable page.

Fix

Split into two useEffects:

• Effect 1 ([] deps) — creates renderer, canvas, program, mesh exactly once for the component lifetime
• Effect 2 (prop deps) — only writes to uniform .value properties. Zero GPU cost, no teardown, no flicker

A WeakMap<HTMLDivElement, GrainientCtx> bridges the two effects without strong references that would leak on unmount.

Pause RAF when not needed:

• IntersectionObserver (threshold: 0) — stops the loop the moment the canvas leaves the viewport, resumes when it re-enters
• visibilitychange — stops the loop when the tab is hidden, resumes when the user returns

Result

The interactive demo now updates every parameter (colors, warp, grain, etc.) instantly and completely flicker-free — no context reset, no canvas remount, just a uniform value write. GPU usage drops to zero when the component is offscreen.

• All 4 variants updated (JS-CSS, JS-TW, TS-CSS, TS-TW). Build passes ✓
• Not A breaking change.