diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000..bf2e7648
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=true
diff --git a/apps/website/app/demos/[demoname]/Dev.tsx b/apps/website/app/demos/[demoname]/Dev.tsx
index 0583f4f8..19685c74 100644
--- a/apps/website/app/demos/[demoname]/Dev.tsx
+++ b/apps/website/app/demos/[demoname]/Dev.tsx
@@ -13,10 +13,26 @@ export function Dev({ demoname }: { demoname: string }) {
       <Style
         css={`
           @scope {
+            :scope {
+              width: min(100%, 46rem);
+            }
+
+            .content {
+              display: grid;
+              gap: 1rem;
+              justify-items: start;
+            }
+
+            p {
+              margin: 0;
+            }
+
             pre {
               background: rgb(13, 13, 13);
               padding: 1rem;
               border-radius: 0.35rem;
+              margin: 0;
+              width: 100%;
             }
             code {
               color: white;
@@ -41,18 +57,20 @@ export function Dev({ demoname }: { demoname: string }) {
         `}
       />
 
-      <p>Start this demo with :</p>
-      <pre
-        onClick={(e) => {
-          navigator.clipboard.writeText(cmd);
-        }}
-      >
-        <code>{cmd}</code>
-        <a>copy</a>
-      </pre>
-      <p>
-        Then <a onClick={(e) => refresh()}>refresh</a>
-      </p>
+      <div className="content">
+        <p>Start this demo with :</p>
+        <pre
+          onClick={(e) => {
+            navigator.clipboard.writeText(cmd);
+          }}
+        >
+          <code>{cmd}</code>
+          <a>copy</a>
+        </pre>
+        <p>
+          Then <a onClick={(e) => refresh()}>refresh</a>
+        </p>
+      </div>
     </div>
   );
 }
diff --git a/apps/website/app/demos/[demoname]/layout.tsx b/apps/website/app/demos/[demoname]/layout.tsx
index 01d1ae6d..415689a8 100644
--- a/apps/website/app/demos/[demoname]/layout.tsx
+++ b/apps/website/app/demos/[demoname]/layout.tsx
@@ -18,13 +18,11 @@ export default function Layout({
         css={`
           @scope {
             :scope {
+              width: 100%;
               height: 100%;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              > * {
-                max-width: 100%;
-              }
+              min-width: 0;
+              min-height: 0;
+              display: grid;
             }
           }
         `}
diff --git a/apps/website/app/demos/[demoname]/page.tsx b/apps/website/app/demos/[demoname]/page.tsx
index 6b64f964..b63da732 100644
--- a/apps/website/app/demos/[demoname]/page.tsx
+++ b/apps/website/app/demos/[demoname]/page.tsx
@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation";
 
+import { ScaledDemoFrame } from "@/components/ScaledDemoFrame";
 import { getDemos } from "@/lib/helper";
 import { Dev } from "./Dev";
 import { Style } from "@/components/Style";
@@ -77,11 +78,17 @@ export default async function Page(props: Props) {
         css={`
           @scope {
             .Dev {
-              padding-inline: 1rem;
+              width: 100%;
+              height: 100%;
+              display: grid;
+              place-items: center;
+              padding: 1rem;
             }
-            iframe {
+            .Frame {
               width: 100%;
-              min-height: 100dvh;
+              height: 100%;
+              min-width: 0;
+              min-height: 0;
             }
             .Social {
               position: fixed;
@@ -101,7 +108,9 @@ export default async function Page(props: Props) {
         <Dev demoname={demoname} />
       ) : (
         <>
-          <iframe src={embed_url} />
+          <div className="Frame">
+            <ScaledDemoFrame src={embed_url} title={demoname} />
+          </div>
 
           <Social demoname={demoname} embed_url={embed_url} />
         </>
diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
index 7f00e20f..7bb0325d 100644
--- a/apps/website/app/layout.tsx
+++ b/apps/website/app/layout.tsx
@@ -25,32 +25,54 @@ export default function RootLayout({
           css={`
             @scope {
               :scope {
+                --sidebar-w: 260px;
+                --motion-curve: linear(
+                  0.00, 0.00780, 0.0340, 0.0738, 0.116, 0.160, 0.203, 0.244,
+                  0.284, 0.322, 0.357, 0.391, 0.422, 0.453, 0.483, 0.510,
+                  0.536, 0.561, 0.583, 0.606, 0.627, 0.646, 0.665, 0.683,
+                  0.700, 0.716, 0.731, 0.745, 0.759, 0.771, 0.784, 0.795,
+                  0.806, 0.816, 0.826, 0.835, 0.844, 0.852, 0.859, 0.867,
+                  0.874, 0.881, 0.887, 0.893, 0.899, 0.904, 0.909, 0.914,
+                  0.919, 0.923, 0.927, 0.931, 0.935, 0.938, 0.941, 0.944,
+                  0.947, 0.950, 0.953, 0.955, 0.958, 0.960, 0.962, 0.964,
+                  0.966, 0.968, 0.969, 0.971, 0.973, 0.974, 0.975, 0.977,
+                  0.978, 0.979, 0.980, 0.981, 0.982, 0.983, 0.984, 0.985,
+                  0.986, 0.987, 0.987, 0.988, 0.989, 0.989, 0.990, 0.990,
+                  0.991, 0.991, 0.992, 0.992, 0.993, 0.993, 0.993, 0.994,
+                  0.994, 0.994, 0.995, 0.995, 0.995, 0.995, 0.996, 0.996,
+                  0.996, 0.996, 0.997, 0.997, 0.997, 0.997, 0.997, 0.997,
+                  0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998,
+                  0.998, 0.998, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999,
+                  0.999, 0.999, 1.00
+                );
+
                 background: #eee;
+                display: grid;
+                grid-template-columns: var(--sidebar-w) 1fr;
+                height: 100dvh;
+                transition: grid-template-columns 1078ms var(--motion-curve);
               }
 
-              main {
-                position: fixed;
-                width: 100%;
-                height: 100dvh;
+              :scope:has(.Nav[data-collapsed]) {
+                grid-template-columns: 0px 1fr;
               }
 
-              .Nav {
-                position: fixed;
-                bottom: 0;
+              main {
                 width: 100%;
-                overflow: auto;
-
-                @media (min-aspect-ratio: 1/1) {
-                  display: inline-block;
-                  position: static;
-                }
+                height: 100dvh;
+                overflow: hidden;
+                display: grid;
+                place-items: center;
+                padding: 1.5rem;
+                min-width: 0;
+                min-height: 0;
               }
             }
           `}
         />
 
-        <main>{children}</main>
         <Nav demos={demos} />
+        <main>{children}</main>
       </body>
     </html>
   );
diff --git a/apps/website/components/Nav.tsx b/apps/website/components/Nav.tsx
index 94b91bba..cbd354af 100644
--- a/apps/website/components/Nav.tsx
+++ b/apps/website/components/Nav.tsx
@@ -6,8 +6,10 @@ import {
   ComponentProps,
   createRef,
   ElementRef,
+  useCallback,
   useEffect,
   useRef,
+  useState,
 } from "react";
 import { useParams } from "next/navigation";
 import clsx from "clsx";
@@ -15,6 +17,8 @@ import clsx from "clsx";
 import { getDemos } from "@/lib/helper";
 import { Style } from "./Style";
 
+const STORAGE_KEY = "nav-collapsed";
+
 export default function Nav({
   demos,
   ...props
@@ -24,6 +28,20 @@ export default function Nav({
     Array.from({ length: demos.length }).map(() => createRef<HTMLLIElement>()),
   );
 
+  const [collapsed, setCollapsed] = useState(false);
+
+  useEffect(() => {
+    setCollapsed(localStorage.getItem(STORAGE_KEY) === "1");
+  }, []);
+
+  const toggle = useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev;
+      localStorage.setItem(STORAGE_KEY, next ? "1" : "0");
+      return next;
+    });
+  }, []);
+
   const { demoname } = useParams();
 
   const firstRef = useRef(true);
@@ -39,76 +57,210 @@ export default function Nav({
     firstRef.current = false;
   }, [demoname, demos]);
 
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "[" && e.metaKey) toggle();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [toggle]);
+
   return (
-    <div className="Nav">
+    <div className="Nav" data-collapsed={collapsed || undefined}>
       <Style
         css={`
           @scope {
+            :scope {
+              position: relative;
+              height: 100dvh;
+              min-width: 0;
+              overflow: visible;
+              z-index: 2;
+            }
+
             nav {
-              @media (min-aspect-ratio: 1/1) {
-                ul {
-                  display: inline-flex;
-                  flex-direction: column;
-                }
+              height: 100%;
+              overflow-y: auto;
+              overscroll-behavior: contain;
+              scrollbar-gutter: stable;
+              opacity: 1;
+              transform: translateX(0);
+              transition:
+                opacity 0.2s linear,
+                transform 1078ms var(--motion-curve);
+            }
+
+            :scope[data-collapsed] nav {
+              opacity: 0;
+              pointer-events: none;
+              transform: translateX(-1rem);
+            }
+
+            .toggle {
+              position: absolute;
+              top: 50%;
+              right: 0;
+              translate: 50% -50%;
+              z-index: 10;
+
+              width: 2.75rem;
+              height: 5.5rem;
+              border-radius: 999px;
+              background: rgb(255 255 255 / 0.92);
+              border: 1px solid #d4d4d4;
+              cursor: pointer;
+              display: grid;
+              place-items: center;
+              color: #666;
+              transition:
+                background 0.15s ease,
+                color 0.15s ease,
+                box-shadow 0.15s ease,
+                translate 0.25s ease;
+              box-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
+              backdrop-filter: blur(12px);
+
+              &:hover {
+                background: #f5f5f5;
+                color: #222;
+                box-shadow: 0 14px 36px rgb(0 0 0 / 0.16);
               }
             }
 
+            .toggleInner {
+              display: grid;
+              gap: 0.35rem;
+              justify-items: center;
+            }
+
+            .toggleLabel {
+              font-size: 0.6rem;
+              line-height: 1;
+              letter-spacing: 0.08em;
+              text-transform: uppercase;
+              writing-mode: vertical-rl;
+              text-orientation: mixed;
+            }
+
+            .toggle svg {
+              width: 0.7rem;
+              height: 0.7rem;
+              transform: rotate(0deg);
+              transition: transform 1078ms var(--motion-curve);
+            }
+
+            :scope[data-collapsed] .toggle {
+              translate: 15% -50%;
+            }
+
+            :scope[data-collapsed] .toggle::before {
+              content: "";
+              position: absolute;
+              inset: -1rem;
+              inset-inline-end: -3rem;
+            }
+
+            :scope[data-collapsed] .toggle:hover {
+              translate: 65% -50%;
+            }
+
+            :scope[data-collapsed] .toggle svg {
+              transform: rotate(180deg);
+            }
+
             ul {
               padding-inline-start: unset;
               list-style: none;
-
-              padding: 2rem;
+              padding: 1rem 0.75rem 1rem 1rem;
               display: flex;
-              gap: 1rem;
-              position: relative;
-              > li {
-                flex: none;
-              }
+              flex-direction: column;
+              gap: 0.75rem;
+              margin: 0;
             }
 
             li {
               padding-inline-start: unset;
+              transform: scale(1);
+              transition: transform 1078ms var(--motion-curve);
+            }
+
+            li:active {
+              transform: scale(0.97);
             }
 
             a {
               display: block;
               background: white;
+              border-radius: 6px;
+              overflow: hidden;
+              outline: 2px solid transparent;
+              outline-offset: 2px;
+              transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+            }
+
+            a:hover {
+              box-shadow: 0 2px 12px rgb(0 0 0 / 0.1);
             }
 
             a.active {
-              outline: 1px solid black;
+              outline-color: black;
+            }
+
+            .thumb {
+              position: relative;
+              aspect-ratio: 16/9;
+              width: 100%;
+              overflow: hidden;
             }
 
             a img {
               object-fit: cover;
-              aspect-ratio: 16/9;
-              width: auto;
-              height: 7rem;
+              width: 100%;
+              height: 100%;
+              display: block;
               color: inherit !important;
-              font-size: 0.8rem;
+              font-size: 0.7rem;
               background: none;
             }
-            a img:after {
-              content: "";
-            }
+
           }
         `}
       />
 
+      <button
+        className="toggle"
+        onClick={toggle}
+        aria-label={collapsed ? "Show demos" : "Hide demos"}
+        aria-pressed={!collapsed}
+      >
+        <span className="toggleInner">
+          <svg viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M5 1L1 5L5 9"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <span className="toggleLabel">{collapsed ? "show" : "hide"}</span>
+        </span>
+      </button>
+
       <nav {...props}>
         <ul ref={ulRef}>
-          {demos.map(({ name, thumb }, i) => {
-            return (
-              <li key={thumb} ref={lisRef.current[i]}>
-                <Link
-                  href={`/demos/${name}`}
-                  className={clsx({ active: demoname === name })}
-                >
-                  <Image src={thumb} width={16} height={9} alt={name} />
-                </Link>
-              </li>
-            );
-          })}
+          {demos.map(({ name, thumb }, i) => (
+            <li key={thumb} ref={lisRef.current[i]}>
+              <Link
+                href={`/demos/${name}`}
+                className={clsx({ active: demoname === name })}
+              >
+                <div className="thumb">
+                  <Image src={thumb} fill sizes="227px" alt={name} />
+                </div>
+              </Link>
+            </li>
+          ))}
         </ul>
       </nav>
     </div>
diff --git a/apps/website/components/ScaledDemoFrame.tsx b/apps/website/components/ScaledDemoFrame.tsx
new file mode 100644
index 00000000..b6748383
--- /dev/null
+++ b/apps/website/components/ScaledDemoFrame.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import { Style } from "./Style";
+
+type FrameState = {
+  width: number;
+  height: number;
+  scale: number;
+};
+
+export function ScaledDemoFrame({
+  src,
+  title,
+}: {
+  src: string;
+  title: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [frame, setFrame] = useState<FrameState>({
+    width: 1,
+    height: 1,
+    scale: 1,
+  });
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const update = () => {
+      const rect = container.getBoundingClientRect();
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      const scale = Math.min(rect.width / width, rect.height / height, 1);
+
+      setFrame({ width, height, scale });
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(container);
+    window.addEventListener("resize", update);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, []);
+
+  return (
+    <div className="ScaledDemoFrame" ref={containerRef}>
+      <Style
+        css={`
+          @scope {
+            :scope {
+              position: relative;
+              width: 100%;
+              height: 100%;
+              min-width: 0;
+              min-height: 0;
+            }
+
+            iframe {
+              position: absolute;
+              inset: 50% auto auto 50%;
+              border: none;
+              display: block;
+              background: white;
+              border-radius: 16px;
+              box-shadow: 0 24px 60px rgb(0 0 0 / 0.16);
+              transition: box-shadow 0.2s ease;
+            }
+          }
+        `}
+      />
+      <iframe
+        src={src}
+        title={title}
+        style={{
+          width: `${frame.width}px`,
+          height: `${frame.height}px`,
+          transform: `translate(-50%, -50%) scale(${frame.scale})`,
+        }}
+      />
+    </div>
+  );
+}