react-native-effects 0.1.0 → 0.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"CalicoSwirl.d.ts","sourceRoot":"","sources":["../../../../src/components/CalicoSwirl.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,kDAAkD;IAClD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAiB,EACjB,KAAW,EACX,SAAe,EACf,GAAG,SAAS,EACb,EAAE,KAAK,2CAcP"}
+{"version":3,"file":"CalicoSwirl.d.ts","sourceRoot":"","sources":["../../../../src/components/CalicoSwirl.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,kDAAkD;IAClD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAiB,EACjB,KAAW,EACX,SAAe,EACf,GAAG,SAAS,EACb,EAAE,KAAK,+BAcP"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Campfire.d.ts","sourceRoot":"","sources":["../../../../src/components/Campfire.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,0CAA0C;IAC1C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAiB,EACjB,KAAW,EACX,SAAe,EACf,aAAmB,EACnB,cAAoB,EACpB,GAAG,SAAS,EACb,EAAE,KAAK,2CAiBP"}
+{"version":3,"file":"Campfire.d.ts","sourceRoot":"","sources":["../../../../src/components/Campfire.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,0CAA0C;IAC1C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAiB,EACjB,KAAW,EACX,SAAe,EACf,aAAmB,EACnB,cAAoB,EACpB,GAAG,SAAS,EACb,EAAE,KAAK,+BAiBP"}

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

@@ -14,6 +14,6 @@ type Props = ViewProps & {
     /** Vertical radius. Default: 0.5 */
     sizeY?: number;
 };
-export default function CircularGradient({ centerColor, edgeColor, centerX, centerY, sizeX, sizeY, ...viewProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default function CircularGradient({ centerColor, edgeColor, centerX, centerY, sizeX, sizeY, ...viewProps }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=CircularGradient.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CircularGradient.d.ts","sourceRoot":"","sources":["../../../../src/components/CircularGradient.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,+CAA+C;IAC/C,WAAW,EAAE,UAAU,CAAC;IACxB,kEAAkE;IAClE,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,SAA2B,EAC3B,OAAa,EACb,OAAa,EACb,KAAW,EACX,KAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,2CAmBP"}
+{"version":3,"file":"CircularGradient.d.ts","sourceRoot":"","sources":["../../../../src/components/CircularGradient.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,+CAA+C;IAC/C,WAAW,EAAE,UAAU,CAAC;IACxB,kEAAkE;IAClE,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,WAAW,EACX,SAA2B,EAC3B,OAAa,EACb,OAAa,EACb,KAAW,EACX,KAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAmBP"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Iridescence.d.ts","sourceRoot":"","sources":["../../../../src/components/Iridescence.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,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAiB,EACjB,KAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,2CAaP"}
+{"version":3,"file":"Iridescence.d.ts","sourceRoot":"","sources":["../../../../src/components/Iridescence.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,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAiB,EACjB,KAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAaP"}

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

@@ -10,6 +10,6 @@ type Props = ViewProps & {
     /** Rotation speed in degrees/second. 0 = static. Default: 0 */
     speed?: number;
 };
-export default function LinearGradient({ startColor, endColor, angle, speed, ...viewProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default function LinearGradient({ startColor, endColor, angle, speed, ...viewProps }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=LinearGradient.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../../../../src/components/LinearGradient.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,8CAA8C;IAC9C,UAAU,EAAE,UAAU,CAAC;IACvB,4CAA4C;IAC5C,QAAQ,EAAE,UAAU,CAAC;IACrB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,UAAU,EACV,QAAQ,EACR,KAAK,EACL,KAAS,EACT,GAAG,SAAS,EACb,EAAE,KAAK,2CAcP"}
+{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../../../../src/components/LinearGradient.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,8CAA8C;IAC9C,UAAU,EAAE,UAAU,CAAC;IACvB,4CAA4C;IAC5C,QAAQ,EAAE,UAAU,CAAC;IACrB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,UAAU,EACV,QAAQ,EACR,KAAK,EACL,KAAS,EACT,GAAG,SAAS,EACb,EAAE,KAAK,+BAcP"}

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

@@ -12,6 +12,6 @@ type Props = ViewProps & {
     /** Vertical frequency. Default: 3 */
     frequencyY?: number;
 };
-export default function LiquidChrome({ color, speed, amplitude, frequencyX, frequencyY, ...viewProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default function LiquidChrome({ color, speed, amplitude, frequencyX, frequencyY, ...viewProps }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=LiquidChrome.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LiquidChrome.d.ts","sourceRoot":"","sources":["../../../../src/components/LiquidChrome.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,mDAAmD;IACnD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAiB,EACjB,KAAW,EACX,SAAe,EACf,UAAc,EACd,UAAc,EACd,GAAG,SAAS,EACb,EAAE,KAAK,2CAiBP"}
+{"version":3,"file":"LiquidChrome.d.ts","sourceRoot":"","sources":["../../../../src/components/LiquidChrome.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,mDAAmD;IACnD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAiB,EACjB,KAAW,EACX,SAAe,EACf,UAAc,EACd,UAAc,EACd,GAAG,SAAS,EACb,EAAE,KAAK,+BAiBP"}

package/lib/typescript/src/components/ShaderView/index.d.ts

@@ -1,3 +1,3 @@
 import type { ShaderViewProps } from './types';
-export default function ShaderView({ fragmentShader, colors, speed, params, isStatic, style, ...viewProps }: ShaderViewProps): import("react/jsx-runtime").JSX.Element;
+export default function ShaderView({ fragmentShader, colors, speed, params, isStatic, transparent, paramsSynchronizable, style, ...viewProps }: ShaderViewProps): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/ShaderView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ShaderView/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAS/C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,cAAc,EACd,MAAW,EACX,KAAW,EACX,MAAW,EACX,QAAgB,EAChB,KAAK,EACL,GAAG,SAAS,EACb,EAAE,eAAe,2CA8LjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ShaderView/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAS/C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,cAAc,EACd,MAAW,EACX,KAAW,EACX,MAAW,EACX,QAAgB,EAChB,WAAmB,EACnB,oBAAoB,EACpB,KAAK,EACL,GAAG,SAAS,EACb,EAAE,eAAe,+BAiOjB"}

package/lib/typescript/src/components/ShaderView/types.d.ts

@@ -1,5 +1,17 @@
 import type { ViewProps } from 'react-native';
+import type { Synchronizable } from 'react-native-worklets';
 import type { ColorInput } from '../../utils/colors';
+/**
+ * A 4-float synchronizable whose values are written into the dedicated `u.live`
+ * uniform slot every frame. It has its own slot, so it never collides with the
+ * 8 static `params` (`u.params0`/`u.params1`).
+ *
+ * This is the bridge for live, per-frame input (touch position, scroll
+ * progress, velocity) coming from the JS thread into the off-thread render
+ * loop. Create one with `useParamsSynchronizable` and update it from
+ * gesture/scroll handlers. See `ShaderViewWithPanGesture`.
+ */
+export type ParamsSynchronizable = Synchronizable<Float64Array>;
 export type ShaderViewProps = ViewProps & {
     /** WGSL fragment shader source (must declare the Uniforms struct) */
     fragmentShader: string;
@@ -11,5 +23,13 @@ export type ShaderViewProps = ViewProps & {
     params?: number[];
     /** Render once then stop the RAF loop. Default: false */
     isStatic?: boolean;
+    /** Use transparent background (clear to alpha 0). Default: false */
+    transparent?: boolean;
+    /**
+     * Optional live input. Its 4 floats are written into the dedicated `u.live`
+     * slot every frame — independent of the static `params`. Use for
+     * touch/scroll/audio. Create it with `useParamsSynchronizable`.
+     */
+    paramsSynchronizable?: ParamsSynchronizable;
 };
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/ShaderView/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ShaderView/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,qEAAqE;IACrE,cAAc,EAAE,MAAM,CAAC;IACvB,wEAAwE;IACxE,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ShaderView/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;;;;;GASG;AACH,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,qEAAqE;IACrE,cAAc,EAAE,MAAM,CAAC;IACvB,wEAAwE;IACxE,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;CAC7C,CAAC"}

package/lib/typescript/src/components/ShaderViewWithPanGesture/index.d.ts

@@ -0,0 +1,35 @@
+import type { ShaderViewProps } from '../ShaderView/types';
+/**
+ * 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.
+ */
+export type ShaderViewWithPanGestureProps = Omit<ShaderViewProps, 'paramsSynchronizable'> & {
+    /**
+     * Initial value for the gesture channel (`u.live`) before the first touch.
+     * Defaults to `[0, 0, 0, 0]`. Use e.g. `[0.5, 0.5, 0, 0]` to rest a pointer at
+     * screen center.
+     */
+    initialParamsSynchronizable?: readonly [number, number, number, number];
+};
+export default function ShaderViewWithPanGesture({ style, initialParamsSynchronizable, ...props }: ShaderViewWithPanGestureProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/ShaderViewWithPanGesture/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ShaderViewWithPanGesture/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC9C,eAAe,EACf,sBAAsB,CACvB,GAAG;IACF;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CACzE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,2BAA0C,EAC1C,GAAG,KAAK,EACT,EAAE,6BAA6B,+BAuK/B"}

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

@@ -12,6 +12,6 @@ type Props = ViewProps & {
     /** Intensity of the noise grain. Default: 1.5 */
     noiseIntensity?: number;
 };
-export default function Silk({ color, speed, scale, rotation, noiseIntensity, ...viewProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Silk({ color, speed, scale, rotation, noiseIntensity, ...viewProps }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Silk.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Silk.d.ts","sourceRoot":"","sources":["../../../../src/components/Silk.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,0CAA0C;IAC1C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,KAAiB,EACjB,KAAW,EACX,KAAW,EACX,QAAc,EACd,cAAoB,EACpB,GAAG,SAAS,EACb,EAAE,KAAK,2CAiBP"}
+{"version":3,"file":"Silk.d.ts","sourceRoot":"","sources":["../../../../src/components/Silk.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,0CAA0C;IAC1C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,KAAiB,EACjB,KAAW,EACX,KAAW,EACX,QAAc,EACd,cAAoB,EACpB,GAAG,SAAS,EACb,EAAE,KAAK,+BAiBP"}

package/lib/typescript/src/hooks/useParamsSynchronizable.d.ts

@@ -0,0 +1,22 @@
+import type { ParamsSynchronizable } from '../components/ShaderView/types';
+/**
+ * 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 declare function useParamsSynchronizable(initial?: readonly [number, number, number, number]): {
+    paramsSynchronizable: ParamsSynchronizable;
+    setParamsSynchronizable: (x: number, y: number, active: number, extra: number) => void;
+};
+//# sourceMappingURL=useParamsSynchronizable.d.ts.map

package/lib/typescript/src/hooks/useParamsSynchronizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParamsSynchronizable.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useParamsSynchronizable.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAE3E;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,GAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAgB,GAChE;IACD,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,uBAAuB,EAAE,CACvB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;CACX,CAqBA"}

package/lib/typescript/src/hooks/useWGPUSetup.d.ts

@@ -1,4 +1,4 @@
-import { type CanvasRef, type RNCanvasContext } from 'react-native-wgpu';
+import { type CanvasRef, type RNCanvasContext } from 'react-native-webgpu';
 import type { WorkletRuntime } from 'react-native-worklets';
 type GPUResources = {
     device: GPUDevice;

package/lib/typescript/src/hooks/useWGPUSetup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWGPUSetup.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useWGPUSetup.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,eAAe,EACrB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAI5D,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,eAAe,CAAC;IACzB,kBAAkB,EAAE,gBAAgB,CAAC;CACtC,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,OAAO,EAAE,cAAc,CAAC;IACxB,SAAS,EAAE,YAAY,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,wBAAgB,YAAY,IAAI,eAAe,CAiD9C"}
+{"version":3,"file":"useWGPUSetup.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useWGPUSetup.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAI5D,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,eAAe,CAAC;IACzB,kBAAkB,EAAE,gBAAgB,CAAC;CACtC,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,OAAO,EAAE,cAAc,CAAC;IACxB,SAAS,EAAE,YAAY,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,wBAAgB,YAAY,IAAI,eAAe,CAiD9C"}

package/lib/typescript/src/index.d.ts

@@ -1,12 +1,16 @@
 import CircularGradient from './components/CircularGradient';
 import LinearGradient from './components/LinearGradient';
 import ShaderView from './components/ShaderView';
+import ShaderViewWithPanGesture from './components/ShaderViewWithPanGesture';
 import Iridescence from './components/Iridescence';
 import LiquidChrome from './components/LiquidChrome';
 import Silk from './components/Silk';
 import Campfire from './components/Campfire';
 import CalicoSwirl from './components/CalicoSwirl';
 import Aurora from './components/Aurora';
-export type { ShaderViewProps } from './components/ShaderView/types';
-export { CircularGradient, LinearGradient, ShaderView, Iridescence, LiquidChrome, Silk, Campfire, CalicoSwirl, Aurora, };
+import { useParamsSynchronizable } from './hooks/useParamsSynchronizable';
+export type { ShaderViewProps, ParamsSynchronizable, } from './components/ShaderView/types';
+export type { ShaderViewWithPanGestureProps } from './components/ShaderViewWithPanGesture';
+export type { ColorInput } from './utils/colors';
+export { CircularGradient, LinearGradient, ShaderView, ShaderViewWithPanGesture, Iridescence, LiquidChrome, Silk, Campfire, CalicoSwirl, Aurora, useParamsSynchronizable, };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,YAAY,MAAM,2BAA2B,CAAC;AACrD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,YAAY,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAErE,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,MAAM,GACP,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,wBAAwB,MAAM,uCAAuC,CAAC;AAC7E,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,YAAY,MAAM,2BAA2B,CAAC;AACrD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAE1E,YAAY,EACV,eAAe,EACf,oBAAoB,GACrB,MAAM,+BAA+B,CAAC;AACvC,YAAY,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AAC3F,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,wBAAwB,EACxB,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,MAAM,EACN,uBAAuB,GACxB,CAAC"}

package/lib/typescript/src/shaders/uniforms.d.ts

@@ -1,6 +1,6 @@
-/** 96 bytes = 6 × vec4<f32> */
-export declare const UNIFORM_BUFFER_SIZE = 96;
+/** 112 bytes = 7 × vec4<f32> */
+export declare const UNIFORM_BUFFER_SIZE = 112;
 /** Number of float32 values in the uniform buffer */
 export declare const UNIFORM_FLOAT_COUNT: number;
-export declare const UNIFORMS_WGSL = "\nstruct Uniforms {\n  resolution: vec4<f32>,  // (width, height, aspect, pixelRatio)\n  time:       vec4<f32>,  // (seconds, dt, 0, 0)\n  color0:     vec4<f32>,  // colors[0] RGBA\n  color1:     vec4<f32>,  // colors[1] RGBA\n  params0:    vec4<f32>,  // params[0..3]\n  params1:    vec4<f32>,  // params[4..7]\n};\n@group(0) @binding(0) var<uniform> u: Uniforms;\n";
+export declare const UNIFORMS_WGSL = "\nstruct Uniforms {\n  resolution: vec4<f32>,  // (width, height, aspect, pixelRatio)\n  time:       vec4<f32>,  // (seconds, dt, 0, 0)\n  color0:     vec4<f32>,  // colors[0] RGBA\n  color1:     vec4<f32>,  // colors[1] RGBA\n  params0:    vec4<f32>,  // params[0..3]\n  params1:    vec4<f32>,  // params[4..7]\n  live:       vec4<f32>,  // paramsSynchronizable (touch/scroll/audio); (0,0,0,0) when unused\n};\n@group(0) @binding(0) var<uniform> u: Uniforms;\n";
 //# sourceMappingURL=uniforms.d.ts.map

package/lib/typescript/src/shaders/uniforms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uniforms.d.ts","sourceRoot":"","sources":["../../../../src/shaders/uniforms.ts"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,qDAAqD;AACrD,eAAO,MAAM,mBAAmB,QAA0B,CAAC;AAE3D,eAAO,MAAM,aAAa,mXAUzB,CAAC"}
+{"version":3,"file":"uniforms.d.ts","sourceRoot":"","sources":["../../../../src/shaders/uniforms.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC,qDAAqD;AACrD,eAAO,MAAM,mBAAmB,QAA0B,CAAC;AAE3D,eAAO,MAAM,aAAa,kdAWzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-effects",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "WebGPU-powered visual effects running on a background thread in React Native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -65,45 +65,46 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/compat": "^1.3.2",
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.35.0",
-    "@react-native/babel-preset": "0.83.1",
-    "@react-native/eslint-config": "0.83.1",
-    "@release-it/conventional-changelog": "^10.0.1",
+    "@commitlint/config-conventional": "^21.0.2",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^9.39.4",
+    "@react-native/babel-preset": "0.85.3",
+    "@react-native/eslint-config": "0.85.3",
+    "@react-native/jest-preset": "0.85.3",
+    "@release-it/conventional-changelog": "^11.0.1",
     "@types/jest": "^29.5.14",
-    "@types/react": "^19.1.12",
-    "@webgpu/types": "0.1.69",
-    "commitlint": "^19.8.1",
-    "del-cli": "^6.0.0",
-    "eslint": "^9.35.0",
+    "@types/react": "^19.2.17",
+    "@webgpu/types": "0.1.70",
+    "commitlint": "^21.0.2",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-prettier": "^5.5.6",
     "jest": "^29.7.0",
-    "lefthook": "^2.0.3",
-    "prettier": "^2.8.8",
-    "react": "19.2.0",
-    "react-native": "0.83.1",
-    "react-native-builder-bob": "^0.40.18",
-    "react-native-gesture-handler": "2.30.0",
-    "react-native-reanimated": "4.3.0-rc.0",
-    "react-native-wgpu": "0.5.6",
-    "react-native-worklets": "0.8.0-rc.0",
-    "release-it": "^19.0.4",
-    "turbo": "^2.5.6",
-    "typescript": "^5.9.2"
+    "lefthook": "^2.1.9",
+    "prettier": "^3.8.3",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-builder-bob": "^0.41.0",
+    "react-native-gesture-handler": "2.31.1",
+    "react-native-reanimated": "4.3.1",
+    "react-native-webgpu": "0.5.14",
+    "react-native-worklets": "0.8.3",
+    "release-it": "^20.2.0",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": ">=2.0.0",
-    "react-native-wgpu": ">=0.5.0",
+    "react-native-webgpu": ">=0.5.0",
     "react-native-worklets": ">=0.8.0"
   },
   "resolutions": {
-    "metro": "patch:metro@npm%3A0.83.3#./.yarn/patches/metro-npm-0.83.3-d09f48ca84.patch",
-    "metro-runtime": "patch:metro-runtime@npm%3A0.83.3#./.yarn/patches/metro-runtime-npm-0.83.3-c614bbd3b9.patch"
+    "metro": "patch:metro@npm%3A0.84.4#./.yarn/patches/metro-npm-0.84.4.patch",
+    "metro-runtime": "patch:metro-runtime@npm%3A0.84.4#./.yarn/patches/metro-runtime-npm-0.84.4.patch"
   },
   "workspaces": [
     "example"
@@ -135,7 +136,7 @@
     "useTabs": false
   },
   "jest": {
-    "preset": "react-native",
+    "preset": "@react-native/jest-preset",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"

package/src/components/ShaderView/index.tsx

@@ -1,5 +1,5 @@
 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';
@@ -24,6 +24,8 @@ export default function ShaderView({
   speed = 1.0,
   params = [],
   isStatic = false,
+  transparent = false,
+  paramsSynchronizable,
   style,
   ...viewProps
 }: ShaderViewProps) {
@@ -88,6 +90,12 @@ export default function ShaderView({
     const { device, context, 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<Float64Array>(new Float64Array(1));
+
     scheduleOnRuntime(runtime, () => {
       'worklet';
 
@@ -127,6 +135,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;
@@ -144,7 +158,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;
@@ -175,12 +189,23 @@ 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();
@@ -189,7 +214,7 @@ export default function ShaderView({
           colorAttachments: [
             {
               view: textureView,
-              clearValue: [0, 0, 0, 1],
+              clearValue: transparent ? [0, 0, 0, 0] : [0, 0, 0, 1],
               loadOp: 'clear',
               storeOp: 'store',
             },
@@ -211,7 +236,19 @@ 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 (
     <Canvas ref={canvasRef} style={[styles.canvas, style]} {...viewProps} />

package/src/components/ShaderView/types.ts

@@ -1,6 +1,19 @@
 import type { ViewProps } from 'react-native';
+import type { Synchronizable } from 'react-native-worklets';
 import type { ColorInput } from '../../utils/colors';
 
+/**
+ * A 4-float synchronizable whose values are written into the dedicated `u.live`
+ * uniform slot every frame. It has its own slot, so it never collides with the
+ * 8 static `params` (`u.params0`/`u.params1`).
+ *
+ * This is the bridge for live, per-frame input (touch position, scroll
+ * progress, velocity) coming from the JS thread into the off-thread render
+ * loop. Create one with `useParamsSynchronizable` and update it from
+ * gesture/scroll handlers. See `ShaderViewWithPanGesture`.
+ */
+export type ParamsSynchronizable = Synchronizable<Float64Array>;
+
 export type ShaderViewProps = ViewProps & {
   /** WGSL fragment shader source (must declare the Uniforms struct) */
   fragmentShader: string;
@@ -12,4 +25,12 @@ export type ShaderViewProps = ViewProps & {
   params?: number[];
   /** Render once then stop the RAF loop. Default: false */
   isStatic?: boolean;
+  /** Use transparent background (clear to alpha 0). Default: false */
+  transparent?: boolean;
+  /**
+   * Optional live input. Its 4 floats are written into the dedicated `u.live`
+   * slot every frame — independent of the static `params`. Use for
+   * touch/scroll/audio. Create it with `useParamsSynchronizable`.
+   */
+  paramsSynchronizable?: ParamsSynchronizable;
 };