@instantshader/react 0.7.0 → 0.8.1

package/README.md

@@ -2,11 +2,11 @@
 
 # @instantshader/react
 
-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, and
-add dither, pixelate, halftone or ASCII effects over it or over your own image.
-Built by [InstantGradient](https://instantgradient.com/app).
+React components for [instantshader](https://www.npmjs.com/package/instantshader),
+animated WebGL gradients with zero dependencies. Put a shader component in any
+sized element, and add dither, pixelate, halftone, ASCII or tint effects over
+it or over your own image. Built by
+[InstantGradient](https://instantgradient.com/app).
 
 ## Install
 
@@ -31,16 +31,16 @@ export function Background() {
 
 ## Shaders
 
-One component per shader, each a thin wrapper over the same props:
+One component per shader, all with the same props:
 
 | Component | Look | Params |
 | --- | --- | --- |
-| `<Flow>` | Isotropic swirling currents with defined luminous edges and calm negative space. | `scale`, `curl`, `drift`, `openness`, `grain` |
-| `<Beam>` | One wide beam of soft light crossing a near-black frame, the palette walking its length. | `scale`, `width`, `glow`, `angle`, `grain` |
-| `<Bloom>` | A fan of huge soft petals radiating from the bottom edge, palette as concentric scalloped bands. | `scale`, `petals`, `pinch`, `bend`, `sway`, `colorflow`, `grain` |
-| `<Halo>` | An eclipse disc with a bright limb and flowing corona; `x` / `y` place it, and the default is a glowing horizon arc. | `radius`, `x`, `y`, `glow`, `crescent`, `flares`, `grain` |
+| `<Flow>` | Swirling fluid currents with bright edges and calm open space. | `scale`, `curl`, `drift`, `openness`, `grain` |
+| `<Beam>` | One wide beam of soft light across a near-black frame, the palette running along it. | `scale`, `width`, `glow`, `angle`, `grain` |
+| `<Bloom>` | A fan of huge soft petals rising from the bottom edge. | `scale`, `petals`, `pinch`, `bend`, `sway`, `colorflow`, `grain` |
+| `<Halo>` | An eclipse: a dark disc with a bright rim and a corona. `x` / `y` place it; the default is a glowing horizon. | `radius`, `x`, `y`, `glow`, `crescent`, `flares`, `grain` |
 | `<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` |
+| `<Dune>` | Overlapping crests, crisp on top and fading out 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` |
@@ -67,14 +67,14 @@ here as `flow`, `beam`, `bloom`, `halo`, `strata`, `dune`, `whorl`, `silk`,
 ## Effects
 
 Every shader component takes an `effects` prop: a list of layers, bottom
-first, each an effect def with its params.
+first. Each layer works on everything below it, so effects stack.
 
 ```tsx
 import { Bloom, dither } from "@instantshader/react";
 
 <Bloom
   colors={["#140f30", "#9c2168", "#eb6a4e", "#fcd87c"]}
-  effects={[{ effect: dither, params: { pattern: "blueNoise", colorMode: "palette", levels: 4 } }]}
+  effects={[{ effect: dither, params: { pattern: "blueNoise", colorMode: "palette", levels: 4, blend: "normal", opacity: 1 } }]}
   style={{ width: "100%", height: "100%" }}
 />;
 ```
@@ -84,19 +84,27 @@ put effects over an image. Any `<img>`, `<canvas>` or `<video>` element works
 as `media`:
 
 ```tsx
-import { ShaderStack, halftone } from "@instantshader/react";
+import { ShaderStack, halftone, tint } from "@instantshader/react";
 
 <ShaderStack
   source={{ kind: "media", media: img, fit: "cover" }}
   colors={["#111111", "#f4f1ea"]}
-  effects={[{ effect: halftone, params: { size: 20, angle: 30 } }]}
+  effects={[
+    { effect: halftone, params: { shape: "dot", size: 16 } },
+    { effect: tint, params: { mode: "palette", amount: 0.6 } },
+  ]}
   style={{ width: "100%", height: "100%" }}
 />;
 ```
 
+Halftone and ASCII draw shapes or characters over the picture; set `ground:
+"paper"` to draw them on a flat colour instead. `blend` and `opacity` set how
+any effect mixes with what is below it. A layer with `enabled: false` is
+skipped.
+
 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,
+`source`, `seed`, `background` or `fontFamily` remounts it. The five effect
+defs (`pixelate`, `dither`, `halftone`, `ascii`, `tint`) are re-exported from here,
 and the [repository README](https://github.com/ugolbck/instantshader#effects)
 lists every param with its range.
 

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, burst, dither, dune, flow, glint, halftone, halo, nacre, pixelate, silk, 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, tint, whorl } from "instantshader";
 
 //#region src/ShaderStack.d.ts
 interface ShaderStackProps {
@@ -89,4 +89,4 @@ 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, 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 };
+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, tint, 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, 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 { 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, tint, whorl, whorl as whorl$1 } from "instantshader";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/ShaderStack.tsx
@@ -165,4 +165,4 @@ function Glint(props) {
 }
 
 //#endregion
-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 };
+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, tint, whorl };

package/package.json

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