diff --git a/docs/effects/autofocus.mdx b/docs/effects/autofocus.mdx
index 159884c..bad1e2c 100644
--- a/docs/effects/autofocus.mdx
+++ b/docs/effects/autofocus.mdx
@@ -49,4 +49,4 @@ useFrame((_, delta) => {
 
 ## Example
 
-<Codesandbox id="dfw6w4" />
+[![Autofocus demo](https://pmndrs.github.io/examples/autofocus/thumbnail.webp)](https://pmndrs.github.io/examples/autofocus)
diff --git a/docs/effects/bloom.mdx b/docs/effects/bloom.mdx
index f3b7193..2ca74eb 100644
--- a/docs/effects/bloom.mdx
+++ b/docs/effects/bloom.mdx
@@ -50,7 +50,7 @@ clamp colors between 0 and 1 again.
 
 ## Example
 
-<Codesandbox id="r9ujf" />
+[![Bloom demo](https://pmndrs.github.io/examples/bloom/thumbnail.webp)](https://pmndrs.github.io/examples/bloom)
 
 ## Props
 
diff --git a/docs/effects/brightness-contrast.mdx b/docs/effects/brightness-contrast.mdx
index c55eb8a..f43a195 100644
--- a/docs/effects/brightness-contrast.mdx
+++ b/docs/effects/brightness-contrast.mdx
@@ -18,7 +18,7 @@ return (
 
 ## Example
 
-<Codesandbox id="rrev1" />
+[![BrightnessContrast demo](https://pmndrs.github.io/examples/brightness-contrast/thumbnail.webp)](https://pmndrs.github.io/examples/brightness-contrast)
 
 ## Props
 
diff --git a/docs/effects/color-average.mdx b/docs/effects/color-average.mdx
index a4f0953..76ac1a5 100644
--- a/docs/effects/color-average.mdx
+++ b/docs/effects/color-average.mdx
@@ -18,7 +18,7 @@ return (
 
 ## Example
 
-<Codesandbox id="ulsyy" />
+[![ColorAverage demo](https://pmndrs.github.io/examples/color-average/thumbnail.webp)](https://pmndrs.github.io/examples/color-average)
 
 ## Props
 
diff --git a/docs/effects/depth-of-field.mdx b/docs/effects/depth-of-field.mdx
index 287e784..95e3125 100644
--- a/docs/effects/depth-of-field.mdx
+++ b/docs/effects/depth-of-field.mdx
@@ -21,7 +21,7 @@ return (
 
 ## Example
 
-<Codesandbox id="bu796" />
+[![DepthOfField demo](https://pmndrs.github.io/examples/depth-of-field/thumbnail.webp)](https://pmndrs.github.io/examples/depth-of-field)
 
 ## Props
 
diff --git a/docs/effects/glitch.mdx b/docs/effects/glitch.mdx
index f2a0767..e44e574 100644
--- a/docs/effects/glitch.mdx
+++ b/docs/effects/glitch.mdx
@@ -23,7 +23,7 @@ return (
 
 ## Example
 
-<Codesandbox id="bs1i1" />
+[![Glitch demo](https://pmndrs.github.io/examples/glitch/thumbnail.webp)](https://pmndrs.github.io/examples/glitch)
 
 ## Props
 
diff --git a/docs/effects/hue-saturation.mdx b/docs/effects/hue-saturation.mdx
index a1b3fa5..9e443e2 100644
--- a/docs/effects/hue-saturation.mdx
+++ b/docs/effects/hue-saturation.mdx
@@ -20,7 +20,7 @@ return (
 
 ## Example
 
-<Codesandbox id="m9min" />
+[![HueSaturation demo](https://pmndrs.github.io/examples/hue-saturation/thumbnail.webp)](https://pmndrs.github.io/examples/hue-saturation)
 
 ## Props
 
diff --git a/docs/effects/noise.mdx b/docs/effects/noise.mdx
index 80d2a97..5411f81 100644
--- a/docs/effects/noise.mdx
+++ b/docs/effects/noise.mdx
@@ -19,7 +19,7 @@ return (
 
 ## Example
 
-<Codesandbox id="8l8hi" />
+[![Noise demo](https://pmndrs.github.io/examples/noise/thumbnail.webp)](https://pmndrs.github.io/examples/noise)
 
 ## Props
 
diff --git a/docs/effects/ramp.mdx b/docs/effects/ramp.mdx
index c373be3..2e97fd6 100644
--- a/docs/effects/ramp.mdx
+++ b/docs/effects/ramp.mdx
@@ -25,7 +25,7 @@ return (
 
 ## Example
 
-<Codesandbox id="zdpzei" />
+[![Ramp demo](https://pmndrs.github.io/examples/ramp/thumbnail.webp)](https://pmndrs.github.io/examples/ramp)
 
 ## Props
 
diff --git a/docs/effects/selective-bloom.mdx b/docs/effects/selective-bloom.mdx
index 08c05bc..db12711 100644
--- a/docs/effects/selective-bloom.mdx
+++ b/docs/effects/selective-bloom.mdx
@@ -34,6 +34,10 @@ return (
 )
 ```
 
+## Example
+
+[![SelectiveBloom demo](https://pmndrs.github.io/examples/selective-bloom/thumbnail.webp)](https://pmndrs.github.io/examples/selective-bloom)
+
 ## Props
 
 | Name               | Type          | Default              | Description                                                                                          |
diff --git a/docs/effects/ssao.mdx b/docs/effects/ssao.mdx
index 9e6d4bf..1bc8e55 100644
--- a/docs/effects/ssao.mdx
+++ b/docs/effects/ssao.mdx
@@ -29,6 +29,10 @@ return (
 )
 ```
 
+## Example
+
+[![SSAO demo](https://pmndrs.github.io/examples/ssao/thumbnail.webp)](https://pmndrs.github.io/examples/ssao)
+
 ## Props
 
 | Name                    | Type                                                                                                          | Default               | Description                                                                                                                     |
diff --git a/docs/effects/tone-mapping.mdx b/docs/effects/tone-mapping.mdx
index 0d7cd1c..556190c 100644
--- a/docs/effects/tone-mapping.mdx
+++ b/docs/effects/tone-mapping.mdx
@@ -37,7 +37,7 @@ return (
 
 ## Example
 
-<Codesandbox id="fjb06" />
+[![ToneMapping demo](https://pmndrs.github.io/examples/tone-mapping/thumbnail.webp)](https://pmndrs.github.io/examples/tone-mapping)
 
 ## Props