@toriistudio/shader-ui 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Torii Studio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# 🎨 Shader UI
+
+Shader components FTW!
+
+---
+
+## 🚀 Installation
+
+Install the package and its peer dependencies:
+
+```bash
+npm install @toriistudio/shader-ui
+# or
+yarn add @toriistudio/shader-ui
+```
+
+## 📄 License
+
+MIT
+
+## 🤝 Contributing
+
+We welcome contributions!
+
+If you'd like to improve the playground, add new features, or fix bugs:
+
+1. **Fork** this repository
+2. **Clone** your fork: `git clone https://github.com/your-username/shader-ui`
+3. **Install** dependencies: `yarn` or `npm install`
+4. Make your changes in a branch: `git checkout -b my-new-feature`
+5. **Push** your branch and open a pull request
+
+Before submitting a PR:
+
+- Run `yarn build` to ensure everything compiles
+- Make sure the playground runs without errors (`yalc push` or `npm link` for local testing)
+- Keep the code style clean and consistent
+
+We’re excited to see what you’ll build 🎨🚀

package/dist/index.d.mts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type ShaderUniforms = {
+    uIterations: number;
+    uAmplitude: number;
+    uFreq: number;
+};
+type ShaderArtProps = {
+    uniforms: ShaderUniforms;
+} & Omit<ComponentProps<"div">, "ref" | "children" | "color" | "width" | "height"> & {
+    width?: string | number;
+    height?: string | number;
+};
+declare function ShaderArt({ uniforms, className, style, width, height, ...divProps }: ShaderArtProps): react_jsx_runtime.JSX.Element;
+
+type FractalFlowerProps = {
+    timeScale: number;
+    petalRadius: number;
+    scale: number;
+    intensity: number;
+    morphCycle: number;
+    color: string;
+} & Omit<ComponentProps<"div">, "ref" | "children" | "color" | "width" | "height"> & {
+    width?: string | number;
+    height?: string | number;
+};
+declare function FractalFlower({ timeScale, petalRadius, scale, intensity, morphCycle, color, className, style, width, height, ...divProps }: FractalFlowerProps): react_jsx_runtime.JSX.Element;
+
+type OranoParticlesUniforms = {
+    color: string;
+    alpha: number;
+    wind: number;
+    baseSize: number;
+    distanceOffset: number;
+    distanceStrength: number;
+    particleCount: number;
+};
+type OranoParticlesProps = OranoParticlesUniforms & Omit<ComponentProps<"div">, keyof OranoParticlesUniforms | "ref" | "width" | "height"> & {
+    width?: string | number;
+    height?: string | number;
+};
+declare function OranoParticles({ className, style, width, height, color, alpha, wind, baseSize, distanceOffset, distanceStrength, particleCount, ...divProps }: OranoParticlesProps): react_jsx_runtime.JSX.Element;
+
+export { FractalFlower, OranoParticles, ShaderArt };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type ShaderUniforms = {
+    uIterations: number;
+    uAmplitude: number;
+    uFreq: number;
+};
+type ShaderArtProps = {
+    uniforms: ShaderUniforms;
+} & Omit<ComponentProps<"div">, "ref" | "children" | "color" | "width" | "height"> & {
+    width?: string | number;
+    height?: string | number;
+};
+declare function ShaderArt({ uniforms, className, style, width, height, ...divProps }: ShaderArtProps): react_jsx_runtime.JSX.Element;
+
+type FractalFlowerProps = {
+    timeScale: number;
+    petalRadius: number;
+    scale: number;
+    intensity: number;
+    morphCycle: number;
+    color: string;
+} & Omit<ComponentProps<"div">, "ref" | "children" | "color" | "width" | "height"> & {
+    width?: string | number;
+    height?: string | number;
+};
+declare function FractalFlower({ timeScale, petalRadius, scale, intensity, morphCycle, color, className, style, width, height, ...divProps }: FractalFlowerProps): react_jsx_runtime.JSX.Element;
+
+type OranoParticlesUniforms = {
+    color: string;
+    alpha: number;
+    wind: number;
+    baseSize: number;
+    distanceOffset: number;
+    distanceStrength: number;
+    particleCount: number;
+};
+type OranoParticlesProps = OranoParticlesUniforms & Omit<ComponentProps<"div">, keyof OranoParticlesUniforms | "ref" | "width" | "height"> & {
+    width?: string | number;
+    height?: string | number;
+};
+declare function OranoParticles({ className, style, width, height, color, alpha, wind, baseSize, distanceOffset, distanceStrength, particleCount, ...divProps }: OranoParticlesProps): react_jsx_runtime.JSX.Element;
+
+export { FractalFlower, OranoParticles, ShaderArt };

package/dist/index.js

@@ -0,0 +1,566 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  FractalFlower: () => FractalFlower,
+  OranoParticles: () => OranoParticles,
+  ShaderArt: () => ShaderArt
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/ShaderArt.tsx
+var import_react2 = require("react");
+var THREE2 = __toESM(require("three"));
+
+// src/hooks/useScene.ts
+var import_react = require("react");
+var THREE = __toESM(require("three"));
+var EMPTY_DEPS = [];
+function useScene({
+  renderer: rendererOptions,
+  camera: cameraOptions,
+  pixelRatio,
+  onCreate,
+  onRender,
+  onResize,
+  deps
+} = {}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const contextRef = (0, import_react.useRef)(null);
+  const onCreateRef = (0, import_react.useRef)(onCreate);
+  const onRenderRef = (0, import_react.useRef)(onRender);
+  const onResizeRef = (0, import_react.useRef)(onResize);
+  (0, import_react.useEffect)(() => {
+    onCreateRef.current = onCreate;
+  }, [onCreate]);
+  (0, import_react.useEffect)(() => {
+    onRenderRef.current = onRender;
+  }, [onRender]);
+  (0, import_react.useEffect)(() => {
+    onResizeRef.current = onResize;
+  }, [onResize]);
+  const effectDeps = deps ?? EMPTY_DEPS;
+  (0, import_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const resolvedPixelRatio = pixelRatio ?? (typeof window !== "undefined" ? Math.min(window.devicePixelRatio, 2) : 1);
+    const renderer = new THREE.WebGLRenderer({
+      alpha: true,
+      antialias: true,
+      ...rendererOptions
+    });
+    renderer.setPixelRatio(resolvedPixelRatio);
+    renderer.setSize(container.clientWidth, container.clientHeight, false);
+    renderer.setClearColor(0, 0);
+    renderer.domElement.style.width = "100%";
+    renderer.domElement.style.height = "100%";
+    container.appendChild(renderer.domElement);
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(
+      cameraOptions?.fov ?? 55,
+      container.clientWidth / Math.max(1, container.clientHeight),
+      cameraOptions?.near ?? 0.1,
+      cameraOptions?.far ?? 500
+    );
+    const [x = 0, y = 0, z = 15] = cameraOptions?.position ?? [];
+    camera.position.set(x, y, z);
+    const clock = new THREE.Clock();
+    const context = { renderer, scene, camera, clock };
+    contextRef.current = context;
+    const teardownCreate = onCreateRef.current?.(context);
+    let animationFrameId = 0;
+    const renderLoop = () => {
+      onRenderRef.current?.(context);
+      renderer.render(scene, camera);
+      animationFrameId = requestAnimationFrame(renderLoop);
+    };
+    animationFrameId = requestAnimationFrame(renderLoop);
+    const resizeObserver = new ResizeObserver(() => {
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      renderer.setSize(width, height, false);
+      camera.aspect = width / Math.max(1, height);
+      camera.updateProjectionMatrix();
+      onResizeRef.current?.(context, { width, height });
+    });
+    resizeObserver.observe(container);
+    return () => {
+      teardownCreate?.();
+      cancelAnimationFrame(animationFrameId);
+      resizeObserver.disconnect();
+      scene.clear();
+      renderer.dispose();
+      if (renderer.domElement.parentNode === container) {
+        container.removeChild(renderer.domElement);
+      }
+      contextRef.current = null;
+    };
+  }, effectDeps);
+  return { containerRef, contextRef };
+}
+
+// src/shaders/shader-art/fragment.glsl
+var fragment_default = "precision highp float;\n\nvarying vec2 vUv;\nuniform float iTime;\nuniform vec3 iResolution;\nuniform float uIterations;\nuniform float uAmplitude;\nuniform float uFreq;\n\nvec3 palette(float t) {\n    vec3 a = vec3(0.5, 0.5, 0.5);\n    vec3 b = vec3(0.5, 0.5, 0.5);\n    vec3 c = vec3(1.0, 1.0, 1.0);\n    vec3 d = vec3(0.263, 0.416, 0.557);\n    return a + b * cos(6.28318 * (c * t + d));\n}\n\nvoid main() {\n    vec2 fragCoord = vec2(vUv.x * iResolution.x, vUv.y * iResolution.y);\n    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;\n    vec2 uv0 = uv;\n    vec3 finalColor = vec3(0.0);\n    const int MAX_ITERATIONS = 8;\n    for (int idx = 0; idx < MAX_ITERATIONS; idx++) {\n        float i = float(idx);\n        if (i >= uIterations) {\n            break;\n        }\n        uv = fract(uv * uAmplitude) - 0.5;\n        float d = length(uv) * exp(-length(uv0));\n        vec3 col = palette(length(uv0) + i * 0.4 + iTime * uFreq);\n        d = sin(d * 8.0 + iTime) / 8.0;\n        d = abs(d);\n        d = pow(0.01 / max(d, 1e-4), 1.9);\n        finalColor += col * d;\n    }\n    gl_FragColor = vec4(finalColor, 1.0);\n}";
+
+// src/shaders/shader-art/vertex.glsl
+var vertex_default = "varying vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n  gl_Position = vec4(position, 1.0);\n}";
+
+// src/components/ShaderArt.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ShaderArt({
+  uniforms,
+  className,
+  style,
+  width,
+  height,
+  ...divProps
+}) {
+  const shaderUniformsRef = (0, import_react2.useRef)({
+    iTime: { value: 0 },
+    iResolution: { value: new THREE2.Vector3(1, 1, 1) },
+    uIterations: { value: Math.max(1, uniforms.uIterations) },
+    uAmplitude: { value: uniforms.uAmplitude },
+    uFreq: { value: uniforms.uFreq }
+  });
+  const assetsRef = (0, import_react2.useRef)(null);
+  const handleCreate = (0, import_react2.useCallback)(({ scene }) => {
+    const geometry = new THREE2.PlaneGeometry(2, 2);
+    const material = new THREE2.ShaderMaterial({
+      vertexShader: vertex_default,
+      fragmentShader: fragment_default,
+      uniforms: shaderUniformsRef.current
+    });
+    const mesh = new THREE2.Mesh(geometry, material);
+    scene.add(mesh);
+    assetsRef.current = { mesh, geometry, material };
+    return () => {
+      scene.remove(mesh);
+      geometry.dispose();
+      material.dispose();
+      assetsRef.current = null;
+    };
+  }, []);
+  const handleRender = (0, import_react2.useCallback)((context) => {
+    shaderUniformsRef.current.iTime.value = context.clock.getElapsedTime();
+    const canvas = context.renderer.domElement;
+    shaderUniformsRef.current.iResolution.value.set(
+      canvas.width,
+      canvas.height,
+      1
+    );
+  }, []);
+  const { containerRef } = useScene({
+    onCreate: handleCreate,
+    onRender: handleRender
+  });
+  (0, import_react2.useEffect)(() => {
+    shaderUniformsRef.current.uIterations.value = Math.max(
+      1,
+      uniforms.uIterations
+    );
+    shaderUniformsRef.current.uAmplitude.value = uniforms.uAmplitude;
+    shaderUniformsRef.current.uFreq.value = uniforms.uFreq;
+  }, [uniforms.uAmplitude, uniforms.uFreq, uniforms.uIterations]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+
+// src/components/FractalFlower.tsx
+var import_react3 = require("react");
+var THREE3 = __toESM(require("three"));
+
+// src/shaders/fractal-flower/fragment.glsl
+var fragment_default2 = "precision highp float;\n\nuniform float uIntensity;\nuniform float uExposure;\nuniform float uPetalRadius;\nuniform float uMorph;\n\nvarying vec3 vColor;\nvarying float vWeight;\n\nvoid main() {\n  vec2 uv = gl_PointCoord - vec2(0.5);\n  float sigma = max(0.3, uPetalRadius * 10.0);\n  float dist2 = dot(uv, uv);\n  float alpha = exp(-dist2 / (sigma * sigma));\n\n  if (alpha <= 0.01) {\n    discard;\n  }\n\n  float weight = 0.6 + 0.4 * vWeight;\n  float falloff = pow(alpha, 0.8);\n  float morphBoost = mix(1.0, 1.35, uMorph);\n  vec3 color = clamp(vColor * weight * falloff * (uIntensity * morphBoost), 0.0, 1.0);\n\n  float outAlpha = clamp(alpha * mix(0.6, 0.85, uMorph), 0.0, 1.0);\n  gl_FragColor = vec4(color, outAlpha);\n}\n";
+
+// src/shaders/fractal-flower/vertex.glsl
+var vertex_default2 = "precision highp float;\n\nattribute float aK;\nattribute float aE;\nattribute float aRotation;\n\nuniform float uTime;\nuniform float uTimeScale;\nuniform float uSpread;\nuniform float uPointSize;\nuniform float uMorph;\nuniform vec3 uColor;\n\nvarying vec3 vColor;\nvarying float vWeight;\n\nmat2 rotation(float angle) {\n  float c = cos(angle);\n  float s = sin(angle);\n  return mat2(c, -s, s, c);\n}\n\nvoid main() {\n  float time = uTime * uTimeScale;\n  float d = 7.0 * cos(length(vec2(aK, aE)) / 3.0 + time * 0.5);\n\n  vec2 basePoint = vec2(\n    aK * 4.0 + d * aK * sin(d + aE / 9.0 + time),\n    aE * 2.0 - d * 9.0 - d * 9.0 * cos(d + time)\n  );\n\n  vec2 altPoint = vec2(\n    aK * 6.0 + sin(time * 1.3 + aE * 2.0) * (42.0 + 12.0 * sin(aE * 1.15)),\n    aE * 3.4 - d * 12.5 + 28.0 * cos(time * 0.75 + aK * 0.35)\n  );\n\n  vec2 morphed = mix(basePoint, altPoint, uMorph);\n  float swirl = aRotation + uMorph * (0.8 + 0.25 * sin(time * 0.4 + aE));\n  vec2 rotated = rotation(swirl) * morphed;\n\n  float spreadMix = mix(uSpread, uSpread * 0.65, uMorph);\n  vec2 scaled = rotated / spreadMix;\n  vec3 modelPosition = vec3(scaled, 0.0);\n\n  float radial = length(morphed) / (spreadMix * 0.9);\n  vWeight = clamp(1.0 - radial * radial, 0.0, 1.0);\n\n  vColor = uColor;\n\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(modelPosition, 1.0);\n  gl_PointSize = uPointSize * mix(1.0, 1.35, uMorph);\n}\n";
+
+// src/components/FractalFlower.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var BASE_POINT_COUNT = 2e4;
+var ROTATIONS = [
+  0,
+  Math.PI / 3,
+  2 * Math.PI / 3,
+  Math.PI,
+  4 * Math.PI / 3,
+  5 * Math.PI / 3
+];
+var ROTATION_COUNT = ROTATIONS.length;
+var TOTAL_POINTS = ROTATION_COUNT * BASE_POINT_COUNT;
+var BASE_SPREAD = 200;
+var MORPH_SPEED = 0.6;
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+function FractalFlower({
+  timeScale,
+  petalRadius,
+  scale,
+  intensity,
+  morphCycle,
+  color,
+  className,
+  style,
+  width,
+  height,
+  ...divProps
+}) {
+  const attributes = (0, import_react3.useMemo)(() => {
+    const positions = new Float32Array(TOTAL_POINTS * 3);
+    const kValues = new Float32Array(TOTAL_POINTS);
+    const eValues = new Float32Array(TOTAL_POINTS);
+    const rotations = new Float32Array(TOTAL_POINTS);
+    for (let copy = 0; copy < ROTATION_COUNT; copy++) {
+      const angle = ROTATIONS[copy];
+      for (let i = 0; i < BASE_POINT_COUNT; i++) {
+        const index = copy * BASE_POINT_COUNT + i;
+        const k = i % 25 - 12;
+        const e = i / 800;
+        positions[index * 3] = 0;
+        positions[index * 3 + 1] = 0;
+        positions[index * 3 + 2] = 0;
+        kValues[index] = k;
+        eValues[index] = e;
+        rotations[index] = angle;
+      }
+    }
+    return {
+      positions,
+      kValues,
+      eValues,
+      rotations
+    };
+  }, []);
+  const uniformsRef = (0, import_react3.useRef)({
+    uTime: { value: 0 },
+    uResolution: { value: new THREE3.Vector2(1, 1) },
+    uTimeScale: { value: 0.78539816339 },
+    uPetalRadius: { value: 0.02 },
+    uIntensity: { value: 0.25 },
+    uExposure: { value: 5 },
+    uSpread: { value: BASE_SPREAD / Math.max(scale, 1e-4) },
+    uPointSize: { value: 2.5 },
+    uColor: { value: new THREE3.Color(color) },
+    uMorph: { value: 0 }
+  });
+  const morphRef = (0, import_react3.useRef)({
+    progress: uniformsRef.current.uMorph.value,
+    target: 0,
+    cycle: morphCycle
+  });
+  const assetsRef = (0, import_react3.useRef)(null);
+  const handleCreate = (0, import_react3.useCallback)(
+    ({ scene }) => {
+      const geometry = new THREE3.BufferGeometry();
+      geometry.setAttribute(
+        "position",
+        new THREE3.BufferAttribute(attributes.positions, 3)
+      );
+      geometry.setAttribute(
+        "aK",
+        new THREE3.BufferAttribute(attributes.kValues, 1)
+      );
+      geometry.setAttribute(
+        "aE",
+        new THREE3.BufferAttribute(attributes.eValues, 1)
+      );
+      geometry.setAttribute(
+        "aRotation",
+        new THREE3.BufferAttribute(attributes.rotations, 1)
+      );
+      const uniformValues = uniformsRef.current;
+      const material = new THREE3.ShaderMaterial({
+        vertexShader: vertex_default2,
+        fragmentShader: fragment_default2,
+        uniforms: uniformValues,
+        blending: THREE3.AdditiveBlending,
+        depthWrite: false,
+        transparent: true
+      });
+      const points = new THREE3.Points(geometry, material);
+      points.frustumCulled = false;
+      scene.add(points);
+      assetsRef.current = { points, geometry, material, uniforms: uniformValues };
+      return () => {
+        scene.remove(points);
+        geometry.dispose();
+        material.dispose();
+        assetsRef.current = null;
+      };
+    },
+    [attributes.eValues, attributes.kValues, attributes.positions, attributes.rotations]
+  );
+  const handleRender = (0, import_react3.useCallback)(
+    (context) => {
+      const assets = assetsRef.current;
+      if (!assets) return;
+      const uniforms = assets.uniforms;
+      uniforms.uTime.value = context.clock.getElapsedTime();
+      const canvas = context.renderer.domElement;
+      uniforms.uResolution.value.set(canvas.width, canvas.height);
+      const basePointSize = Math.max(
+        2,
+        canvas.height / 400 * (uniforms.uPetalRadius.value * 32)
+      );
+      const pointSize = Math.min(basePointSize, 6);
+      uniforms.uPointSize.value = pointSize;
+      const morph = morphRef.current;
+      if (Math.abs(morph.target - morph.progress) > 1e-3) {
+        const delta = context.clock.getDelta();
+        const direction = Math.sign(morph.target - morph.progress);
+        morph.progress = clamp(
+          morph.progress + direction * delta * MORPH_SPEED,
+          0,
+          1
+        );
+      }
+      uniforms.uMorph.value = morph.progress;
+    },
+    []
+  );
+  const { containerRef } = useScene({
+    onCreate: handleCreate,
+    onRender: handleRender
+  });
+  (0, import_react3.useEffect)(() => {
+    const uniforms = uniformsRef.current;
+    uniforms.uTimeScale.value = timeScale;
+    uniforms.uPetalRadius.value = petalRadius;
+    uniforms.uSpread.value = BASE_SPREAD / Math.max(scale, 1e-4);
+    uniforms.uIntensity.value = intensity;
+    uniforms.uColor.value.set(color);
+    uniforms.uMorph.value = morphRef.current.progress;
+  }, [color, intensity, petalRadius, scale, timeScale]);
+  (0, import_react3.useEffect)(() => {
+    if (morphRef.current.cycle === morphCycle) {
+      return;
+    }
+    morphRef.current.cycle = morphCycle;
+    morphRef.current.target = morphRef.current.target < 0.5 ? 1 : 0;
+  }, [morphCycle]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+
+// src/components/OranoParticles.tsx
+var import_react4 = require("react");
+var THREE4 = __toESM(require("three"));
+
+// src/shaders/orano-particles/fragment.glsl
+var fragment_default3 = "uniform vec3 uColor;\nuniform float uAlpha;\n\nvarying float vAlpha;\n\nvoid main() {\n  gl_FragColor = vec4(uColor, vAlpha * uAlpha);\n}\n";
+
+// src/shaders/orano-particles/vertex.glsl
+var vertex_default3 = "#define M_PI 3.1415926535897932384626433832795\n\nuniform float uTime;\nuniform float uWind;\nuniform float uBaseSize;\nuniform float uDistanceOffset;\nuniform float uDistanceStrength;\n\nvarying float vAlpha;\n\nhighp float random(vec2 co) {\n  highp float a = 12.9898;\n  highp float b = 78.233;\n  highp float c = 43758.5453;\n  highp float dt = dot(co.xy, vec2(a, b));\n  highp float sn = mod(dt, M_PI);\n\n  return fract(sin(sn) * c);\n}\n\nvoid main() {\n  vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n\n  modelPosition.x = mod(\n      modelPosition.x + uTime * ((uWind * 0.5) + (uWind * 0.5) * random(modelPosition.yz)),\n      20.0\n    ) -\n    10.0;\n\n  modelPosition.y =\n      modelPosition.y + sin(modelPosition.x) * 0.3 +\n      modelPosition.y + sin(modelPosition.x * 0.357) * 0.3;\n\n  vec4 viewPosition = viewMatrix * modelPosition;\n  float cameraDistance = distance(vec4(0.0), viewPosition);\n\n  float sizeFalloff =\n      clamp((cameraDistance - uDistanceOffset) * uDistanceStrength, 0.0, uBaseSize);\n\n  gl_PointSize = uBaseSize - sizeFalloff;\n  gl_Position = projectionMatrix * viewPosition;\n\n  vAlpha = 1.0 - clamp(cameraDistance * 0.5 / 12.0, 0.0, 1.0);\n}\n";
+
+// src/components/OranoParticles.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var X_RANGE = 20;
+var Y_RANGE = { min: -8, max: 2 };
+var Z_RANGE = { min: -5, max: 215 };
+function createParticleGeometry(count) {
+  const geometry = new THREE4.BufferGeometry();
+  const positions = new Float32Array(count * 3);
+  for (let i = 0; i < count; i += 1) {
+    const x = (Math.random() - 0.5) * X_RANGE;
+    const y = Math.random() * (Y_RANGE.max - Y_RANGE.min) + Y_RANGE.min;
+    const z = Math.random() * (Z_RANGE.max - Z_RANGE.min) + Z_RANGE.min;
+    positions[i * 3] = x;
+    positions[i * 3 + 1] = y;
+    positions[i * 3 + 2] = z;
+  }
+  geometry.setAttribute("position", new THREE4.BufferAttribute(positions, 3));
+  geometry.computeBoundingSphere();
+  return geometry;
+}
+function buildUniforms({
+  color,
+  alpha,
+  wind,
+  baseSize,
+  distanceOffset,
+  distanceStrength
+}) {
+  return {
+    uColor: { value: new THREE4.Color(color) },
+    uAlpha: { value: alpha },
+    uTime: { value: 0 },
+    uWind: { value: wind },
+    uBaseSize: { value: baseSize },
+    uDistanceOffset: { value: distanceOffset },
+    uDistanceStrength: { value: distanceStrength }
+  };
+}
+function OranoParticles({
+  className,
+  style,
+  width,
+  height,
+  color,
+  alpha,
+  wind,
+  baseSize,
+  distanceOffset,
+  distanceStrength,
+  particleCount,
+  ...divProps
+}) {
+  const particlesRef = (0, import_react4.useRef)(null);
+  const initialUniformsRef = (0, import_react4.useRef)({
+    color,
+    alpha,
+    wind,
+    baseSize,
+    distanceOffset,
+    distanceStrength,
+    particleCount
+  });
+  initialUniformsRef.current = {
+    color,
+    alpha,
+    wind,
+    baseSize,
+    distanceOffset,
+    distanceStrength,
+    particleCount
+  };
+  const handleCreate = (0, import_react4.useCallback)(({ scene }) => {
+    const uniforms = buildUniforms(initialUniformsRef.current);
+    const geometry = createParticleGeometry(
+      Math.max(1, Math.floor(initialUniformsRef.current.particleCount))
+    );
+    const material = new THREE4.ShaderMaterial({
+      fragmentShader: fragment_default3,
+      vertexShader: vertex_default3,
+      uniforms,
+      transparent: true,
+      depthWrite: false
+    });
+    const points = new THREE4.Points(geometry, material);
+    points.frustumCulled = false;
+    scene.add(points);
+    particlesRef.current = { points, geometry, material, uniforms };
+    return () => {
+      scene.remove(points);
+      geometry.dispose();
+      material.dispose();
+      particlesRef.current = null;
+    };
+  }, []);
+  const handleRender = (0, import_react4.useCallback)((context) => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uTime.value = context.clock.getElapsedTime();
+  }, []);
+  const { containerRef } = useScene({
+    onCreate: handleCreate,
+    onRender: handleRender
+  });
+  (0, import_react4.useEffect)(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uColor.value.set(color);
+  }, [color]);
+  (0, import_react4.useEffect)(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uAlpha.value = alpha;
+  }, [alpha]);
+  (0, import_react4.useEffect)(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uWind.value = wind;
+  }, [wind]);
+  (0, import_react4.useEffect)(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uBaseSize.value = baseSize;
+  }, [baseSize]);
+  (0, import_react4.useEffect)(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uDistanceOffset.value = distanceOffset;
+  }, [distanceOffset]);
+  (0, import_react4.useEffect)(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uDistanceStrength.value = distanceStrength;
+  }, [distanceStrength]);
+  (0, import_react4.useEffect)(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    const geometry = createParticleGeometry(
+      Math.max(1, Math.floor(particleCount))
+    );
+    assets.points.geometry.dispose();
+    assets.points.geometry = geometry;
+    assets.geometry = geometry;
+  }, [particleCount]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FractalFlower,
+  OranoParticles,
+  ShaderArt
+});

package/dist/index.mjs

@@ -0,0 +1,532 @@
+// src/components/ShaderArt.tsx
+import { useCallback, useEffect as useEffect2, useRef as useRef2 } from "react";
+import * as THREE2 from "three";
+
+// src/hooks/useScene.ts
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+var EMPTY_DEPS = [];
+function useScene({
+  renderer: rendererOptions,
+  camera: cameraOptions,
+  pixelRatio,
+  onCreate,
+  onRender,
+  onResize,
+  deps
+} = {}) {
+  const containerRef = useRef(null);
+  const contextRef = useRef(null);
+  const onCreateRef = useRef(onCreate);
+  const onRenderRef = useRef(onRender);
+  const onResizeRef = useRef(onResize);
+  useEffect(() => {
+    onCreateRef.current = onCreate;
+  }, [onCreate]);
+  useEffect(() => {
+    onRenderRef.current = onRender;
+  }, [onRender]);
+  useEffect(() => {
+    onResizeRef.current = onResize;
+  }, [onResize]);
+  const effectDeps = deps ?? EMPTY_DEPS;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const resolvedPixelRatio = pixelRatio ?? (typeof window !== "undefined" ? Math.min(window.devicePixelRatio, 2) : 1);
+    const renderer = new THREE.WebGLRenderer({
+      alpha: true,
+      antialias: true,
+      ...rendererOptions
+    });
+    renderer.setPixelRatio(resolvedPixelRatio);
+    renderer.setSize(container.clientWidth, container.clientHeight, false);
+    renderer.setClearColor(0, 0);
+    renderer.domElement.style.width = "100%";
+    renderer.domElement.style.height = "100%";
+    container.appendChild(renderer.domElement);
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(
+      cameraOptions?.fov ?? 55,
+      container.clientWidth / Math.max(1, container.clientHeight),
+      cameraOptions?.near ?? 0.1,
+      cameraOptions?.far ?? 500
+    );
+    const [x = 0, y = 0, z = 15] = cameraOptions?.position ?? [];
+    camera.position.set(x, y, z);
+    const clock = new THREE.Clock();
+    const context = { renderer, scene, camera, clock };
+    contextRef.current = context;
+    const teardownCreate = onCreateRef.current?.(context);
+    let animationFrameId = 0;
+    const renderLoop = () => {
+      onRenderRef.current?.(context);
+      renderer.render(scene, camera);
+      animationFrameId = requestAnimationFrame(renderLoop);
+    };
+    animationFrameId = requestAnimationFrame(renderLoop);
+    const resizeObserver = new ResizeObserver(() => {
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      renderer.setSize(width, height, false);
+      camera.aspect = width / Math.max(1, height);
+      camera.updateProjectionMatrix();
+      onResizeRef.current?.(context, { width, height });
+    });
+    resizeObserver.observe(container);
+    return () => {
+      teardownCreate?.();
+      cancelAnimationFrame(animationFrameId);
+      resizeObserver.disconnect();
+      scene.clear();
+      renderer.dispose();
+      if (renderer.domElement.parentNode === container) {
+        container.removeChild(renderer.domElement);
+      }
+      contextRef.current = null;
+    };
+  }, effectDeps);
+  return { containerRef, contextRef };
+}
+
+// src/shaders/shader-art/fragment.glsl
+var fragment_default = "precision highp float;\n\nvarying vec2 vUv;\nuniform float iTime;\nuniform vec3 iResolution;\nuniform float uIterations;\nuniform float uAmplitude;\nuniform float uFreq;\n\nvec3 palette(float t) {\n    vec3 a = vec3(0.5, 0.5, 0.5);\n    vec3 b = vec3(0.5, 0.5, 0.5);\n    vec3 c = vec3(1.0, 1.0, 1.0);\n    vec3 d = vec3(0.263, 0.416, 0.557);\n    return a + b * cos(6.28318 * (c * t + d));\n}\n\nvoid main() {\n    vec2 fragCoord = vec2(vUv.x * iResolution.x, vUv.y * iResolution.y);\n    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;\n    vec2 uv0 = uv;\n    vec3 finalColor = vec3(0.0);\n    const int MAX_ITERATIONS = 8;\n    for (int idx = 0; idx < MAX_ITERATIONS; idx++) {\n        float i = float(idx);\n        if (i >= uIterations) {\n            break;\n        }\n        uv = fract(uv * uAmplitude) - 0.5;\n        float d = length(uv) * exp(-length(uv0));\n        vec3 col = palette(length(uv0) + i * 0.4 + iTime * uFreq);\n        d = sin(d * 8.0 + iTime) / 8.0;\n        d = abs(d);\n        d = pow(0.01 / max(d, 1e-4), 1.9);\n        finalColor += col * d;\n    }\n    gl_FragColor = vec4(finalColor, 1.0);\n}";
+
+// src/shaders/shader-art/vertex.glsl
+var vertex_default = "varying vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n  gl_Position = vec4(position, 1.0);\n}";
+
+// src/components/ShaderArt.tsx
+import { jsx } from "react/jsx-runtime";
+function ShaderArt({
+  uniforms,
+  className,
+  style,
+  width,
+  height,
+  ...divProps
+}) {
+  const shaderUniformsRef = useRef2({
+    iTime: { value: 0 },
+    iResolution: { value: new THREE2.Vector3(1, 1, 1) },
+    uIterations: { value: Math.max(1, uniforms.uIterations) },
+    uAmplitude: { value: uniforms.uAmplitude },
+    uFreq: { value: uniforms.uFreq }
+  });
+  const assetsRef = useRef2(null);
+  const handleCreate = useCallback(({ scene }) => {
+    const geometry = new THREE2.PlaneGeometry(2, 2);
+    const material = new THREE2.ShaderMaterial({
+      vertexShader: vertex_default,
+      fragmentShader: fragment_default,
+      uniforms: shaderUniformsRef.current
+    });
+    const mesh = new THREE2.Mesh(geometry, material);
+    scene.add(mesh);
+    assetsRef.current = { mesh, geometry, material };
+    return () => {
+      scene.remove(mesh);
+      geometry.dispose();
+      material.dispose();
+      assetsRef.current = null;
+    };
+  }, []);
+  const handleRender = useCallback((context) => {
+    shaderUniformsRef.current.iTime.value = context.clock.getElapsedTime();
+    const canvas = context.renderer.domElement;
+    shaderUniformsRef.current.iResolution.value.set(
+      canvas.width,
+      canvas.height,
+      1
+    );
+  }, []);
+  const { containerRef } = useScene({
+    onCreate: handleCreate,
+    onRender: handleRender
+  });
+  useEffect2(() => {
+    shaderUniformsRef.current.uIterations.value = Math.max(
+      1,
+      uniforms.uIterations
+    );
+    shaderUniformsRef.current.uAmplitude.value = uniforms.uAmplitude;
+    shaderUniformsRef.current.uFreq.value = uniforms.uFreq;
+  }, [uniforms.uAmplitude, uniforms.uFreq, uniforms.uIterations]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+
+// src/components/FractalFlower.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useMemo,
+  useRef as useRef3
+} from "react";
+import * as THREE3 from "three";
+
+// src/shaders/fractal-flower/fragment.glsl
+var fragment_default2 = "precision highp float;\n\nuniform float uIntensity;\nuniform float uExposure;\nuniform float uPetalRadius;\nuniform float uMorph;\n\nvarying vec3 vColor;\nvarying float vWeight;\n\nvoid main() {\n  vec2 uv = gl_PointCoord - vec2(0.5);\n  float sigma = max(0.3, uPetalRadius * 10.0);\n  float dist2 = dot(uv, uv);\n  float alpha = exp(-dist2 / (sigma * sigma));\n\n  if (alpha <= 0.01) {\n    discard;\n  }\n\n  float weight = 0.6 + 0.4 * vWeight;\n  float falloff = pow(alpha, 0.8);\n  float morphBoost = mix(1.0, 1.35, uMorph);\n  vec3 color = clamp(vColor * weight * falloff * (uIntensity * morphBoost), 0.0, 1.0);\n\n  float outAlpha = clamp(alpha * mix(0.6, 0.85, uMorph), 0.0, 1.0);\n  gl_FragColor = vec4(color, outAlpha);\n}\n";
+
+// src/shaders/fractal-flower/vertex.glsl
+var vertex_default2 = "precision highp float;\n\nattribute float aK;\nattribute float aE;\nattribute float aRotation;\n\nuniform float uTime;\nuniform float uTimeScale;\nuniform float uSpread;\nuniform float uPointSize;\nuniform float uMorph;\nuniform vec3 uColor;\n\nvarying vec3 vColor;\nvarying float vWeight;\n\nmat2 rotation(float angle) {\n  float c = cos(angle);\n  float s = sin(angle);\n  return mat2(c, -s, s, c);\n}\n\nvoid main() {\n  float time = uTime * uTimeScale;\n  float d = 7.0 * cos(length(vec2(aK, aE)) / 3.0 + time * 0.5);\n\n  vec2 basePoint = vec2(\n    aK * 4.0 + d * aK * sin(d + aE / 9.0 + time),\n    aE * 2.0 - d * 9.0 - d * 9.0 * cos(d + time)\n  );\n\n  vec2 altPoint = vec2(\n    aK * 6.0 + sin(time * 1.3 + aE * 2.0) * (42.0 + 12.0 * sin(aE * 1.15)),\n    aE * 3.4 - d * 12.5 + 28.0 * cos(time * 0.75 + aK * 0.35)\n  );\n\n  vec2 morphed = mix(basePoint, altPoint, uMorph);\n  float swirl = aRotation + uMorph * (0.8 + 0.25 * sin(time * 0.4 + aE));\n  vec2 rotated = rotation(swirl) * morphed;\n\n  float spreadMix = mix(uSpread, uSpread * 0.65, uMorph);\n  vec2 scaled = rotated / spreadMix;\n  vec3 modelPosition = vec3(scaled, 0.0);\n\n  float radial = length(morphed) / (spreadMix * 0.9);\n  vWeight = clamp(1.0 - radial * radial, 0.0, 1.0);\n\n  vColor = uColor;\n\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(modelPosition, 1.0);\n  gl_PointSize = uPointSize * mix(1.0, 1.35, uMorph);\n}\n";
+
+// src/components/FractalFlower.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BASE_POINT_COUNT = 2e4;
+var ROTATIONS = [
+  0,
+  Math.PI / 3,
+  2 * Math.PI / 3,
+  Math.PI,
+  4 * Math.PI / 3,
+  5 * Math.PI / 3
+];
+var ROTATION_COUNT = ROTATIONS.length;
+var TOTAL_POINTS = ROTATION_COUNT * BASE_POINT_COUNT;
+var BASE_SPREAD = 200;
+var MORPH_SPEED = 0.6;
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+function FractalFlower({
+  timeScale,
+  petalRadius,
+  scale,
+  intensity,
+  morphCycle,
+  color,
+  className,
+  style,
+  width,
+  height,
+  ...divProps
+}) {
+  const attributes = useMemo(() => {
+    const positions = new Float32Array(TOTAL_POINTS * 3);
+    const kValues = new Float32Array(TOTAL_POINTS);
+    const eValues = new Float32Array(TOTAL_POINTS);
+    const rotations = new Float32Array(TOTAL_POINTS);
+    for (let copy = 0; copy < ROTATION_COUNT; copy++) {
+      const angle = ROTATIONS[copy];
+      for (let i = 0; i < BASE_POINT_COUNT; i++) {
+        const index = copy * BASE_POINT_COUNT + i;
+        const k = i % 25 - 12;
+        const e = i / 800;
+        positions[index * 3] = 0;
+        positions[index * 3 + 1] = 0;
+        positions[index * 3 + 2] = 0;
+        kValues[index] = k;
+        eValues[index] = e;
+        rotations[index] = angle;
+      }
+    }
+    return {
+      positions,
+      kValues,
+      eValues,
+      rotations
+    };
+  }, []);
+  const uniformsRef = useRef3({
+    uTime: { value: 0 },
+    uResolution: { value: new THREE3.Vector2(1, 1) },
+    uTimeScale: { value: 0.78539816339 },
+    uPetalRadius: { value: 0.02 },
+    uIntensity: { value: 0.25 },
+    uExposure: { value: 5 },
+    uSpread: { value: BASE_SPREAD / Math.max(scale, 1e-4) },
+    uPointSize: { value: 2.5 },
+    uColor: { value: new THREE3.Color(color) },
+    uMorph: { value: 0 }
+  });
+  const morphRef = useRef3({
+    progress: uniformsRef.current.uMorph.value,
+    target: 0,
+    cycle: morphCycle
+  });
+  const assetsRef = useRef3(null);
+  const handleCreate = useCallback2(
+    ({ scene }) => {
+      const geometry = new THREE3.BufferGeometry();
+      geometry.setAttribute(
+        "position",
+        new THREE3.BufferAttribute(attributes.positions, 3)
+      );
+      geometry.setAttribute(
+        "aK",
+        new THREE3.BufferAttribute(attributes.kValues, 1)
+      );
+      geometry.setAttribute(
+        "aE",
+        new THREE3.BufferAttribute(attributes.eValues, 1)
+      );
+      geometry.setAttribute(
+        "aRotation",
+        new THREE3.BufferAttribute(attributes.rotations, 1)
+      );
+      const uniformValues = uniformsRef.current;
+      const material = new THREE3.ShaderMaterial({
+        vertexShader: vertex_default2,
+        fragmentShader: fragment_default2,
+        uniforms: uniformValues,
+        blending: THREE3.AdditiveBlending,
+        depthWrite: false,
+        transparent: true
+      });
+      const points = new THREE3.Points(geometry, material);
+      points.frustumCulled = false;
+      scene.add(points);
+      assetsRef.current = { points, geometry, material, uniforms: uniformValues };
+      return () => {
+        scene.remove(points);
+        geometry.dispose();
+        material.dispose();
+        assetsRef.current = null;
+      };
+    },
+    [attributes.eValues, attributes.kValues, attributes.positions, attributes.rotations]
+  );
+  const handleRender = useCallback2(
+    (context) => {
+      const assets = assetsRef.current;
+      if (!assets) return;
+      const uniforms = assets.uniforms;
+      uniforms.uTime.value = context.clock.getElapsedTime();
+      const canvas = context.renderer.domElement;
+      uniforms.uResolution.value.set(canvas.width, canvas.height);
+      const basePointSize = Math.max(
+        2,
+        canvas.height / 400 * (uniforms.uPetalRadius.value * 32)
+      );
+      const pointSize = Math.min(basePointSize, 6);
+      uniforms.uPointSize.value = pointSize;
+      const morph = morphRef.current;
+      if (Math.abs(morph.target - morph.progress) > 1e-3) {
+        const delta = context.clock.getDelta();
+        const direction = Math.sign(morph.target - morph.progress);
+        morph.progress = clamp(
+          morph.progress + direction * delta * MORPH_SPEED,
+          0,
+          1
+        );
+      }
+      uniforms.uMorph.value = morph.progress;
+    },
+    []
+  );
+  const { containerRef } = useScene({
+    onCreate: handleCreate,
+    onRender: handleRender
+  });
+  useEffect3(() => {
+    const uniforms = uniformsRef.current;
+    uniforms.uTimeScale.value = timeScale;
+    uniforms.uPetalRadius.value = petalRadius;
+    uniforms.uSpread.value = BASE_SPREAD / Math.max(scale, 1e-4);
+    uniforms.uIntensity.value = intensity;
+    uniforms.uColor.value.set(color);
+    uniforms.uMorph.value = morphRef.current.progress;
+  }, [color, intensity, petalRadius, scale, timeScale]);
+  useEffect3(() => {
+    if (morphRef.current.cycle === morphCycle) {
+      return;
+    }
+    morphRef.current.cycle = morphCycle;
+    morphRef.current.target = morphRef.current.target < 0.5 ? 1 : 0;
+  }, [morphCycle]);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+
+// src/components/OranoParticles.tsx
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4 } from "react";
+import * as THREE4 from "three";
+
+// src/shaders/orano-particles/fragment.glsl
+var fragment_default3 = "uniform vec3 uColor;\nuniform float uAlpha;\n\nvarying float vAlpha;\n\nvoid main() {\n  gl_FragColor = vec4(uColor, vAlpha * uAlpha);\n}\n";
+
+// src/shaders/orano-particles/vertex.glsl
+var vertex_default3 = "#define M_PI 3.1415926535897932384626433832795\n\nuniform float uTime;\nuniform float uWind;\nuniform float uBaseSize;\nuniform float uDistanceOffset;\nuniform float uDistanceStrength;\n\nvarying float vAlpha;\n\nhighp float random(vec2 co) {\n  highp float a = 12.9898;\n  highp float b = 78.233;\n  highp float c = 43758.5453;\n  highp float dt = dot(co.xy, vec2(a, b));\n  highp float sn = mod(dt, M_PI);\n\n  return fract(sin(sn) * c);\n}\n\nvoid main() {\n  vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n\n  modelPosition.x = mod(\n      modelPosition.x + uTime * ((uWind * 0.5) + (uWind * 0.5) * random(modelPosition.yz)),\n      20.0\n    ) -\n    10.0;\n\n  modelPosition.y =\n      modelPosition.y + sin(modelPosition.x) * 0.3 +\n      modelPosition.y + sin(modelPosition.x * 0.357) * 0.3;\n\n  vec4 viewPosition = viewMatrix * modelPosition;\n  float cameraDistance = distance(vec4(0.0), viewPosition);\n\n  float sizeFalloff =\n      clamp((cameraDistance - uDistanceOffset) * uDistanceStrength, 0.0, uBaseSize);\n\n  gl_PointSize = uBaseSize - sizeFalloff;\n  gl_Position = projectionMatrix * viewPosition;\n\n  vAlpha = 1.0 - clamp(cameraDistance * 0.5 / 12.0, 0.0, 1.0);\n}\n";
+
+// src/components/OranoParticles.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var X_RANGE = 20;
+var Y_RANGE = { min: -8, max: 2 };
+var Z_RANGE = { min: -5, max: 215 };
+function createParticleGeometry(count) {
+  const geometry = new THREE4.BufferGeometry();
+  const positions = new Float32Array(count * 3);
+  for (let i = 0; i < count; i += 1) {
+    const x = (Math.random() - 0.5) * X_RANGE;
+    const y = Math.random() * (Y_RANGE.max - Y_RANGE.min) + Y_RANGE.min;
+    const z = Math.random() * (Z_RANGE.max - Z_RANGE.min) + Z_RANGE.min;
+    positions[i * 3] = x;
+    positions[i * 3 + 1] = y;
+    positions[i * 3 + 2] = z;
+  }
+  geometry.setAttribute("position", new THREE4.BufferAttribute(positions, 3));
+  geometry.computeBoundingSphere();
+  return geometry;
+}
+function buildUniforms({
+  color,
+  alpha,
+  wind,
+  baseSize,
+  distanceOffset,
+  distanceStrength
+}) {
+  return {
+    uColor: { value: new THREE4.Color(color) },
+    uAlpha: { value: alpha },
+    uTime: { value: 0 },
+    uWind: { value: wind },
+    uBaseSize: { value: baseSize },
+    uDistanceOffset: { value: distanceOffset },
+    uDistanceStrength: { value: distanceStrength }
+  };
+}
+function OranoParticles({
+  className,
+  style,
+  width,
+  height,
+  color,
+  alpha,
+  wind,
+  baseSize,
+  distanceOffset,
+  distanceStrength,
+  particleCount,
+  ...divProps
+}) {
+  const particlesRef = useRef4(null);
+  const initialUniformsRef = useRef4({
+    color,
+    alpha,
+    wind,
+    baseSize,
+    distanceOffset,
+    distanceStrength,
+    particleCount
+  });
+  initialUniformsRef.current = {
+    color,
+    alpha,
+    wind,
+    baseSize,
+    distanceOffset,
+    distanceStrength,
+    particleCount
+  };
+  const handleCreate = useCallback3(({ scene }) => {
+    const uniforms = buildUniforms(initialUniformsRef.current);
+    const geometry = createParticleGeometry(
+      Math.max(1, Math.floor(initialUniformsRef.current.particleCount))
+    );
+    const material = new THREE4.ShaderMaterial({
+      fragmentShader: fragment_default3,
+      vertexShader: vertex_default3,
+      uniforms,
+      transparent: true,
+      depthWrite: false
+    });
+    const points = new THREE4.Points(geometry, material);
+    points.frustumCulled = false;
+    scene.add(points);
+    particlesRef.current = { points, geometry, material, uniforms };
+    return () => {
+      scene.remove(points);
+      geometry.dispose();
+      material.dispose();
+      particlesRef.current = null;
+    };
+  }, []);
+  const handleRender = useCallback3((context) => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uTime.value = context.clock.getElapsedTime();
+  }, []);
+  const { containerRef } = useScene({
+    onCreate: handleCreate,
+    onRender: handleRender
+  });
+  useEffect4(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uColor.value.set(color);
+  }, [color]);
+  useEffect4(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uAlpha.value = alpha;
+  }, [alpha]);
+  useEffect4(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uWind.value = wind;
+  }, [wind]);
+  useEffect4(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uBaseSize.value = baseSize;
+  }, [baseSize]);
+  useEffect4(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uDistanceOffset.value = distanceOffset;
+  }, [distanceOffset]);
+  useEffect4(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    assets.uniforms.uDistanceStrength.value = distanceStrength;
+  }, [distanceStrength]);
+  useEffect4(() => {
+    const assets = particlesRef.current;
+    if (!assets) return;
+    const geometry = createParticleGeometry(
+      Math.max(1, Math.floor(particleCount))
+    );
+    assets.points.geometry.dispose();
+    assets.points.geometry = geometry;
+    assets.geometry = geometry;
+  }, [particleCount]);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        width: width ?? "100%",
+        height: height ?? "100%",
+        ...style
+      },
+      ...divProps
+    }
+  );
+}
+export {
+  FractalFlower,
+  OranoParticles,
+  ShaderArt
+};

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@toriistudio/shader-ui",
+  "version": "0.0.1",
+  "description": "Shader components",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./preset": {
+      "import": "./dist/preset.mjs",
+      "require": "./dist/preset.js"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "local:push": "yarn build && yalc push",
+    "release:patch": "npm version patch && git push --follow-tags && npm publish",
+    "release:minor": "npm version minor && git push --follow-tags && npm publish",
+    "release:major": "npm version major && git push --follow-tags && npm publish",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toriistudio/shader-ui.git"
+  },
+  "keywords": [
+    "react",
+    "component",
+    "headless",
+    "three",
+    "shaders"
+  ],
+  "author": "toriistudio",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/toriistudio/shader-ui/issues"
+  },
+  "homepage": "https://github.com/toriistudio/shader-ui#readme",
+  "peerDependencies": {
+    "react": ">=19 <20",
+    "react-dom": ">=19 <20",
+    "three": ">=0.180 <1",
+    "three-stdlib": ">=2.36.0"
+  },
+  "peerDependenciesMeta": {
+    "three": {
+      "optional": true
+    },
+    "three-stdlib": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "three": "^0.177.0",
+    "three-stdlib": "^2.36.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "dts": true,
+    "format": [
+      "cjs",
+      "esm"
+    ],
+    "sourcemap": true,
+    "clean": true,
+    "external": [
+      "react",
+      "react-dom",
+      "three",
+      "three-stdlib"
+    ]
+  }
+}