update demo site

Author: takuma-hmng8

.gitignore

@@ -38,4 +38,7 @@ next-env.d.ts
 storybook-static/
 
 # exclude CreateShaderFx
-CreateShaderFx/
+CreateShaderFx/
+
+# exclude private demo
+app/private/

.storybook/stories/UseColorStrata.tsx

@@ -4,7 +4,7 @@ import { useFrame, extend, useThree } from "@react-three/fiber";
 import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
 import GUI from "lil-gui";
 import { useGUI } from "../../utils/useGUI";
-import { useColorStrata } from "../../packages/use-shader-fx/src";
+import { useColorStrata, useNoise } from "../../packages/use-shader-fx/src";
 import {
    COLORSTRATA_PARAMS,
    ColorStrataParams,
@@ -72,10 +72,13 @@ export const UseColorStrataWithNoise = (args: ColorStrataParams) => {
       return { size: state.size, dpr: state.viewport.dpr };
    });
    const [updateColorStrata] = useColorStrata({ size, dpr });
+   const [updateNoise] = useNoise({ size, dpr });
 
    useFrame((props) => {
+      const noise = updateNoise(props);
       const fx = updateColorStrata(props, {
          ...setConfig(),
+         texture: noise,
       });
 
       fxRef.current!.u_fx = fx;

app/ShaderFx.tsx

@@ -16,7 +16,7 @@ export const ShaderFx = ({ children }: { children: React.ReactNode }) => {
                setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
             }}>
             <Suspense fallback={null}>{children}</Suspense>
-            <Perf position={"bottom-left"} minimal={false} />
+            {/* <Perf position={"bottom-left"} minimal={false} /> */}
          </PerformanceMonitor>
       </Canvas>
    );

app/_home/index.tsx

@@ -87,7 +87,7 @@ export const Home = () => {
 						precision highp float;
 						varying vec2 vUv;
 						uniform sampler2D u_fx;
-						
+
 						void main() {
 							vec2 uv = vUv;
 							gl_FragColor = texture2D(u_fx, uv);

app/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { ShaderFx } from "./ShaderFx";
 import { Home } from "./_home";
 
@@ -26,6 +27,34 @@ export default function Page() {
             }}>
             use-shader-fx
          </h1>
+         <ul
+            style={{
+               position: "fixed",
+               bottom: "16px",
+               right: "16px",
+               zIndex: 100,
+               display: "flex",
+               alignItems: "center",
+               gap: "16px",
+            }}>
+            <li>
+               <a
+                  href="https://github.com/takuma-hmng8/use-shader-fx"
+                  target={"_blank"}>
+                  <Image
+                     src="github-logo.svg"
+                     alt="GitHub"
+                     width={28}
+                     height={28}
+                  />
+               </a>
+            </li>
+            <li>
+               <a href="https://twitter.com/tkm_hmng8" target={"_blank"}>
+                  <Image src="x-logo.svg" alt="X" width={24} height={24} />
+               </a>
+            </li>
+         </ul>
       </div>
    );
 }