fix:add examples

packages/demo/src/App.jsx

@@ -1,21 +1,26 @@
-import Circle from "./examples/Circle.jsx";
+import StepOne from "./examples/StepOne.jsx";
 import { Box } from "@mui/joy";
 import Gradient from "./examples/Gradient.jsx";
 import Grid from "./examples/Grid.jsx";
-import Mountain from "./examples/Mountain.jsx";
+import StepTwo from "./examples/StepTwo.jsx";
+import StepThree from "./examples/StepThree.jsx";
 
 function App() {
   return (
     <Box
       display={"grid"}
       sx={{
-        gridTemplateColumns: "1fr 1fr 1fr",
+        p: 4,
+        gap: 4,
+        gridTemplateColumns: "1fr 1fr",
       }}
     >
-      <Circle />
+      <StepOne />
+      <StepTwo />
+      <StepThree />
       <Gradient />
       <Grid />
-      <Mountain />
+      {/*<Landscape />*/}
     </Box>
   );
 }

packages/demo/src/components/Animate.jsx

@@ -0,0 +1,32 @@
+import ShaderProvider, {
+  useColor,
+  useCoords,
+  useTime,
+} from "../providers/ShaderProvider.jsx";
+import { Add, Float, Mul } from "@react-shader/stdlib";
+
+const Animate = ({ speed, children }) => {
+  const coords = useCoords();
+  const time = useTime();
+  const color = useColor();
+
+  return (
+    <ShaderProvider
+      coords={
+        <Add>
+          {coords}
+          <Mul>
+            <Float value={time} />
+            <Float value={speed} />
+          </Mul>
+        </Add>
+      }
+      color={color}
+      time={time}
+    >
+      {children}
+    </ShaderProvider>
+  );
+};
+
+export default Animate;

packages/demo/src/components/Circle.jsx

@@ -0,0 +1,43 @@
+import { useCoords } from "../providers/ShaderProvider.jsx";
+import {
+  Float,
+  Fract,
+  Length,
+  Mix,
+  SmoothStep,
+  Sub,
+  Vec4,
+} from "@react-shader/stdlib";
+
+const Circle = ({ radius, children }) => {
+  const coords = useCoords();
+
+  return (
+    <Mix
+      a={<Vec4 x={0} y={0} z={0} w={1} />}
+      b={children}
+      c={
+        <SmoothStep
+          from={radius}
+          to={
+            <Sub>
+              {radius}
+              <Float value={0.001} />
+            </Sub>
+          }
+        >
+          <Length
+            of={
+              <Sub>
+                {<Fract of={coords} />}
+                <Float value={0.5} />
+              </Sub>
+            }
+          />
+        </SmoothStep>
+      }
+    />
+  );
+};
+
+export default Circle;

packages/demo/src/components/Color.jsx

@@ -0,0 +1,11 @@
+import { Vec4 } from "@react-shader/stdlib";
+import hexToRgb from "../utils/hexToRgb.js";
+import normalizeColor from "../utils/normalizeColor.js";
+
+const Color = ({ hex }) => {
+  const rgb = normalizeColor(hexToRgb(hex));
+
+  return <Vec4 x={rgb.r} y={rgb.g} z={rgb.b} w={1} />;
+};
+
+export default Color;

packages/demo/src/components/Gradient.jsx

@@ -0,0 +1,11 @@
+import { useCoords } from "../providers/ShaderProvider.jsx";
+import { Fract, Mix, X } from "@react-shader/stdlib";
+
+const Gradient = ({ children }) => {
+  const coords = useCoords();
+  return (
+    <Mix a={children[0]} b={children[1]} c={<X of={<Fract of={coords} />} />} />
+  );
+};
+
+export default Gradient;

packages/demo/src/components/Grid.jsx

@@ -0,0 +1,29 @@
+import ShaderProvider, {
+  useColor,
+  useCoords,
+  useTime,
+} from "../providers/ShaderProvider.jsx";
+import { Float, Mul } from "@react-shader/stdlib";
+
+const Grid = ({ size, children }) => {
+  const coords = useCoords();
+  const time = useTime();
+  const color = useColor();
+
+  return (
+    <ShaderProvider
+      coords={
+        <Mul>
+          {coords}
+          <Float value={size} />
+        </Mul>
+      }
+      color={color}
+      time={time}
+    >
+      {children}
+    </ShaderProvider>
+  );
+};
+
+export default Grid;

packages/demo/src/components/Shader.jsx

@@ -0,0 +1,31 @@
+import circle from "../../lygia/draw/circle.glsl";
+import stroke from "../../lygia/draw/stroke.glsl";
+import fbm from "../../lygia/generative/fbm.glsl";
+import { Assign, Input, Main, Output, Uniform } from "@react-shader/stdlib";
+import { FragmentShader } from "@react-shader/fiber";
+import ShaderProvider from "../providers/ShaderProvider.jsx";
+import { useRef } from "react";
+
+const Shader = ({ coords, children }) => {
+  const color = useRef();
+  // const coords = useRef();
+  const time = useRef();
+
+  return (
+    <FragmentShader prelude={[circle, stroke, fbm]} width={600} height={600}>
+      <Output type={"vec4"} id={"fragColor"} ref={color} />
+
+      <Input ref={coords} type={"vec2"} id={"vCoords"} />
+
+      <Uniform ref={time} id={"u_time"} type={"float"} />
+
+      <Main>
+        <ShaderProvider color={color} coords={coords} time={time}>
+          <Assign to={color}>{children}</Assign>
+        </ShaderProvider>
+      </Main>
+    </FragmentShader>
+  );
+};
+
+export default Shader;

packages/demo/src/examples/Landscape.jsx

@@ -0,0 +1,86 @@
+import {
+  Add,
+  Float,
+  Max,
+  Mul,
+  Sub,
+  Vec2,
+  Vec4,
+  X,
+  Y,
+} from "@react-shader/stdlib";
+import { useRef } from "react";
+import Stroke from "../components/rsf-lygia/Stroke.jsx";
+import FractalBrownianMotion from "../components/rsf-lygia/FractalBrownianMotion.jsx";
+import Shader from "../components/Shader.jsx";
+
+const Mountain = ({ height, st, speed, saturation }) => {
+  return (
+    <Sub>
+      <Stroke
+        x={
+          <Sub>
+            <Y of={st} />
+            <Float value={height} />
+          </Sub>
+        }
+        size={
+          <Mul>
+            <FractalBrownianMotion>
+              <Vec2
+                x={
+                  <Add>
+                    <X>{st}</X>
+                    <Mul>
+                      {speed}
+                      <Float value={0.1} />
+                    </Mul>
+                  </Add>
+                }
+                y={0.5}
+              />
+            </FractalBrownianMotion>
+            <Float value={0.2} />
+          </Mul>
+        }
+        width={0.5}
+      />
+      <Float value={saturation} />
+    </Sub>
+  );
+};
+const Landscape = () => {
+  const color = useRef();
+  const st = useRef();
+  const time = useRef();
+
+  return (
+    <Shader color={color} coords={st} time={time}>
+      <Vec4
+        x={0}
+        y={0}
+        z={
+          <Max
+            a={<Mountain height={0.3} st={st} speed={time} saturation={0.5} />}
+            b={
+              <Mountain
+                saturation={0.1}
+                st={st}
+                height={0.1}
+                speed={
+                  <Mul>
+                    {time}
+                    <Float value={2} />
+                  </Mul>
+                }
+              />
+            }
+          />
+        }
+        w={1.0}
+      />
+    </Shader>
+  );
+};
+
+export default Landscape;