diff --git a/docs/src/app/perlin-noise/layout.tsx b/docs/src/app/perlin-noise/layout.tsx
new file mode 100644
index 0000000..49c69e7
--- /dev/null
+++ b/docs/src/app/perlin-noise/layout.tsx
@@ -0,0 +1,9 @@
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Perlin Noise Shader | Paper',
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
diff --git a/docs/src/app/perlin-noise/page.tsx b/docs/src/app/perlin-noise/page.tsx
new file mode 100644
index 0000000..44a55ef
--- /dev/null
+++ b/docs/src/app/perlin-noise/page.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { PerlinNoise, type PerlinNoiseParams, perlinNoisePresets } from '@paper-design/shaders-react';
+import { useControls, button, folder } from 'leva';
+import { setParamsSafe, useResetLevaParams } from '@/helpers/use-reset-leva-params';
+import { usePresetHighlight } from '@/helpers/use-preset-highlight';
+import Link from 'next/link';
+import { BackButton } from '@/components/back-button';
+
+/**
+ * You can copy/paste this example to use PerlinNoise in your app
+ */
+// <PerlinNoise
+//     color1="#577590"
+//     color2="#90BE6D"
+//     scale={0.5}
+//     speed={1}
+//     octaveCount={10}
+//     persistence={0.5}
+//     lacunarity={2}
+//     contour={.5}
+//     proportion={.5}
+//     style={{position: 'fixed', width: '100%', height: '100%'}}
+// />
+
+/**
+ * This example has controls added so you can play with settings in the example app
+ */
+
+const defaults = perlinNoisePresets[0].params;
+
+const PerlinNoiseWithControls = () => {
+  const [params, setParams] = useControls(() => {
+    const presets: PerlinNoiseParams = Object.fromEntries(
+      perlinNoisePresets.map((preset) => [preset.name, button(() => setParamsSafe(params, setParams, preset.params))])
+    );
+
+    return {
+      Parameters: folder(
+        {
+            color1: {value: defaults.color1, order: 1},
+            color2: {value: defaults.color2, order: 2},
+            speed: {value: defaults.speed, order: 3, min: 0, max: 0.5},
+            seed: {value: defaults.seed, order: 4, min: 0, max: 9999},
+            scale: {value: defaults.scale, order: 5, min: 0, max: 2},
+            octaveCount: {value: defaults.octaveCount, order: 6, min: 1, step: 1, max: 8},
+            persistence: {value: defaults.persistence, order: 7, min: .3, max: 1},
+            lacunarity: {value: defaults.lacunarity, order: 8, min: 1.5, max: 3},
+            contour: {value: defaults.contour, order: 9, min: 0, max: 1},
+            proportion: {value: defaults.contour, order: 10, min: 0, max: 1},
+        },
+        { order: 1 }
+      ),
+      Presets: folder(presets, { order: 2 }),
+    };
+  });
+
+  // Reset to defaults on mount, so that Leva doesn't show values from other
+  // shaders when navigating (if two shaders have a color1 param for example)
+  useResetLevaParams(params, setParams, defaults);
+
+  usePresetHighlight(perlinNoisePresets, params);
+
+  return (
+    <>
+      <Link href="/">
+        <BackButton />
+      </Link>
+      <PerlinNoise {...params} style={{ position: 'fixed', width: '100%', height: '100%' }} />
+    </>
+  );
+};
+
+export default PerlinNoiseWithControls;
diff --git a/example/src/shaders/perlin-noise-example.tsx b/example/src/shaders/perlin-noise-example.tsx
deleted file mode 100644
index 88187c7..0000000
--- a/example/src/shaders/perlin-noise-example.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  PerlinNoise,
-  type PerlinNoiseParams,
-  perlinNoisePresets,
-} from '@paper-design/shaders-react';
-
-import { useControls, button, folder } from 'leva';
-import { setParamsSafe, useResetLevaParams } from '../example-helpers/use-reset-leva-params';
-
-/**
- * You can copy/paste this example to use PerlinNoise in your app
- */
-const PerlinNoiseExample = () => {
-  return (
-    <PerlinNoise
-      color1="#577590"
-      color2="#90BE6D"
-      scale={0.5}
-      speed={1}
-      octaveCount={10}
-      persistence={0.5}
-      lacunarity={2}
-      contour={.5}
-      proportion={.5}
-      style={{ position: 'fixed', width: '100%', height: '100%' }}
-    />
-  );
-};
-
-/**
- * This example has controls added so you can play with settings in the example app
- */
-
-const defaults = perlinNoisePresets[0].params;
-
-export const PerlinNoiseWithControls = () => {
-  const [params, setParams] = useControls(() => {
-    const presets: PerlinNoiseParams = Object.fromEntries(
-      perlinNoisePresets.map((preset) => [preset.name, button(() => setParams(preset.params))])
-    );
-    return {
-      Parameters: folder(
-        {
-          color1: { value: defaults.color1, order: 1 },
-          color2: { value: defaults.color2, order: 2 },
-          speed: { value: defaults.speed, order: 3, min: 0, max: 0.5 },
-          seed: {value: defaults.seed, order: 4, min: 0, max: 9999},
-          scale: { value: defaults.scale, order: 5, min: 0, max: 2 },
-          octaveCount: { value: defaults.octaveCount, order: 6, min: 1, step: 1, max: 8 },
-          persistence: { value: defaults.persistence, order: 7, min: .3, max: 1 },
-          lacunarity: { value: defaults.lacunarity, order: 8, min: 1.5, max: 3 },
-          contour: { value: defaults.contour, order: 9, min: 0, max: 1 },
-          proportion: { value: defaults.contour, order: 10, min: 0, max: 1 },
-        },
-        { order: 1 }
-      ),
-      Presets: folder(presets, { order: 2 }),
-    };
-  });
-
-  // Reset to defaults on mount, so that Leva doesn't show values from other
-  // shaders when navigating (if two shaders have a color1 param for example)
-  useResetLevaParams(params, setParams, defaults);
-
-  return <PerlinNoise {...params} style={{ position: 'fixed', width: '100%', height: '100%' }} />;
-};