diff --git a/bun.lock b/bun.lock
index cfd0bf0b0..6545d744c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -26,6 +26,7 @@
         "clsx": "^2.1.1",
         "culori": "4.0.2",
         "leva": "0.9.34",
+        "lodash-es": "4.17.21",
         "next": "15.3.6",
         "react": "19.2.2",
         "react-dom": "19.2.2",
@@ -34,6 +35,7 @@
         "@eslint/eslintrc": "3.2.0",
         "@tailwindcss/postcss": "4.1.12",
         "@types/culori": "4.0.0",
+        "@types/lodash-es": "4.17.12",
         "@types/node": "22.10.2",
         "@types/react": "19.1.0",
         "@types/react-dom": "19.1.1",
@@ -47,11 +49,11 @@
     },
     "packages/shaders": {
       "name": "@paper-design/shaders",
-      "version": "0.0.68",
+      "version": "0.0.69",
     },
     "packages/shaders-react": {
       "name": "@paper-design/shaders-react",
-      "version": "0.0.68",
+      "version": "0.0.69",
       "dependencies": {
         "@paper-design/shaders": "workspace:*",
       },
@@ -133,7 +135,7 @@
 
     "@emnapi/core": ["@emnapi/core@1.4.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.0.1", "tslib": "^2.4.0" } }, "sha512-H+N/FqT07NmLmt6OFFtDfwe8PNygprzBikrEMyQfgqSmT0vzE515Pz7R8izwB9q/zsH/MA64AKoul3sA6/CzVg=="],
 
-    "@emnapi/runtime": ["@emnapi/runtime@1.7.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA=="],
+    "@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
 
     "@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.0.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw=="],
 
@@ -415,6 +417,10 @@
 
     "@types/json5": ["@types/json5@0.0.29", "", {}, "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="],
 
+    "@types/lodash": ["@types/lodash@4.17.20", "", {}, "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA=="],
+
+    "@types/lodash-es": ["@types/lodash-es@4.17.12", "", { "dependencies": { "@types/lodash": "*" } }, "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ=="],
+
     "@types/node": ["@types/node@22.10.2", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ=="],
 
     "@types/react": ["@types/react@19.1.0", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-UaicktuQI+9UKyA4njtDOGBD/67t8YEBt2xdfqu8+gP9hqPUPsiXlNPcpS2gVdjmis5GKPG3fCxbQLVgxsQZ8w=="],
@@ -949,6 +955,8 @@
 
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
+    "lodash-es": ["lodash-es@4.17.21", "", {}, "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="],
+
     "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
 
     "log-symbols": ["log-symbols@5.1.0", "", { "dependencies": { "chalk": "^5.0.0", "is-unicode-supported": "^1.1.0" } }, "sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA=="],
diff --git a/docs/package.json b/docs/package.json
index cf93718c6..7ae931869 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -17,6 +17,7 @@
     "@vercel/analytics": "^1.5.0",
     "clsx": "^2.1.1",
     "culori": "4.0.2",
+    "lodash-es": "4.17.21",
     "leva": "0.9.34",
     "next": "15.3.6",
     "react": "19.2.2",
@@ -28,6 +29,7 @@
     "@types/node": "22.10.2",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.1",
+    "@types/lodash-es": "4.17.12",
     "@tailwindcss/postcss": "4.1.12",
     "eslint": "9.17.0",
     "eslint-config-next": "15.1.2",
diff --git a/docs/src/app/(shaders)/fluted-glass/page.tsx b/docs/src/app/(shaders)/fluted-glass/page.tsx
index 1852fa7b8..36587fe8b 100644
--- a/docs/src/app/(shaders)/fluted-glass/page.tsx
+++ b/docs/src/app/(shaders)/fluted-glass/page.tsx
@@ -90,11 +90,11 @@ const FlutedGlassWithControls = () => {
       stretch: { value: defaults.stretch, min: 0, max: 1, order: 216 },
       blur: { value: defaults.blur, min: 0, max: 1, order: 220 },
       edges: { value: defaults.edges, min: 0, max: 1, order: 221 },
-      margin: { value: defaults.margin, min: 0, max: 0.5, order: 500 },
-      // marginLeft: { value: defaults.marginLeft, min: 0, max: 1, order: 501 },
-      // marginRight: { value: defaults.marginRight, min: 0, max: 1, order: 502 },
-      // marginTop: { value: defaults.marginTop, min: 0, max: 1, order: 503 },
-      // marginBottom: { value: defaults.marginBottom, min: 0, max: 1, order: 504 },
+      // margin: { value: defaults.margin, min: 0, max: 0.5, order: 500 },
+      marginLeft: { value: defaults.marginLeft, min: 0, max: 1, order: 501 },
+      marginRight: { value: defaults.marginRight, min: 0, max: 1, order: 502 },
+      marginTop: { value: defaults.marginTop, min: 0, max: 1, order: 503 },
+      marginBottom: { value: defaults.marginBottom, min: 0, max: 1, order: 504 },
       grainMixer: { value: defaults.grainMixer, min: 0, max: 1, order: 550 },
       grainOverlay: { value: defaults.grainOverlay, min: 0, max: 1, order: 551 },
       scale: { value: defaults.scale, min: 0.5, max: 4, order: 600 },
diff --git a/docs/src/components/shader-container.tsx b/docs/src/components/shader-container.tsx
index f7202801c..578cd5aac 100644
--- a/docs/src/components/shader-container.tsx
+++ b/docs/src/components/shader-container.tsx
@@ -3,7 +3,10 @@ import { SerializableValue, serializeParams } from '@/helpers/url-serializer';
 import { ShaderDef } from '@/shader-defs/shader-def-types';
 import { Leva } from 'leva';
 import { CopyButton } from './copy-button';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import kebabCase from 'lodash-es/kebabCase';
+
+const appUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:5173' : 'https://app.paper.design';
 
 export function ShaderContainer({
   children,
@@ -13,23 +16,35 @@ export function ShaderContainer({
   currentParams?: Record<string, unknown>;
   shaderDef?: ShaderDef;
 }>) {
+  const [isClient, setIsClient] = useState(false);
+
+  // NOTE (douges): We set the URL after client hydration to minimize what's in the server-rendered HTML.
+  const openInPaperURL =
+    isClient && shaderDef
+      ? `${appUrl}/playground/${kebabCase(shaderDef.name)}#${serializeParams(currentParams as Record<string, SerializableValue>, shaderDef.params)}`
+      : appUrl;
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   return (
     <div className="md:mb-24">
       {shaderDef && currentParams && (
-        <div className="flex h-80 items-center justify-between border-t border-current/10 dark:border-current/20">
+        <div className="border-current/10 dark:border-current/20 flex h-80 items-center justify-between border-t">
           <h1 className="text-3xl font-[330] lowercase">{shaderDef.name}</h1>
 
           <div className="hidden items-center gap-24 lg:flex">
             <CopyLinkButton
               shaderDef={shaderDef}
               currentParams={currentParams}
-              className="-mx-8 flex h-32 items-center gap-8 rounded-md px-8 outline-0 outline-focus transition-colors hover:bg-backplate-2 focus-visible:outline-2 active:bg-backplate-3 squircle:rounded-lg"
+              className="outline-focus hover:bg-backplate-2 active:bg-backplate-3 squircle:rounded-lg -mx-8 flex h-32 items-center gap-8 rounded-md px-8 outline-0 transition-colors focus-visible:outline-2"
             />
 
             <a
-              href="https://app.paper.design"
+              href={openInPaperURL}
               target="_blank"
-              className="-mx-8 flex h-32 items-center gap-8 rounded-md px-8 outline-0 outline-focus transition-colors hover:bg-backplate-2 focus-visible:outline-2 active:bg-backplate-3 squircle:rounded-lg"
+              className="outline-focus hover:bg-backplate-2 active:bg-backplate-3 squircle:rounded-lg -mx-8 flex h-32 items-center gap-8 rounded-md px-8 outline-0 transition-colors focus-visible:outline-2"
             >
               <svg width="14" height="14" viewBox="0 0 14 14" fill="currentcolor">
                 <path d="M12.2041 0.0107422C13.2128 0.113003 14 0.964351 14 2V12L13.9893 12.2041C13.8938 13.1457 13.1457 13.8938 12.2041 13.9893L12 14H6V13H12C12.5523 13 13 12.5523 13 12V2C13 1.48233 12.6067 1.05623 12.1025 1.00488L12 1H2C1.48232 1 1.05621 1.39333 1.00488 1.89746L1 2V8H0V2C0 0.89543 0.89543 0 2 0H12L12.2041 0.0107422Z" />
@@ -37,7 +52,7 @@ export function ShaderContainer({
               </svg>
 
               <span>
-                open <span style={{ fontFeatureSettings: '"ss01"' }}>Paper</span>
+                open in <span style={{ fontFeatureSettings: '"ss01"' }}>Paper</span>
               </span>
             </a>
           </div>
@@ -48,7 +63,7 @@ export function ShaderContainer({
         <ResizableShader>{children}</ResizableShader>
 
         <div
-          className="absolute -top-4 -right-332 hidden w-300 overflow-auto rounded-xl bg-(--color-leva-background) pb-4 has-[[data-leva-container]>[style*='display:none']]:hidden lg:block squircle:rounded-2xl"
+          className="-right-332 w-300 bg-(--color-leva-background) squircle:rounded-2xl absolute -top-4 hidden overflow-auto rounded-xl pb-4 has-[[data-leva-container]>[style*='display:none']]:hidden lg:block"
           style={{
             boxShadow: `
             rgba(58, 34, 17, 0.1) 0px 4px 40px -8px,
@@ -116,13 +131,13 @@ function ResizableShader({ children }: React.PropsWithChildren) {
 
   return (
     <div
-      className="flex aspect-4/3 *:size-full *:max-h-full not-has-[[data-paper-shader]]:bg-header xs:aspect-3/2 md:aspect-16/9"
+      className="aspect-4/3 not-has-[[data-paper-shader]]:bg-header xs:aspect-3/2 md:aspect-16/9 flex *:size-full *:max-h-full"
       onPointerMove={(event) => setCanStartResize(event.altKey)}
       onPointerLeave={() => setCanStartResize(false)}
     >
       <div
         data-resizable={canStartResize || undefined}
-        className="flex overflow-hidden *:size-full data-resizable:resize [[style*='width']]:resize"
+        className="data-resizable:resize [[style*='width']]:resize flex overflow-hidden *:size-full"
       >
         {children}
       </div>