From 9ca7907674dab9846aaa3bafdf7ffb565b97ccca Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Wed, 5 Nov 2025 16:17:59 +1100 Subject: [PATCH 1/8] feat: update open paper link --- bun.lock | 12 ++++++++++-- docs/package.json | 2 ++ docs/src/components/shader-container.tsx | 15 ++++++++------- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/bun.lock b/bun.lock index d47262d7d..c39b36e87 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.2.3", "react": "^19.2.0", "react-dom": "^19.2.0", @@ -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.60", + "version": "0.0.61", }, "packages/shaders-react": { "name": "@paper-design/shaders-react", - "version": "0.0.60", + "version": "0.0.61", "dependencies": { "@paper-design/shaders": "workspace:*", }, @@ -403,6 +405,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=="], @@ -941,6 +947,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 49c9e8b47..fc3537da4 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.2.3", "react": "^19.2.0", @@ -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/components/shader-container.tsx b/docs/src/components/shader-container.tsx index f7202801c..c7b237cb9 100644 --- a/docs/src/components/shader-container.tsx +++ b/docs/src/components/shader-container.tsx @@ -4,6 +4,7 @@ import { ShaderDef } from '@/shader-defs/shader-def-types'; import { Leva } from 'leva'; import { CopyButton } from './copy-button'; import { useState } from 'react'; +import kebabCase from 'lodash-es/kebabCase'; export function ShaderContainer({ children, @@ -16,20 +17,20 @@ export function ShaderContainer({ return (
{shaderDef && currentParams && ( -
+

{shaderDef.name}

@@ -48,7 +49,7 @@ export function ShaderContainer({ {children} From d1d3da94026d30d05274d73ce173631b3c39f7d3 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Wed, 5 Nov 2025 16:18:57 +1100 Subject: [PATCH 3/8] chore: set app url --- docs/src/components/shader-container.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/components/shader-container.tsx b/docs/src/components/shader-container.tsx index 7c0659511..e16f99147 100644 --- a/docs/src/components/shader-container.tsx +++ b/docs/src/components/shader-container.tsx @@ -6,6 +6,8 @@ import { CopyButton } from './copy-button'; import { useState } from 'react'; import kebabCase from 'lodash-es/kebabCase'; +const appUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:5173' : 'https://paper.shaders.app'; + export function ShaderContainer({ children, currentParams, @@ -28,7 +30,7 @@ export function ShaderContainer({ /> From e2101b318167101ddd7d35d9327dd98963cef9c5 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Thu, 6 Nov 2025 09:22:36 +1100 Subject: [PATCH 4/8] chore: use serialize params --- docs/src/components/shader-container.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/components/shader-container.tsx b/docs/src/components/shader-container.tsx index e16f99147..a689994e0 100644 --- a/docs/src/components/shader-container.tsx +++ b/docs/src/components/shader-container.tsx @@ -30,7 +30,7 @@ export function ShaderContainer({ /> , shaderDef.params)}`} target="_blank" 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" > From db0763c52cfdf937b06cb6d4a0b352f03d7736e1 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Thu, 6 Nov 2025 14:26:47 +1100 Subject: [PATCH 5/8] fix: correct url --- docs/src/components/shader-container.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/components/shader-container.tsx b/docs/src/components/shader-container.tsx index a689994e0..6c350f4f5 100644 --- a/docs/src/components/shader-container.tsx +++ b/docs/src/components/shader-container.tsx @@ -6,7 +6,7 @@ import { CopyButton } from './copy-button'; import { useState } from 'react'; import kebabCase from 'lodash-es/kebabCase'; -const appUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:5173' : 'https://paper.shaders.app'; +const appUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:5173' : 'https://app.paper.design'; export function ShaderContainer({ children, From e0c65f1cf5c6bb83decb898344aafcbd8eb2fef2 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Fri, 7 Nov 2025 16:05:35 +1100 Subject: [PATCH 6/8] fix: defer applying params --- docs/src/components/shader-container.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/src/components/shader-container.tsx b/docs/src/components/shader-container.tsx index 6c350f4f5..6983221d3 100644 --- a/docs/src/components/shader-container.tsx +++ b/docs/src/components/shader-container.tsx @@ -30,9 +30,17 @@ export function ShaderContainer({ /> , shaderDef.params)}`} + href={`${appUrl}/playground/${kebabCase(shaderDef.name)}`} target="_blank" 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" + onClick={(e) => { + e.preventDefault(); + + if (e.currentTarget instanceof HTMLAnchorElement) { + const fullUrl = `${e.currentTarget.href}#${serializeParams(currentParams as Record, shaderDef.params)}`; + window.open(fullUrl, e.currentTarget.target); + } + }} > From bff72a1164f5d558a7f0d7e3b3ea760cf9fddafb Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Fri, 7 Nov 2025 16:06:04 +1100 Subject: [PATCH 7/8] chore: comment --- docs/src/components/shader-container.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/components/shader-container.tsx b/docs/src/components/shader-container.tsx index 6983221d3..8c2256734 100644 --- a/docs/src/components/shader-container.tsx +++ b/docs/src/components/shader-container.tsx @@ -34,9 +34,9 @@ export function ShaderContainer({ target="_blank" 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" onClick={(e) => { - e.preventDefault(); - if (e.currentTarget instanceof HTMLAnchorElement) { + // We defer applying params until the click to avoid serializing too much into HTML. + e.preventDefault(); const fullUrl = `${e.currentTarget.href}#${serializeParams(currentParams as Record, shaderDef.params)}`; window.open(fullUrl, e.currentTarget.target); } From fc06d4af24c2888ccd502dc81f1202038768547b Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Tue, 11 Nov 2025 09:56:24 +1100 Subject: [PATCH 8/8] chore: replace margin params --- docs/src/app/(shaders)/fluted-glass/page.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/src/app/(shaders)/fluted-glass/page.tsx b/docs/src/app/(shaders)/fluted-glass/page.tsx index aee1d30d2..78a686cec 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 },