@instantshader/react 0.6.0 → 0.7.0

package/README.md

@@ -4,8 +4,9 @@
 
 React bindings for [instantshader](https://www.npmjs.com/package/instantshader), a
 zero-dependency animated WebGL gradient engine. Drop a `<Flow>`, `<Beam>`, `<Bloom>`, `<Halo>`, `<Strata>`, `<Dune>` or
-`<Whorl>` component into any sized wrapper to mount a live, animated gradient. Built by
-[InstantGradient](https://instantgradient.com/app).
+`<Whorl>` component into any sized wrapper to mount a live, animated gradient, and
+add dither, pixelate, halftone or ASCII effects over it or over your own image.
+Built by [InstantGradient](https://instantgradient.com/app).
 
 ## Install
 
@@ -41,6 +42,10 @@ One component per shader, each a thin wrapper over the same props:
 | `<Strata>` | Stacked cut-paper layers with soft shadows. | `scale`, `layers`, `warp`, `ridges`, `stretch`, `depth`, `blend`, `angle`, `grain` |
 | `<Dune>` | Overlapping crests, crisp on top and airbrushed below. | `layers`, `swell`, `waves`, `fade`, `soft`, `angle`, `grain` |
 | `<Whorl>` | A spiral of curved blades, positionable with `x` / `y`. | `blades`, `twist`, `depth`, `scale`, `wobble`, `x`, `y`, `grain` |
+| `<Silk>` | Satin folds with a highlight along the threads. | `scale`, `folds`, `depth`, `warp`, `sheen`, `light`, `grain` |
+| `<Nacre>` | Glassy liquid folds whose colour shifts on every slope. | `scale`, `flow`, `crease`, `depth`, `iridescence`, `light`, `grain` |
+| `<Burst>` | Thin rays out of one point, tunnel or star, straight or twisted. | `rays`, `sharp`, `glow`, `twist`, `x`, `y`, `grain` |
+| `<Glint>` | A shoal of spinning shards streaming along a current. | `size`, `density`, `bend`, `angle`, `speed`, `grain` |
 
 ```tsx
 import { Bloom } from "@instantshader/react";
@@ -56,7 +61,44 @@ import { Bloom } from "@instantshader/react";
 
 See the [`instantshader` README](https://www.npmjs.com/package/instantshader)
 for what each param does and for the shader defs themselves (re-exported from
-here as `flow`, `beam` and `bloom`).
+here as `flow`, `beam`, `bloom`, `halo`, `strata`, `dune`, `whorl`, `silk`,
+`nacre`, `burst` and `glint`).
+
+## Effects
+
+Every shader component takes an `effects` prop: a list of layers, bottom
+first, each an effect def with its params.
+
+```tsx
+import { Bloom, dither } from "@instantshader/react";
+
+<Bloom
+  colors={["#140f30", "#9c2168", "#eb6a4e", "#fcd87c"]}
+  effects={[{ effect: dither, params: { pattern: "blueNoise", colorMode: "palette", levels: 4 } }]}
+  style={{ width: "100%", height: "100%" }}
+/>;
+```
+
+`<ShaderStack>` takes a `source` instead of a fixed shader, which is how you
+put effects over an image. Any `<img>`, `<canvas>` or `<video>` element works
+as `media`:
+
+```tsx
+import { ShaderStack, halftone } from "@instantshader/react";
+
+<ShaderStack
+  source={{ kind: "media", media: img, fit: "cover" }}
+  colors={["#111111", "#f4f1ea"]}
+  effects={[{ effect: halftone, params: { size: 20, angle: 30 } }]}
+  style={{ width: "100%", height: "100%" }}
+/>;
+```
+
+Changing `effects` or their params updates the canvas in place. A new
+`source`, `seed`, `background` or `fontFamily` remounts it. The four effect
+defs (`pixelate`, `dither`, `halftone`, `ascii`) are re-exported from here,
+and the [repository README](https://github.com/ugolbck/instantshader#effects)
+lists every param with its range.
 
 ## Seamless loops
 
@@ -67,7 +109,7 @@ at the wrap:
 <Flow colors={colors} loopSeconds={30} style={{ width: "100%", height: "100%" }} />
 ```
 
-15–60s is the comfortable range, and the period is measured in animation
-seconds (so it interacts with `speed`). See the
+15 to 60s is the comfortable range, and the period is measured in animation
+seconds, so it interacts with `speed`. See the
 [`instantshader` README](https://www.npmjs.com/package/instantshader) for the
 full details.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from "react";
-import { EffectDef, EffectLayer, EffectLayer as EffectLayer$1, EffectParamDef, ParamDef, ParamValue, ShaderDef, ShaderDef as ShaderDef$1, Source, Source as Source$1, ascii, beam, bloom, dither, dune, flow, halftone, halo, pixelate, strata, whorl } from "instantshader";
+import { EffectDef, EffectLayer, EffectLayer as EffectLayer$1, EffectParamDef, ParamDef, ParamValue, ShaderDef, ShaderDef as ShaderDef$1, Source, Source as Source$1, ascii, beam, bloom, burst, dither, dune, flow, glint, halftone, halo, nacre, pixelate, silk, strata, whorl } from "instantshader";
 
 //#region src/ShaderStack.d.ts
 interface ShaderStackProps {
@@ -84,5 +84,9 @@ declare function Halo(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
 declare function Strata(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
 declare function Dune(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
 declare function Whorl(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
+declare function Silk(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
+declare function Nacre(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
+declare function Burst(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
+declare function Glint(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
 //#endregion
-export { Beam, Bloom, Dune, type EffectDef, type EffectLayer, type EffectParamDef, Flow, Halo, type ParamDef, type ParamValue, ShaderCanvas, type ShaderCanvasProps, type ShaderDef, ShaderStack, type ShaderStackProps, type Source, Strata, Whorl, ascii, beam, bloom, dither, dune, flow, halftone, halo, pixelate, strata, whorl };
+export { Beam, Bloom, Burst, Dune, type EffectDef, type EffectLayer, type EffectParamDef, Flow, Glint, Halo, Nacre, type ParamDef, type ParamValue, ShaderCanvas, type ShaderCanvasProps, type ShaderDef, ShaderStack, type ShaderStackProps, Silk, type Source, Strata, Whorl, ascii, beam, bloom, burst, dither, dune, flow, glint, halftone, halo, nacre, pixelate, silk, strata, whorl };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect, useMemo, useRef } from "react";
-import { ascii, beam, beam as beam$1, bloom, bloom as bloom$1, dither, dune, dune as dune$1, flow, flow as flow$1, halftone, halo, halo as halo$1, mountStack, pixelate, strata, strata as strata$1, whorl, whorl as whorl$1 } from "instantshader";
+import { ascii, beam, beam as beam$1, bloom, bloom as bloom$1, burst, burst as burst$1, dither, dune, dune as dune$1, flow, flow as flow$1, glint, glint as glint$1, halftone, halo, halo as halo$1, mountStack, nacre, nacre as nacre$1, pixelate, silk, silk as silk$1, strata, strata as strata$1, whorl, whorl as whorl$1 } from "instantshader";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/ShaderStack.tsx
@@ -139,6 +139,30 @@ function Whorl(props) {
 		...props
 	});
 }
+function Silk(props) {
+	return /* @__PURE__ */ jsx(ShaderCanvas, {
+		shader: silk$1,
+		...props
+	});
+}
+function Nacre(props) {
+	return /* @__PURE__ */ jsx(ShaderCanvas, {
+		shader: nacre$1,
+		...props
+	});
+}
+function Burst(props) {
+	return /* @__PURE__ */ jsx(ShaderCanvas, {
+		shader: burst$1,
+		...props
+	});
+}
+function Glint(props) {
+	return /* @__PURE__ */ jsx(ShaderCanvas, {
+		shader: glint$1,
+		...props
+	});
+}
 
 //#endregion
-export { Beam, Bloom, Dune, Flow, Halo, ShaderCanvas, ShaderStack, Strata, Whorl, ascii, beam, bloom, dither, dune, flow, halftone, halo, pixelate, strata, whorl };
+export { Beam, Bloom, Burst, Dune, Flow, Glint, Halo, Nacre, ShaderCanvas, ShaderStack, Silk, Strata, Whorl, ascii, beam, bloom, burst, dither, dune, flow, glint, halftone, halo, nacre, pixelate, silk, strata, whorl };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@instantshader/react",
-  "version": "0.6.0",
-  "description": "React bindings for InstantShader animated WebGL gradients.",
+  "version": "0.7.0",
+  "description": "React components for InstantShader: animated WebGL gradients and image effects.",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -36,7 +36,7 @@
     "react"
   ],
   "dependencies": {
-    "instantshader": "0.6.0"
+    "instantshader": "0.7.0"
   },
   "peerDependencies": {
     "react": "^18 || ^19",