Remove example project, live preview of shader thumbnails, Next 14, R…

…eact 18
paper-design · Dec 20, 2024 · 8635feb · 8635feb
1 parent 5149527
commit 8635feb
Show file tree

Hide file tree

Showing 26 changed files with 310 additions and 314 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/example/eslint.config.js → docs/eslint.config.js-old b/example/eslint.config.js → docs/eslint.config.js-old
diff --git a/docs/next.config.ts b/docs/next.config.ts
diff --git a/docs/package.json b/docs/package.json
@@ -3,21 +3,23 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "^15.1.0"
+    "@paper-design/shaders-react": "workspace:*",
+    "leva": "0.9.34",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "next": "^14.2.21"
   },
   "devDependencies": {
     "typescript": "^5.7.2",
     "@types/node": "^22.10.2",
-    "@types/react": "^19.0.1",
-    "@types/react-dom": "^19.0.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.16",
     "eslint": "^9.16.0",

diff --git a/docs/public/shaders/simplex-noise.webp b/docs/public/shaders/simplex-noise.webp
diff --git a/example/src/shaders/dots-orbit-example.tsx → docs/src/app/dots-orbit/page.tsx b/example/src/shaders/dots-orbit-example.tsx → docs/src/app/dots-orbit/page.tsx
@@ -1,34 +1,37 @@
+'use client';
+
 import { DotsOrbit, type DotsOrbitParams, dotsOrbitPresets } from '@paper-design/shaders-react';
 import { useControls, button, folder } from 'leva';
+import Link from 'next/link';
 import { useEffect } from 'react';
 
 /**
  * You can copy/paste this example to use DotsOrbit in your app
  */
-const DotsOrbitExample = () => {
-  return (
-    <DotsOrbit
-      color1="#6a5496"
-      color2="#9b8ab8"
-      color3="#f5d03b"
-      color4="#e48b97"
-      scale={11}
-      dotSize={0.15}
-      dotSizeRange={0.01}
-      speed={3}
-      spreading={0.1}
-      style={{ position: 'fixed', width: '100%', height: '100%' }}
-    />
-  );
-};
+// const DotsOrbitExample = () => {
+//   return (
+//     <DotsOrbit
+//       color1="#6a5496"
+//       color2="#9b8ab8"
+//       color3="#f5d03b"
+//       color4="#e48b97"
+//       scale={11}
+//       dotSize={0.15}
+//       dotSizeRange={0.01}
+//       speed={3}
+//       spreading={0.1}
+//       style={{ position: 'fixed', width: '100%', height: '100%' }}
+//     />
+//   );
+// };
 
 /**
  * This example has controls added so you can play with settings in the example app
  */
 
 const defaults = dotsOrbitPresets[0].params;
 
-export const DotsOrbitWithControls = () => {
+const DotsOrbitWithControls = () => {
   const [params, setParams] = useControls(() => {
     const presets: DotsOrbitParams = Object.fromEntries(
       dotsOrbitPresets.map((preset) => [preset.name, button(() => setParams(preset.params))])
@@ -58,5 +61,14 @@ export const DotsOrbitWithControls = () => {
     setParams(defaults);
   }, []);
 
-  return <DotsOrbit {...params} style={{ position: 'fixed', width: '100%', height: '100%' }} />;
+  return (
+    <>
+      <Link href="/">
+        <button className="fixed top-2 left-2 bg-white z-10 px-2 py-1 rounded-md">Back</button>
+      </Link>
+      <DotsOrbit {...params} style={{ position: 'fixed', width: '100%', height: '100%' }} />
+    </>
+  );
 };
+
+export default DotsOrbitWithControls;
diff --git a/docs/src/app/globals.css b/docs/src/app/globals.css
@@ -19,3 +19,11 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+#leva__root button {
+  background-color: var(--leva-colors-elevation3);
+
+  &:hover {
+    box-shadow: inset 0 0 0 var(--leva-borderWidths-hover) var(--leva-colors-accent1);
+  }
+}
diff --git a/example/src/shaders/grain-clouds-example.tsx → docs/src/app/grain-clouds/page.tsx b/example/src/shaders/grain-clouds-example.tsx → docs/src/app/grain-clouds/page.tsx
@@ -1,21 +1,24 @@
+'use client';
+
 import { GrainClouds, type GrainCloudsParams, grainCloudsPresets } from '@paper-design/shaders-react';
 import { button, folder, useControls } from 'leva';
+import Link from 'next/link';
 import { useEffect } from 'react';
 
 /**
  * You can copy/paste this example to use GrainClouds in your app
  */
-const GrainCloudsExample = () => {
-  return <GrainClouds color1="#000" color2="#fff" style={{ position: 'fixed', width: '100%', height: '100%' }} />;
-};
+// const GrainCloudsExample = () => {
+//   return <GrainClouds color1="#000" color2="#fff" style={{ position: 'fixed', width: '100%', height: '100%' }} />;
+// };
 
 /**
  * This example has controls added so you can play with settings in the example app
  */
 
 const defaults = grainCloudsPresets[0].params;
 
-export const GrainCloudsWithControls = () => {
+const GrainCloudsWithControls = () => {
   const [params, setParams] = useControls(() => {
     const presets: GrainCloudsParams = Object.fromEntries(
       grainCloudsPresets.map((preset) => [preset.name, button(() => setParams(preset.params))])
@@ -41,5 +44,14 @@ export const GrainCloudsWithControls = () => {
     setParams(defaults);
   }, []);
 
-  return <GrainClouds {...params} style={{ position: 'fixed', width: '100%', height: '100%' }} />;
+  return (
+    <>
+      <Link href="/">
+        <button className="fixed top-2 left-2 bg-white z-10 px-2 py-1 rounded-md">Back</button>
+      </Link>
+      <GrainClouds {...params} style={{ position: 'fixed', width: '100%', height: '100%' }} />
+    </>
+  );
 };
+
+export default GrainCloudsWithControls;
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
@@ -1,16 +1,16 @@
 import type { Metadata } from 'next';
-import { Geist, Geist_Mono } from 'next/font/google';
+// import { Geist, Geist_Mono } from 'next/font/google';
 import './globals.css';
 
-const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
-});
+// const geistSans = Geist({
+//   variable: '--font-geist-sans',
+//   subsets: ['latin'],
+// });
 
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
-});
+// const geistMono = Geist_Mono({
+//   variable: '--font-geist-mono',
+//   subsets: ['latin'],
+// });
 
 export const metadata: Metadata = {
   title: 'Paper Shaders – Zero-dependency ultra-fast shaders',
@@ -24,7 +24,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+      <body className="antialiased">{children}</body>
     </html>
   );
 }
diff --git a/...ple/src/shaders/mesh-gradient-example.tsx → docs/src/app/mesh-gradient/page.tsx b/...ple/src/shaders/mesh-gradient-example.tsx → docs/src/app/mesh-gradient/page.tsx
@@ -1,30 +1,33 @@
+'use client';
+
 import { MeshGradient, type MeshGradientParams, meshGradientPresets } from '@paper-design/shaders-react';
 import { useControls, button, folder } from 'leva';
+import Link from 'next/link';
 import { useEffect } from 'react';
 
 /**
  * You can copy/paste this example to use MeshGradient in your app
  */
-const MeshGradientExample = () => {
-  return (
-    <MeshGradient
-      color1="#6a5496"
-      color2="#9b8ab8"
-      color3="#f5d03b"
-      color4="#e48b97"
-      speed={0.2}
-      style={{ position: 'fixed', width: '100%', height: '100%' }}
-    />
-  );
-};
+// const MeshGradientExample = () => {
+//   return (
+//     <MeshGradient
+//       color1="#6a5496"
+//       color2="#9b8ab8"
+//       color3="#f5d03b"
+//       color4="#e48b97"
+//       speed={0.2}
+//       style={{ position: 'fixed', width: '100%', height: '100%' }}
+//     />
+//   );
+// };
 
 /**
  * This example has controls added so you can play with settings in the example app
  */
 
 const defaults = meshGradientPresets[0].params;
 
-export const MeshGradientWithControls = () => {
+const MeshGradientWithControls = () => {
   const [params, setParams] = useControls(() => {
     const presets: MeshGradientParams = Object.fromEntries(
       meshGradientPresets.map((preset) => [preset.name, button(() => setParams(preset.params))])
@@ -51,5 +54,14 @@ export const MeshGradientWithControls = () => {
     setParams(defaults);
   }, []);
 
-  return <MeshGradient {...params} style={{ position: 'fixed', width: '100%', height: '100%' }} />;
+  return (
+    <>
+      <Link href="/">
+        <button className="fixed top-2 left-2 bg-white z-10 px-2 py-1 rounded-md">Back</button>
+      </Link>
+      <MeshGradient {...params} style={{ position: 'fixed', width: '100%', height: '100%' }} />
+    </>
+  );
 };
+
+export default MeshGradientWithControls;
diff --git a/example/src/shaders/neuro-noise-example.tsx → docs/src/app/neuro-noise/page.tsx b/example/src/shaders/neuro-noise-example.tsx → docs/src/app/neuro-noise/page.tsx
@@ -1,30 +1,33 @@
+'use client';
+
 import { NeuroNoise, type NeuroNoiseParams, neuroNoisePresets } from '@paper-design/shaders-react';
 import { useControls, button, folder } from 'leva';
+import Link from 'next/link';
 import { useEffect } from 'react';
 
 /**
  * You can copy/paste this example to use NeuroNoise in your app
  */
-const NeuroNoiseExample = () => {
-  return (
-    <NeuroNoise
-      colorFront="#c3a3ff"
-      colorBack="#030208"
-      speed={1}
-      scale={1}
-      brightness={1.3}
-      style={{ position: 'fixed', width: '100%', height: '100%' }}
-    />
-  );
-};
+// const NeuroNoiseExample = () => {
+//   return (
+//     <NeuroNoise
+//       colorFront="#c3a3ff"
+//       colorBack="#030208"
+//       speed={1}
+//       scale={1}
+//       brightness={1.3}
+//       style={{ position: 'fixed', width: '100%', height: '100%' }}
+//     />
+//   );
+// };
 
 /**
  * This example has controls added so you can play with settings in the example app
  */
 
 const defaults = neuroNoisePresets[0].params;
 
-export const NeuroNoiseWithControls = () => {
+const NeuroNoiseWithControls = () => {
   const [params, setParams] = useControls(() => {
     const presets: NeuroNoiseParams = Object.fromEntries(
       neuroNoisePresets.map((preset) => [preset.name, button(() => setParams(preset.params))])
@@ -51,5 +54,14 @@ export const NeuroNoiseWithControls = () => {
     setParams(defaults);
   }, []);
 
-  return <NeuroNoise {...params} style={{ position: 'fixed', width: '100%', height: '100%' }} />;
+  return (
+    <>
+      <Link href="/">
+        <button className="fixed top-2 left-2 bg-white z-10 px-2 py-1 rounded-md">Back</button>
+      </Link>
+      <NeuroNoise {...params} style={{ position: 'fixed', width: '100%', height: '100%' }} />
+    </>
+  );
 };
+
+export default NeuroNoiseWithControls;