react-native-effects 0.0.1 → 0.1.0

package/src/components/ShaderView/index.tsx

@@ -0,0 +1,225 @@
+import { PixelRatio, StyleSheet } from 'react-native';
+import { Canvas } from 'react-native-wgpu';
+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,
+  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();
+
+    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;
+        }
+
+        // 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 (6 × vec4 = 24 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>
+        uniformData[20] = props[IDX_PARAMS + 4]!;
+        uniformData[21] = props[IDX_PARAMS + 5]!;
+        uniformData[22] = props[IDX_PARAMS + 6]!;
+        uniformData[23] = props[IDX_PARAMS + 7]!;
+
+        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],
+              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);
+    });
+  }, [resources, runtime, propsSync, fragmentShader, isStatic]);
+
+  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,15 @@
+import type { ViewProps } from 'react-native';
+import type { ColorInput } from '../../utils/colors';
+
+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;
+};

package/src/components/Silk.tsx

@@ -0,0 +1,102 @@
+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 silk effect. */
+  color?: ColorInput;
+  /** Animation speed multiplier. Default: 1.0 */
+  speed?: number;
+  /** Scale of the pattern. Default: 1.0 */
+  scale?: number;
+  /** Rotation angle in radians. Default: 0.0 */
+  rotation?: number;
+  /** Intensity of the noise grain. Default: 1.5 */
+  noiseIntensity?: number;
+};
+
+export default function Silk({
+  color = '#7B7481',
+  speed = 1.0,
+  scale = 1.0,
+  rotation = 0.0,
+  noiseIntensity = 1.5,
+  ...viewProps
+}: Props) {
+  const colors = useMemo(() => [color], [color]);
+  const params = useMemo(
+    () => [scale, rotation, noiseIntensity],
+    [scale, rotation, noiseIntensity]
+  );
+
+  return (
+    <ShaderView
+      fragmentShader={SILK_SHADER}
+      colors={colors}
+      params={params}
+      speed={speed}
+      isStatic={false}
+      {...viewProps}
+    />
+  );
+}
+
+const SILK_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;
+
+const e = 2.71828182845904523536;
+
+fn noise(texCoord: vec2<f32>) -> f32 {
+  let G = e;
+  let r = (G * sin(G * texCoord));
+  return fract(r.x * r.y * (1.0 + texCoord.x));
+}
+
+fn rotateUvs(uv: vec2<f32>, angle: f32) -> vec2<f32> {
+  let c = cos(angle);
+  let s = sin(angle);
+  let rot = mat2x2<f32>(c, -s, s, c);
+  return rot * uv;
+}
+
+@fragment
+fn main(@location(0) ndc: vec2<f32>) -> @location(0) vec4<f32> {
+  let time = u.time.x;
+  let scale = u.params0.x;
+  let rotation = u.params0.y;
+  let noiseIntensity = u.params0.z;
+
+  let resolution2D = u.resolution.xy;
+  let vUv = ndc * 0.5 + vec2<f32>(0.5, 0.5);
+  let fragCoord = vUv * resolution2D;
+
+  let rnd = noise(fragCoord);
+  let uv = rotateUvs(vUv * scale, rotation);
+  var tex = uv * scale;
+  let tOffset = time;
+
+  tex.y = tex.y + 0.03 * sin(8.0 * tex.x - tOffset);
+
+  let pattern = 0.6 +
+                0.4 * sin(5.0 * (tex.x + tex.y +
+                                 cos(3.0 * tex.x + 5.0 * tex.y) +
+                                 0.02 * tOffset) +
+                         sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));
+
+  var col = u.color0 * vec4<f32>(pattern, pattern, pattern, 1.0) -
+            vec4<f32>(rnd / 15.0 * noiseIntensity, rnd / 15.0 * noiseIntensity,
+                     rnd / 15.0 * noiseIntensity, 0.0);
+  col.a = u.color0.a;
+
+  return clamp(col, vec4<f32>(0.0), vec4<f32>(1.0));
+}
+`;

package/src/consts.ts

@@ -0,0 +1,152 @@
+export const NAMED_COLORS: Record<string, number> = {
+  // Basic colors
+  black: 0x000000,
+  white: 0xffffff,
+  red: 0xff0000,
+  green: 0x008000,
+  blue: 0x0000ff,
+  yellow: 0xffff00,
+  cyan: 0x00ffff,
+  magenta: 0xff00ff,
+  silver: 0xc0c0c0,
+  gray: 0x808080,
+  grey: 0x808080,
+  maroon: 0x800000,
+  olive: 0x808000,
+  lime: 0x00ff00,
+  aqua: 0x00ffff,
+  teal: 0x008080,
+  navy: 0x000080,
+  fuchsia: 0xff00ff,
+  purple: 0x800080,
+
+  // Extended colors
+  aliceblue: 0xf0f8ff,
+  antiquewhite: 0xfaebd7,
+  aquamarine: 0x7fffd4,
+  azure: 0xf0ffff,
+  beige: 0xf5f5dc,
+  bisque: 0xffe4c4,
+  blanchedalmond: 0xffebcd,
+  blueviolet: 0x8a2be2,
+  brown: 0xa52a2a,
+  burlywood: 0xdeb887,
+  cadetblue: 0x5f9ea0,
+  chartreuse: 0x7fff00,
+  chocolate: 0xd2691e,
+  coral: 0xff7f50,
+  cornflowerblue: 0x6495ed,
+  cornsilk: 0xfff8dc,
+  crimson: 0xdc143c,
+  darkblue: 0x00008b,
+  darkcyan: 0x008b8b,
+  darkgoldenrod: 0xb8860b,
+  darkgray: 0xa9a9a9,
+  darkgrey: 0xa9a9a9,
+  darkgreen: 0x006400,
+  darkkhaki: 0xbdb76b,
+  darkmagenta: 0x8b008b,
+  darkolivegreen: 0x556b2f,
+  darkorange: 0xff8c00,
+  darkorchid: 0x9932cc,
+  darkred: 0x8b0000,
+  darksalmon: 0xe9967a,
+  darkseagreen: 0x8fbc8f,
+  darkslateblue: 0x483d8b,
+  darkslategray: 0x2f4f4f,
+  darkslategrey: 0x2f4f4f,
+  darkturquoise: 0x00ced1,
+  darkviolet: 0x9400d3,
+  deeppink: 0xff1493,
+  deepskyblue: 0x00bfff,
+  dimgray: 0x696969,
+  dimgrey: 0x696969,
+  dodgerblue: 0x1e90ff,
+  firebrick: 0xb22222,
+  floralwhite: 0xfffaf0,
+  forestgreen: 0x228b22,
+  gainsboro: 0xdcdcdc,
+  ghostwhite: 0xf8f8ff,
+  gold: 0xffd700,
+  goldenrod: 0xdaa520,
+  greenyellow: 0xadff2f,
+  honeydew: 0xf0fff0,
+  hotpink: 0xff69b4,
+  indianred: 0xcd5c5c,
+  indigo: 0x4b0082,
+  ivory: 0xfffff0,
+  khaki: 0xf0e68c,
+  lavender: 0xe6e6fa,
+  lavenderblush: 0xfff0f5,
+  lawngreen: 0x7cfc00,
+  lemonchiffon: 0xfffacd,
+  lightblue: 0xadd8e6,
+  lightcoral: 0xf08080,
+  lightcyan: 0xe0ffff,
+  lightgoldenrodyellow: 0xfafad2,
+  lightgray: 0xd3d3d3,
+  lightgrey: 0xd3d3d3,
+  lightgreen: 0x90ee90,
+  lightpink: 0xffb6c1,
+  lightsalmon: 0xffa07a,
+  lightseagreen: 0x20b2aa,
+  lightskyblue: 0x87cefa,
+  lightslategray: 0x778899,
+  lightslategrey: 0x778899,
+  lightsteelblue: 0xb0c4de,
+  lightyellow: 0xffffe0,
+  limegreen: 0x32cd32,
+  linen: 0xfaf0e6,
+  mediumaquamarine: 0x66cdaa,
+  mediumblue: 0x0000cd,
+  mediumorchid: 0xba55d3,
+  mediumpurple: 0x9370db,
+  mediumseagreen: 0x3cb371,
+  mediumslateblue: 0x7b68ee,
+  mediumspringgreen: 0x00fa9a,
+  mediumturquoise: 0x48d1cc,
+  mediumvioletred: 0xc71585,
+  midnightblue: 0x191970,
+  mintcream: 0xf5fffa,
+  mistyrose: 0xffe4e1,
+  moccasin: 0xffe4b5,
+  navajowhite: 0xffdead,
+  oldlace: 0xfdf5e6,
+  olivedrab: 0x6b8e23,
+  orange: 0xffa500,
+  orangered: 0xff4500,
+  orchid: 0xda70d6,
+  palegoldenrod: 0xeee8aa,
+  palegreen: 0x98fb98,
+  paleturquoise: 0xafeeee,
+  palevioletred: 0xdb7093,
+  papayawhip: 0xffefd5,
+  peachpuff: 0xffdab9,
+  peru: 0xcd853f,
+  pink: 0xffc0cb,
+  plum: 0xdda0dd,
+  powderblue: 0xb0e0e6,
+  rosybrown: 0xbc8f8f,
+  royalblue: 0x4169e1,
+  saddlebrown: 0x8b4513,
+  salmon: 0xfa8072,
+  sandybrown: 0xf4a460,
+  seagreen: 0x2e8b57,
+  seashell: 0xfff5ee,
+  sienna: 0xa0522d,
+  skyblue: 0x87ceeb,
+  slateblue: 0x6a5acd,
+  slategray: 0x708090,
+  slategrey: 0x708090,
+  snow: 0xfffafa,
+  springgreen: 0x00ff7f,
+  steelblue: 0x4682b4,
+  tan: 0xd2b48c,
+  thistle: 0xd8bfd8,
+  tomato: 0xff6347,
+  turquoise: 0x40e0d0,
+  violet: 0xee82ee,
+  wheat: 0xf5deb3,
+  whitesmoke: 0xf5f5f5,
+  yellowgreen: 0x9acd32,
+};

package/src/hooks/useClock.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import {
+  useFrameCallback,
+  useSharedValue,
+  type FrameInfo,
+  type SharedValue,
+} from 'react-native-reanimated';
+
+export function useClock(): SharedValue<number> {
+  const clock = useSharedValue(0);
+  const callback = useCallback(
+    (info: FrameInfo) => {
+      'worklet';
+      clock.value = info.timeSinceFirstFrame;
+    },
+    [clock]
+  );
+  useFrameCallback(callback);
+  return clock;
+}

package/src/hooks/useWGPUSetup.tsx

@@ -0,0 +1,73 @@
+import { PixelRatio } from 'react-native';
+import {
+  useCanvasRef,
+  type CanvasRef,
+  type RNCanvasContext,
+} from 'react-native-wgpu';
+import { useEffect, useState } from 'react';
+import type { WorkletRuntime } from 'react-native-worklets';
+import { initWebGPU } from '../utils/initWebGPU';
+import { BackgroundRuntime } from '../utils/backgroundRuntime';
+
+type GPUResources = {
+  device: GPUDevice;
+  context: RNCanvasContext;
+  presentationFormat: GPUTextureFormat;
+};
+
+type WGPUSetupResult = {
+  canvasRef: React.RefObject<CanvasRef>;
+  runtime: WorkletRuntime;
+  resources: GPUResources | null;
+};
+
+export function useWGPUSetup(): WGPUSetupResult {
+  const canvasRef = useCanvasRef();
+  const [resources, setResources] = useState<GPUResources | null>(null);
+  const runtime = BackgroundRuntime;
+
+  useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      const adapter = await navigator.gpu.requestAdapter();
+      if (!adapter || cancelled) {
+        return;
+      }
+
+      const device = await adapter.requestDevice();
+      if (cancelled) {
+        return;
+      }
+
+      const context = canvasRef.current!.getContext('webgpu')!;
+      const canvas = context.canvas as typeof context.canvas & {
+        width: number;
+        height: number;
+      };
+      const dpr = PixelRatio.get();
+      canvas.width = canvas.width * dpr;
+      canvas.height = canvas.height * dpr;
+
+      const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+      context.configure({
+        device,
+        format: presentationFormat,
+        alphaMode: 'premultiplied',
+      });
+
+      initWebGPU(runtime);
+
+      if (!cancelled) {
+        setResources({ device, context, presentationFormat });
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return { canvasRef, runtime, resources };
+}

package/src/index.tsx

@@ -0,0 +1,23 @@
+import CircularGradient from './components/CircularGradient';
+import LinearGradient from './components/LinearGradient';
+import ShaderView from './components/ShaderView';
+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,
+};

package/src/shaders/TRIANGLE_VERTEX_SHADER.ts

@@ -0,0 +1,17 @@
+export const TRIANGLE_VERTEX_SHADER = /* wgsl */ `
+  struct VSOut { 
+    @builtin(position) pos: vec4<f32>,
+    @location(0) ndc: vec2<f32>,
+  };
+  
+  @vertex 
+  fn main(@builtin(vertex_index) vid: u32) -> VSOut {
+    var p = array<vec2<f32>,3>(
+      vec2<f32>(-1.0,-3.0), vec2<f32>(-1.0,1.0), vec2<f32>(3.0,1.0)
+    );
+    var o: VSOut;
+    o.pos = vec4<f32>(p[vid], 0, 1.0);
+    o.ndc = p[vid];
+    return o;
+  }
+`;

package/src/shaders/uniforms.ts

@@ -0,0 +1,17 @@
+/** 96 bytes = 6 × vec4<f32> */
+export const UNIFORM_BUFFER_SIZE = 96;
+
+/** Number of float32 values in the uniform buffer */
+export const UNIFORM_FLOAT_COUNT = UNIFORM_BUFFER_SIZE / 4; // 24
+
+export const UNIFORMS_WGSL = /* wgsl */ `
+struct Uniforms {
+  resolution: vec4<f32>,  // (width, height, aspect, pixelRatio)
+  time:       vec4<f32>,  // (seconds, dt, 0, 0)
+  color0:     vec4<f32>,  // colors[0] RGBA
+  color1:     vec4<f32>,  // colors[1] RGBA
+  params0:    vec4<f32>,  // params[0..3]
+  params1:    vec4<f32>,  // params[4..7]
+};
+@group(0) @binding(0) var<uniform> u: Uniforms;
+`;

package/src/utils/backgroundRuntime.ts

@@ -0,0 +1,10 @@
+import { createWorkletRuntime, scheduleOnRuntime } from 'react-native-worklets';
+
+export const BackgroundRuntime = createWorkletRuntime({
+  name: 'react-native-effects',
+});
+
+export function runOnBackground(callback: (...args: any[]) => void) {
+  'worklet';
+  return scheduleOnRuntime(BackgroundRuntime, callback);
+}