pmndrs · abernier · Aug 13, 2024 · Aug 13, 2024 · Aug 13, 2024
diff --git a/apps/website/app/demos/[demoname]/layout.tsx b/apps/website/app/demos/[demoname]/layout.tsx
@@ -2,6 +2,10 @@ import { ComponentProps } from "react";
 
 import Page from "./page";
 import { Style } from "@/components/Style";
+import { getDemos } from "@/lib/helper";
+import Nav from "@/components/Nav";
+
+const demos = getDemos();
 
 export default function Layout({
   params,
@@ -17,27 +21,46 @@ export default function Layout({
       <Style
         css={`
           @scope {
-            :scope {
-              height: 100%;
+            main {
+              position: fixed;
+              width: 100%;
+              height: 100dvh;
+
               display: flex;
               align-items: center;
               justify-content: center;
+
               > .Dev {
                 max-width: 100%;
               }
             }
 
+            .Nav {
+              position: fixed;
+              bottom: 0;
+              width: 100%;
+              overflow: auto;
+
+              @media (min-aspect-ratio: 1/1) {
+                position: static;
+                display: inline-block;
+              }
+            }
+
             .Dev {
               padding-inline: 1rem;
             }
+
             iframe {
               width: 100%;
               min-height: 100dvh;
             }
           }
         `}
       />
-      {children}
+      <main>{children}</main>
+
+      <Nav demos={demos} />
     </div>
   );
 }
diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
@@ -1,12 +1,10 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import Nav from "@/components/Nav";
-import { getDemos } from "@/lib/helper";
+
 import { Style } from "@/components/Style";
 
 const inter = Inter({ subsets: ["latin"] });
-const demos = getDemos();
 
 export const metadata: Metadata = {
   title: "pmndrs examples",
@@ -18,6 +16,13 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const fsMin = 16;
+  const fsMax = 32;
+  const wMin = 400;
+  const wMax = 2500;
+  const slope = (fsMax - fsMin) / (wMax - wMin);
+  const yAxisIntersection = -wMin * slope + fsMin;
+
   return (
     <html lang="en">
       <body className={inter.className}>
@@ -26,31 +31,18 @@ export default function RootLayout({
             @scope {
               :scope {
                 background: #eee;
-              }
-
-              main {
-                position: fixed;
-                width: 100%;
-                height: 100dvh;
-              }
-
-              .Nav {
-                position: fixed;
-                bottom: 0;
-                width: 100%;
-                overflow: auto;
 
-                @media (min-aspect-ratio: 1/1) {
-                  display: inline-block;
-                  position: static;
-                }
+                --fs: clamp(
+                  ${fsMin}px,
+                  ${yAxisIntersection}px + ${slope * 100}vw,
+                  ${fsMax}px
+                );
               }
             }
           `}
         />
 
-        <main>{children}</main>
-        <Nav demos={demos} />
+        {children}
       </body>
     </html>
   );

diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx
@@ -1,4 +1,8 @@
+import Nav from "@/components/Nav";
 import { Style } from "@/components/Style";
+import { getDemos } from "@/lib/helper";
+
+const demos = getDemos();
 
 export default function Page() {
   return (
@@ -7,16 +11,31 @@ export default function Page() {
         css={`
           @scope {
             :scope {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              width: 100%;
-              min-height: 100dvh;
+            }
+
+            .Nav {
+              ul {
+                padding: 0;
+                gap: 0;
+
+                display: grid;
+                --w: calc(7 * var(--fs));
+                grid-template-columns: repeat(auto-fit, minmax(var(--w), 1fr));
+              }
+              li {
+                max-inline-size: none;
+              }
+
+              a img {
+                width: 100%;
+                height: auto;
+              }
             }
           }
         `}
       />
-      Select a demo
+
+      <Nav demos={demos} />
     </div>
   );
 }
diff --git a/apps/website/components/Nav.tsx b/apps/website/components/Nav.tsx
@@ -26,17 +26,20 @@ export default function Nav({
 
   const { demoname } = useParams();
 
-  const firstRef = useRef(true);
+  // const firstRef = useRef(true);
   useEffect(() => {
     const i = demos.findIndex(({ name }) => name === demoname);
     const li = lisRef.current[i]?.current;
+
+    // const behavior = firstRef.current ? "instant" : "smooth";
+    // console.log("behavior", behavior);
     if (li)
       li.scrollIntoView({
         inline: "center",
         block: "center",
-        behavior: firstRef.current ? "instant" : "smooth",
+        behavior: "smooth",
       });
-    firstRef.current = false;
+    // firstRef.current = false;
   }, [demoname, demos]);
 
   return (

diff --git a/apps/website/lib/helper.ts b/apps/website/lib/helper.ts
@@ -24,7 +24,7 @@ export function getDemos() {
 
       return {
         name: demoname,
-        thumb: `${embed_url}/thumbnail.png`,
+        thumb: `${embed_url}/thumbnail.webp`,
         embed_url,
         website_url,
       };

diff --git a/demos/aquarium/README.md b/demos/aquarium/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/aquarium)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/aquarium)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/aquarium/thumbnail.png b/demos/aquarium/thumbnail.png
diff --git a/demos/aquarium/thumbnail.webp b/demos/aquarium/thumbnail.webp
diff --git a/demos/arkanoid-under-60-loc/README.md b/demos/arkanoid-under-60-loc/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/arkanoid-under-60-loc)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/arkanoid-under-60-loc)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/arkanoid-under-60-loc/thumbnail.png b/demos/arkanoid-under-60-loc/thumbnail.png
diff --git a/demos/arkanoid-under-60-loc/thumbnail.webp b/demos/arkanoid-under-60-loc/thumbnail.webp
diff --git a/demos/arkanoid/README.md b/demos/arkanoid/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/arkanoid)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/arkanoid)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/arkanoid/thumbnail.png b/demos/arkanoid/thumbnail.png
diff --git a/demos/arkanoid/thumbnail.webp b/demos/arkanoid/thumbnail.webp
diff --git a/demos/audio-analyser/README.md b/demos/audio-analyser/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/audio-analyser)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/audio-analyser)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/audio-analyser/thumbnail.png b/demos/audio-analyser/thumbnail.png
diff --git a/demos/audio-analyser/thumbnail.webp b/demos/audio-analyser/thumbnail.webp
diff --git a/demos/backdrop-and-cables/README.md b/demos/backdrop-and-cables/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/backdrop-and-cables)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/backdrop-and-cables)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/backdrop-and-cables/thumbnail.png b/demos/backdrop-and-cables/thumbnail.png
diff --git a/demos/backdrop-and-cables/thumbnail.webp b/demos/backdrop-and-cables/thumbnail.webp
diff --git a/demos/baking-soft-shadows/README.md b/demos/baking-soft-shadows/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/baking-soft-shadows)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/baking-soft-shadows)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/baking-soft-shadows/thumbnail.png b/demos/baking-soft-shadows/thumbnail.png
diff --git a/demos/baking-soft-shadows/thumbnail.webp b/demos/baking-soft-shadows/thumbnail.webp
diff --git a/demos/basic-ballpit/README.md b/demos/basic-ballpit/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/basic-ballpit)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/basic-ballpit)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/basic-ballpit/thumbnail.png b/demos/basic-ballpit/thumbnail.png
diff --git a/demos/basic-ballpit/thumbnail.webp b/demos/basic-ballpit/thumbnail.webp
diff --git a/demos/basic-demo/README.md b/demos/basic-demo/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/basic-demo)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/basic-demo)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/basic-demo/thumbnail.png b/demos/basic-demo/thumbnail.png
diff --git a/demos/basic-demo/thumbnail.webp b/demos/basic-demo/thumbnail.webp
diff --git a/demos/bestservedbold-christmas-baubles/README.md b/demos/bestservedbold-christmas-baubles/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/bestservedbold-christmas-baubles)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/bestservedbold-christmas-baubles)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/bestservedbold-christmas-baubles/thumbnail.png b/demos/bestservedbold-christmas-baubles/thumbnail.png
diff --git a/demos/bestservedbold-christmas-baubles/thumbnail.webp b/demos/bestservedbold-christmas-baubles/thumbnail.webp
diff --git a/demos/bezier-curves-and-nodes/README.md b/demos/bezier-curves-and-nodes/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/bezier-curves-and-nodes)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/bezier-curves-and-nodes)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/bezier-curves-and-nodes/thumbnail.png b/demos/bezier-curves-and-nodes/thumbnail.png
diff --git a/demos/bezier-curves-and-nodes/thumbnail.webp b/demos/bezier-curves-and-nodes/thumbnail.webp
diff --git a/demos/bloom-hdr-workflow-gltf/README.md b/demos/bloom-hdr-workflow-gltf/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/bloom-hdr-workflow-gltf)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/bloom-hdr-workflow-gltf)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/bloom-hdr-workflow-gltf/thumbnail.png b/demos/bloom-hdr-workflow-gltf/thumbnail.png
diff --git a/demos/bloom-hdr-workflow-gltf/thumbnail.webp b/demos/bloom-hdr-workflow-gltf/thumbnail.webp
diff --git a/demos/bouncy-watch/README.md b/demos/bouncy-watch/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/bouncy-watch)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/bouncy-watch)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/bouncy-watch/thumbnail.png b/demos/bouncy-watch/thumbnail.png
diff --git a/demos/bouncy-watch/thumbnail.webp b/demos/bouncy-watch/thumbnail.webp
diff --git a/demos/bounds-and-makedefault/README.md b/demos/bounds-and-makedefault/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/bounds-and-makedefault)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/bounds-and-makedefault)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/bounds-and-makedefault/thumbnail.png b/demos/bounds-and-makedefault/thumbnail.png
diff --git a/demos/bounds-and-makedefault/thumbnail.webp b/demos/bounds-and-makedefault/thumbnail.webp
diff --git a/demos/bruno-simons-20k-challenge/README.md b/demos/bruno-simons-20k-challenge/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/bruno-simons-20k-challenge)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/bruno-simons-20k-challenge)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/bruno-simons-20k-challenge/thumbnail.png b/demos/bruno-simons-20k-challenge/thumbnail.png
diff --git a/demos/bruno-simons-20k-challenge/thumbnail.webp b/demos/bruno-simons-20k-challenge/thumbnail.webp
diff --git a/demos/building-dynamic-envmaps/README.md b/demos/building-dynamic-envmaps/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/building-dynamic-envmaps)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/building-dynamic-envmaps)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/building-dynamic-envmaps/thumbnail.png b/demos/building-dynamic-envmaps/thumbnail.png
diff --git a/demos/building-dynamic-envmaps/thumbnail.webp b/demos/building-dynamic-envmaps/thumbnail.webp
diff --git a/demos/building-live-envmaps/README.md b/demos/building-live-envmaps/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/building-live-envmaps)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/building-live-envmaps)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/building-live-envmaps/thumbnail.png b/demos/building-live-envmaps/thumbnail.png
diff --git a/demos/building-live-envmaps/thumbnail.webp b/demos/building-live-envmaps/thumbnail.webp
diff --git a/demos/bvh/README.md b/demos/bvh/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/bvh)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/bvh)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/bvh/thumbnail.png b/demos/bvh/thumbnail.png
diff --git a/demos/bvh/thumbnail.webp b/demos/bvh/thumbnail.webp
diff --git a/demos/camera-scroll/README.md b/demos/camera-scroll/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/camera-scroll)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/camera-scroll)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/camera-scroll/thumbnail.png b/demos/camera-scroll/thumbnail.png
diff --git a/demos/camera-scroll/thumbnail.webp b/demos/camera-scroll/thumbnail.webp
diff --git a/demos/camera-shake/README.md b/demos/camera-shake/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/camera-shake)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/camera-shake)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/camera-shake/thumbnail.png b/demos/camera-shake/thumbnail.png
diff --git a/demos/camera-shake/thumbnail.webp b/demos/camera-shake/thumbnail.webp
diff --git a/demos/canvas-text/README.md b/demos/canvas-text/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/canvas-text)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/canvas-text)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/canvas-text/thumbnail.png b/demos/canvas-text/thumbnail.png
diff --git a/demos/canvas-text/thumbnail.webp b/demos/canvas-text/thumbnail.webp
diff --git a/demos/cards-with-border-radius/README.md b/demos/cards-with-border-radius/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/cards-with-border-radius)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/cards-with-border-radius)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/cards-with-border-radius/thumbnail.png b/demos/cards-with-border-radius/thumbnail.png
diff --git a/demos/cards-with-border-radius/thumbnail.webp b/demos/cards-with-border-radius/thumbnail.webp
diff --git a/demos/cards/README.md b/demos/cards/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/cards)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/cards)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/cards/thumbnail.png b/demos/cards/thumbnail.png
diff --git a/demos/cards/thumbnail.webp b/demos/cards/thumbnail.webp
diff --git a/demos/caustics/README.md b/demos/caustics/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/caustics)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/caustics)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/caustics/thumbnail.png b/demos/caustics/thumbnail.png
diff --git a/demos/caustics/thumbnail.webp b/demos/caustics/thumbnail.webp
diff --git a/demos/cell-fracture/README.md b/demos/cell-fracture/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/cell-fracture)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/cell-fracture)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/cell-fracture/thumbnail.png b/demos/cell-fracture/thumbnail.png
diff --git a/demos/cell-fracture/thumbnail.webp b/demos/cell-fracture/thumbnail.webp
diff --git a/demos/clones/README.md b/demos/clones/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/clones)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/clones)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/clones/thumbnail.png b/demos/clones/thumbnail.png
diff --git a/demos/clones/thumbnail.webp b/demos/clones/thumbnail.webp
diff --git a/demos/clouds/README.md b/demos/clouds/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/clouds)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/clouds)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/clouds/thumbnail.png b/demos/clouds/thumbnail.png
diff --git a/demos/clouds/thumbnail.webp b/demos/clouds/thumbnail.webp
diff --git a/demos/color-grading/README.md b/demos/color-grading/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/color-grading)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/color-grading)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/color-grading/thumbnail.png b/demos/color-grading/thumbnail.png
diff --git a/demos/color-grading/thumbnail.webp b/demos/color-grading/thumbnail.webp
diff --git a/demos/confetti/README.md b/demos/confetti/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/confetti)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/confetti)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/confetti/thumbnail.png b/demos/confetti/thumbnail.png
diff --git a/demos/confetti/thumbnail.webp b/demos/confetti/thumbnail.webp
diff --git a/demos/csg-bunny-usegroups/README.md b/demos/csg-bunny-usegroups/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/csg-bunny-usegroups)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/csg-bunny-usegroups)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/csg-bunny-usegroups/thumbnail.png b/demos/csg-bunny-usegroups/thumbnail.png
diff --git a/demos/csg-bunny-usegroups/thumbnail.webp b/demos/csg-bunny-usegroups/thumbnail.webp
diff --git a/demos/csg-house/README.md b/demos/csg-house/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/csg-house)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/csg-house)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/csg-house/thumbnail.png b/demos/csg-house/thumbnail.png
diff --git a/demos/csg-house/thumbnail.webp b/demos/csg-house/thumbnail.webp
diff --git a/demos/csg-operations-rapier-physics/README.md b/demos/csg-operations-rapier-physics/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/csg-operations-rapier-physics)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/csg-operations-rapier-physics)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/csg-operations-rapier-physics/thumbnail.png b/demos/csg-operations-rapier-physics/thumbnail.png
diff --git a/demos/csg-operations-rapier-physics/thumbnail.webp b/demos/csg-operations-rapier-physics/thumbnail.webp
diff --git a/demos/dbismut-furniture/README.md b/demos/dbismut-furniture/README.md
@@ -2,4 +2,4 @@
 [![CodeSandbox](https://img.shields.io/badge/codesandbox-040404?logo=codesandbox&logoColor=DBDBDB)](https://codesandbox.io/s/github/pmndrs/examples/tree/main/demos/dbismut-furniture)
 [![Stackblitz](https://img.shields.io/badge/stackblitz-fff?logo=Stackblitz&logoColor=1389FD)](https://stackblitz.com/github/pmndrs/examples/tree/main/demos/dbismut-furniture)
 
-![](thumbnail.png)
+![](thumbnail.webp)
diff --git a/demos/dbismut-furniture/thumbnail.png b/demos/dbismut-furniture/thumbnail.png
diff --git a/demos/dbismut-furniture/thumbnail.webp b/demos/dbismut-furniture/thumbnail.webp