react-native-effects 0.0.1 → 0.2.0

package/src/components/Iridescence.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import type { ViewProps } from 'react-native';
+import type { ColorInput } from '../utils/colors';
+import ShaderView from './ShaderView';
+
+type Props = ViewProps & {
+  /** The color tint for the iridescence effect. */
+  color?: ColorInput;
+  /** Animation speed multiplier. Default: 1.0 */
+  speed?: number;
+};
+
+export default function Iridescence({
+  color = '#ffffff',
+  speed = 1.0,
+  ...viewProps
+}: Props) {
+  const colors = useMemo(() => [color], [color]);
+
+  return (
+    <ShaderView
+      fragmentShader={IRIDESCENCE_SHADER}
+      colors={colors}
+      params={[]}
+      speed={speed}
+      isStatic={false}
+      {...viewProps}
+    />
+  );
+}
+
+const IRIDESCENCE_SHADER = /* wgsl */ `
+struct Uniforms {
+  resolution: vec4<f32>,
+  time:       vec4<f32>,
+  color0:     vec4<f32>,
+  color1:     vec4<f32>,
+  params0:    vec4<f32>,
+  params1:    vec4<f32>,
+};
+@group(0) @binding(0) var<uniform> u: Uniforms;
+
+@fragment
+fn main(@location(0) ndc: vec2<f32>) -> @location(0) vec4<f32> {
+  let time = u.time.x;
+
+  let vUv = ndc * 0.5 + vec2<f32>(0.5, 0.5);
+  let mr = min(u.resolution.x, u.resolution.y);
+  var uv = (vUv * 2.0 - vec2<f32>(1.0, 1.0)) * (u.resolution.xy / mr);
+
+  var d = -time * 0.5;
+  var a = 0.0;
+  for (var i: f32 = 0.0; i < 8.0; i = i + 1.0) {
+    a = a + cos(i - d - a * uv.x);
+    d = d + sin(uv.y * i + a);
+  }
+  d = d + time * 0.5;
+
+  let c1 = cos(uv * vec2<f32>(d, a)) * 0.6 + 0.4;
+  let c2 = cos(a + d) * 0.5 + 0.5;
+  let col = vec3<f32>(c1.x, c1.y, c2);
+
+  let finalCol = cos(col * cos(vec3<f32>(d, a, 2.5)) * 0.5 + 0.5);
+  let coloredCol = finalCol * u.color0.rgb;
+  return vec4<f32>(clamp(coloredCol, vec3<f32>(0.0), vec3<f32>(1.0)), u.color0.a);
+}
+`;

package/src/components/LinearGradient.tsx

@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+import type { ViewProps } from 'react-native';
+import type { ColorInput } from '../utils/colors';
+import ShaderView from './ShaderView';
+
+type Props = ViewProps & {
+  /** The color of the start of the gradient. */
+  startColor: ColorInput;
+  /** The color of the end of the gradient. */
+  endColor: ColorInput;
+  /** The angle of the gradient in degrees (0-360). */
+  angle: number;
+  /** Rotation speed in degrees/second. 0 = static. Default: 0 */
+  speed?: number;
+};
+
+export default function LinearGradient({
+  startColor,
+  endColor,
+  angle,
+  speed = 0,
+  ...viewProps
+}: Props) {
+  const colors = useMemo(() => [startColor, endColor], [startColor, endColor]);
+  const params = useMemo(() => [angle, speed], [angle, speed]);
+
+  return (
+    <ShaderView
+      fragmentShader={LINEAR_GRADIENT_SHADER}
+      colors={colors}
+      params={params}
+      speed={speed === 0 ? 0 : 1}
+      isStatic={speed === 0}
+      {...viewProps}
+    />
+  );
+}
+
+const LINEAR_GRADIENT_SHADER = /* wgsl */ `
+struct Uniforms {
+  resolution: vec4<f32>,
+  time:       vec4<f32>,
+  color0:     vec4<f32>,
+  color1:     vec4<f32>,
+  params0:    vec4<f32>,
+  params1:    vec4<f32>,
+};
+@group(0) @binding(0) var<uniform> u: Uniforms;
+
+@fragment
+fn main(@location(0) ndc: vec2<f32>) -> @location(0) vec4<f32> {
+  let uv = ndc * 0.5 + vec2<f32>(0.5, 0.5);
+  let baseAngle = u.params0.x;
+  let rotationSpeed = u.params0.y;
+  let angle = (baseAngle + u.time.x * rotationSpeed) * 3.14159265359 / 180.0;
+  let dir = vec2<f32>(cos(angle), sin(angle));
+  let fromCenter = uv - vec2<f32>(0.5, 0.5);
+  let corrected = vec2<f32>(fromCenter.x * u.resolution.z, fromCenter.y);
+  let t = clamp(dot(corrected, dir) + 0.5, 0.0, 1.0);
+  return mix(u.color0, u.color1, t);
+}
+`;

package/src/components/LiquidChrome.tsx

@@ -0,0 +1,94 @@
+import { useMemo } from 'react';
+import type { ViewProps } from 'react-native';
+import type { ColorInput } from '../utils/colors';
+import ShaderView from './ShaderView';
+
+type Props = ViewProps & {
+  /** The base color for the liquid chrome effect. */
+  color?: ColorInput;
+  /** Animation speed multiplier. Default: 0.2 */
+  speed?: number;
+  /** Amplitude of the distortion. Default: 0.3 */
+  amplitude?: number;
+  /** Horizontal frequency. Default: 3 */
+  frequencyX?: number;
+  /** Vertical frequency. Default: 3 */
+  frequencyY?: number;
+};
+
+export default function LiquidChrome({
+  color = '#1a1a1a',
+  speed = 0.2,
+  amplitude = 0.3,
+  frequencyX = 3,
+  frequencyY = 3,
+  ...viewProps
+}: Props) {
+  const colors = useMemo(() => [color], [color]);
+  const params = useMemo(
+    () => [amplitude, frequencyX, frequencyY],
+    [amplitude, frequencyX, frequencyY]
+  );
+
+  return (
+    <ShaderView
+      fragmentShader={LIQUID_CHROME_SHADER}
+      colors={colors}
+      params={params}
+      speed={speed}
+      isStatic={false}
+      {...viewProps}
+    />
+  );
+}
+
+const LIQUID_CHROME_SHADER = /* wgsl */ `
+struct Uniforms {
+  resolution: vec4<f32>,
+  time:       vec4<f32>,
+  color0:     vec4<f32>,
+  color1:     vec4<f32>,
+  params0:    vec4<f32>,
+  params1:    vec4<f32>,
+};
+@group(0) @binding(0) var<uniform> u: Uniforms;
+
+fn renderImage(uvCoord: vec2<f32>) -> vec4<f32> {
+  let resolution2D = u.resolution.xy;
+  let time = u.time.x;
+  let amplitude = u.params0.x;
+  let frequencyX = u.params0.y;
+  let frequencyY = u.params0.z;
+
+  let fragCoord = uvCoord * resolution2D;
+  var uv = (2.0 * fragCoord - resolution2D) / min(u.resolution.x, u.resolution.y);
+
+  for (var i: f32 = 1.0; i < 10.0; i = i + 1.0) {
+    uv.x = uv.x + amplitude / i * cos(i * frequencyX * uv.y + time);
+    uv.y = uv.y + amplitude / i * cos(i * frequencyY * uv.x + time);
+  }
+
+  let baseColor = u.color0;
+  let color = baseColor.rgb / abs(sin(time - uv.y - uv.x));
+  return vec4<f32>(color, baseColor.a);
+}
+
+@fragment
+fn main(@location(0) ndc: vec2<f32>) -> @location(0) vec4<f32> {
+  let vUv = ndc * 0.5 + vec2<f32>(0.5, 0.5);
+  let resolution2D = u.resolution.xy;
+
+  var col = vec4<f32>(0.0);
+  var samples = 0;
+
+  for (var i: i32 = -1; i <= 1; i = i + 1) {
+    for (var j: i32 = -1; j <= 1; j = j + 1) {
+      let offset = vec2<f32>(f32(i), f32(j)) * (1.0 / min(resolution2D.x, resolution2D.y));
+      col = col + renderImage(vUv + offset);
+      samples = samples + 1;
+    }
+  }
+
+  return col / f32(samples);
+}
+`;

package/src/components/ShaderView/index.tsx

@@ -0,0 +1,262 @@
+import { PixelRatio, StyleSheet } from 'react-native';
+import { Canvas } from 'react-native-webgpu';
+import { useEffect, useRef } from 'react';
+import { createSynchronizable, scheduleOnRuntime } from 'react-native-worklets';
+import { colorToVec4 } from '../../utils/colors';
+import { useWGPUSetup } from '../../hooks/useWGPUSetup';
+import { TRIANGLE_VERTEX_SHADER } from '../../shaders/TRIANGLE_VERTEX_SHADER';
+import {
+  UNIFORM_BUFFER_SIZE,
+  UNIFORM_FLOAT_COUNT,
+} from '../../shaders/uniforms';
+import type { ShaderViewProps } from './types';
+
+// Synchronizable layout: [c0r,c0g,c0b,c0a, c1r,c1g,c1b,c1a, speed, p0..p7, alive]
+// Total: 4 + 4 + 1 + 8 + 1 = 18 floats
+const SYNC_SIZE = 18;
+const IDX_SPEED = 8;
+const IDX_PARAMS = 9; // 9..16
+const IDX_ALIVE = 17;
+
+export default function ShaderView({
+  fragmentShader,
+  colors = [],
+  speed = 1.0,
+  params = [],
+  isStatic = false,
+  transparent = false,
+  paramsSynchronizable,
+  style,
+  ...viewProps
+}: ShaderViewProps) {
+  const { canvasRef, runtime, resources } = useWGPUSetup();
+
+  const propsSync = useRef(
+    createSynchronizable<Float64Array>(new Float64Array(SYNC_SIZE))
+  ).current;
+
+  // Convert props to flat floats and push to synchronizable
+  useEffect(() => {
+    const data = new Float64Array(SYNC_SIZE);
+
+    // color0 (indices 0-3)
+    if (colors[0] !== undefined) {
+      const c0 = colorToVec4(colors[0]);
+      data[0] = c0.r;
+      data[1] = c0.g;
+      data[2] = c0.b;
+      data[3] = c0.a;
+    }
+
+    // color1 (indices 4-7)
+    if (colors[1] !== undefined) {
+      const c1 = colorToVec4(colors[1]);
+      data[4] = c1.r;
+      data[5] = c1.g;
+      data[6] = c1.b;
+      data[7] = c1.a;
+    }
+
+    // speed
+    data[IDX_SPEED] = speed;
+
+    // params (indices 9-16)
+    for (let i = 0; i < 8; i++) {
+      data[IDX_PARAMS + i] = params[i] ?? 0;
+    }
+
+    // alive
+    data[IDX_ALIVE] = 1;
+
+    propsSync.setBlocking(() => data);
+  }, [colors, speed, params, propsSync]);
+
+  // Signal cleanup on unmount
+  useEffect(() => {
+    return () => {
+      propsSync.setBlocking((prev) => {
+        prev[IDX_ALIVE] = 0;
+        return prev;
+      });
+    };
+  }, [propsSync]);
+
+  // Start render loop when GPU resources are ready
+  useEffect(() => {
+    if (!resources) {
+      return;
+    }
+
+    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';
+
+      // Create pipeline once
+      const pipeline = device.createRenderPipeline({
+        layout: 'auto',
+        vertex: {
+          module: device.createShaderModule({ code: TRIANGLE_VERTEX_SHADER }),
+          entryPoint: 'main',
+        },
+        fragment: {
+          module: device.createShaderModule({ code: fragmentShader }),
+          entryPoint: 'main',
+          targets: [{ format: presentationFormat }],
+        },
+        primitive: { topology: 'triangle-list' },
+      });
+
+      // Create uniform buffer + bind group once, reuse via writeBuffer
+      const uniformBuffer = device.createBuffer({
+        size: UNIFORM_BUFFER_SIZE,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+      });
+
+      const bindGroup = device.createBindGroup({
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [{ binding: 0, resource: { buffer: uniformBuffer } }],
+      });
+
+      const uniformData = new Float32Array(UNIFORM_FLOAT_COUNT);
+      let accumulatedTime = 0;
+      let lastTimestamp = 0;
+
+      function render(timestamp: number) {
+        const props = propsSync.getDirty();
+        if (props[IDX_ALIVE] === 0) {
+          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;
+
+        // Accumulate time with speed
+        const currentSpeed = props[IDX_SPEED]!;
+        accumulatedTime += dt * currentSpeed;
+
+        // Resolution
+        const canvas = context.canvas as typeof context.canvas & {
+          width: number;
+          height: number;
+        };
+        const width = canvas.width || 1;
+        const height = canvas.height || 1;
+        const aspect = width / height;
+
+        // Fill uniform data (7 × vec4 = 28 floats)
+        // resolution: vec4<f32>
+        uniformData[0] = width;
+        uniformData[1] = height;
+        uniformData[2] = aspect;
+        uniformData[3] = dpr;
+
+        // time: vec4<f32>
+        uniformData[4] = accumulatedTime;
+        uniformData[5] = dt;
+        uniformData[6] = 0;
+        uniformData[7] = 0;
+
+        // color0: vec4<f32>
+        uniformData[8] = props[0]!;
+        uniformData[9] = props[1]!;
+        uniformData[10] = props[2]!;
+        uniformData[11] = props[3]!;
+
+        // color1: vec4<f32>
+        uniformData[12] = props[4]!;
+        uniformData[13] = props[5]!;
+        uniformData[14] = props[6]!;
+        uniformData[15] = props[7]!;
+
+        // params0: vec4<f32>
+        uniformData[16] = props[IDX_PARAMS]!;
+        uniformData[17] = props[IDX_PARAMS + 1]!;
+        uniformData[18] = props[IDX_PARAMS + 2]!;
+        uniformData[19] = props[IDX_PARAMS + 3]!;
+
+        // 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: transparent ? [0, 0, 0, 0] : [0, 0, 0, 1],
+              loadOp: 'clear',
+              storeOp: 'store',
+            },
+          ],
+        });
+
+        passEncoder.setPipeline(pipeline);
+        passEncoder.setBindGroup(0, bindGroup);
+        passEncoder.draw(3);
+        passEncoder.end();
+
+        device.queue.submit([commandEncoder.finish()]);
+        context.present();
+
+        if (!isStatic) {
+          requestAnimationFrame(render);
+        }
+      }
+
+      requestAnimationFrame(render);
+    });
+
+    return () => {
+      cancelled.setBlocking(() => Float64Array.of(1));
+    };
+  }, [
+    resources,
+    runtime,
+    propsSync,
+    paramsSynchronizable,
+    fragmentShader,
+    isStatic,
+    transparent,
+  ]);
+
+  return (
+    <Canvas ref={canvasRef} style={[styles.canvas, style]} {...viewProps} />
+  );
+}
+
+const styles = StyleSheet.create({
+  canvas: {
+    flex: 1,
+  },
+});

package/src/components/ShaderView/types.ts

@@ -0,0 +1,36 @@
+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;
+  /** Array of colors mapped to u.color0, u.color1 (max 2). Default: [] */
+  colors?: ColorInput[];
+  /** Time multiplier — controls animation speed. Default: 1.0 */
+  speed?: number;
+  /** Up to 8 shader-specific floats mapped to u.params0.xyzw and u.params1.xyzw */
+  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;
+};