pmndrs · Nyx-abu · Jul 11, 2026
diff --git a/docs/API/testing.mdx b/docs/API/testing.mdx
@@ -116,4 +116,4 @@ If you want to learn more about React Three Test Renderer you can checkout the r
 - Check the color of the Box we created
 - Check the rotation using the `advanceFrames` method.
 
-<Codesandbox id="hqut4" tests />
+<Codesandbox id="hqut4" tests /  screenshot_url="/images/sandboxes/hqut4.png" />
diff --git a/docs/advanced/scaling-performance.mdx b/docs/advanced/scaling-performance.mdx
@@ -14,7 +14,7 @@ But if the moving parts in your scene are allowed to come to rest, then it would
 
 Open the sandbox below in a full screen and look into dev tools, you will see that it is completely idle when nothing is going on. It renders only when you move the model.
 
-<Codesandbox id="wvgxp" />
+<Codesandbox id="wvgxp" /  screenshot_url="/images/sandboxes/wvgxp.png" />
 
 All you need to do is set the canvas `frameloop` prop to `demand`. It will render frames whenever it detects prop changes throughout the component tree.
 
@@ -101,7 +101,7 @@ THREE.ColorManagement.legacyMode = false
 
 If you access a resource via useLoader with the same URL, throughout the component tree, then you will always refer to the same asset and thereby re-use it. This is especially useful if you run your GLTF assets through [GLTFJSX](https://github.com/pmndrs/gltfjsx) because it links up geometries and materials and thereby creates re-usable models.
 
-<Codesandbox id="dix1y" />
+<Codesandbox id="dix1y" /  screenshot_url="/images/sandboxes/dix1y.png" />
 
 ```jsx
 function Shoe(props) {
@@ -121,7 +121,7 @@ function Shoe(props) {
 
 Each mesh is a draw call, you should be mindful of how many of these you employ: no more than 1000 as the very maximum, and optimally a few hundred or less. You can win performance back by reducing draw calls, for example by instancing repeating objects. This way you can have hundreds of thousands of objects in a single draw call.
 
-<Codesandbox id="h873k" />
+<Codesandbox id="h873k" /  screenshot_url="/images/sandboxes/h873k.png" />
 
 Setting up instancing is not so hard, consult [the three.js docs](https://threejs.org/docs/#api/en/objects/InstancedMesh) if you need help.
 
@@ -153,7 +153,7 @@ Sometimes it can be beneficial to reduce the quality of an object the further it
 
 Scroll in and out to see the effect:
 
-<Codesandbox id="12nmp" />
+<Codesandbox id="12nmp" /  screenshot_url="/images/sandboxes/12nmp.png" />
 
 There is a small component in Drei called `<Detailed />` which sets up LOD without boilerplate. You load or prepare a couple of resolution stages, as many as you like, and then give them the same amount of distances from the camera, starting from highest quality to lowest.
 
@@ -182,7 +182,7 @@ The following sandbox goes through three loading stages:
 - Low quality
 - High quality
 
-<Codesandbox id="7duy8" />
+<Codesandbox id="7duy8" /  screenshot_url="/images/sandboxes/7duy8.png" />
 
 And this is how easy it is to achieve it, you can nest suspense and even use it as a fallback:
 
@@ -257,7 +257,7 @@ Websites like Sketchfab make sure the scene is always fluid, running at 60 fps,
 
 The following sandbox uses expensive lights and post-processing. In order for it to run relatively smooth it will scale the pixel ratio on movement and also skip heavy post-processing effects like ambient occlusion.
 
-<Codesandbox id="pz0q6" />
+<Codesandbox id="pz0q6" /  screenshot_url="/images/sandboxes/pz0q6.png" />
 
 When you inspect the state model you will notice an object called `performance`.
 

diff --git a/docs/getting-started/community-r3f-components.mdx b/docs/getting-started/community-r3f-components.mdx
@@ -51,7 +51,7 @@ This page showcases some React Three Fiber/r3f community components that have no
   </li>
   <li>
     [Luma Gaussian Splats](https://cdn-luma.com/public/lumalabs.ai/luma-web-library/0.2/fefe154/index.html#react-three-fiber)
-    <Codesandbox id="h2fkgq" />
+    <Codesandbox id="h2fkgq" /  screenshot_url="/images/sandboxes/h2fkgq.png" />
   </li>
   <li>
     [NYTimes/three-loader-3dtiles](https://github.com/nytimes/three-loader-3dtiles/blob/dev/examples/r3f/src/index.tsx)
@@ -60,11 +60,11 @@ This page showcases some React Three Fiber/r3f community components that have no
   </li>
   <li>
     [Looking Glass](https://docs.lookingglassfactory.com/developer-tools/webxr/react-three-fiber)
-    <Codesandbox id="xzlmzz" screenshot_url="https://blog.lookingglassfactory.com/content/images/size/w2000/2024/05/LKG-32-Spatial-Display-Portrait-Cleopatra-1.jpg"/> 
+    <Codesandbox id="xzlmzz" screenshot_url="https://blog.lookingglassfactory.com/content/images/size/w2000/2024/05/LKG-32-Spatial-Display-Portrait-Cleopatra-1.jpg"/ /> 
   </li> 
   <li>
     [Theatre-js](https://github.com/theatre-js/theatre)
-    <Codesandbox id="6xfrsv" screenshot_url="https://www.theatrejs.com/images/docs/0.5/manual/studio/ui.png" />
+    <Codesandbox id="6xfrsv" screenshot_url="https://www.theatrejs.com/images/docs/0.5/manual/studio/ui.png" / />
   </li>
   <li>
     [Farazz/CustomShaderMaterial](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial)
@@ -78,11 +78,11 @@ This page showcases some React Three Fiber/r3f community components that have no
   </li>
   <li>
     [utsuboco/r3f-perf](https://github.com/utsuboco/r3f-perf)
-    <Codesandbox id="ykfpwf" />
+    <Codesandbox id="ykfpwf" /  screenshot_url="/images/sandboxes/ykfpwf.png" />
   </li>
   <li>
     [pmndrs/THREE.MeshLine](https://github.com/pmndrs/meshline)
-    <Codesandbox id="vl221" />
+    <Codesandbox id="vl221" /  screenshot_url="/images/sandboxes/vl221.png" />
   </li>
   <li>
     [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare)

diff --git a/docs/getting-started/examples.mdx b/docs/getting-started/examples.mdx
@@ -72,7 +72,7 @@ nav: 3
     <p>[![cards demo](https://pmndrs.github.io/examples/cards/thumbnail.webp)](https://pmndrs.github.io/examples/cards) -- <span>cards</span>, <span>image</span></p>
   </li>
   <li>
-    <Codesandbox id="3ywzzx" tags={['refraction']} />
+    <Codesandbox id="3ywzzx" tags={['refraction']} /  screenshot_url="/images/sandboxes/3ywzzx.png" />
   </li>
   <li>
     <p>[![image-gallery demo](https://pmndrs.github.io/examples/image-gallery/thumbnail.webp)](https://pmndrs.github.io/examples/image-gallery) -- <span>reflections</span>, <span>annotations</span></p>
@@ -370,7 +370,7 @@ nav: 3
     <p>[![basic-demo demo](https://pmndrs.github.io/examples/basic-demo/thumbnail.webp)](https://pmndrs.github.io/examples/basic-demo)</p>
   </li>
   <li>
-    <Codesandbox id="yup2o" />
+    <Codesandbox id="yup2o" /  screenshot_url="/images/sandboxes/yup2o.png" />
   </li>
   <li>
     <p>[![drei-rendertexture demo](https://pmndrs.github.io/examples/drei-rendertexture/thumbnail.webp)](https://pmndrs.github.io/examples/drei-rendertexture)</p>

diff --git a/docs/images/sandboxes/12nmp.png b/docs/images/sandboxes/12nmp.png
diff --git a/docs/images/sandboxes/29gxw.png b/docs/images/sandboxes/29gxw.png
diff --git a/docs/images/sandboxes/3ywzzx.png b/docs/images/sandboxes/3ywzzx.png
diff --git a/docs/images/sandboxes/51zks.png b/docs/images/sandboxes/51zks.png
diff --git a/docs/images/sandboxes/6etx1.png b/docs/images/sandboxes/6etx1.png
diff --git a/docs/images/sandboxes/7duy8.png b/docs/images/sandboxes/7duy8.png
diff --git a/docs/images/sandboxes/98ppy.png b/docs/images/sandboxes/98ppy.png
diff --git a/docs/images/sandboxes/dix1y.png b/docs/images/sandboxes/dix1y.png
diff --git a/docs/images/sandboxes/h2fkgq.png b/docs/images/sandboxes/h2fkgq.png
diff --git a/docs/images/sandboxes/h873k.png b/docs/images/sandboxes/h873k.png
diff --git a/docs/images/sandboxes/hqut4.png b/docs/images/sandboxes/hqut4.png
diff --git a/docs/images/sandboxes/m6p73.png b/docs/images/sandboxes/m6p73.png
diff --git a/docs/images/sandboxes/nn2m7.png b/docs/images/sandboxes/nn2m7.png
diff --git a/docs/images/sandboxes/pz0q6.png b/docs/images/sandboxes/pz0q6.png
diff --git a/docs/images/sandboxes/rusfd.png b/docs/images/sandboxes/rusfd.png
diff --git a/docs/images/sandboxes/ssrfg.png b/docs/images/sandboxes/ssrfg.png
diff --git a/docs/images/sandboxes/vbnbf.png b/docs/images/sandboxes/vbnbf.png
diff --git a/docs/images/sandboxes/vl221.png b/docs/images/sandboxes/vl221.png
diff --git a/docs/images/sandboxes/wvgxp.png b/docs/images/sandboxes/wvgxp.png
diff --git a/docs/images/sandboxes/ykfpwf.png b/docs/images/sandboxes/ykfpwf.png
diff --git a/docs/images/sandboxes/yup2o.png b/docs/images/sandboxes/yup2o.png
diff --git a/docs/tutorials/basic-animations.mdx b/docs/tutorials/basic-animations.mdx
@@ -76,7 +76,7 @@ Let's have a closer look:
 - We are accessing the `rotation.x` property of `myMesh.current` object, which is a reference to our mesh object
 - We are assigning our time-dependent value `a` to the `rotation` on the `x` axis, meaning our object will now infinitely rotate between -1 and 1 radians around the x axis!
 
-<Codesandbox id="29gxw" />
+<Codesandbox id="29gxw" /  screenshot_url="/images/sandboxes/29gxw.png" />
 
 **Exercises**
 

diff --git a/docs/tutorials/events-and-interaction.mdx b/docs/tutorials/events-and-interaction.mdx
@@ -66,7 +66,7 @@ What we did in this chapter was:
 - Added some state to track if the mesh is currently active
 - Changed the scale based on that state
 
-<Codesandbox id="98ppy" />
+<Codesandbox id="98ppy" /  screenshot_url="/images/sandboxes/98ppy.png" />
 
 **Exercises**
 

diff --git a/docs/tutorials/loading-models.mdx b/docs/tutorials/loading-models.mdx
@@ -32,7 +32,7 @@ function Scene() {
 
 You can play with the sandbox and see how it looks here after I added an HDRI background:
 
-<Codesandbox id="6etx1" />
+<Codesandbox id="6etx1" /  screenshot_url="/images/sandboxes/6etx1.png" />
 
 ### Loading GLTF models as JSX Components
 
@@ -91,7 +91,7 @@ export default function App() {
 
 You can play with the sandbox here:
 
-<Codesandbox id="vbnbf" />
+<Codesandbox id="vbnbf" /  screenshot_url="/images/sandboxes/vbnbf.png" />
 
 ## Loading OBJ models
 
@@ -115,7 +115,7 @@ And here we go, we have an OBJ model showing on the web! Pretty cool ah?
 
 You can play with the sandbox here:
 
-<Codesandbox id="51zks" />
+<Codesandbox id="51zks" /  screenshot_url="/images/sandboxes/51zks.png" />
 
 ## Loading FBX models
 
@@ -137,7 +137,7 @@ function Scene() {
 
 You can play with the sandbox here:
 
-<Codesandbox id="ssrfg" />
+<Codesandbox id="ssrfg" /  screenshot_url="/images/sandboxes/ssrfg.png" />
 
 ### Loading FBX models using `useFBX`
 
@@ -152,7 +152,7 @@ function Scene() {
 
 You can play with the sandbox here:
 
-<Codesandbox id="m6p73" />
+<Codesandbox id="m6p73" /  screenshot_url="/images/sandboxes/m6p73.png" />
 
 ## Showing a loader
 
@@ -188,4 +188,4 @@ export default function App() {
 
 The hook returns much more than just the progress so there is a lot you can do there to give the user more information about the loading status of the application. You can play with all of them in this sandbox:
 
-<Codesandbox id="nn2m7" />
+<Codesandbox id="nn2m7" /  screenshot_url="/images/sandboxes/nn2m7.png" />
diff --git a/docs/tutorials/loading-textures.mdx b/docs/tutorials/loading-textures.mdx
@@ -147,4 +147,4 @@ return (
 
 You can play with the sandbox and see how it looks:
 
-<Codesandbox id="rusfd" />
+<Codesandbox id="rusfd" /  screenshot_url="/images/sandboxes/rusfd.png" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -147,4 +147,4 @@ return (

		You can play with the sandbox and see how it looks:

		<Codesandbox id="rusfd" />
		<Codesandbox id="rusfd" / screenshot_url="/images/sandboxes/rusfd.png" />