react-native-effects 0.1.0 → 0.2.0

package/README.md

@@ -4,11 +4,11 @@ https://github.com/user-attachments/assets/5141208a-655a-4de8-94fb-3e66351bf36f
 
 > **Experimental** — APIs may change without notice. Relies on `react-native-worklets` bundle mode, which is not enabled by default yet.
 
-WebGPU-powered effects running on **background thread** in React Native. 
+WebGPU-powered effects running on **background thread** in React Native.
 
 ## Features
 
-- **WebGPU rendering** via `react-native-wgpu`
+- **WebGPU rendering** via `react-native-webgpu`
 - **Off-thread rendering** using `react-native-worklets` bundle mode — the GPU render loop runs on a separate JS runtime, keeping the main thread free
 - **Drop-in components** — use like any React Native `View`
 - **Customizable** — control colors, speed, intensity, and effect-specific parameters
@@ -44,16 +44,55 @@ import { ShaderView } from 'react-native-effects';
 />;
 ```
 
-| Prop             | Type           | Default | Description                                                    |
-| ---------------- | -------------- | ------- | -------------------------------------------------------------- |
-| `fragmentShader` | `string`       | —       | WGSL fragment shader source                                    |
-| `colors`         | `ColorInput[]` | `[]`    | Up to 2 colors mapped to `u.color0` and `u.color1`             |
-| `params`         | `number[]`     | `[]`    | Up to 8 floats mapped to `u.params0.xyzw` and `u.params1.xyzw` |
-| `speed`          | `number`       | `1.0`   | Animation speed multiplier                                     |
-| `isStatic`       | `boolean`      | `false` | Render once then stop the animation loop                       |
+| Prop                   | Type                   | Default | Description                                                                                             |
+| ---------------------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
+| `fragmentShader`       | `string`               | —       | WGSL fragment shader source                                                                             |
+| `colors`               | `ColorInput[]`         | `[]`    | Up to 2 colors mapped to `u.color0` and `u.color1`                                                      |
+| `params`               | `number[]`             | `[]`    | Up to 8 floats mapped to `u.params0.xyzw` and `u.params1.xyzw`                                          |
+| `speed`                | `number`               | `1.0`   | Animation speed multiplier                                                                              |
+| `isStatic`             | `boolean`              | `false` | Render once then stop the animation loop                                                                |
+| `transparent`          | `boolean`              | `false` | Clear the canvas to alpha `0` for an overlay-friendly transparent background                            |
+| `paramsSynchronizable` | `ParamsSynchronizable` | —       | Live 4-float input written into the dedicated `u.live` slot every frame (touch/scroll/audio). See below |
 
 All built-in effects (Silk, Aurora, Campfire, etc.) are thin wrappers around `ShaderView`. You can use it directly to create your own custom effects — see the [Custom Effects Guide](CUSTOM_EFFECTS.md) for a full walkthrough and a ready-to-use AI prompt.
 
+### Live input with `paramsSynchronizable`
+
+Static `params` are great for values that change on the JS thread occasionally, but the render loop runs off-thread — so feeding it fast, per-frame input (a finger drag, scroll progress, audio level) through React props would be laggy. `paramsSynchronizable` is the bridge: a 4-float [Synchronizable](https://docs.swmansion.com/react-native-worklets/docs/synchronization/synchronizable) that the off-thread render loop reads every frame and writes into its own dedicated `u.live` slot — so it never collides with the static `params` (you keep all 8 _and_ get a live channel).
+
+Create one with the `useParamsSynchronizable` hook and update it from your gesture or scroll handlers:
+
+```tsx
+import { ShaderView, useParamsSynchronizable } from 'react-native-effects';
+
+function TouchReactive() {
+  // initial resting value, read once: (x, y, active, extra)
+  const { paramsSynchronizable, setParamsSynchronizable } =
+    useParamsSynchronizable([0.5, 0.5, 0, 0]);
+
+  return (
+    <ShaderView
+      fragmentShader={myShader}
+      paramsSynchronizable={paramsSynchronizable}
+      style={{ width: '100%', height: 300 }}
+      onTouchMove={(e) => {
+        const { locationX, locationY } = e.nativeEvent;
+        setParamsSynchronizable(locationX, locationY, 1, 0);
+      }}
+    />
+  );
+}
+```
+
+Inside the shader, declare the `live` field on the `Uniforms` struct (right after `params1`) and read the live values from `u.live`:
+
+```wgsl
+let pointer = u.live.xy;   // (x, y) you wrote
+let active  = u.live.z;    // 1 while touching, 0 otherwise
+```
+
+`setParamsSynchronizable(x, y, active, extra)` runs on the JS thread; the four floats are by convention `(x, y, active, extra)` for pointer input or `(progress, …)` for scroll-driven effects, but the meaning is entirely up to your shader. For a ready-made pan-gesture variant, use [`ShaderViewWithPanGesture`](src/components/ShaderViewWithPanGesture/index.tsx).
+
 ## Installation
 
 ```sh
@@ -63,9 +102,25 @@ npm install react-native-effects
 ### Peer dependencies
 
 ```sh
-npm install react-native-wgpu react-native-worklets react-native-reanimated react-native-gesture-handler
+npm install react-native-webgpu react-native-worklets react-native-reanimated react-native-gesture-handler
+```
+
+### Android requirements
+
+`react-native-webgpu` uses `AHardwareBuffer` APIs that require **Android API 26+**, so your app must set `minSdkVersion` to at least `26` (the default in many templates is `24`). In an Expo project, use [`expo-build-properties`](https://docs.expo.dev/versions/latest/sdk/build-properties/):
+
+```json
+{
+  "expo": {
+    "plugins": [
+      ["expo-build-properties", { "android": { "minSdkVersion": 26 } }]
+    ]
+  }
+}
 ```
 
+In a bare React Native project, set `minSdkVersion = 26` in `android/build.gradle`.
+
 ### Bundle mode setup
 
 This library relies on `react-native-worklets` [Bundle Mode](https://docs.swmansion.com/react-native-worklets/docs/bundleMode). You need to configure Metro, Babel, and package.json in your app.
@@ -101,7 +156,9 @@ module.exports = {
 
 ```js
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
-const { getBundleModeMetroConfig } = require('react-native-worklets/bundleMode');
+const {
+  getBundleModeMetroConfig,
+} = require('react-native-worklets/bundleMode');
 
 let config = getDefaultConfig(__dirname);
 config = getBundleModeMetroConfig(config);
@@ -138,7 +195,10 @@ module.exports = function (api) {
   return {
     presets: ['babel-preset-expo'],
     plugins: [
-      ['react-native-worklets/plugin', { bundleMode: true, strictGlobal: true }],
+      [
+        'react-native-worklets/plugin',
+        { bundleMode: true, strictGlobal: true },
+      ],
     ],
   };
 };
@@ -148,7 +208,9 @@ module.exports = function (api) {
 
 ```js
 const { getDefaultConfig } = require('expo/metro-config');
-const { getBundleModeMetroConfig } = require('react-native-worklets/bundleMode');
+const {
+  getBundleModeMetroConfig,
+} = require('react-native-worklets/bundleMode');
 
 /** @type {import('expo/metro-config').MetroConfig} */
 let config = getDefaultConfig(__dirname);

package/lib/module/components/ShaderView/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { PixelRatio, StyleSheet } from 'react-native';
-import { Canvas } from 'react-native-wgpu';
+import { Canvas } from 'react-native-webgpu';
 import { useEffect, useRef } from 'react';
 import { createSynchronizable, scheduleOnRuntime } from 'react-native-worklets';
 import { colorToVec4 } from "../../utils/colors.js";
@@ -21,6 +21,8 @@ export default function ShaderView({
   speed = 1.0,
   params = [],
   isStatic = false,
+  transparent = false,
+  paramsSynchronizable,
   style,
   ...viewProps
 }) {
@@ -87,6 +89,12 @@ export default function ShaderView({
       presentationFormat
     } = resources;
     const dpr = PixelRatio.get();
+
+    // Per-run cancellation token. On Fast Refresh / dep change / unmount, React
+    // runs this effect's cleanup, which flips the flag and stops *this* loop —
+    // otherwise the old worklet RAF loop keeps running forever alongside the new
+    // one, stacking a duplicate render loop on every Metro reload.
+    const cancelled = createSynchronizable(new Float64Array(1));
     scheduleOnRuntime(runtime, () => {
       'worklet';
 
@@ -136,6 +144,12 @@ export default function ShaderView({
           return;
         }
 
+        // This loop was superseded (Fast Refresh / unmount) — bail without
+        // scheduling another frame so it can be garbage-collected.
+        if (cancelled.getDirty()[0] === 1) {
+          return;
+        }
+
         // Compute dt
         const dt = lastTimestamp === 0 ? 0 : (timestamp - lastTimestamp) / 1000;
         lastTimestamp = timestamp;
@@ -150,7 +164,7 @@ export default function ShaderView({
         const height = canvas.height || 1;
         const aspect = width / height;
 
-        // Fill uniform data (6 × vec4 = 24 floats)
+        // Fill uniform data (7 × vec4 = 28 floats)
         // resolution: vec4<f32>
         uniformData[0] = width;
         uniformData[1] = height;
@@ -181,18 +195,29 @@ export default function ShaderView({
         uniformData[18] = props[IDX_PARAMS + 2];
         uniformData[19] = props[IDX_PARAMS + 3];
 
-        // params1: vec4<f32>
+        // params1: vec4<f32> — static params[4..7]
         uniformData[20] = props[IDX_PARAMS + 4];
         uniformData[21] = props[IDX_PARAMS + 5];
         uniformData[22] = props[IDX_PARAMS + 6];
         uniformData[23] = props[IDX_PARAMS + 7];
+
+        // live: vec4<f32> — off-thread input (touch/scroll/audio) from
+        // paramsSynchronizable, written into its own slot so it never collides
+        // with the static params. Stays (0,0,0,0) when no channel is attached.
+        if (paramsSynchronizable) {
+          const live = paramsSynchronizable.getDirty();
+          uniformData[24] = live[0];
+          uniformData[25] = live[1];
+          uniformData[26] = live[2];
+          uniformData[27] = live[3];
+        }
         device.queue.writeBuffer(uniformBuffer, 0, uniformData);
         const commandEncoder = device.createCommandEncoder();
         const textureView = context.getCurrentTexture().createView();
         const passEncoder = commandEncoder.beginRenderPass({
           colorAttachments: [{
             view: textureView,
-            clearValue: [0, 0, 0, 1],
+            clearValue: transparent ? [0, 0, 0, 0] : [0, 0, 0, 1],
             loadOp: 'clear',
             storeOp: 'store'
           }]
@@ -209,7 +234,10 @@ export default function ShaderView({
       }
       requestAnimationFrame(render);
     });
-  }, [resources, runtime, propsSync, fragmentShader, isStatic]);
+    return () => {
+      cancelled.setBlocking(() => Float64Array.of(1));
+    };
+  }, [resources, runtime, propsSync, paramsSynchronizable, fragmentShader, isStatic, transparent]);
   return /*#__PURE__*/_jsx(Canvas, {
     ref: canvasRef,
     style: [styles.canvas, style],

package/lib/module/components/ShaderView/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["PixelRatio","StyleSheet","Canvas","useEffect","useRef","createSynchronizable","scheduleOnRuntime","colorToVec4","useWGPUSetup","TRIANGLE_VERTEX_SHADER","UNIFORM_BUFFER_SIZE","UNIFORM_FLOAT_COUNT","jsx","_jsx","SYNC_SIZE","IDX_SPEED","IDX_PARAMS","IDX_ALIVE","ShaderView","fragmentShader","colors","speed","params","isStatic","style","viewProps","canvasRef","runtime","resources","propsSync","Float64Array","current","data","undefined","c0","r","g","b","a","c1","i","setBlocking","prev","device","context","presentationFormat","dpr","get","pipeline","createRenderPipeline","layout","vertex","module","createShaderModule","code","entryPoint","fragment","targets","format","primitive","topology","uniformBuffer","createBuffer","size","usage","GPUBufferUsage","UNIFORM","COPY_DST","bindGroup","createBindGroup","getBindGroupLayout","entries","binding","resource","buffer","uniformData","Float32Array","accumulatedTime","lastTimestamp","render","timestamp","props","getDirty","dt","currentSpeed","canvas","width","height","aspect","queue","writeBuffer","commandEncoder","createCommandEncoder","textureView","getCurrentTexture","createView","passEncoder","beginRenderPass","colorAttachments","view","clearValue","loadOp","storeOp","setPipeline","setBindGroup","draw","end","submit","finish","present","requestAnimationFrame","ref","styles","create","flex"],"sourceRoot":"../../../../src","sources":["components/ShaderView/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["PixelRatio","StyleSheet","Canvas","useEffect","useRef","createSynchronizable","scheduleOnRuntime","colorToVec4","useWGPUSetup","TRIANGLE_VERTEX_SHADER","UNIFORM_BUFFER_SIZE","UNIFORM_FLOAT_COUNT","jsx","_jsx","SYNC_SIZE","IDX_SPEED","IDX_PARAMS","IDX_ALIVE","ShaderView","fragmentShader","colors","speed","params","isStatic","transparent","paramsSynchronizable","style","viewProps","canvasRef","runtime","resources","propsSync","Float64Array","current","data","undefined","c0","r","g","b","a","c1","i","setBlocking","prev","device","context","presentationFormat","dpr","get","cancelled","pipeline","createRenderPipeline","layout","vertex","module","createShaderModule","code","entryPoint","fragment","targets","format","primitive","topology","uniformBuffer","createBuffer","size","usage","GPUBufferUsage","UNIFORM","COPY_DST","bindGroup","createBindGroup","getBindGroupLayout","entries","binding","resource","buffer","uniformData","Float32Array","accumulatedTime","lastTimestamp","render","timestamp","props","getDirty","dt","currentSpeed","canvas","width","height","aspect","live","queue","writeBuffer","commandEncoder","createCommandEncoder","textureView","getCurrentTexture","createView","passEncoder","beginRenderPass","colorAttachments","view","clearValue","loadOp","storeOp","setPipeline","setBindGroup","draw","end","submit","finish","present","requestAnimationFrame","of","ref","styles","create","flex"],"sourceRoot":"../../../../src","sources":["components/ShaderView/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ShaderViewWithPanGesture/index.js

@@ -0,0 +1,196 @@
+"use strict";
+
+import { useCallback, useRef } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { createSynchronizable } from 'react-native-worklets';
+import ShaderView from "../ShaderView/index.js";
+import { useParamsSynchronizable } from "../../hooks/useParamsSynchronizable.js";
+
+/**
+ * A {@link ShaderView} that feeds touch input into the shader's `u.live`:
+ *
+ *   - `live.x` → pointer X, normalized 0..1 (left → right)
+ *   - `live.y` → pointer Y, normalized 0..1 (bottom → top, matching UV space)
+ *   - `live.z` → 1.0 while touching, 0.0 when released
+ *   - `live.w` → 0.0 (reserved)
+ *
+ * Dragging moves the pointer **relatively** — it pushes from where the pointer
+ * already is rather than jumping under the finger — and a fling lets it glide to
+ * a stop. The position is **remembered**: it stays wherever it ended and is
+ * never reset; only the "touched" flag (`live.z`) toggles on release. A
+ * shader can read `live.xy` as a stable resting position and use `live.z`
+ * purely for touch-driven emphasis, so the effect never snaps back.
+ *
+ * The resting value before the first touch is `[0, 0, 0, 0]` by default; pass
+ * `initialParamsSynchronizable` to seed it — e.g. `[0.5, 0.5, 0, 0]` to start a
+ * pointer at screen center.
+ *
+ * The drag runs as a **worklet on the UI thread** and writes the synchronizable
+ * directly, so pointer updates never hop to the JS thread — matching the rest of
+ * the library, which renders off the JS thread. The render runtime reads the
+ * same synchronizable each frame.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ShaderViewWithPanGesture({
+  style,
+  initialParamsSynchronizable = [0, 0, 0, 0],
+  ...props
+}) {
+  const {
+    paramsSynchronizable
+  } = useParamsSynchronizable(initialParamsSynchronizable);
+
+  // View size, read inside the gesture worklets to normalize pointer coords.
+  const sizeRef = useRef(null);
+  if (sizeRef.current === null) {
+    sizeRef.current = createSynchronizable(Float64Array.of(1, 1));
+  }
+  const sizeSynchronizable = sizeRef.current;
+
+  // Generation of the current post-release glide; bumped to cancel an old one.
+  const momentumRef = useRef(null);
+  if (momentumRef.current === null) {
+    momentumRef.current = createSynchronizable(Float64Array.of(0));
+  }
+  const momentumSynchronizable = momentumRef.current;
+
+  // Pointer position when the current drag began — the pan moves the pointer
+  // relative to this, so a drag pushes from where it was rather than jumping.
+  const panStartRef = useRef(null);
+  if (panStartRef.current === null) {
+    panStartRef.current = createSynchronizable(Float64Array.of(0, 0));
+  }
+  const panStartSynchronizable = panStartRef.current;
+  const onLayout = useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    sizeSynchronizable.setBlocking(() => Float64Array.of(width || 1, height || 1));
+  }, [sizeSynchronizable]);
+
+  // Worklet: runs on the UI thread and writes the normalized pointer straight
+  // into the synchronizable the render runtime reads, so a pointer move never
+  // touches the JS thread.
+  const writePointer = (nx, ny, active) => {
+    'worklet';
+
+    const x = Math.min(1, Math.max(0, nx));
+    const y = Math.min(1, Math.max(0, ny));
+    paramsSynchronizable.setBlocking(() => Float64Array.of(x, y, active, 0));
+  };
+  const stopMomentum = () => {
+    'worklet';
+
+    const next = (momentumSynchronizable.getDirty()[0] || 0) + 1;
+    momentumSynchronizable.setBlocking(() => Float64Array.of(next));
+  };
+
+  // Drop the touched flag in place — safety net for a gesture cancelled with no
+  // onEnd, so the flag never sticks.
+  const releaseFlag = () => {
+    'worklet';
+
+    const p = paramsSynchronizable.getDirty();
+    const x = p[0] || 0;
+    const y = p[1] || 0;
+    paramsSynchronizable.setBlocking(() => Float64Array.of(x, y, 0, 0));
+  };
+
+  // After release, drift from the last position along the fling velocity and
+  // decay to a stop — a little inertia. Runs on the UI thread via rAF, like the
+  // render loop, writing each frame into the same synchronizable.
+  const startMomentum = (velX, velY) => {
+    'worklet';
+
+    const s = sizeSynchronizable.getDirty();
+    const w = s[0] || 1;
+    const h = s[1] || 1;
+
+    // Flick speed in normalized units/sec, scaled to a subtle glide (Y flipped).
+    const SCALE = 0.12;
+    let vx = velX / w * SCALE;
+    let vy = -velY / h * SCALE;
+    const p = paramsSynchronizable.getDirty();
+    let x = p[0] || 0;
+    let y = p[1] || 0;
+
+    // Claim this glide; a newer one bumps the generation and this loop bails.
+    const gen = (momentumSynchronizable.getDirty()[0] || 0) + 1;
+    momentumSynchronizable.setBlocking(() => Float64Array.of(gen));
+    const FRICTION = 2; // 1/s — higher stops sooner
+    let last = -1;
+
+    // Plain closure (no 'worklet') so its accumulators and self-reference
+    // survive across frames; a serialized worklet would snapshot them by value.
+    const step = now => {
+      if ((momentumSynchronizable.getDirty()[0] || 0) !== gen) {
+        return;
+      }
+      const dt = last < 0 ? 0 : (now - last) / 1000;
+      last = now;
+      x = Math.min(1, Math.max(0, x + vx * dt));
+      y = Math.min(1, Math.max(0, y + vy * dt));
+      const decay = Math.exp(-FRICTION * dt);
+      vx = vx * decay;
+      vy = vy * decay;
+      paramsSynchronizable.setBlocking(() => Float64Array.of(x, y, 0, 0));
+      if (Math.abs(vx) + Math.abs(vy) > 0.0008) {
+        requestAnimationFrame(step);
+      }
+    };
+    requestAnimationFrame(step);
+  };
+
+  // Drag moves the pointer *relatively*: grab anywhere and push it from where it
+  // is, rather than snapping it under the finger. A plain tap leaves it put.
+  const pan = Gesture.Pan().onBegin(() => {
+    'worklet';
+
+    stopMomentum();
+    const p = paramsSynchronizable.getDirty();
+    const sx = p[0] || 0;
+    const sy = p[1] || 0;
+    panStartSynchronizable.setBlocking(() => Float64Array.of(sx, sy));
+    writePointer(sx, sy, 1);
+  }).onUpdate(e => {
+    'worklet';
+
+    const s = sizeSynchronizable.getDirty();
+    const w = s[0] || 1;
+    const h = s[1] || 1;
+    const start = panStartSynchronizable.getDirty();
+    // Add the drag delta; Y is flipped to match the shader's UV space.
+    writePointer((start[0] || 0) + e.translationX / w, (start[1] || 0) - e.translationY / h, 1);
+  }).onEnd(e => {
+    'worklet';
+
+    const p = paramsSynchronizable.getDirty();
+    writePointer(p[0] || 0, p[1] || 0, 0);
+    startMomentum(e.velocityX, e.velocityY);
+  }).onFinalize(() => {
+    'worklet';
+
+    releaseFlag();
+  });
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: pan,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.fill, style],
+      onLayout: onLayout,
+      collapsable: false,
+      children: /*#__PURE__*/_jsx(ShaderView, {
+        ...props,
+        paramsSynchronizable: paramsSynchronizable,
+        style: StyleSheet.absoluteFill
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/ShaderViewWithPanGesture/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useRef","StyleSheet","View","Gesture","GestureDetector","createSynchronizable","ShaderView","useParamsSynchronizable","jsx","_jsx","ShaderViewWithPanGesture","style","initialParamsSynchronizable","props","paramsSynchronizable","sizeRef","current","Float64Array","of","sizeSynchronizable","momentumRef","momentumSynchronizable","panStartRef","panStartSynchronizable","onLayout","e","width","height","nativeEvent","layout","setBlocking","writePointer","nx","ny","active","x","Math","min","max","y","stopMomentum","next","getDirty","releaseFlag","p","startMomentum","velX","velY","s","w","h","SCALE","vx","vy","gen","FRICTION","last","step","now","dt","decay","exp","abs","requestAnimationFrame","pan","Pan","onBegin","sx","sy","onUpdate","start","translationX","translationY","onEnd","velocityX","velocityY","onFinalize","gesture","children","styles","fill","collapsable","absoluteFill","create","flex"],"sourceRoot":"../../../../src","sources":["components/ShaderViewWithPanGesture/index.tsx"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC3C,SAASC,UAAU,EAAEC,IAAI,QAAgC,cAAc;AACvE,SAASC,OAAO,EAAEC,eAAe,QAAQ,8BAA8B;AACvE,SACEC,oBAAoB,QAEf,uBAAuB;AAC9B,OAAOC,UAAU,MAAM,wBAAe;AACtC,SAASC,uBAAuB,QAAQ,wCAAqC;;AAG7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAvBA,SAAAC,GAAA,IAAAC,IAAA;AAoCA,eAAe,SAASC,wBAAwBA,CAAC;EAC/CC,KAAK;EACLC,2BAA2B,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;EAC1C,GAAGC;AAC0B,CAAC,EAAE;EAChC,MAAM;IAAEC;EAAqB,CAAC,GAAGP,uBAAuB,CACtDK,2BACF,CAAC;;EAED;EACA,MAAMG,OAAO,GAAGf,MAAM,CAAsC,IAAI,CAAC;EACjE,IAAIe,OAAO,CAACC,OAAO,KAAK,IAAI,EAAE;IAC5BD,OAAO,CAACC,OAAO,GAAGX,oBAAoB,CAAeY,YAAY,CAACC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAC7E;EACA,MAAMC,kBAAkB,GAAGJ,OAAO,CAACC,OAAO;;EAE1C;EACA,MAAMI,WAAW,GAAGpB,MAAM,CAAsC,IAAI,CAAC;EACrE,IAAIoB,WAAW,CAACJ,OAAO,KAAK,IAAI,EAAE;IAChCI,WAAW,CAACJ,OAAO,GAAGX,oBAAoB,CACxCY,YAAY,CAACC,EAAE,CAAC,CAAC,CACnB,CAAC;EACH;EACA,MAAMG,sBAAsB,GAAGD,WAAW,CAACJ,OAAO;;EAElD;EACA;EACA,MAAMM,WAAW,GAAGtB,MAAM,CAAsC,IAAI,CAAC;EACrE,IAAIsB,WAAW,CAACN,OAAO,KAAK,IAAI,EAAE;IAChCM,WAAW,CAACN,OAAO,GAAGX,oBAAoB,CACxCY,YAAY,CAACC,EAAE,CAAC,CAAC,EAAE,CAAC,CACtB,CAAC;EACH;EACA,MAAMK,sBAAsB,GAAGD,WAAW,CAACN,OAAO;EAElD,MAAMQ,QAAQ,GAAGzB,WAAW,CACzB0B,CAAoB,IAAK;IACxB,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,CAAC,CAACG,WAAW,CAACC,MAAM;IAC9CV,kBAAkB,CAACW,WAAW,CAAC,MAC7Bb,YAAY,CAACC,EAAE,CAACQ,KAAK,IAAI,CAAC,EAAEC,MAAM,IAAI,CAAC,CACzC,CAAC;EACH,CAAC,EACD,CAACR,kBAAkB,CACrB,CAAC;;EAED;EACA;EACA;EACA,MAAMY,YAAY,GAAGA,CAACC,EAAU,EAAEC,EAAU,EAAEC,MAAc,KAAK;IAC/D,SAAS;;IACT,MAAMC,CAAC,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEN,EAAE,CAAC,CAAC;IACtC,MAAMO,CAAC,GAAGH,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEL,EAAE,CAAC,CAAC;IACtCnB,oBAAoB,CAACgB,WAAW,CAAC,MAAMb,YAAY,CAACC,EAAE,CAACiB,CAAC,EAAEI,CAAC,EAAEL,MAAM,EAAE,CAAC,CAAC,CAAC;EAC1E,CAAC;EAED,MAAMM,YAAY,GAAGA,CAAA,KAAM;IACzB,SAAS;;IACT,MAAMC,IAAI,GAAG,CAACpB,sBAAsB,CAACqB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IAC5DrB,sBAAsB,CAACS,WAAW,CAAC,MAAMb,YAAY,CAACC,EAAE,CAACuB,IAAI,CAAC,CAAC;EACjE,CAAC;;EAED;EACA;EACA,MAAME,WAAW,GAAGA,CAAA,KAAM;IACxB,SAAS;;IACT,MAAMC,CAAC,GAAG9B,oBAAoB,CAAC4B,QAAQ,CAAC,CAAC;IACzC,MAAMP,CAAC,GAAGS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACnB,MAAML,CAAC,GAAGK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACnB9B,oBAAoB,CAACgB,WAAW,CAAC,MAAMb,YAAY,CAACC,EAAE,CAACiB,CAAC,EAAEI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;EACrE,CAAC;;EAED;EACA;EACA;EACA,MAAMM,aAAa,GAAGA,CAACC,IAAY,EAAEC,IAAY,KAAK;IACpD,SAAS;;IACT,MAAMC,CAAC,GAAG7B,kBAAkB,CAACuB,QAAQ,CAAC,CAAC;IACvC,MAAMO,CAAC,GAAGD,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACnB,MAAME,CAAC,GAAGF,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;;IAEnB;IACA,MAAMG,KAAK,GAAG,IAAI;IAClB,IAAIC,EAAE,GAAIN,IAAI,GAAGG,CAAC,GAAIE,KAAK;IAC3B,IAAIE,EAAE,GAAI,CAACN,IAAI,GAAGG,CAAC,GAAIC,KAAK;IAE5B,MAAMP,CAAC,GAAG9B,oBAAoB,CAAC4B,QAAQ,CAAC,CAAC;IACzC,IAAIP,CAAC,GAAGS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACjB,IAAIL,CAAC,GAAGK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;;IAEjB;IACA,MAAMU,GAAG,GAAG,CAACjC,sBAAsB,CAACqB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3DrB,sBAAsB,CAACS,WAAW,CAAC,MAAMb,YAAY,CAACC,EAAE,CAACoC,GAAG,CAAC,CAAC;IAE9D,MAAMC,QAAQ,GAAG,CAAC,CAAC,CAAC;IACpB,IAAIC,IAAI,GAAG,CAAC,CAAC;;IAEb;IACA;IACA,MAAMC,IAAI,GAAIC,GAAW,IAAK;MAC5B,IAAI,CAACrC,sBAAsB,CAACqB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAMY,GAAG,EAAE;QACvD;MACF;MACA,MAAMK,EAAE,GAAGH,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAACE,GAAG,GAAGF,IAAI,IAAI,IAAI;MAC7CA,IAAI,GAAGE,GAAG;MAEVvB,CAAC,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEH,CAAC,GAAGiB,EAAE,GAAGO,EAAE,CAAC,CAAC;MACzCpB,CAAC,GAAGH,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEC,CAAC,GAAGc,EAAE,GAAGM,EAAE,CAAC,CAAC;MACzC,MAAMC,KAAK,GAAGxB,IAAI,CAACyB,GAAG,CAAC,CAACN,QAAQ,GAAGI,EAAE,CAAC;MACtCP,EAAE,GAAGA,EAAE,GAAGQ,KAAK;MACfP,EAAE,GAAGA,EAAE,GAAGO,KAAK;MAEf9C,oBAAoB,CAACgB,WAAW,CAAC,MAAMb,YAAY,CAACC,EAAE,CAACiB,CAAC,EAAEI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;MAEnE,IAAIH,IAAI,CAAC0B,GAAG,CAACV,EAAE,CAAC,GAAGhB,IAAI,CAAC0B,GAAG,CAACT,EAAE,CAAC,GAAG,MAAM,EAAE;QACxCU,qBAAqB,CAACN,IAAI,CAAC;MAC7B;IACF,CAAC;IACDM,qBAAqB,CAACN,IAAI,CAAC;EAC7B,CAAC;;EAED;EACA;EACA,MAAMO,GAAG,GAAG7D,OAAO,CAAC8D,GAAG,CAAC,CAAC,CACtBC,OAAO,CAAC,MAAM;IACb,SAAS;;IACT1B,YAAY,CAAC,CAAC;IACd,MAAMI,CAAC,GAAG9B,oBAAoB,CAAC4B,QAAQ,CAAC,CAAC;IACzC,MAAMyB,EAAE,GAAGvB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACpB,MAAMwB,EAAE,GAAGxB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACpBrB,sBAAsB,CAACO,WAAW,CAAC,MAAMb,YAAY,CAACC,EAAE,CAACiD,EAAE,EAAEC,EAAE,CAAC,CAAC;IACjErC,YAAY,CAACoC,EAAE,EAAEC,EAAE,EAAE,CAAC,CAAC;EACzB,CAAC,CAAC,CACDC,QAAQ,CAAE5C,CAAC,IAAK;IACf,SAAS;;IACT,MAAMuB,CAAC,GAAG7B,kBAAkB,CAACuB,QAAQ,CAAC,CAAC;IACvC,MAAMO,CAAC,GAAGD,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACnB,MAAME,CAAC,GAAGF,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACnB,MAAMsB,KAAK,GAAG/C,sBAAsB,CAACmB,QAAQ,CAAC,CAAC;IAC/C;IACAX,YAAY,CACV,CAACuC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI7C,CAAC,CAAC8C,YAAY,GAAGtB,CAAC,EACpC,CAACqB,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI7C,CAAC,CAAC+C,YAAY,GAAGtB,CAAC,EACpC,CACF,CAAC;EACH,CAAC,CAAC,CACDuB,KAAK,CAAEhD,CAAC,IAAK;IACZ,SAAS;;IACT,MAAMmB,CAAC,GAAG9B,oBAAoB,CAAC4B,QAAQ,CAAC,CAAC;IACzCX,YAAY,CAACa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAEA,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACrCC,aAAa,CAACpB,CAAC,CAACiD,SAAS,EAAEjD,CAAC,CAACkD,SAAS,CAAC;EACzC,CAAC,CAAC,CACDC,UAAU,CAAC,MAAM;IAChB,SAAS;;IACTjC,WAAW,CAAC,CAAC;EACf,CAAC,CAAC;EAEJ,oBACElC,IAAA,CAACL,eAAe;IAACyE,OAAO,EAAEb,GAAI;IAAAc,QAAA,eAC5BrE,IAAA,CAACP,IAAI;MACHS,KAAK,EAAE,CAACoE,MAAM,CAACC,IAAI,EAAErE,KAAK,CAAE;MAC5Ba,QAAQ,EAAEA,QAAS;MACnByD,WAAW,EAAE,KAAM;MAAAH,QAAA,eAEnBrE,IAAA,CAACH,UAAU;QAAA,GACLO,KAAK;QACTC,oBAAoB,EAAEA,oBAAqB;QAC3CH,KAAK,EAAEV,UAAU,CAACiF;MAAa,CAChC;IAAC,CACE;EAAC,CACQ,CAAC;AAEtB;AAEA,MAAMH,MAAM,GAAG9E,UAAU,CAACkF,MAAM,CAAC;EAC/BH,IAAI,EAAE;IACJI,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/hooks/useParamsSynchronizable.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import { useCallback, useRef } from 'react';
+import { createSynchronizable } from 'react-native-worklets';
+/**
+ * Creates a {@link ParamsSynchronizable} — a 4-float channel written into the
+ * dedicated `u.live` slot of a {@link ShaderView} every frame. It has its own
+ * uniform slot, so it leaves all 8 static `params` untouched.
+ *
+ * The returned `setParamsSynchronizable` runs on the JS thread (call it from gesture or scroll
+ * handlers); the values are read by the off-thread render loop. By convention
+ * the four floats carry `(x, y, active, extra)` for pointer input, or
+ * `(progress, ...)` for scroll-driven effects — but the meaning is up to the
+ * shader consuming `u.live`.
+ *
+ * Pass `initial` to seed the channel's starting value (read once on first
+ * render), so the shader has a sane resting state before the first update —
+ * e.g. `[0.5, 0.5, 0, 0]` to start a pointer at screen center. Defaults to all
+ * zeros.
+ */
+export function useParamsSynchronizable(initial = [0, 0, 0, 0]) {
+  // Lazily create once; `initial` is only a seed, so it is read on first render
+  // and ignored thereafter.
+  const ref = useRef(null);
+  if (ref.current === null) {
+    ref.current = createSynchronizable(Float64Array.of(initial[0], initial[1], initial[2], initial[3]));
+  }
+  const paramsSynchronizable = ref.current;
+  const setParamsSynchronizable = useCallback((x, y, active, extra) => {
+    paramsSynchronizable.setBlocking(() => Float64Array.of(x, y, active, extra));
+  }, [paramsSynchronizable]);
+  return {
+    paramsSynchronizable,
+    setParamsSynchronizable
+  };
+}
+//# sourceMappingURL=useParamsSynchronizable.js.map

package/lib/module/hooks/useParamsSynchronizable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useRef","createSynchronizable","useParamsSynchronizable","initial","ref","current","Float64Array","of","paramsSynchronizable","setParamsSynchronizable","x","y","active","extra","setBlocking"],"sourceRoot":"../../../src","sources":["hooks/useParamsSynchronizable.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC3C,SAASC,oBAAoB,QAAQ,uBAAuB;AAG5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,uBAAuBA,CACrCC,OAAkD,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EASjE;EACA;EACA;EACA,MAAMC,GAAG,GAAGJ,MAAM,CAA8B,IAAI,CAAC;EACrD,IAAII,GAAG,CAACC,OAAO,KAAK,IAAI,EAAE;IACxBD,GAAG,CAACC,OAAO,GAAGJ,oBAAoB,CAChCK,YAAY,CAACC,EAAE,CAACJ,OAAO,CAAC,CAAC,CAAC,EAAEA,OAAO,CAAC,CAAC,CAAC,EAAEA,OAAO,CAAC,CAAC,CAAC,EAAEA,OAAO,CAAC,CAAC,CAAC,CAChE,CAAC;EACH;EACA,MAAMK,oBAAoB,GAAGJ,GAAG,CAACC,OAAO;EAExC,MAAMI,uBAAuB,GAAGV,WAAW,CACzC,CAACW,CAAS,EAAEC,CAAS,EAAEC,MAAc,EAAEC,KAAa,KAAK;IACvDL,oBAAoB,CAACM,WAAW,CAAC,MAC/BR,YAAY,CAACC,EAAE,CAACG,CAAC,EAAEC,CAAC,EAAEC,MAAM,EAAEC,KAAK,CACrC,CAAC;EACH,CAAC,EACD,CAACL,oBAAoB,CACvB,CAAC;EAED,OAAO;IAAEA,oBAAoB;IAAEC;EAAwB,CAAC;AAC1D","ignoreList":[]}

package/lib/module/hooks/useWGPUSetup.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { PixelRatio } from 'react-native';
-import { useCanvasRef } from 'react-native-wgpu';
+import { useCanvasRef } from 'react-native-webgpu';
 import { useEffect, useState } from 'react';
 import { initWebGPU } from "../utils/initWebGPU.js";
 import { BackgroundRuntime } from "../utils/backgroundRuntime.js";

package/lib/module/hooks/useWGPUSetup.js.map

@@ -1 +1 @@
-{"version":3,"names":["PixelRatio","useCanvasRef","useEffect","useState","initWebGPU","BackgroundRuntime","useWGPUSetup","canvasRef","resources","setResources","runtime","cancelled","adapter","navigator","gpu","requestAdapter","device","requestDevice","context","current","getContext","canvas","dpr","get","width","height","presentationFormat","getPreferredCanvasFormat","configure","format","alphaMode"],"sourceRoot":"../../../src","sources":["hooks/useWGPUSetup.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SACEC,YAAY,QAGP,mBAAmB;AAC1B,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,SAASC,UAAU,QAAQ,wBAAqB;AAChD,SAASC,iBAAiB,QAAQ,+BAA4B;AAc9D,OAAO,SAASC,YAAYA,CAAA,EAAoB;EAC9C,MAAMC,SAAS,GAAGN,YAAY,CAAC,CAAC;EAChC,MAAM,CAACO,SAAS,EAAEC,YAAY,CAAC,GAAGN,QAAQ,CAAsB,IAAI,CAAC;EACrE,MAAMO,OAAO,GAAGL,iBAAiB;EAEjCH,SAAS,CAAC,MAAM;IACd,IAAIS,SAAS,GAAG,KAAK;IAErB,CAAC,YAAY;MACX,MAAMC,OAAO,GAAG,MAAMC,SAAS,CAACC,GAAG,CAACC,cAAc,CAAC,CAAC;MACpD,IAAI,CAACH,OAAO,IAAID,SAAS,EAAE;QACzB;MACF;MAEA,MAAMK,MAAM,GAAG,MAAMJ,OAAO,CAACK,aAAa,CAAC,CAAC;MAC5C,IAAIN,SAAS,EAAE;QACb;MACF;MAEA,MAAMO,OAAO,GAAGX,SAAS,CAACY,OAAO,CAAEC,UAAU,CAAC,QAAQ,CAAE;MACxD,MAAMC,MAAM,GAAGH,OAAO,CAACG,MAGtB;MACD,MAAMC,GAAG,GAAGtB,UAAU,CAACuB,GAAG,CAAC,CAAC;MAC5BF,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACG,KAAK,GAAGF,GAAG;MACjCD,MAAM,CAACI,MAAM,GAAGJ,MAAM,CAACI,MAAM,GAAGH,GAAG;MAEnC,MAAMI,kBAAkB,GAAGb,SAAS,CAACC,GAAG,CAACa,wBAAwB,CAAC,CAAC;MACnET,OAAO,CAACU,SAAS,CAAC;QAChBZ,MAAM;QACNa,MAAM,EAAEH,kBAAkB;QAC1BI,SAAS,EAAE;MACb,CAAC,CAAC;MAEF1B,UAAU,CAACM,OAAO,CAAC;MAEnB,IAAI,CAACC,SAAS,EAAE;QACdF,YAAY,CAAC;UAAEO,MAAM;UAAEE,OAAO;UAAEQ;QAAmB,CAAC,CAAC;MACvD;IACF,CAAC,EAAE,CAAC;IAEJ,OAAO,MAAM;MACXf,SAAS,GAAG,IAAI;IAClB,CAAC;IACD;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IAAEJ,SAAS;IAAEG,OAAO;IAAEF;EAAU,CAAC;AAC1C","ignoreList":[]}
+{"version":3,"names":["PixelRatio","useCanvasRef","useEffect","useState","initWebGPU","BackgroundRuntime","useWGPUSetup","canvasRef","resources","setResources","runtime","cancelled","adapter","navigator","gpu","requestAdapter","device","requestDevice","context","current","getContext","canvas","dpr","get","width","height","presentationFormat","getPreferredCanvasFormat","configure","format","alphaMode"],"sourceRoot":"../../../src","sources":["hooks/useWGPUSetup.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SACEC,YAAY,QAGP,qBAAqB;AAC5B,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,SAASC,UAAU,QAAQ,wBAAqB;AAChD,SAASC,iBAAiB,QAAQ,+BAA4B;AAc9D,OAAO,SAASC,YAAYA,CAAA,EAAoB;EAC9C,MAAMC,SAAS,GAAGN,YAAY,CAAC,CAAC;EAChC,MAAM,CAACO,SAAS,EAAEC,YAAY,CAAC,GAAGN,QAAQ,CAAsB,IAAI,CAAC;EACrE,MAAMO,OAAO,GAAGL,iBAAiB;EAEjCH,SAAS,CAAC,MAAM;IACd,IAAIS,SAAS,GAAG,KAAK;IAErB,CAAC,YAAY;MACX,MAAMC,OAAO,GAAG,MAAMC,SAAS,CAACC,GAAG,CAACC,cAAc,CAAC,CAAC;MACpD,IAAI,CAACH,OAAO,IAAID,SAAS,EAAE;QACzB;MACF;MAEA,MAAMK,MAAM,GAAG,MAAMJ,OAAO,CAACK,aAAa,CAAC,CAAC;MAC5C,IAAIN,SAAS,EAAE;QACb;MACF;MAEA,MAAMO,OAAO,GAAGX,SAAS,CAACY,OAAO,CAAEC,UAAU,CAAC,QAAQ,CAAE;MACxD,MAAMC,MAAM,GAAGH,OAAO,CAACG,MAGtB;MACD,MAAMC,GAAG,GAAGtB,UAAU,CAACuB,GAAG,CAAC,CAAC;MAC5BF,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACG,KAAK,GAAGF,GAAG;MACjCD,MAAM,CAACI,MAAM,GAAGJ,MAAM,CAACI,MAAM,GAAGH,GAAG;MAEnC,MAAMI,kBAAkB,GAAGb,SAAS,CAACC,GAAG,CAACa,wBAAwB,CAAC,CAAC;MACnET,OAAO,CAACU,SAAS,CAAC;QAChBZ,MAAM;QACNa,MAAM,EAAEH,kBAAkB;QAC1BI,SAAS,EAAE;MACb,CAAC,CAAC;MAEF1B,UAAU,CAACM,OAAO,CAAC;MAEnB,IAAI,CAACC,SAAS,EAAE;QACdF,YAAY,CAAC;UAAEO,MAAM;UAAEE,OAAO;UAAEQ;QAAmB,CAAC,CAAC;MACvD;IACF,CAAC,EAAE,CAAC;IAEJ,OAAO,MAAM;MACXf,SAAS,GAAG,IAAI;IAClB,CAAC;IACD;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IAAEJ,SAAS;IAAEG,OAAO;IAAEF;EAAU,CAAC;AAC1C","ignoreList":[]}

package/lib/module/index.js

@@ -3,11 +3,13 @@
 import CircularGradient from "./components/CircularGradient.js";
 import LinearGradient from "./components/LinearGradient.js";
 import ShaderView from "./components/ShaderView/index.js";
+import ShaderViewWithPanGesture from "./components/ShaderViewWithPanGesture/index.js";
 import Iridescence from "./components/Iridescence.js";
 import LiquidChrome from "./components/LiquidChrome.js";
 import Silk from "./components/Silk.js";
 import Campfire from "./components/Campfire.js";
 import CalicoSwirl from "./components/CalicoSwirl.js";
 import Aurora from "./components/Aurora.js";
-export { CircularGradient, LinearGradient, ShaderView, Iridescence, LiquidChrome, Silk, Campfire, CalicoSwirl, Aurora };
+import { useParamsSynchronizable } from "./hooks/useParamsSynchronizable.js";
+export { CircularGradient, LinearGradient, ShaderView, ShaderViewWithPanGesture, Iridescence, LiquidChrome, Silk, Campfire, CalicoSwirl, Aurora, useParamsSynchronizable };
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["CircularGradient","LinearGradient","ShaderView","Iridescence","LiquidChrome","Silk","Campfire","CalicoSwirl","Aurora"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,gBAAgB,MAAM,kCAA+B;AAC5D,OAAOC,cAAc,MAAM,gCAA6B;AACxD,OAAOC,UAAU,MAAM,kCAAyB;AAChD,OAAOC,WAAW,MAAM,6BAA0B;AAClD,OAAOC,YAAY,MAAM,8BAA2B;AACpD,OAAOC,IAAI,MAAM,sBAAmB;AACpC,OAAOC,QAAQ,MAAM,0BAAuB;AAC5C,OAAOC,WAAW,MAAM,6BAA0B;AAClD,OAAOC,MAAM,MAAM,wBAAqB;AAIxC,SACER,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,WAAW,EACXC,YAAY,EACZC,IAAI,EACJC,QAAQ,EACRC,WAAW,EACXC,MAAM","ignoreList":[]}
+{"version":3,"names":["CircularGradient","LinearGradient","ShaderView","ShaderViewWithPanGesture","Iridescence","LiquidChrome","Silk","Campfire","CalicoSwirl","Aurora","useParamsSynchronizable"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,gBAAgB,MAAM,kCAA+B;AAC5D,OAAOC,cAAc,MAAM,gCAA6B;AACxD,OAAOC,UAAU,MAAM,kCAAyB;AAChD,OAAOC,wBAAwB,MAAM,gDAAuC;AAC5E,OAAOC,WAAW,MAAM,6BAA0B;AAClD,OAAOC,YAAY,MAAM,8BAA2B;AACpD,OAAOC,IAAI,MAAM,sBAAmB;AACpC,OAAOC,QAAQ,MAAM,0BAAuB;AAC5C,OAAOC,WAAW,MAAM,6BAA0B;AAClD,OAAOC,MAAM,MAAM,wBAAqB;AACxC,SAASC,uBAAuB,QAAQ,oCAAiC;AASzE,SACEV,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,wBAAwB,EACxBC,WAAW,EACXC,YAAY,EACZC,IAAI,EACJC,QAAQ,EACRC,WAAW,EACXC,MAAM,EACNC,uBAAuB","ignoreList":[]}

package/lib/module/shaders/uniforms.js

@@ -1,10 +1,10 @@
 "use strict";
 
-/** 96 bytes = 6 × vec4<f32> */
-export const UNIFORM_BUFFER_SIZE = 96;
+/** 112 bytes = 7 × vec4<f32> */
+export const UNIFORM_BUFFER_SIZE = 112;
 
 /** Number of float32 values in the uniform buffer */
-export const UNIFORM_FLOAT_COUNT = UNIFORM_BUFFER_SIZE / 4; // 24
+export const UNIFORM_FLOAT_COUNT = UNIFORM_BUFFER_SIZE / 4; // 28
 
 export const UNIFORMS_WGSL = /* wgsl */`
 struct Uniforms {
@@ -14,6 +14,7 @@ struct Uniforms {
   color1:     vec4<f32>,  // colors[1] RGBA
   params0:    vec4<f32>,  // params[0..3]
   params1:    vec4<f32>,  // params[4..7]
+  live:       vec4<f32>,  // paramsSynchronizable (touch/scroll/audio); (0,0,0,0) when unused
 };
 @group(0) @binding(0) var<uniform> u: Uniforms;
 `;

package/lib/module/shaders/uniforms.js.map

@@ -1 +1 @@
-{"version":3,"names":["UNIFORM_BUFFER_SIZE","UNIFORM_FLOAT_COUNT","UNIFORMS_WGSL"],"sourceRoot":"../../../src","sources":["shaders/uniforms.ts"],"mappings":";;AAAA;AACA,OAAO,MAAMA,mBAAmB,GAAG,EAAE;;AAErC;AACA,OAAO,MAAMC,mBAAmB,GAAGD,mBAAmB,GAAG,CAAC,CAAC,CAAC;;AAE5D,OAAO,MAAME,aAAa,GAAG,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"names":["UNIFORM_BUFFER_SIZE","UNIFORM_FLOAT_COUNT","UNIFORMS_WGSL"],"sourceRoot":"../../../src","sources":["shaders/uniforms.ts"],"mappings":";;AAAA;AACA,OAAO,MAAMA,mBAAmB,GAAG,GAAG;;AAEtC;AACA,OAAO,MAAMC,mBAAmB,GAAGD,mBAAmB,GAAG,CAAC,CAAC,CAAC;;AAE5D,OAAO,MAAME,aAAa,GAAG,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/typescript/src/components/Aurora.d.ts

@@ -12,6 +12,6 @@ type Props = ViewProps & {
     /** How wavy/turbulent the curtains are. Default: 1.0 */
     waviness?: number;
 };
-export default function Aurora({ color, speed, intensity, layers, waviness, ...viewProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Aurora({ color, speed, intensity, layers, waviness, ...viewProps }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Aurora.d.ts.map

package/lib/typescript/src/components/Aurora.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Aurora.d.ts","sourceRoot":"","sources":["../../../../src/components/Aurora.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,KAAiB,EACjB,KAAW,EACX,SAAe,EACf,MAAY,EACZ,QAAc,EACd,GAAG,SAAS,EACb,EAAE,KAAK,2CAiBP"}
+{"version":3,"file":"Aurora.d.ts","sourceRoot":"","sources":["../../../../src/components/Aurora.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,KAAiB,EACjB,KAAW,EACX,SAAe,EACf,MAAY,EACZ,QAAc,EACd,GAAG,SAAS,EACb,EAAE,KAAK,+BAiBP"}

package/lib/typescript/src/components/CalicoSwirl.d.ts

@@ -8,6 +8,6 @@ type Props = ViewProps & {
     /** Intensity of the effect. Default: 1.0 */
     intensity?: number;
 };
-export default function CalicoSwirl({ color, speed, intensity, ...viewProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default function CalicoSwirl({ color, speed, intensity, ...viewProps }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=CalicoSwirl.d.ts.map