From 73c9f708c2a8f80fe884cbbf7c14220c5b60021a Mon Sep 17 00:00:00 2001
From: anonymousRecords <a.Records2022@gmail.com>
Date: Mon, 30 Mar 2026 16:50:00 +0900
Subject: [PATCH] fix(Grainient): render initial frame in setSize to prevent
 mount flicker

---
 src/content/Backgrounds/Grainient/Grainient.jsx     | 3 ++-
 src/tailwind/Backgrounds/Grainient/Grainient.jsx    | 1 +
 src/ts-default/Backgrounds/Grainient/Grainient.tsx  | 1 +
 src/ts-tailwind/Backgrounds/Grainient/Grainient.tsx | 1 +
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/content/Backgrounds/Grainient/Grainient.jsx b/src/content/Backgrounds/Grainient/Grainient.jsx
index 8683ac07..fa75c19e 100644
--- a/src/content/Backgrounds/Grainient/Grainient.jsx
+++ b/src/content/Backgrounds/Grainient/Grainient.jsx
@@ -186,6 +186,7 @@ const Grainient = ({
       const res = program.uniforms.iResolution.value;
       res[0] = gl.drawingBufferWidth;
       res[1] = gl.drawingBufferHeight;
+      renderer.render({ scene: mesh });
     };
 
     const ro = new ResizeObserver(setSize);
@@ -238,4 +239,4 @@ const Grainient = ({
   return <div ref={containerRef} className={`grainient-container ${className}`.trim()} />;
 };
 
-export default Grainient;
+export default Grainient;
\ No newline at end of file
diff --git a/src/tailwind/Backgrounds/Grainient/Grainient.jsx b/src/tailwind/Backgrounds/Grainient/Grainient.jsx
index 293d988b..cd0ec28a 100644
--- a/src/tailwind/Backgrounds/Grainient/Grainient.jsx
+++ b/src/tailwind/Backgrounds/Grainient/Grainient.jsx
@@ -185,6 +185,7 @@ const Grainient = ({
       const res = program.uniforms.iResolution.value;
       res[0] = gl.drawingBufferWidth;
       res[1] = gl.drawingBufferHeight;
+      renderer.render({ scene: mesh });
     };
 
     const ro = new ResizeObserver(setSize);
diff --git a/src/ts-default/Backgrounds/Grainient/Grainient.tsx b/src/ts-default/Backgrounds/Grainient/Grainient.tsx
index 69d43d33..eb9d3b59 100644
--- a/src/ts-default/Backgrounds/Grainient/Grainient.tsx
+++ b/src/ts-default/Backgrounds/Grainient/Grainient.tsx
@@ -212,6 +212,7 @@ const Grainient: React.FC<GrainientProps> = ({
       const res = (program.uniforms.iResolution as { value: Float32Array }).value;
       res[0] = gl.drawingBufferWidth;
       res[1] = gl.drawingBufferHeight;
+      renderer.render({ scene: mesh });
     };
 
     const ro = new ResizeObserver(setSize);
diff --git a/src/ts-tailwind/Backgrounds/Grainient/Grainient.tsx b/src/ts-tailwind/Backgrounds/Grainient/Grainient.tsx
index bee21048..ff191851 100644
--- a/src/ts-tailwind/Backgrounds/Grainient/Grainient.tsx
+++ b/src/ts-tailwind/Backgrounds/Grainient/Grainient.tsx
@@ -211,6 +211,7 @@ const Grainient: React.FC<GrainientProps> = ({
       const res = (program.uniforms.iResolution as { value: Float32Array }).value;
       res[0] = gl.drawingBufferWidth;
       res[1] = gl.drawingBufferHeight;
+      renderer.render({ scene: mesh });
     };
 
     const ro = new ResizeObserver(setSize);