@instantshader/react 0.3.0 → 0.4.1

package/README.md

@@ -1,9 +1,9 @@
 # @instantshader/react
 
 React bindings for [instantshader](https://www.npmjs.com/package/instantshader), a
-zero-dependency animated WebGL gradient engine. Drop a `<Flow>` or `<Beam>`
-component into any sized wrapper to mount a live, animated gradient. Built by
-[InstantGradient](https://instantgradient.com/shaders).
+zero-dependency animated WebGL gradient engine. Drop a `<Flow>`, `<Beam>` or
+`<Bloom>` component into any sized wrapper to mount a live, animated gradient. Built by
+[InstantGradient](https://instantgradient.com/app).
 
 ## Install
 
@@ -26,6 +26,32 @@ export function Background() {
 }
 ```
 
+## Shaders
+
+One component per shader, each a thin wrapper over 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` |
+
+```tsx
+import { Bloom } from "@instantshader/react";
+
+<Bloom
+  colors={["#ffd9e8", "#ffb300", "#ff8fc0", "#3d7bff", "#0a2e14"]}
+  // bloom has two independent motion modes: petals that breathe and lean,
+  // and colours that travel outward through a still pattern.
+  params={{ sway: 0.5, colorflow: 0.4 }}
+  style={{ width: "100%", height: "100%" }}
+/>;
+```
+
+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`).
+
 ## Seamless loops
 
 Pass `loopSeconds` to make the animation repeat exactly, with no visible seam

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from "react";
-import { ParamDef, ShaderDef, ShaderDef as ShaderDef$1, beam, flow } from "instantshader";
+import { ParamDef, ShaderDef, ShaderDef as ShaderDef$1, beam, bloom, flow } from "instantshader";
 
 //#region src/ShaderCanvas.d.ts
 interface ShaderCanvasProps {
@@ -53,5 +53,6 @@ declare function ShaderCanvas({
 //#region src/shaders.d.ts
 declare function Flow(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
 declare function Beam(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
+declare function Bloom(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
 //#endregion
-export { Beam, Flow, type ParamDef, ShaderCanvas, type ShaderCanvasProps, type ShaderDef, beam, flow };
+export { Beam, Bloom, Flow, type ParamDef, ShaderCanvas, type ShaderCanvasProps, type ShaderDef, beam, bloom, flow };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect, useMemo, useRef } from "react";
-import { beam, beam as beam$1, flow, flow as flow$1, mountGradient } from "instantshader";
+import { beam, beam as beam$1, bloom, bloom as bloom$1, flow, flow as flow$1, mountGradient } from "instantshader";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/ShaderCanvas.tsx
@@ -73,6 +73,12 @@ function Beam(props) {
 		...props
 	});
 }
+function Bloom(props) {
+	return /* @__PURE__ */ jsx(ShaderCanvas, {
+		shader: bloom$1,
+		...props
+	});
+}
 
 //#endregion
-export { Beam, Flow, ShaderCanvas, beam, flow };
+export { Beam, Bloom, Flow, ShaderCanvas, beam, bloom, flow };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instantshader/react",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "React bindings for InstantShader animated WebGL gradients.",
   "type": "module",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "url": "git+https://github.com/ugolbck/instantshader.git",
     "directory": "packages/react"
   },
-  "homepage": "https://instantgradient.com/shaders",
+  "homepage": "https://instantgradient.com/app",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -36,7 +36,7 @@
     "react"
   ],
   "dependencies": {
-    "instantshader": "0.3.0"
+    "instantshader": "0.4.1"
   },
   "peerDependencies": {
     "react": "^18 || ^19",