diff --git a/docs/getting-started/examples.mdx b/docs/getting-started/examples.mdx
index 124bc4fae2..da03ced745 100644
--- a/docs/getting-started/examples.mdx
+++ b/docs/getting-started/examples.mdx
@@ -8,332 +8,332 @@ nav: 3
 
 <Grid cols={1}>
   <li>
-    <Codesandbox id="6d97z4" tags={['selection', 'tiltshift']} />
+    <p>[![shopping demo](https://pmndrs.github.io/examples/shopping/thumbnail.webp)](https://pmndrs.github.io/examples/shopping) -- <span>selection</span>, <span>tiltshift</span></p>
   </li>
 </Grid>
 <Grid cols={2}>
   <li>
-    <Codesandbox id="9s2wd9" tags={['border-radius']} />
+    <p>[![cards-with-border-radius demo](https://pmndrs.github.io/examples/cards-with-border-radius/thumbnail.webp)](https://pmndrs.github.io/examples/cards-with-border-radius) -- <span>border-radius</span></p>
   </li>
   <li>
-    <Codesandbox id="7qytdw" tags={['bruno', 'simon', 'threejs-journey', 'fisheye']} />
+    <p>[![threejs-journey-lv-1-fisheye demo](https://pmndrs.github.io/examples/threejs-journey-lv-1-fisheye/thumbnail.webp)](https://pmndrs.github.io/examples/threejs-journey-lv-1-fisheye) -- <span>bruno</span>, <span>simon</span>, <span>threejs-journey</span>, <span>fisheye</span></p>
   </li>
   <li>
-    <Codesandbox id="xy8c8z" tags={['lusion', 'n8ao']} />
+    <p>[![lusion-connectors demo](https://pmndrs.github.io/examples/lusion-connectors/thumbnail.webp)](https://pmndrs.github.io/examples/lusion-connectors) -- <span>lusion</span>, <span>n8ao</span></p>
   </li>
   <li>
-    <Codesandbox id="nvk9pf" tags={['ecctrl', 'character-controller']} />
+    <p>[![ecctrl-fisheye demo](https://pmndrs.github.io/examples/ecctrl-fisheye/thumbnail.webp)](https://pmndrs.github.io/examples/ecctrl-fisheye) -- <span>ecctrl</span>, <span>character-controller</span></p>
   </li>
   <li>
-    <Codesandbox id="bst0cy" tags={['effects', 'bloom', 'dof', 'reflections']} />
+    <p>[![monitors demo](https://pmndrs.github.io/examples/monitors/thumbnail.webp)](https://pmndrs.github.io/examples/monitors) -- <span>effects</span>, <span>bloom</span>, <span>dof</span>, <span>reflections</span></p>
   </li>
   <li>
-    <Codesandbox id="2ycs3" tags={['effects', 'dof', 'bananas']} />
+    <p>[![flying-bananas demo](https://pmndrs.github.io/examples/flying-bananas/thumbnail.webp)](https://pmndrs.github.io/examples/flying-bananas) -- <span>effects</span>, <span>dof</span>, <span>bananas</span></p>
   </li>
   <li>
-    <Codesandbox id="ioxywi" tags={['configurator', 't-shirt', 'soft-shadows']} />
+    <p>[![t-shirt-configurator demo](https://pmndrs.github.io/examples/t-shirt-configurator/thumbnail.webp)](https://pmndrs.github.io/examples/t-shirt-configurator) -- <span>configurator</span>, <span>t-shirt</span>, <span>soft-shadows</span></p>
   </li>
   <li>
-    <Codesandbox id="szj6p7" tags={['caustics', 'effects', 'soft-shadows']} />
+    <p>[![caustics demo](https://pmndrs.github.io/examples/caustics/thumbnail.webp)](https://pmndrs.github.io/examples/caustics) -- <span>caustics</span>, <span>effects</span>, <span>soft-shadows</span></p>
   </li>
 </Grid>
 <Grid cols={4}>
   <li>
-    <Codesandbox id="5w35n6" tags={['ssgi', 'rapier']} />
+    <p>[![ssgi-spheres-with-rapier-physics demo](https://pmndrs.github.io/examples/ssgi-spheres-with-rapier-physics/thumbnail.webp)](https://pmndrs.github.io/examples/ssgi-spheres-with-rapier-physics) -- <span>ssgi</span>, <span>rapier</span></p>
   </li>
   <li>
-    <Codesandbox id="gwthnh" tags={['clouds']} />
+    <p>[![thunder-clouds demo](https://pmndrs.github.io/examples/thunder-clouds/thumbnail.webp)](https://pmndrs.github.io/examples/thunder-clouds) -- <span>clouds</span></p>
   </li>
   <li>
-    <Codesandbox id="2y73c6" tags={['motion-path', 'clouds']} />
+    <p>[![motionpathcontrols demo](https://pmndrs.github.io/examples/motionpathcontrols/thumbnail.webp)](https://pmndrs.github.io/examples/motionpathcontrols) -- <span>motion-path</span>, <span>clouds</span></p>
   </li>
   <li>
-    <Codesandbox id="ykfpwf" tags={['caustics', 'effects', 'soft-shadows']} />
+    <p>[![room-with-soft-shadows demo](https://pmndrs.github.io/examples/room-with-soft-shadows/thumbnail.webp)](https://pmndrs.github.io/examples/room-with-soft-shadows) -- <span>caustics</span>, <span>effects</span>, <span>soft-shadows</span></p>
   </li>
   <li>
-    <Codesandbox id="yggpw5" tags={['godrays', 'reflections']} />
+    <p>[![volumetric-light-godray demo](https://pmndrs.github.io/examples/volumetric-light-godray/thumbnail.webp)](https://pmndrs.github.io/examples/volumetric-light-godray) -- <span>godrays</span>, <span>reflections</span></p>
   </li>
   <li>
-    <Codesandbox id="9m4tpc" tags={['portals']} />
+    <p>[![enter-portals demo](https://pmndrs.github.io/examples/enter-portals/thumbnail.webp)](https://pmndrs.github.io/examples/enter-portals) -- <span>portals</span></p>
   </li>
   <li>
-    <Codesandbox id="qvk72r" tags={['portals']} />
+    <p>[![pass-through-portals demo](https://pmndrs.github.io/examples/pass-through-portals/thumbnail.webp)](https://pmndrs.github.io/examples/pass-through-portals) -- <span>portals</span></p>
   </li>
   <li>
-    <Codesandbox id="drc6qg" tags={['portals']} />
+    <p>[![magic-box demo](https://pmndrs.github.io/examples/magic-box/thumbnail.webp)](https://pmndrs.github.io/examples/magic-box) -- <span>portals</span></p>
   </li>
   <li>
-    <Codesandbox id="hmbn1l" tags={['video', 'cookies', 'caustics']} />
+    <p>[![video-cookies demo](https://pmndrs.github.io/examples/video-cookies/thumbnail.webp)](https://pmndrs.github.io/examples/video-cookies) -- <span>video</span>, <span>cookies</span>, <span>caustics</span></p>
   </li>
   <li>
-    <Codesandbox id="dq6wwe" tags={['glass', 'transmission', 'bloom']} />
+    <p>[![glass-flower demo](https://pmndrs.github.io/examples/glass-flower/thumbnail.webp)](https://pmndrs.github.io/examples/glass-flower) -- <span>glass</span>, <span>transmission</span>, <span>bloom</span></p>
   </li>
   <li>
-    <Codesandbox id="dc5fjy" tags={['cards', 'image']} />
+    <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']} />
   </li>
   <li>
-    <Codesandbox id="lx2h8" tags={['reflections', 'annotations']} />
+    <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>
   </li>
   <li>
-    <Codesandbox id="l4klb" tags={['scroll', 'controls']} />
+    <p>[![horizontal-tiles demo](https://pmndrs.github.io/examples/horizontal-tiles/thumbnail.webp)](https://pmndrs.github.io/examples/horizontal-tiles) -- <span>scroll</span>, <span>controls</span></p>
   </li>
   <li>
-    <Codesandbox id="zxpv7" tags={['physics']} />
+    <p>[![bestservedbold-christmas-baubles demo](https://pmndrs.github.io/examples/bestservedbold-christmas-baubles/thumbnail.webp)](https://pmndrs.github.io/examples/bestservedbold-christmas-baubles) -- <span>physics</span></p>
   </li>
   <li>
-    <Codesandbox id="0n9it" tags={['html', 'annotations']} />
+    <p>[![the-three-graces demo](https://pmndrs.github.io/examples/the-three-graces/thumbnail.webp)](https://pmndrs.github.io/examples/the-three-graces) -- <span>html</span>, <span>annotations</span></p>
   </li>
   <li>
-    <Codesandbox id="imn42" tags={['frosted', 'glass', 'transmission']} />
+    <p>[![frosted-glass demo](https://pmndrs.github.io/examples/frosted-glass/thumbnail.webp)](https://pmndrs.github.io/examples/frosted-glass) -- <span>frosted</span>, <span>glass</span>, <span>transmission</span></p>
   </li>
   <li>
-    <Codesandbox id="pbwi6i" tags={['gltfjsx', 'effects', 'bloom', 'soft-shadows']} />
+    <p>[![gltfjsx-400kb-drone demo](https://pmndrs.github.io/examples/gltfjsx-400kb-drone/thumbnail.webp)](https://pmndrs.github.io/examples/gltfjsx-400kb-drone) -- <span>gltfjsx</span>, <span>effects</span>, <span>bloom</span>, <span>soft-shadows</span></p>
   </li>
   <li>
-    <Codesandbox id="fslt99" tags={['effects', 'reflections', 'ssr', 'bloom']} />
+    <p>[![starwars demo](https://pmndrs.github.io/examples/starwars/thumbnail.webp)](https://pmndrs.github.io/examples/starwars) -- <span>effects</span>, <span>reflections</span>, <span>ssr</span>, <span>bloom</span></p>
   </li>
   <li>
-    <Codesandbox id="2qfxj4" tags={['rapier', 'physics', 'soft-shadows']} />
+    <p>[![bruno-simons-20k-challenge demo](https://pmndrs.github.io/examples/bruno-simons-20k-challenge/thumbnail.webp)](https://pmndrs.github.io/examples/bruno-simons-20k-challenge) -- <span>rapier</span>, <span>physics</span>, <span>soft-shadows</span></p>
   </li>
   <li>
-    <Codesandbox id="2n98yj" tags={['scroll', 'refraction', 'lens']} />
+    <p>[![scrollcontrols-and-lens-refraction demo](https://pmndrs.github.io/examples/scrollcontrols-and-lens-refraction/thumbnail.webp)](https://pmndrs.github.io/examples/scrollcontrols-and-lens-refraction) -- <span>scroll</span>, <span>refraction</span>, <span>lens</span></p>
   </li>
   <li>
-    <Codesandbox id="e662p3" tags={['effects', 'bloom', 'reflections']} />
+    <p>[![building-dynamic-envmaps demo](https://pmndrs.github.io/examples/building-dynamic-envmaps/thumbnail.webp)](https://pmndrs.github.io/examples/building-dynamic-envmaps) -- <span>effects</span>, <span>bloom</span>, <span>reflections</span></p>
   </li>
   <li>
-    <Codesandbox id="j3ycvl" tags={['effects', 'bloom']} />
+    <p>[![nextjs-prism demo](https://pmndrs.github.io/examples/nextjs-prism/thumbnail.webp)](https://pmndrs.github.io/examples/nextjs-prism) -- <span>effects</span>, <span>bloom</span></p>
   </li>
   <li>
-    <Codesandbox id="lwo219" tags={['custom', 'environments']} />
+    <p>[![building-live-envmaps demo](https://pmndrs.github.io/examples/building-live-envmaps/thumbnail.webp)](https://pmndrs.github.io/examples/building-live-envmaps) -- <span>custom</span>, <span>environments</span></p>
   </li>
   <li>
-    <Codesandbox id="qxjoj" tags={['gltfjsx', 'configurator']} />
+    <p>[![shoe-configurator demo](https://pmndrs.github.io/examples/shoe-configurator/thumbnail.webp)](https://pmndrs.github.io/examples/shoe-configurator) -- <span>gltfjsx</span>, <span>configurator</span></p>
   </li>
   <li>
-    <Codesandbox id="dvokj" tags={['audio', 'analyser']} />
+    <p>[![audio-analyser demo](https://pmndrs.github.io/examples/audio-analyser/thumbnail.webp)](https://pmndrs.github.io/examples/audio-analyser) -- <span>audio</span>, <span>analyser</span></p>
   </li>
   <li>
-    <Codesandbox id="bfplr" tags={['ground', 'reflections', 'video-texture']} />
+    <p>[![ground-reflections-and-video-textures demo](https://pmndrs.github.io/examples/ground-reflections-and-video-textures/thumbnail.webp)](https://pmndrs.github.io/examples/ground-reflections-and-video-textures) -- <span>ground</span>, <span>reflections</span>, <span>video-texture</span></p>
   </li>
   <li>
-    <Codesandbox id="ni6v4" tags={['bruno-simon', 'threejs-journey']} />
+    <p>[![threejs-journey-portal demo](https://pmndrs.github.io/examples/threejs-journey-portal/thumbnail.webp)](https://pmndrs.github.io/examples/threejs-journey-portal) -- <span>bruno-simon</span>, <span>threejs-journey</span></p>
   </li>
   <li>
-    <Codesandbox id="9keg6" tags={['html', 'iframe']} />
+    <p>[![mixing-html-and-webgl-w-occlusion demo](https://pmndrs.github.io/examples/mixing-html-and-webgl-w-occlusion/thumbnail.webp)](https://pmndrs.github.io/examples/mixing-html-and-webgl-w-occlusion) -- <span>html</span>, <span>iframe</span></p>
   </li>
   <li>
-    <Codesandbox id="f79ucc" tags={['splinetool', 'iframe']} />
+    <p>[![interactive-spline-scene-live-html demo](https://pmndrs.github.io/examples/interactive-spline-scene-live-html/thumbnail.webp)](https://pmndrs.github.io/examples/interactive-spline-scene-live-html) -- <span>splinetool</span>, <span>iframe</span></p>
   </li>
   <li>
-    <Codesandbox id="zqrreo" tags={['refraction']} />
+    <p>[![diamond-refraction demo](https://pmndrs.github.io/examples/diamond-refraction/thumbnail.webp)](https://pmndrs.github.io/examples/diamond-refraction) -- <span>refraction</span></p>
   </li>
   <li>
-    <Codesandbox id="4gy946" tags={['refraction', 'instanced']} />
+    <p>[![diamond-ring demo](https://pmndrs.github.io/examples/diamond-ring/thumbnail.webp)](https://pmndrs.github.io/examples/diamond-ring) -- <span>refraction</span>, <span>instanced</span></p>
   </li>
   <li>
-    <Codesandbox id="q48jgy" tags={['ground-projected-env']} />
+    <p>[![envmap-ground-projection demo](https://pmndrs.github.io/examples/envmap-ground-projection/thumbnail.webp)](https://pmndrs.github.io/examples/envmap-ground-projection) -- <span>ground-projected-env</span></p>
   </li>
   <li>
-    <Codesandbox id="ju368j" tags={['splinetool', 'transmission']} />
+    <p>[![spline-glass-shapes demo](https://pmndrs.github.io/examples/spline-glass-shapes/thumbnail.webp)](https://pmndrs.github.io/examples/spline-glass-shapes) -- <span>splinetool</span>, <span>transmission</span></p>
   </li>
   <li>
-    <Codesandbox id="mlgzsc" tags={['transmission', 'csg']} />
+    <p>[![csg-bunny-usegroups demo](https://pmndrs.github.io/examples/csg-bunny-usegroups/thumbnail.webp)](https://pmndrs.github.io/examples/csg-bunny-usegroups) -- <span>transmission</span>, <span>csg</span></p>
   </li>
   <li>
-    <Codesandbox id="y52tmt" tags={['csg']} />
+    <p>[![csg-house demo](https://pmndrs.github.io/examples/csg-house/thumbnail.webp)](https://pmndrs.github.io/examples/csg-house) -- <span>csg</span></p>
   </li>
   <li>
-    <Codesandbox id="hg3ejl" tags={['scroll', 'animation', 'effects', 'tiltshift']} />
+    <p>[![gltf-animations-tied-to-scroll demo](https://pmndrs.github.io/examples/gltf-animations-tied-to-scroll/thumbnail.webp)](https://pmndrs.github.io/examples/gltf-animations-tied-to-scroll) -- <span>scroll</span>, <span>animation</span>, <span>effects</span>, <span>tiltshift</span></p>
   </li>
   <li>
-    <Codesandbox id="ssbdsw" tags={['physics', 'effects', 'n8ao']} />
+    <p>[![object-clump demo](https://pmndrs.github.io/examples/object-clump/thumbnail.webp)](https://pmndrs.github.io/examples/object-clump) -- <span>physics</span>, <span>effects</span>, <span>n8ao</span></p>
   </li>
   <li>
-    <Codesandbox id="024uom" tags={['html', 'input']} />
+    <p>[![html-input-fields demo](https://pmndrs.github.io/examples/html-input-fields/thumbnail.webp)](https://pmndrs.github.io/examples/html-input-fields) -- <span>html</span>, <span>input</span></p>
   </li>
   <li>
-    <Codesandbox id="gsm1y" tags={['scroll']} />
+    <p>[![useintersect-and-scrollcontrols demo](https://pmndrs.github.io/examples/useintersect-and-scrollcontrols/thumbnail.webp)](https://pmndrs.github.io/examples/useintersect-and-scrollcontrols) -- <span>scroll</span></p>
   </li>
   <li>
-    <Codesandbox id="x8gvs" tags={['scroll']} />
+    <p>[![infinite-scroll demo](https://pmndrs.github.io/examples/infinite-scroll/thumbnail.webp)](https://pmndrs.github.io/examples/infinite-scroll) -- <span>scroll</span></p>
   </li>
   <li>
-    <Codesandbox id="yjhzv" tags={['scroll']} />
+    <p>[![scrollcontrols-with-minimap demo](https://pmndrs.github.io/examples/scrollcontrols-with-minimap/thumbnail.webp)](https://pmndrs.github.io/examples/scrollcontrols-with-minimap) -- <span>scroll</span></p>
   </li>
   <li>
-    <Codesandbox id="qpfgyp" tags={['effects', 'particles']} />
+    <p>[![instanced-particles-effects demo](https://pmndrs.github.io/examples/instanced-particles-effects/thumbnail.webp)](https://pmndrs.github.io/examples/instanced-particles-effects) -- <span>effects</span>, <span>particles</span></p>
   </li>
   <li>
-    <Codesandbox id="62o18n" tags={['cross-fade', 'transitions']} />
+    <p>[![dbismut-furniture demo](https://pmndrs.github.io/examples/dbismut-furniture/thumbnail.webp)](https://pmndrs.github.io/examples/dbismut-furniture) -- <span>cross-fade</span>, <span>transitions</span></p>
   </li>
   <li>
-    <Codesandbox id="8j36ok" tags={['transmission', 'portals', 'physics']} />
+    <p>[![portal-shapes demo](https://pmndrs.github.io/examples/portal-shapes/thumbnail.webp)](https://pmndrs.github.io/examples/portal-shapes) -- <span>transmission</span>, <span>portals</span>, <span>physics</span></p>
   </li>
   <li>
-    <Codesandbox id="n7jf0f" tags={['transmission', 'portals']} />
+    <p>[![aquarium demo](https://pmndrs.github.io/examples/aquarium/thumbnail.webp)](https://pmndrs.github.io/examples/aquarium) -- <span>transmission</span>, <span>portals</span></p>
   </li>
   <li>
-    <Codesandbox id="ik11ln" tags={['portals', 'blend']} />
+    <p>[![portals demo](https://pmndrs.github.io/examples/portals/thumbnail.webp)](https://pmndrs.github.io/examples/portals) -- <span>portals</span>, <span>blend</span></p>
   </li>
   <li>
-    <Codesandbox id="lxvqek" />
+    <p>[![inter-epoxy-resin demo](https://pmndrs.github.io/examples/inter-epoxy-resin/thumbnail.webp)](https://pmndrs.github.io/examples/inter-epoxy-resin)</p>
   </li>
   <li>
-    <Codesandbox id="if9crg" />
+    <p>[![stage-presets-gltfjsx demo](https://pmndrs.github.io/examples/stage-presets-gltfjsx/thumbnail.webp)](https://pmndrs.github.io/examples/stage-presets-gltfjsx)</p>
   </li>
   <li>
-    <Codesandbox id="xzi6ps" />
+    <p>[![react-ellipsecurve demo](https://pmndrs.github.io/examples/react-ellipsecurve/thumbnail.webp)](https://pmndrs.github.io/examples/react-ellipsecurve)</p>
   </li>
   <li>
-    <Codesandbox id="qvb1vk" />
+    <p>[![iridescent-decals demo](https://pmndrs.github.io/examples/iridescent-decals/thumbnail.webp)](https://pmndrs.github.io/examples/iridescent-decals)</p>
   </li>
   <li>
-    <Codesandbox id="hxcc1x" />
+    <p>[![baking-soft-shadows demo](https://pmndrs.github.io/examples/baking-soft-shadows/thumbnail.webp)](https://pmndrs.github.io/examples/baking-soft-shadows)</p>
   </li>
   <li>
-    <Codesandbox id="8pbw1f" />
+    <p>[![ssr-test demo](https://pmndrs.github.io/examples/ssr-test/thumbnail.webp)](https://pmndrs.github.io/examples/ssr-test)</p>
   </li>
   <li>
-    <Codesandbox id="mw0dtc" />
+    <p>[![csg-operations-rapier-physics demo](https://pmndrs.github.io/examples/csg-operations-rapier-physics/thumbnail.webp)](https://pmndrs.github.io/examples/csg-operations-rapier-physics)</p>
   </li>
   <li>
-    <Codesandbox id="8flefh" />
+    <p>[![faucets-select-highlight demo](https://pmndrs.github.io/examples/faucets-select-highlight/thumbnail.webp)](https://pmndrs.github.io/examples/faucets-select-highlight)</p>
   </li>
   <li>
-    <Codesandbox id="7e9y1b" />
+    <p>[![rapier-physics demo](https://pmndrs.github.io/examples/rapier-physics/thumbnail.webp)](https://pmndrs.github.io/examples/rapier-physics)</p>
   </li>
   <li>
-    <Codesandbox id="whnhyr" />
+    <p>[![bloom-hdr-workflow-gltf demo](https://pmndrs.github.io/examples/bloom-hdr-workflow-gltf/thumbnail.webp)](https://pmndrs.github.io/examples/bloom-hdr-workflow-gltf)</p>
   </li>
   <li>
-    <Codesandbox id="0c5hv9" />
+    <p>[![ground-projected-envmaps-lamina demo](https://pmndrs.github.io/examples/ground-projected-envmaps-lamina/thumbnail.webp)](https://pmndrs.github.io/examples/ground-projected-envmaps-lamina)</p>
   </li>
   <li>
-    <Codesandbox id="0fqow2" />
+    <p>[![basic-ballpit demo](https://pmndrs.github.io/examples/basic-ballpit/thumbnail.webp)](https://pmndrs.github.io/examples/basic-ballpit)</p>
   </li>
   <li>
-    <Codesandbox id="2ij9u" />
+    <p>[![backdrop-and-cables demo](https://pmndrs.github.io/examples/backdrop-and-cables/thumbnail.webp)](https://pmndrs.github.io/examples/backdrop-and-cables)</p>
   </li>
   <li>
-    <Codesandbox id="42glz0" />
+    <p>[![clones demo](https://pmndrs.github.io/examples/clones/thumbnail.webp)](https://pmndrs.github.io/examples/clones)</p>
   </li>
   <li>
-    <Codesandbox id="ledhe1" />
+    <p>[![lamina-1x demo](https://pmndrs.github.io/examples/lamina-1x/thumbnail.webp)](https://pmndrs.github.io/examples/lamina-1x)</p>
   </li>
   <li>
-    <Codesandbox id="nurp5t" />
+    <p>[![react-pp-outlines demo](https://pmndrs.github.io/examples/react-pp-outlines/thumbnail.webp)](https://pmndrs.github.io/examples/react-pp-outlines)</p>
   </li>
   <li>
-    <Codesandbox id="2csbr1" />
+    <p>[![gatsby-stars demo](https://pmndrs.github.io/examples/gatsby-stars/thumbnail.webp)](https://pmndrs.github.io/examples/gatsby-stars)</p>
   </li>
   <li>
-    <Codesandbox id="go0b4w" />
+    <p>[![pmndrs-vercel demo](https://pmndrs.github.io/examples/pmndrs-vercel/thumbnail.webp)](https://pmndrs.github.io/examples/pmndrs-vercel)</p>
   </li>
   <li>
-    <Codesandbox id="s006f" />
+    <p>[![sport-hall demo](https://pmndrs.github.io/examples/sport-hall/thumbnail.webp)](https://pmndrs.github.io/examples/sport-hall)</p>
   </li>
   <li>
-    <Codesandbox id="l900i" />
+    <p>[![night-train demo](https://pmndrs.github.io/examples/night-train/thumbnail.webp)](https://pmndrs.github.io/examples/night-train)</p>
   </li>
   <li>
-    <Codesandbox id="qyz5r" />
+    <p>[![bouncy-watch demo](https://pmndrs.github.io/examples/bouncy-watch/thumbnail.webp)](https://pmndrs.github.io/examples/bouncy-watch)</p>
   </li>
   <li>
-    <Codesandbox id="kv7tv" />
+    <p>[![transparent-aesop-bottles demo](https://pmndrs.github.io/examples/transparent-aesop-bottles/thumbnail.webp)](https://pmndrs.github.io/examples/transparent-aesop-bottles)</p>
   </li>
   <li>
-    <Codesandbox id="ls503" />
+    <p>[![raycast-cycling demo](https://pmndrs.github.io/examples/raycast-cycling/thumbnail.webp)](https://pmndrs.github.io/examples/raycast-cycling)</p>
   </li>
   <li>
-    <Codesandbox id="n60qg" />
+    <p>[![landing-page demo](https://pmndrs.github.io/examples/landing-page/thumbnail.webp)](https://pmndrs.github.io/examples/landing-page)</p>
   </li>
   <li>
-    <Codesandbox id="4jr4p" />
+    <p>[![scrollcontrols-gltf demo](https://pmndrs.github.io/examples/scrollcontrols-gltf/thumbnail.webp)](https://pmndrs.github.io/examples/scrollcontrols-gltf)</p>
   </li>
   <li>
-    <Codesandbox id="kud9p" />
+    <p>[![merged-instance demo](https://pmndrs.github.io/examples/merged-instance/thumbnail.webp)](https://pmndrs.github.io/examples/merged-instance)</p>
   </li>
   <li>
-    <Codesandbox id="zgsyn" />
+    <p>[![gpgpu-curl-noise-dof demo](https://pmndrs.github.io/examples/gpgpu-curl-noise-dof/thumbnail.webp)](https://pmndrs.github.io/examples/gpgpu-curl-noise-dof)</p>
   </li>
   <li>
-    <Codesandbox id="i6t0j" />
+    <p>[![hi-key-bubbles demo](https://pmndrs.github.io/examples/hi-key-bubbles/thumbnail.webp)](https://pmndrs.github.io/examples/hi-key-bubbles)</p>
   </li>
   <li>
-    <Codesandbox id="h8o2d" />
+    <p>[![floating-instanced-shoes demo](https://pmndrs.github.io/examples/floating-instanced-shoes/thumbnail.webp)](https://pmndrs.github.io/examples/floating-instanced-shoes)</p>
   </li>
   <li>
-    <Codesandbox id="wu51m" />
+    <p>[![simple-audio-analyser demo](https://pmndrs.github.io/examples/simple-audio-analyser/thumbnail.webp)](https://pmndrs.github.io/examples/simple-audio-analyser)</p>
   </li>
   <li>
-    <Codesandbox id="tu24h" />
+    <p>[![camera-scroll demo](https://pmndrs.github.io/examples/camera-scroll/thumbnail.webp)](https://pmndrs.github.io/examples/camera-scroll)</p>
   </li>
   <li>
-    <Codesandbox id="jz9l97qn89" />
+    <p>[![springy-boxes demo](https://pmndrs.github.io/examples/springy-boxes/thumbnail.webp)](https://pmndrs.github.io/examples/springy-boxes)</p>
   </li>
   <li>
-    <Codesandbox id="prb9t" />
+    <p>[![floating-diamonds demo](https://pmndrs.github.io/examples/floating-diamonds/thumbnail.webp)](https://pmndrs.github.io/examples/floating-diamonds)</p>
   </li>
   <li>
-    <Codesandbox id="pecl6" />
+    <p>[![gltf-animations demo](https://pmndrs.github.io/examples/gltf-animations/thumbnail.webp)](https://pmndrs.github.io/examples/gltf-animations)</p>
   </li>
   <li>
-    <Codesandbox id="sbf2i" />
+    <p>[![sparks-and-effects demo](https://pmndrs.github.io/examples/sparks-and-effects/thumbnail.webp)](https://pmndrs.github.io/examples/sparks-and-effects)</p>
   </li>
   <li>
-    <Codesandbox id="t4l0f" />
+    <p>[![camera-shake demo](https://pmndrs.github.io/examples/camera-shake/thumbnail.webp)](https://pmndrs.github.io/examples/camera-shake)</p>
   </li>
   <li>
-    <Codesandbox id="wdzv4" />
+    <p>[![ragdoll-physics demo](https://pmndrs.github.io/examples/ragdoll-physics/thumbnail.webp)](https://pmndrs.github.io/examples/ragdoll-physics)</p>
   </li>
   <li>
-    <Codesandbox id="6hi1y" />
+    <p>[![react-spring-animations demo](https://pmndrs.github.io/examples/react-spring-animations/thumbnail.webp)](https://pmndrs.github.io/examples/react-spring-animations)</p>
   </li>
   <li>
-    <Codesandbox id="1sccp" />
+    <p>[![mount-transitions demo](https://pmndrs.github.io/examples/mount-transitions/thumbnail.webp)](https://pmndrs.github.io/examples/mount-transitions)</p>
   </li>
   <li>
-    <Codesandbox id="q23sw" />
+    <p>[![floating-laptop demo](https://pmndrs.github.io/examples/floating-laptop/thumbnail.webp)](https://pmndrs.github.io/examples/floating-laptop)</p>
   </li>
   <li>
-    <Codesandbox id="gpioq" />
+    <p>[![zustand-site demo](https://pmndrs.github.io/examples/zustand-site/thumbnail.webp)](https://pmndrs.github.io/examples/zustand-site)</p>
   </li>
   <li>
-    <Codesandbox id="3rjsl" />
+    <p>[![cell-fracture demo](https://pmndrs.github.io/examples/cell-fracture/thumbnail.webp)](https://pmndrs.github.io/examples/cell-fracture)</p>
   </li>
   <li>
-    <Codesandbox id="4j2q2" />
+    <p>[![router-transitions demo](https://pmndrs.github.io/examples/router-transitions/thumbnail.webp)](https://pmndrs.github.io/examples/router-transitions)</p>
   </li>
   <li>
-    <Codesandbox id="dh2jc" />
+    <p>[![soft-shadows demo](https://pmndrs.github.io/examples/soft-shadows/thumbnail.webp)](https://pmndrs.github.io/examples/soft-shadows)</p>
   </li>
   <li>
-    <Codesandbox id="gkfhr" />
+    <p>[![lulaby-city demo](https://pmndrs.github.io/examples/lulaby-city/thumbnail.webp)](https://pmndrs.github.io/examples/lulaby-city)</p>
   </li>
   <li>
-    <Codesandbox id="0buje" />
+    <p>[![viking-ship demo](https://pmndrs.github.io/examples/viking-ship/thumbnail.webp)](https://pmndrs.github.io/examples/viking-ship)</p>
   </li>
   <li>
-    <Codesandbox id="5oufp" />
+    <p>[![wobbling-sphere demo](https://pmndrs.github.io/examples/wobbling-sphere/thumbnail.webp)](https://pmndrs.github.io/examples/wobbling-sphere)</p>
   </li>
   <li>
-    <Codesandbox id="f1ixt" />
+    <p>[![moksha demo](https://pmndrs.github.io/examples/moksha/thumbnail.webp)](https://pmndrs.github.io/examples/moksha)</p>
   </li>
   <li>
-    <Codesandbox id="7psew" />
+    <p>[![flexbox-yoga-in-webgl demo](https://pmndrs.github.io/examples/flexbox-yoga-in-webgl/thumbnail.webp)](https://pmndrs.github.io/examples/flexbox-yoga-in-webgl)</p>
   </li>
   <li>
-    <Codesandbox id="vl221" />
+    <p>[![confetti demo](https://pmndrs.github.io/examples/confetti/thumbnail.webp)](https://pmndrs.github.io/examples/confetti)</p>
   </li>
   <li>
-    <Codesandbox id="oep9o" />
+    <p>[![learn-with-jason demo](https://pmndrs.github.io/examples/learn-with-jason/thumbnail.webp)](https://pmndrs.github.io/examples/learn-with-jason)</p>
   </li>
   <li>
-    <Codesandbox id="tx1pq" />
+    <p>[![volumetric-spotlight demo](https://pmndrs.github.io/examples/volumetric-spotlight/thumbnail.webp)](https://pmndrs.github.io/examples/volumetric-spotlight)</p>
   </li>
 </Grid>
 
@@ -341,25 +341,25 @@ nav: 3
 
 <Grid>
   <li>
-    <Codesandbox id="lo6kp" />
+    <p>[![racing-game demo](https://pmndrs.github.io/examples/racing-game/thumbnail.webp)](https://pmndrs.github.io/examples/racing-game)</p>
   </li>
   <li>
-    <Codesandbox id="rmfcq" />
+    <p>[![pinball-in-70-lines demo](https://pmndrs.github.io/examples/pinball-in-70-lines/thumbnail.webp)](https://pmndrs.github.io/examples/pinball-in-70-lines)</p>
   </li>
   <li>
-    <Codesandbox id="i2160" />
+    <p>[![space-game demo](https://pmndrs.github.io/examples/space-game/thumbnail.webp)](https://pmndrs.github.io/examples/space-game)</p>
   </li>
   <li>
-    <Codesandbox id="vkgi6" />
+    <p>[![minecraft demo](https://pmndrs.github.io/examples/minecraft/thumbnail.webp)](https://pmndrs.github.io/examples/minecraft)</p>
   </li>
   <li>
-    <Codesandbox id="2yqpv" />
+    <p>[![arkanoid demo](https://pmndrs.github.io/examples/arkanoid/thumbnail.webp)](https://pmndrs.github.io/examples/arkanoid)</p>
   </li>
   <li>
-    <Codesandbox id="ptdgrn" />
+    <p>[![rapier-ping-pong demo](https://pmndrs.github.io/examples/rapier-ping-pong/thumbnail.webp)](https://pmndrs.github.io/examples/rapier-ping-pong)</p>
   </li>
   <li>
-    <Codesandbox id="66cd7" />
+    <p>[![arkanoid-under-60-loc demo](https://pmndrs.github.io/examples/arkanoid-under-60-loc/thumbnail.webp)](https://pmndrs.github.io/examples/arkanoid-under-60-loc)</p>
   </li>
 </Grid>
 
@@ -367,135 +367,135 @@ nav: 3
 
 <Grid>
   <li>
-    <Codesandbox id="rrppl0y8l4" />
+    <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" />
   </li>
   <li>
-    <Codesandbox id="0z8i2c" />
+    <p>[![drei-rendertexture demo](https://pmndrs.github.io/examples/drei-rendertexture/thumbnail.webp)](https://pmndrs.github.io/examples/drei-rendertexture)</p>
   </li>
   <li>
-    <Codesandbox id="txzeq8" />
+    <p>[![bvh demo](https://pmndrs.github.io/examples/bvh/thumbnail.webp)](https://pmndrs.github.io/examples/bvh)</p>
   </li>
   <li>
-    <Codesandbox id="pj7zjq" />
+    <p>[![environment-blur-and-transitions demo](https://pmndrs.github.io/examples/environment-blur-and-transitions/thumbnail.webp)](https://pmndrs.github.io/examples/environment-blur-and-transitions)</p>
   </li>
   <li>
-    <Codesandbox id="wlz1o0" />
+    <p>[![pairing-threejs-to-ui demo](https://pmndrs.github.io/examples/pairing-threejs-to-ui/thumbnail.webp)](https://pmndrs.github.io/examples/pairing-threejs-to-ui)</p>
   </li>
   <li>
-    <Codesandbox id="7n2yru" />
+    <p>[![inverted-stencil-buffer demo](https://pmndrs.github.io/examples/inverted-stencil-buffer/thumbnail.webp)](https://pmndrs.github.io/examples/inverted-stencil-buffer)</p>
   </li>
   <li>
-    <Codesandbox id="z3f2mw" />
+    <p>[![stencil-mask demo](https://pmndrs.github.io/examples/stencil-mask/thumbnail.webp)](https://pmndrs.github.io/examples/stencil-mask)</p>
   </li>
   <li>
-    <Codesandbox id="btsbj" />
+    <p>[![transformcontrols-and-makedefault demo](https://pmndrs.github.io/examples/transformcontrols-and-makedefault/thumbnail.webp)](https://pmndrs.github.io/examples/transformcontrols-and-makedefault)</p>
   </li>
   <li>
-    <Codesandbox id="rz2g0" />
+    <p>[![bounds-and-makedefault demo](https://pmndrs.github.io/examples/bounds-and-makedefault/thumbnail.webp)](https://pmndrs.github.io/examples/bounds-and-makedefault)</p>
   </li>
   <li>
-    <Codesandbox id="8fo01" />
+    <p>[![instanced-vertex-colors demo](https://pmndrs.github.io/examples/instanced-vertex-colors/thumbnail.webp)](https://pmndrs.github.io/examples/instanced-vertex-colors)</p>
   </li>
   <li>
-    <Codesandbox id="7duy8" />
+    <p>[![progressive-loading-states-with-suspense demo](https://pmndrs.github.io/examples/progressive-loading-states-with-suspense/thumbnail.webp)](https://pmndrs.github.io/examples/progressive-loading-states-with-suspense)</p>
   </li>
   <li>
-    <Codesandbox id="bp6tmc" tags={['views', 'portals']} />
+    <p>[![view-tracking demo](https://pmndrs.github.io/examples/view-tracking/thumbnail.webp)](https://pmndrs.github.io/examples/view-tracking) -- <span>views</span>, <span>portals</span></p>
   </li>
   <li>
-    <Codesandbox id="r9w2ob" tags={['views', 'portals']} />
+    <p>[![multiple-views-with-uniform-controls demo](https://pmndrs.github.io/examples/multiple-views-with-uniform-controls/thumbnail.webp)](https://pmndrs.github.io/examples/multiple-views-with-uniform-controls) -- <span>views</span>, <span>portals</span></p>
   </li>
   <li>
-    <Codesandbox id="p9umgf" tags={['html', 'scroll']} />
+    <p>[![canvas-text demo](https://pmndrs.github.io/examples/canvas-text/thumbnail.webp)](https://pmndrs.github.io/examples/canvas-text) -- <span>html</span>, <span>scroll</span></p>
   </li>
   <li>
-    <Codesandbox id="k8phr" />
+    <p>[![gltf-animations-re-used demo](https://pmndrs.github.io/examples/gltf-animations-re-used/thumbnail.webp)](https://pmndrs.github.io/examples/gltf-animations-re-used)</p>
   </li>
   <li>
-    <Codesandbox id="dix1y" />
+    <p>[![re-using-gltfs demo](https://pmndrs.github.io/examples/re-using-gltfs/thumbnail.webp)](https://pmndrs.github.io/examples/re-using-gltfs)</p>
   </li>
   <li>
-    <Codesandbox id="zcuqh" />
+    <p>[![svg-renderer demo](https://pmndrs.github.io/examples/svg-renderer/thumbnail.webp)](https://pmndrs.github.io/examples/svg-renderer)</p>
   </li>
   <li>
-    <Codesandbox id="7ucso" />
+    <p>[![mixing-html-and-webgl demo](https://pmndrs.github.io/examples/mixing-html-and-webgl/thumbnail.webp)](https://pmndrs.github.io/examples/mixing-html-and-webgl)</p>
   </li>
   <li>
-    <Codesandbox id="py4db" />
+    <p>[![viewcube demo](https://pmndrs.github.io/examples/viewcube/thumbnail.webp)](https://pmndrs.github.io/examples/viewcube)</p>
   </li>
   <li>
-    <Codesandbox id="hf1cs" />
+    <p>[![mixing-controls demo](https://pmndrs.github.io/examples/mixing-controls/thumbnail.webp)](https://pmndrs.github.io/examples/mixing-controls)</p>
   </li>
   <li>
-    <Codesandbox id="39hg8" />
+    <p>[![video-textures demo](https://pmndrs.github.io/examples/video-textures/thumbnail.webp)](https://pmndrs.github.io/examples/video-textures)</p>
   </li>
   <li>
-    <Codesandbox id="wbrfs" />
+    <p>[![sky-dome-with-annotations demo](https://pmndrs.github.io/examples/sky-dome-with-annotations/thumbnail.webp)](https://pmndrs.github.io/examples/sky-dome-with-annotations)</p>
   </li>
   <li>
-    <Codesandbox id="itfgk" />
+    <p>[![tying-canvas-to-scroll-offset demo](https://pmndrs.github.io/examples/tying-canvas-to-scroll-offset/thumbnail.webp)](https://pmndrs.github.io/examples/tying-canvas-to-scroll-offset)</p>
   </li>
   <li>
-    <Codesandbox id="iup24" />
+    <p>[![edgesgeometry demo](https://pmndrs.github.io/examples/edgesgeometry/thumbnail.webp)](https://pmndrs.github.io/examples/edgesgeometry)</p>
   </li>
   <li>
-    <Codesandbox id="zu2wo" />
+    <p>[![html-annotations demo](https://pmndrs.github.io/examples/html-annotations/thumbnail.webp)](https://pmndrs.github.io/examples/html-annotations)</p>
   </li>
   <li>
-    <Codesandbox id="1g4qq" />
+    <p>[![shadermaterials demo](https://pmndrs.github.io/examples/shadermaterials/thumbnail.webp)](https://pmndrs.github.io/examples/shadermaterials)</p>
   </li>
   <li>
-    <Codesandbox id="z8e6m" />
+    <p>[![simple-physics-demo demo](https://pmndrs.github.io/examples/simple-physics-demo/thumbnail.webp)](https://pmndrs.github.io/examples/simple-physics-demo)</p>
   </li>
   <li>
-    <Codesandbox id="h545c" />
+    <p>[![trigger-meshes demo](https://pmndrs.github.io/examples/trigger-meshes/thumbnail.webp)](https://pmndrs.github.io/examples/trigger-meshes)</p>
   </li>
   <li>
-    <Codesandbox id="0k27n" />
+    <p>[![simple-physics-demo-with-debug-bounds demo](https://pmndrs.github.io/examples/simple-physics-demo-with-debug-bounds/thumbnail.webp)](https://pmndrs.github.io/examples/simple-physics-demo-with-debug-bounds)</p>
   </li>
   <li>
-    <Codesandbox id="d36mw" />
+    <p>[![selective-outlines demo](https://pmndrs.github.io/examples/selective-outlines/thumbnail.webp)](https://pmndrs.github.io/examples/selective-outlines)</p>
   </li>
   <li>
-    <Codesandbox id="h873k" />
+    <p>[![instances demo](https://pmndrs.github.io/examples/instances/thumbnail.webp)](https://pmndrs.github.io/examples/instances)</p>
   </li>
   <li>
-    <Codesandbox id="08s1u" />
+    <p>[![physics-with-convex-polyhedrons demo](https://pmndrs.github.io/examples/physics-with-convex-polyhedrons/thumbnail.webp)](https://pmndrs.github.io/examples/physics-with-convex-polyhedrons)</p>
   </li>
   <li>
-    <Codesandbox id="wvgxp" />
+    <p>[![color-grading demo](https://pmndrs.github.io/examples/color-grading/thumbnail.webp)](https://pmndrs.github.io/examples/color-grading)</p>
   </li>
   <li>
-    <Codesandbox id="5xho4" />
+    <p>[![grass-shader demo](https://pmndrs.github.io/examples/grass-shader/thumbnail.webp)](https://pmndrs.github.io/examples/grass-shader)</p>
   </li>
   <li>
-    <Codesandbox id="mbfzf" />
+    <p>[![clouds demo](https://pmndrs.github.io/examples/clouds/thumbnail.webp)](https://pmndrs.github.io/examples/clouds)</p>
   </li>
   <li>
-    <Codesandbox id="mkq8e" />
+    <p>[![svg-maps-with-html-annotations demo](https://pmndrs.github.io/examples/svg-maps-with-html-annotations/thumbnail.webp)](https://pmndrs.github.io/examples/svg-maps-with-html-annotations)</p>
   </li>
   <li>
-    <Codesandbox id="12nmp" />
+    <p>[![re-using-geometry-and-level-of-detail demo](https://pmndrs.github.io/examples/re-using-geometry-and-level-of-detail/thumbnail.webp)](https://pmndrs.github.io/examples/re-using-geometry-and-level-of-detail)</p>
   </li>
   <li>
-    <Codesandbox id="6oei7" />
+    <p>[![html-markers demo](https://pmndrs.github.io/examples/html-markers/thumbnail.webp)](https://pmndrs.github.io/examples/html-markers)</p>
   </li>
   <li>
-    <Codesandbox id="3k4g6" />
+    <p>[![bezier-curves-and-nodes demo](https://pmndrs.github.io/examples/bezier-curves-and-nodes/thumbnail.webp)](https://pmndrs.github.io/examples/bezier-curves-and-nodes)</p>
   </li>
   <li>
-    <Codesandbox id="3878x" />
+    <p>[![shader-fire demo](https://pmndrs.github.io/examples/shader-fire/thumbnail.webp)](https://pmndrs.github.io/examples/shader-fire)</p>
   </li>
   <li>
-    <Codesandbox id="1b40u" />
+    <p>[![water-shader demo](https://pmndrs.github.io/examples/water-shader/thumbnail.webp)](https://pmndrs.github.io/examples/water-shader)</p>
   </li>
   <li>
-    <Codesandbox id="0ycwe" />
+    <p>[![staging-and-camerashake demo](https://pmndrs.github.io/examples/staging-and-camerashake/thumbnail.webp)](https://pmndrs.github.io/examples/staging-and-camerashake)</p>
   </li>
   <li>
-    <Codesandbox id="ib0jc" />
+    <p>[![shader-hmr demo](https://pmndrs.github.io/examples/shader-hmr/thumbnail.webp)](https://pmndrs.github.io/examples/shader-hmr)</p>
   </li>
 </Grid>