diff --git a/dev-environment/package.json b/dev-environment/package.json
index 4f95395..e9b14f6 100644
--- a/dev-environment/package.json
+++ b/dev-environment/package.json
@@ -14,7 +14,7 @@
     "@types/react-dom": "18.2.7",
     "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",
-    "gleamy": "1.1.4",
+    "gleamy": "1.1.5",
     "next": "13.4.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/packages/gleamy/package.json b/packages/gleamy/package.json
index 0caff10..5d21a60 100644
--- a/packages/gleamy/package.json
+++ b/packages/gleamy/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gleamy",
   "description": "Create a reactive shiny element in different materials",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "license": "MIT",
   "private": false,
   "sideEffects": false,
diff --git a/packages/gleamy/src/lib/components/base-materials/GradientMaterial.tsx b/packages/gleamy/src/lib/components/base-materials/GradientMaterial.tsx
index 8781d3a..2cc8198 100644
--- a/packages/gleamy/src/lib/components/base-materials/GradientMaterial.tsx
+++ b/packages/gleamy/src/lib/components/base-materials/GradientMaterial.tsx
@@ -2,7 +2,6 @@ import { type FC, useEffect, useCallback, useRef, useContext } from 'react';
 import { setDPI } from '../../utils/setDPI';
 import { type TStaticGradient, type TDynamicGradient } from '../../../types';
 import { GleamyContext } from '../../provider';
-import { drawMaterial } from '../../utils/drawMaterial';
 
 export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
   animator,
@@ -237,11 +236,31 @@ export const GradientMaterial: FC<TStaticGradient | TDynamicGradient> = ({
   ]);
 
   useEffect(() => {
-    if (rendering) {
-      const fps = gleamyProvider?.fps || 60;
-      drawMaterial({ drawFunction: render, fps });
+    const fps = gleamyProvider?.fps || 60;
+
+    let animationFrameId = 0;
+    const interval = 1000 / fps;
+    let now;
+    let then = Date.now();
+    let delta;
+
+    function draw() {
+      now = Date.now();
+      delta = now - then;
+
+      if (delta > interval) {
+        then = now - (delta % interval);
+        rendering && render();
+      }
+      animationFrameId = window.requestAnimationFrame(draw);
     }
-  }, [gleamyProvider, render, rendering]);
+
+    draw();
+
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [props]);
 
   return (
     <canvas
diff --git a/packages/gleamy/src/lib/components/base-materials/ParticleMaterial.tsx b/packages/gleamy/src/lib/components/base-materials/ParticleMaterial.tsx
index fb1b52b..0cb5a44 100644
--- a/packages/gleamy/src/lib/components/base-materials/ParticleMaterial.tsx
+++ b/packages/gleamy/src/lib/components/base-materials/ParticleMaterial.tsx
@@ -2,7 +2,6 @@ import { type FC, useEffect, useCallback, useContext, useRef } from 'react';
 import { setDPI } from '../../utils/setDPI';
 import { type TParticle } from '../../../types';
 import { GleamyContext } from '../../provider';
-import { drawMaterial } from '../../utils/drawMaterial';
 
 interface CreateParticles {
   depth: number;
@@ -251,11 +250,31 @@ export const ParticleMaterial: FC<TParticle> = ({
   ]);
 
   useEffect(() => {
-    if (rendering) {
-      const fps = gleamyProvider?.fps || 60;
-      drawMaterial({ drawFunction: render, fps });
+    const fps = gleamyProvider?.fps || 60;
+
+    let animationFrameId = 0;
+    const interval = 1000 / fps;
+    let now;
+    let then = Date.now();
+    let delta;
+
+    function draw() {
+      now = Date.now();
+      delta = now - then;
+
+      if (delta > interval) {
+        then = now - (delta % interval);
+        rendering && render();
+      }
+      animationFrameId = window.requestAnimationFrame(draw);
     }
-  }, [gleamyProvider, render, rendering]);
+
+    draw();
+
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [props]);
 
   return (
     <canvas
diff --git a/packages/gleamy/src/lib/utils/drawMaterial.ts b/packages/gleamy/src/lib/utils/drawMaterial.ts
deleted file mode 100644
index dc39130..0000000
--- a/packages/gleamy/src/lib/utils/drawMaterial.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-interface DrawMaterial {
-  drawFunction: () => void;
-  fps: number;
-}
-
-export const drawMaterial = ({ drawFunction, fps }: DrawMaterial) => {
-  const interval = 1000 / fps;
-  let now;
-  let then = Date.now();
-  let delta;
-
-  const draw = () => {
-    requestAnimationFrame(draw);
-
-    now = Date.now();
-    delta = now - then;
-
-    if (delta > interval) {
-      then = now - (delta % interval);
-      drawFunction();
-    }
-  };
-
-  draw();
-};