react-shadertoy 0.5.0 → 0.6.0

package/README.md

@@ -3,9 +3,11 @@
 Run [Shadertoy](https://www.shadertoy.com/) GLSL shaders in React. Copy-paste and it works.
 
 - Zero dependencies (just React)
-- All Shadertoy uniforms supported (`iTime`, `iResolution`, `iMouse`, `iDate`, etc.)
-- iChannel0-3 textures (image URL, video, canvas)
-- Multipass rendering (Buffer A-D → Image)
+- WebGL2 (GLSL ES 3.0) — full Shadertoy compatibility
+- All uniforms: `iTime`, `iResolution`, `iMouse`, `iDate`, `iFrame`, etc.
+- iChannel0-3 textures (image URL, video, canvas, with wrap/filter/vflip)
+- Multipass rendering (Buffer A-D with ping-pong FBO)
+- Shadertoy API integration (`<Shadertoy id="MdX3zr" />`)
 - Mouse & touch interaction built-in
 - TypeScript-first
 
@@ -15,7 +17,7 @@ Run [Shadertoy](https://www.shadertoy.com/) GLSL shaders in React. Copy-paste an
 npm install react-shadertoy
 ```
 
-## Usage
+## Quick Start
 
 ```tsx
 import { Shadertoy } from 'react-shadertoy'
@@ -37,13 +39,99 @@ function App() {
 
 Find a shader on [Shadertoy](https://www.shadertoy.com/), copy the GLSL code, paste it into `fragmentShader`. Done.
 
+## Textures
+
+Pass image URLs, video elements, or canvas elements as textures:
+
+```tsx
+<Shadertoy
+  fragmentShader={code}
+  textures={{
+    iChannel0: '/noise.png',
+    iChannel1: videoRef.current,
+    iChannel2: canvasRef.current,
+  }}
+/>
+```
+
+### Texture Options
+
+Control wrap mode, filtering, and vertical flip:
+
+```tsx
+<Shadertoy
+  fragmentShader={code}
+  textures={{
+    iChannel0: {
+      src: '/noise.png',
+      wrap: 'repeat',     // 'clamp' | 'repeat' (default: 'clamp')
+      filter: 'mipmap',   // 'nearest' | 'linear' | 'mipmap' (default: 'mipmap')
+      vflip: true,         // vertical flip (default: true)
+    },
+    iChannel1: '/simple.png',  // shorthand = default options
+  }}
+/>
+```
+
+## Multipass
+
+Buffer A-D with self-referencing feedback loops:
+
+```tsx
+<Shadertoy
+  passes={{
+    BufferA: {
+      code: bufferACode,
+      iChannel0: 'BufferA',    // self-reference (previous frame)
+      iChannel1: '/noise.png', // external texture
+    },
+    BufferB: {
+      code: bufferBCode,
+      iChannel0: 'BufferA',    // read Buffer A output
+    },
+    Image: {
+      code: imageCode,
+      iChannel0: 'BufferA',
+      iChannel1: 'BufferB',
+    },
+  }}
+/>
+```
+
+## Shadertoy API
+
+Load shaders directly from Shadertoy by ID:
+
+```tsx
+<Shadertoy
+  id="MdX3zr"
+  apiKey="your-api-key"
+/>
+```
+
+Shows an author/name overlay by default. Disable with `showLicense={false}`.
+
+API key from [shadertoy.com/myapps](https://www.shadertoy.com/myapps).
+
+### Build-Time Fetch
+
+For production, fetch at build time to avoid runtime API calls:
+
+```ts
+import { fetchShader, apiToConfig } from 'react-shadertoy'
+
+const shader = await fetchShader('MdX3zr', process.env.SHADERTOY_API_KEY)
+const config = apiToConfig(shader)
+// Save config to JSON, use passes prop at runtime
+```
+
 ## Hooks API
 
 ```tsx
 import { useShadertoy } from 'react-shadertoy'
 
 function MyShader() {
-  const { canvasRef, isReady, error, pause, resume } = useShadertoy({
+  const { canvasRef, isReady, error, pause, resume, meta } = useShadertoy({
     fragmentShader: `
       void mainImage(out vec4 fragColor, in vec2 fragCoord) {
         vec2 uv = fragCoord / iResolution.xy;
@@ -60,7 +148,12 @@ function MyShader() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `fragmentShader` | `string` | required | Shadertoy GLSL code |
+| `fragmentShader` | `string` | — | Shadertoy GLSL code |
+| `textures` | `TextureInputs` | — | iChannel0-3 texture sources |
+| `passes` | `MultipassConfig` | — | Multipass Buffer A-D + Image |
+| `id` | `string` | — | Shadertoy shader ID (API mode) |
+| `apiKey` | `string` | — | Shadertoy API key |
+| `showLicense` | `boolean` | `true` (API) | Show author overlay |
 | `style` | `CSSProperties` | — | Container style |
 | `className` | `string` | — | Container className |
 | `paused` | `boolean` | `false` | Pause rendering |
@@ -80,6 +173,8 @@ function MyShader() {
 | `iFrame` | `int` | Frame counter |
 | `iMouse` | `vec4` | Mouse position & click state |
 | `iDate` | `vec4` | Year, month, day, seconds |
+| `iChannel0-3` | `sampler2D` | Texture inputs |
+| `iChannelResolution` | `vec3[4]` | Texture dimensions |
 
 ## License
 

package/dist/index.d.mts

@@ -36,6 +36,58 @@ interface PassConfig {
 type MultipassConfig = {
     [K in PassName]?: PassConfig;
 };
+interface ShadertoyApiSampler {
+    filter: string;
+    wrap: string;
+    vflip: string;
+    srgb: string;
+    internal: string;
+}
+interface ShadertoyApiInput {
+    id: number;
+    src: string;
+    ctype: string;
+    channel: number;
+    sampler: ShadertoyApiSampler;
+    published: number;
+}
+interface ShadertoyApiOutput {
+    id: number;
+    channel: number;
+}
+interface ShadertoyApiRenderPass {
+    inputs: ShadertoyApiInput[];
+    outputs: ShadertoyApiOutput[];
+    code: string;
+    name: string;
+    description: string;
+    type: string;
+}
+interface ShadertoyApiInfo {
+    id: string;
+    date: string;
+    viewed: number;
+    name: string;
+    username: string;
+    description: string;
+    likes: number;
+    published: number;
+    flags: number;
+    tags: string[];
+    hasliked: number;
+}
+interface ShadertoyApiShader {
+    ver: string;
+    info: ShadertoyApiInfo;
+    renderpass: ShadertoyApiRenderPass[];
+}
+interface ShaderMeta {
+    name: string;
+    author: string;
+    description: string;
+    tags: string[];
+    license?: string;
+}
 interface ShadertoyProps {
     /** Shadertoy-compatible GLSL fragment shader (must contain mainImage) */
     fragmentShader?: string;
@@ -43,6 +95,12 @@ interface ShadertoyProps {
     passes?: MultipassConfig;
     /** Texture inputs for iChannel0-3 (single-pass mode) */
     textures?: TextureInputs;
+    /** Shadertoy shader ID — fetches shader from API */
+    id?: string;
+    /** Shadertoy API key (required when using id) */
+    apiKey?: string;
+    /** Show license/author overlay (default: true when using id) */
+    showLicense?: boolean;
     /** Container style */
     style?: CSSProperties;
     /** Container className */
@@ -64,6 +122,8 @@ interface UseShadertoyOptions {
     fragmentShader?: string;
     passes?: MultipassConfig;
     textures?: TextureInputs;
+    id?: string;
+    apiKey?: string;
     paused?: boolean;
     speed?: number;
     pixelRatio?: number;
@@ -77,10 +137,26 @@ interface UseShadertoyReturn {
     error: string | null;
     pause: () => void;
     resume: () => void;
+    meta: ShaderMeta | null;
 }
 
-declare function Shadertoy({ fragmentShader, passes, textures, style, className, paused, speed, pixelRatio, mouse, onError, onLoad, }: ShadertoyProps): react_jsx_runtime.JSX.Element;
+declare function Shadertoy({ fragmentShader, passes, textures, id, apiKey, showLicense, style, className, paused, speed, pixelRatio, mouse, onError, onLoad, }: ShadertoyProps): react_jsx_runtime.JSX.Element;
 
-declare function useShadertoy({ fragmentShader, passes: passesProp, textures: texturesProp, paused, speed, pixelRatio, mouse: mouseEnabled, onError, onLoad, }: UseShadertoyOptions): UseShadertoyReturn;
+declare function useShadertoy({ fragmentShader, passes: passesProp, textures: texturesProp, id, apiKey, paused, speed, pixelRatio, mouse: mouseEnabled, onError, onLoad, }: UseShadertoyOptions): UseShadertoyReturn & {
+    meta: ShaderMeta | null;
+};
+
+/**
+ * Fetch a shader from the Shadertoy API.
+ */
+declare function fetchShader(id: string, apiKey: string): Promise<ShadertoyApiShader>;
+/**
+ * Convert a Shadertoy API shader to our MultipassConfig + TextureInputs + meta.
+ */
+declare function apiToConfig(shader: ShadertoyApiShader): {
+    passes: MultipassConfig;
+    textures: TextureInputs;
+    meta: ShaderMeta;
+};
 
-export { type MultipassConfig, type PassConfig, type PassName, Shadertoy, type ShadertoyProps, type TextureFilter, type TextureInput, type TextureInputs, type TextureOptions, type TextureWrap, type UseShadertoyOptions, type UseShadertoyReturn, useShadertoy };
+export { type MultipassConfig, type PassConfig, type PassName, type ShaderMeta, Shadertoy, type ShadertoyApiShader, type ShadertoyProps, type TextureFilter, type TextureInput, type TextureInputs, type TextureOptions, type TextureWrap, type UseShadertoyOptions, type UseShadertoyReturn, apiToConfig, fetchShader, useShadertoy };

package/dist/index.d.ts

@@ -36,6 +36,58 @@ interface PassConfig {
 type MultipassConfig = {
     [K in PassName]?: PassConfig;
 };
+interface ShadertoyApiSampler {
+    filter: string;
+    wrap: string;
+    vflip: string;
+    srgb: string;
+    internal: string;
+}
+interface ShadertoyApiInput {
+    id: number;
+    src: string;
+    ctype: string;
+    channel: number;
+    sampler: ShadertoyApiSampler;
+    published: number;
+}
+interface ShadertoyApiOutput {
+    id: number;
+    channel: number;
+}
+interface ShadertoyApiRenderPass {
+    inputs: ShadertoyApiInput[];
+    outputs: ShadertoyApiOutput[];
+    code: string;
+    name: string;
+    description: string;
+    type: string;
+}
+interface ShadertoyApiInfo {
+    id: string;
+    date: string;
+    viewed: number;
+    name: string;
+    username: string;
+    description: string;
+    likes: number;
+    published: number;
+    flags: number;
+    tags: string[];
+    hasliked: number;
+}
+interface ShadertoyApiShader {
+    ver: string;
+    info: ShadertoyApiInfo;
+    renderpass: ShadertoyApiRenderPass[];
+}
+interface ShaderMeta {
+    name: string;
+    author: string;
+    description: string;
+    tags: string[];
+    license?: string;
+}
 interface ShadertoyProps {
     /** Shadertoy-compatible GLSL fragment shader (must contain mainImage) */
     fragmentShader?: string;
@@ -43,6 +95,12 @@ interface ShadertoyProps {
     passes?: MultipassConfig;
     /** Texture inputs for iChannel0-3 (single-pass mode) */
     textures?: TextureInputs;
+    /** Shadertoy shader ID — fetches shader from API */
+    id?: string;
+    /** Shadertoy API key (required when using id) */
+    apiKey?: string;
+    /** Show license/author overlay (default: true when using id) */
+    showLicense?: boolean;
     /** Container style */
     style?: CSSProperties;
     /** Container className */
@@ -64,6 +122,8 @@ interface UseShadertoyOptions {
     fragmentShader?: string;
     passes?: MultipassConfig;
     textures?: TextureInputs;
+    id?: string;
+    apiKey?: string;
     paused?: boolean;
     speed?: number;
     pixelRatio?: number;
@@ -77,10 +137,26 @@ interface UseShadertoyReturn {
     error: string | null;
     pause: () => void;
     resume: () => void;
+    meta: ShaderMeta | null;
 }
 
-declare function Shadertoy({ fragmentShader, passes, textures, style, className, paused, speed, pixelRatio, mouse, onError, onLoad, }: ShadertoyProps): react_jsx_runtime.JSX.Element;
+declare function Shadertoy({ fragmentShader, passes, textures, id, apiKey, showLicense, style, className, paused, speed, pixelRatio, mouse, onError, onLoad, }: ShadertoyProps): react_jsx_runtime.JSX.Element;
 
-declare function useShadertoy({ fragmentShader, passes: passesProp, textures: texturesProp, paused, speed, pixelRatio, mouse: mouseEnabled, onError, onLoad, }: UseShadertoyOptions): UseShadertoyReturn;
+declare function useShadertoy({ fragmentShader, passes: passesProp, textures: texturesProp, id, apiKey, paused, speed, pixelRatio, mouse: mouseEnabled, onError, onLoad, }: UseShadertoyOptions): UseShadertoyReturn & {
+    meta: ShaderMeta | null;
+};
+
+/**
+ * Fetch a shader from the Shadertoy API.
+ */
+declare function fetchShader(id: string, apiKey: string): Promise<ShadertoyApiShader>;
+/**
+ * Convert a Shadertoy API shader to our MultipassConfig + TextureInputs + meta.
+ */
+declare function apiToConfig(shader: ShadertoyApiShader): {
+    passes: MultipassConfig;
+    textures: TextureInputs;
+    meta: ShaderMeta;
+};
 
-export { type MultipassConfig, type PassConfig, type PassName, Shadertoy, type ShadertoyProps, type TextureFilter, type TextureInput, type TextureInputs, type TextureOptions, type TextureWrap, type UseShadertoyOptions, type UseShadertoyReturn, useShadertoy };
+export { type MultipassConfig, type PassConfig, type PassName, type ShaderMeta, Shadertoy, type ShadertoyApiShader, type ShadertoyProps, type TextureFilter, type TextureInput, type TextureInputs, type TextureOptions, type TextureWrap, type UseShadertoyOptions, type UseShadertoyReturn, apiToConfig, fetchShader, useShadertoy };

package/dist/index.js

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Shadertoy: () => Shadertoy,
+  apiToConfig: () => apiToConfig,
+  fetchShader: () => fetchShader,
   useShadertoy: () => useShadertoy
 });
 module.exports = __toCommonJS(index_exports);
@@ -28,6 +30,98 @@ module.exports = __toCommonJS(index_exports);
 // src/useShadertoy.ts
 var import_react = require("react");
 
+// src/api.ts
+var SHADERTOY_BASE = "https://www.shadertoy.com";
+var API_URL = `${SHADERTOY_BASE}/api/v1/shaders`;
+var OUTPUT_ID_TO_PASS = {
+  257: "BufferA",
+  258: "BufferB",
+  259: "BufferC",
+  260: "BufferD"
+};
+var cache = /* @__PURE__ */ new Map();
+async function fetchShader(id, apiKey) {
+  const cached = cache.get(id);
+  if (cached) return cached;
+  const res = await fetch(`${API_URL}/${id}?key=${apiKey}`);
+  if (!res.ok) throw new Error(`Shadertoy API error: ${res.status}`);
+  const data = await res.json();
+  if (data.Error) throw new Error(`Shadertoy API: ${data.Error}`);
+  cache.set(id, data.Shader);
+  return data.Shader;
+}
+function mapWrap(wrap) {
+  if (wrap === "repeat") return "repeat";
+  return "clamp";
+}
+function mapFilter(filter) {
+  if (filter === "nearest") return "nearest";
+  if (filter === "linear") return "linear";
+  return "mipmap";
+}
+function resolveTextureSrc(src) {
+  if (src.startsWith("http")) return src;
+  return SHADERTOY_BASE + src;
+}
+function apiToConfig(shader) {
+  const passes = {};
+  const textures = {};
+  const commonPass = shader.renderpass.find((p) => p.type === "common");
+  const commonCode = commonPass ? commonPass.code + "\n" : "";
+  for (const rp of shader.renderpass) {
+    if (rp.type === "common" || rp.type === "sound") continue;
+    const passName = getPassName(rp);
+    if (!passName) continue;
+    const passConfig = {
+      code: commonCode + rp.code
+    };
+    for (const input of rp.inputs) {
+      const channelKey = `iChannel${input.channel}`;
+      if (channelKey === "code") continue;
+      if (input.ctype === "buffer") {
+        const refPass = OUTPUT_ID_TO_PASS[input.id];
+        if (refPass) {
+          ;
+          passConfig[channelKey] = refPass;
+        }
+      } else if (input.ctype === "texture" || input.ctype === "cubemap") {
+        const texOpts = {
+          src: resolveTextureSrc(input.src),
+          wrap: mapWrap(input.sampler.wrap),
+          filter: mapFilter(input.sampler.filter),
+          vflip: input.sampler.vflip === "true"
+        };
+        passConfig[channelKey] = texOpts;
+        const texKey = `iChannel${input.channel}`;
+        textures[texKey] = texOpts;
+      }
+    }
+    passes[passName] = passConfig;
+  }
+  const meta = {
+    name: shader.info.name,
+    author: shader.info.username,
+    description: shader.info.description,
+    tags: shader.info.tags
+  };
+  return { passes, textures, meta };
+}
+function getPassName(rp) {
+  if (rp.type === "image") return "Image";
+  if (rp.type === "buffer") {
+    for (const out of rp.outputs) {
+      const name = OUTPUT_ID_TO_PASS[out.id];
+      if (name) return name;
+    }
+    return null;
+  }
+  return null;
+}
+function isSinglePass(passes) {
+  const keys = Object.keys(passes);
+  return keys.length === 1 && keys[0] === "Image";
+}
+
 // src/renderer.ts
 var QUAD_VERTICES = new Float32Array([
   -1,
@@ -578,6 +672,8 @@ function useShadertoy({
   fragmentShader,
   passes: passesProp,
   textures: texturesProp,
+  id,
+  apiKey,
   paused = false,
   speed = 1,
   pixelRatio,
@@ -593,6 +689,8 @@ function useShadertoy({
   const speedRef = (0, import_react.useRef)(speed);
   const [isReady, setIsReady] = (0, import_react.useState)(false);
   const [error, setError] = (0, import_react.useState)(null);
+  const [meta, setMeta] = (0, import_react.useState)(null);
+  const [resolved, setResolved] = (0, import_react.useState)(id ? null : { passes: passesProp, textures: texturesProp, fragmentShader });
   const mouseState = (0, import_react.useRef)({
     x: 0,
     y: 0,
@@ -603,8 +701,43 @@ function useShadertoy({
   const sharedState = (0, import_react.useRef)({ time: 0, frame: 0 });
   pausedRef.current = paused;
   speedRef.current = speed;
-  const isMultipass = !!passesProp;
   (0, import_react.useEffect)(() => {
+    if (!id) return;
+    if (!apiKey) {
+      setError("apiKey is required when using id");
+      onError?.("apiKey is required when using id");
+      return;
+    }
+    let cancelled = false;
+    fetchShader(id, apiKey).then((shader) => {
+      if (cancelled) return;
+      const config = apiToConfig(shader);
+      setMeta(config.meta);
+      if (isSinglePass(config.passes)) {
+        const imagePass = config.passes.Image;
+        setResolved({
+          fragmentShader: imagePass.code,
+          textures: config.textures
+        });
+      } else {
+        setResolved({ passes: config.passes });
+      }
+    }).catch((err) => {
+      if (cancelled) return;
+      const msg = err instanceof Error ? err.message : "Failed to fetch shader";
+      setError(msg);
+      onError?.(msg);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [id, apiKey]);
+  const effectivePasses = resolved?.passes;
+  const effectiveTextures = resolved?.textures ?? texturesProp;
+  const effectiveShader = resolved?.fragmentShader ?? fragmentShader;
+  const isMultipass = !!effectivePasses;
+  (0, import_react.useEffect)(() => {
+    if (id && !resolved) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
     sharedState.current = { time: 0, frame: 0 };
@@ -621,9 +754,9 @@ function useShadertoy({
     }
     const externalTextures = [null, null, null, null];
     const texturePromises = [];
-    if (texturesProp) {
+    if (effectiveTextures) {
       for (let i = 0; i < 4; i++) {
-        const src = texturesProp[CHANNEL_KEYS2[i]];
+        const src = effectiveTextures[CHANNEL_KEYS2[i]];
         if (src != null) {
           const { state, promise } = createTexture(gl, src, i);
           externalTextures[i] = state;
@@ -641,7 +774,7 @@ function useShadertoy({
       onError?.(msg);
     };
     if (isMultipass) {
-      const passResult = createMultipassRenderer(gl, passesProp, externalTextures);
+      const passResult = createMultipassRenderer(gl, effectivePasses, externalTextures);
       if (typeof passResult === "string") {
         handleError(passResult);
         return;
@@ -677,7 +810,7 @@ function useShadertoy({
         setIsReady(false);
       };
     } else {
-      const shaderCode = fragmentShader || "void mainImage(out vec4 c, in vec2 f){ c = vec4(0); }";
+      const shaderCode = effectiveShader || "void mainImage(out vec4 c, in vec2 f){ c = vec4(0); }";
       const result = createRenderer(canvas, shaderCode);
       if (typeof result === "string") {
         handleError(result);
@@ -717,7 +850,7 @@ function useShadertoy({
         setIsReady(false);
       };
     }
-  }, [fragmentShader, passesProp, texturesProp, onError, onLoad]);
+  }, [effectiveShader, effectivePasses, effectiveTextures, resolved, onError, onLoad]);
   (0, import_react.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -799,7 +932,7 @@ function useShadertoy({
   const resume = (0, import_react.useCallback)(() => {
     pausedRef.current = false;
   }, []);
-  return { canvasRef, isReady, error, pause, resume };
+  return { canvasRef, isReady, error, pause, resume, meta };
 }
 
 // src/Shadertoy.tsx
@@ -808,6 +941,9 @@ function Shadertoy({
   fragmentShader,
   passes,
   textures,
+  id,
+  apiKey,
+  showLicense,
   style,
   className,
   paused,
@@ -817,10 +953,12 @@ function Shadertoy({
   onError,
   onLoad
 }) {
-  const { canvasRef } = useShadertoy({
+  const { canvasRef, meta } = useShadertoy({
     fragmentShader,
     passes,
     textures,
+    id,
+    apiKey,
     paused,
     speed,
     pixelRatio,
@@ -828,6 +966,35 @@ function Shadertoy({
     onError,
     onLoad
   });
+  const shouldShowLicense = showLicense ?? !!id;
+  const hasMeta = shouldShowLicense && meta;
+  if (hasMeta) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", ...style }, className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "canvas",
+        {
+          ref: canvasRef,
+          style: { width: "100%", height: "100%", display: "block" }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+        position: "absolute",
+        bottom: 8,
+        right: 8,
+        background: "rgba(0,0,0,0.6)",
+        color: "#fff",
+        padding: "4px 10px",
+        borderRadius: 4,
+        fontSize: 12,
+        fontFamily: "system-ui, sans-serif",
+        pointerEvents: "none"
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: meta.name }),
+        " by ",
+        meta.author
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "canvas",
     {
@@ -840,5 +1007,7 @@ function Shadertoy({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Shadertoy,
+  apiToConfig,
+  fetchShader,
   useShadertoy
 });

package/dist/index.mjs

@@ -1,6 +1,98 @@
 // src/useShadertoy.ts
 import { useCallback, useEffect, useRef, useState } from "react";
 
+// src/api.ts
+var SHADERTOY_BASE = "https://www.shadertoy.com";
+var API_URL = `${SHADERTOY_BASE}/api/v1/shaders`;
+var OUTPUT_ID_TO_PASS = {
+  257: "BufferA",
+  258: "BufferB",
+  259: "BufferC",
+  260: "BufferD"
+};
+var cache = /* @__PURE__ */ new Map();
+async function fetchShader(id, apiKey) {
+  const cached = cache.get(id);
+  if (cached) return cached;
+  const res = await fetch(`${API_URL}/${id}?key=${apiKey}`);
+  if (!res.ok) throw new Error(`Shadertoy API error: ${res.status}`);
+  const data = await res.json();
+  if (data.Error) throw new Error(`Shadertoy API: ${data.Error}`);
+  cache.set(id, data.Shader);
+  return data.Shader;
+}
+function mapWrap(wrap) {
+  if (wrap === "repeat") return "repeat";
+  return "clamp";
+}
+function mapFilter(filter) {
+  if (filter === "nearest") return "nearest";
+  if (filter === "linear") return "linear";
+  return "mipmap";
+}
+function resolveTextureSrc(src) {
+  if (src.startsWith("http")) return src;
+  return SHADERTOY_BASE + src;
+}
+function apiToConfig(shader) {
+  const passes = {};
+  const textures = {};
+  const commonPass = shader.renderpass.find((p) => p.type === "common");
+  const commonCode = commonPass ? commonPass.code + "\n" : "";
+  for (const rp of shader.renderpass) {
+    if (rp.type === "common" || rp.type === "sound") continue;
+    const passName = getPassName(rp);
+    if (!passName) continue;
+    const passConfig = {
+      code: commonCode + rp.code
+    };
+    for (const input of rp.inputs) {
+      const channelKey = `iChannel${input.channel}`;
+      if (channelKey === "code") continue;
+      if (input.ctype === "buffer") {
+        const refPass = OUTPUT_ID_TO_PASS[input.id];
+        if (refPass) {
+          ;
+          passConfig[channelKey] = refPass;
+        }
+      } else if (input.ctype === "texture" || input.ctype === "cubemap") {
+        const texOpts = {
+          src: resolveTextureSrc(input.src),
+          wrap: mapWrap(input.sampler.wrap),
+          filter: mapFilter(input.sampler.filter),
+          vflip: input.sampler.vflip === "true"
+        };
+        passConfig[channelKey] = texOpts;
+        const texKey = `iChannel${input.channel}`;
+        textures[texKey] = texOpts;
+      }
+    }
+    passes[passName] = passConfig;
+  }
+  const meta = {
+    name: shader.info.name,
+    author: shader.info.username,
+    description: shader.info.description,
+    tags: shader.info.tags
+  };
+  return { passes, textures, meta };
+}
+function getPassName(rp) {
+  if (rp.type === "image") return "Image";
+  if (rp.type === "buffer") {
+    for (const out of rp.outputs) {
+      const name = OUTPUT_ID_TO_PASS[out.id];
+      if (name) return name;
+    }
+    return null;
+  }
+  return null;
+}
+function isSinglePass(passes) {
+  const keys = Object.keys(passes);
+  return keys.length === 1 && keys[0] === "Image";
+}
+
 // src/renderer.ts
 var QUAD_VERTICES = new Float32Array([
   -1,
@@ -551,6 +643,8 @@ function useShadertoy({
   fragmentShader,
   passes: passesProp,
   textures: texturesProp,
+  id,
+  apiKey,
   paused = false,
   speed = 1,
   pixelRatio,
@@ -566,6 +660,8 @@ function useShadertoy({
   const speedRef = useRef(speed);
   const [isReady, setIsReady] = useState(false);
   const [error, setError] = useState(null);
+  const [meta, setMeta] = useState(null);
+  const [resolved, setResolved] = useState(id ? null : { passes: passesProp, textures: texturesProp, fragmentShader });
   const mouseState = useRef({
     x: 0,
     y: 0,
@@ -576,8 +672,43 @@ function useShadertoy({
   const sharedState = useRef({ time: 0, frame: 0 });
   pausedRef.current = paused;
   speedRef.current = speed;
-  const isMultipass = !!passesProp;
   useEffect(() => {
+    if (!id) return;
+    if (!apiKey) {
+      setError("apiKey is required when using id");
+      onError?.("apiKey is required when using id");
+      return;
+    }
+    let cancelled = false;
+    fetchShader(id, apiKey).then((shader) => {
+      if (cancelled) return;
+      const config = apiToConfig(shader);
+      setMeta(config.meta);
+      if (isSinglePass(config.passes)) {
+        const imagePass = config.passes.Image;
+        setResolved({
+          fragmentShader: imagePass.code,
+          textures: config.textures
+        });
+      } else {
+        setResolved({ passes: config.passes });
+      }
+    }).catch((err) => {
+      if (cancelled) return;
+      const msg = err instanceof Error ? err.message : "Failed to fetch shader";
+      setError(msg);
+      onError?.(msg);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [id, apiKey]);
+  const effectivePasses = resolved?.passes;
+  const effectiveTextures = resolved?.textures ?? texturesProp;
+  const effectiveShader = resolved?.fragmentShader ?? fragmentShader;
+  const isMultipass = !!effectivePasses;
+  useEffect(() => {
+    if (id && !resolved) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
     sharedState.current = { time: 0, frame: 0 };
@@ -594,9 +725,9 @@ function useShadertoy({
     }
     const externalTextures = [null, null, null, null];
     const texturePromises = [];
-    if (texturesProp) {
+    if (effectiveTextures) {
       for (let i = 0; i < 4; i++) {
-        const src = texturesProp[CHANNEL_KEYS2[i]];
+        const src = effectiveTextures[CHANNEL_KEYS2[i]];
         if (src != null) {
           const { state, promise } = createTexture(gl, src, i);
           externalTextures[i] = state;
@@ -614,7 +745,7 @@ function useShadertoy({
       onError?.(msg);
     };
     if (isMultipass) {
-      const passResult = createMultipassRenderer(gl, passesProp, externalTextures);
+      const passResult = createMultipassRenderer(gl, effectivePasses, externalTextures);
       if (typeof passResult === "string") {
         handleError(passResult);
         return;
@@ -650,7 +781,7 @@ function useShadertoy({
         setIsReady(false);
       };
     } else {
-      const shaderCode = fragmentShader || "void mainImage(out vec4 c, in vec2 f){ c = vec4(0); }";
+      const shaderCode = effectiveShader || "void mainImage(out vec4 c, in vec2 f){ c = vec4(0); }";
       const result = createRenderer(canvas, shaderCode);
       if (typeof result === "string") {
         handleError(result);
@@ -690,7 +821,7 @@ function useShadertoy({
         setIsReady(false);
       };
     }
-  }, [fragmentShader, passesProp, texturesProp, onError, onLoad]);
+  }, [effectiveShader, effectivePasses, effectiveTextures, resolved, onError, onLoad]);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -772,15 +903,18 @@ function useShadertoy({
   const resume = useCallback(() => {
     pausedRef.current = false;
   }, []);
-  return { canvasRef, isReady, error, pause, resume };
+  return { canvasRef, isReady, error, pause, resume, meta };
 }
 
 // src/Shadertoy.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function Shadertoy({
   fragmentShader,
   passes,
   textures,
+  id,
+  apiKey,
+  showLicense,
   style,
   className,
   paused,
@@ -790,10 +924,12 @@ function Shadertoy({
   onError,
   onLoad
 }) {
-  const { canvasRef } = useShadertoy({
+  const { canvasRef, meta } = useShadertoy({
     fragmentShader,
     passes,
     textures,
+    id,
+    apiKey,
     paused,
     speed,
     pixelRatio,
@@ -801,6 +937,35 @@ function Shadertoy({
     onError,
     onLoad
   });
+  const shouldShowLicense = showLicense ?? !!id;
+  const hasMeta = shouldShowLicense && meta;
+  if (hasMeta) {
+    return /* @__PURE__ */ jsxs("div", { style: { position: "relative", ...style }, className, children: [
+      /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          style: { width: "100%", height: "100%", display: "block" }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: {
+        position: "absolute",
+        bottom: 8,
+        right: 8,
+        background: "rgba(0,0,0,0.6)",
+        color: "#fff",
+        padding: "4px 10px",
+        borderRadius: 4,
+        fontSize: 12,
+        fontFamily: "system-ui, sans-serif",
+        pointerEvents: "none"
+      }, children: [
+        /* @__PURE__ */ jsx("strong", { children: meta.name }),
+        " by ",
+        meta.author
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -812,5 +977,7 @@ function Shadertoy({
 }
 export {
   Shadertoy,
+  apiToConfig,
+  fetchShader,
   useShadertoy
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-shadertoy",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Run Shadertoy GLSL shaders in React. Copy-paste and it works.",
   "author": "Wrennly (https://github.com/wrennly)",
   "license": "MIT",