@instantshader/react 0.1.0 → 0.3.0

package/README.md

@@ -25,3 +25,17 @@ export function Background() {
   );
 }
 ```
+
+## Seamless loops
+
+Pass `loopSeconds` to make the animation repeat exactly, with no visible seam
+at the wrap:
+
+```tsx
+<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
+[`instantshader` README](https://www.npmjs.com/package/instantshader) for the
+full details.

package/dist/index.d.ts

@@ -20,6 +20,13 @@ interface ShaderCanvasProps {
   */
   speed?: number;
   seed?: number;
+  /**
+  * Makes the animation repeat seamlessly every `loopSeconds` animation
+  * seconds. Unlike `params` and `speed`, setting this back to `undefined`
+  * DOES take effect — it turns looping off — because "no loop" is a real
+  * state the underlying handle can be put into.
+  */
+  loopSeconds?: number;
   paused?: boolean;
   className?: string;
   style?: CSSProperties;
@@ -37,6 +44,7 @@ declare function ShaderCanvas({
   params,
   speed,
   seed,
+  loopSeconds,
   paused,
   className,
   style

package/dist/index.js

@@ -11,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 * or a sized parent) — this component does not impose one beyond
 * `position: relative`.
 */
-function ShaderCanvas({ shader, colors, params, speed, seed, paused, className, style }) {
+function ShaderCanvas({ shader, colors, params, speed, seed, loopSeconds, paused, className, style }) {
 	const containerRef = useRef(null);
 	const handleRef = useRef(null);
 	const p = useMemo(() => params, [params ? Object.entries(params).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([k, v]) => `${k}:${v}`).join(",") : ""]);
@@ -23,7 +23,8 @@ function ShaderCanvas({ shader, colors, params, speed, seed, paused, className,
 			colors,
 			params: p,
 			speed,
-			seed
+			seed,
+			loopSeconds
 		});
 		handleRef.current = handle;
 		if (paused) handle.pause();
@@ -41,6 +42,9 @@ function ShaderCanvas({ shader, colors, params, speed, seed, paused, className,
 	useEffect(() => {
 		if (speed !== void 0) handleRef.current?.setSpeed(speed);
 	}, [speed]);
+	useEffect(() => {
+		handleRef.current?.setLoopSeconds(loopSeconds);
+	}, [loopSeconds]);
 	useEffect(() => {
 		if (paused) handleRef.current?.pause();
 		else handleRef.current?.resume();

package/package.json

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