@instantshader/react 0.6.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +42 -5
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -4,8 +4,9 @@
4
4
 
5
5
  React bindings for [instantshader](https://www.npmjs.com/package/instantshader), a
6
6
  zero-dependency animated WebGL gradient engine. Drop a `<Flow>`, `<Beam>`, `<Bloom>`, `<Halo>`, `<Strata>`, `<Dune>` or
7
- `<Whorl>` component into any sized wrapper to mount a live, animated gradient. Built by
8
- [InstantGradient](https://instantgradient.com/app).
7
+ `<Whorl>` component into any sized wrapper to mount a live, animated gradient, and
8
+ add dither, pixelate, halftone or ASCII effects over it or over your own image.
9
+ Built by [InstantGradient](https://instantgradient.com/app).
9
10
 
10
11
  ## Install
11
12
 
@@ -56,7 +57,43 @@ import { Bloom } from "@instantshader/react";
56
57
 
57
58
  See the [`instantshader` README](https://www.npmjs.com/package/instantshader)
58
59
  for what each param does and for the shader defs themselves (re-exported from
59
- here as `flow`, `beam` and `bloom`).
60
+ here as `flow`, `beam`, `bloom`, `halo`, `strata`, `dune` and `whorl`).
61
+
62
+ ## Effects
63
+
64
+ Every shader component takes an `effects` prop: a list of layers, bottom
65
+ first, each an effect def with its params.
66
+
67
+ ```tsx
68
+ import { Bloom, dither } from "@instantshader/react";
69
+
70
+ <Bloom
71
+ colors={["#140f30", "#9c2168", "#eb6a4e", "#fcd87c"]}
72
+ effects={[{ effect: dither, params: { pattern: "blueNoise", colorMode: "palette", levels: 4 } }]}
73
+ style={{ width: "100%", height: "100%" }}
74
+ />;
75
+ ```
76
+
77
+ `<ShaderStack>` takes a `source` instead of a fixed shader, which is how you
78
+ put effects over an image. Any `<img>`, `<canvas>` or `<video>` element works
79
+ as `media`:
80
+
81
+ ```tsx
82
+ import { ShaderStack, halftone } from "@instantshader/react";
83
+
84
+ <ShaderStack
85
+ source={{ kind: "media", media: img, fit: "cover" }}
86
+ colors={["#111111", "#f4f1ea"]}
87
+ effects={[{ effect: halftone, params: { size: 20, angle: 30 } }]}
88
+ style={{ width: "100%", height: "100%" }}
89
+ />;
90
+ ```
91
+
92
+ Changing `effects` or their params updates the canvas in place. A new
93
+ `source`, `seed`, `background` or `fontFamily` remounts it. The four effect
94
+ defs (`pixelate`, `dither`, `halftone`, `ascii`) are re-exported from here,
95
+ and the [repository README](https://github.com/ugolbck/instantshader#effects)
96
+ lists every param with its range.
60
97
 
61
98
  ## Seamless loops
62
99
 
@@ -67,7 +104,7 @@ at the wrap:
67
104
  <Flow colors={colors} loopSeconds={30} style={{ width: "100%", height: "100%" }} />
68
105
  ```
69
106
 
70
- 15–60s is the comfortable range, and the period is measured in animation
71
- seconds (so it interacts with `speed`). See the
107
+ 15 to 60s is the comfortable range, and the period is measured in animation
108
+ seconds, so it interacts with `speed`. See the
72
109
  [`instantshader` README](https://www.npmjs.com/package/instantshader) for the
73
110
  full details.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@instantshader/react",
3
- "version": "0.6.0",
4
- "description": "React bindings for InstantShader animated WebGL gradients.",
3
+ "version": "0.6.1",
4
+ "description": "React components for InstantShader: animated WebGL gradients and image effects.",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "repository": {
@@ -36,7 +36,7 @@
36
36
  "react"
37
37
  ],
38
38
  "dependencies": {
39
- "instantshader": "0.6.0"
39
+ "instantshader": "0.6.1"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "react": "^18 || ^19",