diff --git a/blog/2024-11-15-playing-with-fire/1-introduction/index.mdx b/blog/2024-11-15-playing-with-fire/1-introduction/index.mdx
index eb904cf..67181ea 100644
--- a/blog/2024-11-15-playing-with-fire/1-introduction/index.mdx
+++ b/blog/2024-11-15-playing-with-fire/1-introduction/index.mdx
@@ -198,9 +198,10 @@ import chaosGameWeightedSource from "!!raw-loader!./chaosGameWeighted";
 
 <CodeBlock language={'typescript'}>{chaosGameWeightedSource}</CodeBlock>
 
-import GasketWeighted from "./GasketWeighted"
-import Canvas from "../src/Canvas"
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import GasketWeighted from "./GasketWeighted";
+import Canvas from "../src/Canvas";
 
 <Canvas width={500} height={500}>
-    <GasketWeighted/>
+    <BrowserOnly>{() => <GasketWeighted/>}</BrowserOnly>
 </Canvas>
\ No newline at end of file
diff --git a/blog/2024-11-15-playing-with-fire/2-transforms/index.mdx b/blog/2024-11-15-playing-with-fire/2-transforms/index.mdx
index fe8f569..2826880 100644
--- a/blog/2024-11-15-playing-with-fire/2-transforms/index.mdx
+++ b/blog/2024-11-15-playing-with-fire/2-transforms/index.mdx
@@ -138,9 +138,10 @@ import blendSource from "!!raw-loader!./blend";
 
 And with that in place, we have enough to render a first full fractal flame:
 
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import Canvas from "../src/Canvas";
 import FlameBlend from "./FlameBlend";
 
 <Canvas width={500} height={500}>
-    <FlameBlend/>
+    <BrowserOnly>{() => <FlameBlend/>}</BrowserOnly>
 </Canvas>
\ No newline at end of file