react-native-effects 0.1.0 → 0.2.0

package/src/components/ShaderViewWithPanGesture/index.tsx

@@ -0,0 +1,225 @@
+import { useCallback, useRef } from 'react';
+import { StyleSheet, View, type LayoutChangeEvent } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import {
+  createSynchronizable,
+  type Synchronizable,
+} from 'react-native-worklets';
+import ShaderView from '../ShaderView';
+import { useParamsSynchronizable } from '../../hooks/useParamsSynchronizable';
+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 = [0, 0, 0, 0],
+  ...props
+}: ShaderViewWithPanGestureProps) {
+  const { paramsSynchronizable } = useParamsSynchronizable(
+    initialParamsSynchronizable
+  );
+
+  // View size, read inside the gesture worklets to normalize pointer coords.
+  const sizeRef = useRef<Synchronizable<Float64Array> | null>(null);
+  if (sizeRef.current === null) {
+    sizeRef.current = createSynchronizable<Float64Array>(Float64Array.of(1, 1));
+  }
+  const sizeSynchronizable = sizeRef.current;
+
+  // Generation of the current post-release glide; bumped to cancel an old one.
+  const momentumRef = useRef<Synchronizable<Float64Array> | null>(null);
+  if (momentumRef.current === null) {
+    momentumRef.current = createSynchronizable<Float64Array>(
+      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<Synchronizable<Float64Array> | null>(null);
+  if (panStartRef.current === null) {
+    panStartRef.current = createSynchronizable<Float64Array>(
+      Float64Array.of(0, 0)
+    );
+  }
+  const panStartSynchronizable = panStartRef.current;
+
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      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: number, ny: number, active: number) => {
+    '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: number, velY: number) => {
+    '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: number) => {
+      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 (
+    <GestureDetector gesture={pan}>
+      <View
+        style={[styles.fill, style]}
+        onLayout={onLayout}
+        collapsable={false}
+      >
+        <ShaderView
+          {...props}
+          paramsSynchronizable={paramsSynchronizable}
+          style={StyleSheet.absoluteFill}
+        />
+      </View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});

package/src/hooks/useParamsSynchronizable.ts

@@ -0,0 +1,52 @@
+import { useCallback, useRef } from 'react';
+import { createSynchronizable } from 'react-native-worklets';
+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 function useParamsSynchronizable(
+  initial: readonly [number, number, number, number] = [0, 0, 0, 0]
+): {
+  paramsSynchronizable: ParamsSynchronizable;
+  setParamsSynchronizable: (
+    x: number,
+    y: number,
+    active: number,
+    extra: number
+  ) => void;
+} {
+  // Lazily create once; `initial` is only a seed, so it is read on first render
+  // and ignored thereafter.
+  const ref = useRef<ParamsSynchronizable | null>(null);
+  if (ref.current === null) {
+    ref.current = createSynchronizable<Float64Array>(
+      Float64Array.of(initial[0], initial[1], initial[2], initial[3])
+    );
+  }
+  const paramsSynchronizable = ref.current;
+
+  const setParamsSynchronizable = useCallback(
+    (x: number, y: number, active: number, extra: number) => {
+      paramsSynchronizable.setBlocking(() =>
+        Float64Array.of(x, y, active, extra)
+      );
+    },
+    [paramsSynchronizable]
+  );
+
+  return { paramsSynchronizable, setParamsSynchronizable };
+}

package/src/hooks/useWGPUSetup.tsx

@@ -3,7 +3,7 @@ import {
   useCanvasRef,
   type CanvasRef,
   type RNCanvasContext,
-} from 'react-native-wgpu';
+} from 'react-native-webgpu';
 import { useEffect, useState } from 'react';
 import type { WorkletRuntime } from 'react-native-worklets';
 import { initWebGPU } from '../utils/initWebGPU';

package/src/index.tsx

@@ -1,23 +1,32 @@
 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';
+import { useParamsSynchronizable } from './hooks/useParamsSynchronizable';
 
-export type { ShaderViewProps } from './components/ShaderView/types';
+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,
 };

package/src/shaders/uniforms.ts

@@ -1,8 +1,8 @@
-/** 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 {
@@ -12,6 +12,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;
 `;