fix(Grainient): render initial frame in setSize to prevent flicker

[anonymousRecords]

Problem

The Grainient component flickers on mount. When the component mounts, setSize() is called to configure the canvas dimensions — but renderer.render() only runs inside the requestAnimationFrame loop. This means the canvas stays blank for ~1 frame between mount and the first rAF tick, causing a visible flash against the page background.

Root Cause

renderer.render() was only called inside the animation loop, so the canvas stays blank until the next rAF tick fires.

  const setSize = () => {                                                
    renderer.setSize(width, height);                                                                                                     
    res[0] = gl.drawingBufferWidth;            
    res[1] = gl.drawingBufferHeight;                                                                                                     
    // ❌ No render here — canvas is blank until next rAF                
};           

Fix

Added renderer.render({ scene: mesh }) inside setSize() so the canvas draws immediately whenever the size is set.

  const setSize = () => {                                                                                                                
    renderer.setSize(width, height);                                     
    res[0] = gl.drawingBufferWidth;                          
    res[1] = gl.drawingBufferHeight;           
    renderer.render({ scene: mesh }); // ✅ Render immediately
  };        

This fix is applied to all 4 variants of the Grainient component (JS/TS × CSS/Tailwind).

▎ Note: The same issue exists in Plasma and other OGL-based components — a follow-up PR will address those.

Preview

AS-IS

TO-BE