@instantshader/react 0.4.1 → 0.5.0

package/README.md

@@ -1,8 +1,10 @@
+![InstantShader](https://raw.githubusercontent.com/ugolbck/instantshader/main/.github/assets/banner.jpg)
+
 # @instantshader/react
 
 React bindings for [instantshader](https://www.npmjs.com/package/instantshader), a
-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
+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).
 
 ## Install
@@ -35,6 +37,10 @@ One component per shader, each a thin wrapper over the same props:
 | `<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` |
+| `<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` |
 
 ```tsx
 import { Bloom } from "@instantshader/react";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from "react";
-import { ParamDef, ShaderDef, ShaderDef as ShaderDef$1, beam, bloom, flow } from "instantshader";
+import { ParamDef, ShaderDef, ShaderDef as ShaderDef$1, beam, bloom, dune, flow, halo, strata, whorl } from "instantshader";
 
 //#region src/ShaderCanvas.d.ts
 interface ShaderCanvasProps {
@@ -54,5 +54,9 @@ declare function ShaderCanvas({
 declare function Flow(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
 declare function Beam(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
 declare function Bloom(props: Omit<ShaderCanvasProps, "shader">): ReactElement;
+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;
 //#endregion
-export { Beam, Bloom, Flow, type ParamDef, ShaderCanvas, type ShaderCanvasProps, type ShaderDef, beam, bloom, flow };
+export { Beam, Bloom, Dune, Flow, Halo, type ParamDef, ShaderCanvas, type ShaderCanvasProps, type ShaderDef, Strata, Whorl, beam, bloom, dune, flow, halo, strata, whorl };

package/dist/index.js

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

package/package.json

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