react-native-effects 0.0.1 → 0.1.0

package/package.json

@@ -1,12 +1,179 @@
 {
   "name": "react-native-effects",
-  "version": "0.0.1",
-  "main": "index.js",
+  "version": "0.1.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",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "example": "yarn workspace react-native-effects-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "prettier": "prettier --check \"**/*.{js,ts,tsx,json,md}\"",
+    "prettier:write": "prettier --write \"**/*.{js,ts,tsx,json,md}\"",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "webgpu",
+    "glb",
+    "gltf",
+    "worklets"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/blazejkustra/react-native-effects.git"
+  },
+  "author": "Blazej Kustra <kustrablazej@gmail.com> (https://github.com/blazejkustra)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/blazejkustra/react-native-effects/issues"
+  },
+  "homepage": "https://github.com/blazejkustra/react-native-effects#readme",
+  "publishConfig": {
+    "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",
+    "@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",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "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"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-wgpu": ">=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"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": ""
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.2"
+  }
 }

package/src/components/Aurora.tsx

@@ -0,0 +1,203 @@
+import { useMemo } from 'react';
+import type { ViewProps } from 'react-native';
+import type { ColorInput } from '../utils/colors';
+import ShaderView from './ShaderView';
+
+type Props = ViewProps & {
+  /** Base tint color for the aurora effect. */
+  color?: ColorInput;
+  /** Animation speed multiplier. Default: 1.0 */
+  speed?: number;
+  /** Brightness of the aurora bands. Default: 1.0 */
+  intensity?: number;
+  /** Number of aurora curtain layers (1-5). Default: 3 */
+  layers?: number;
+  /** How wavy/turbulent the curtains are. Default: 1.0 */
+  waviness?: number;
+};
+
+export default function Aurora({
+  color = '#4ade80',
+  speed = 1.0,
+  intensity = 1.0,
+  layers = 3.0,
+  waviness = 1.0,
+  ...viewProps
+}: Props) {
+  const colors = useMemo(() => [color], [color]);
+  const params = useMemo(
+    () => [intensity, layers, waviness],
+    [intensity, layers, waviness]
+  );
+
+  return (
+    <ShaderView
+      fragmentShader={AURORA_SHADER}
+      colors={colors}
+      params={params}
+      speed={speed}
+      isStatic={false}
+      {...viewProps}
+    />
+  );
+}
+
+const AURORA_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;
+
+// Hash function for pseudo-random values
+fn hash(p: vec2<f32>) -> f32 {
+  var p3 = fract(vec3<f32>(p.x, p.y, p.x) * 0.13);
+  p3 += dot(p3, vec3<f32>(p3.y + 3.333, p3.z + 3.333, p3.x + 3.333));
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+// 2D noise
+fn noise(p: vec2<f32>) -> f32 {
+  let i = floor(p);
+  let f = fract(p);
+  let u_s = f * f * (3.0 - 2.0 * f);
+
+  let a = hash(i);
+  let b = hash(i + vec2<f32>(1.0, 0.0));
+  let c = hash(i + vec2<f32>(0.0, 1.0));
+  let d = hash(i + vec2<f32>(1.0, 1.0));
+
+  return mix(mix(a, b, u_s.x), mix(c, d, u_s.x), u_s.y);
+}
+
+// Fractional Brownian Motion
+fn fbm(p_in: vec2<f32>, octaves: i32) -> f32 {
+  var p = p_in;
+  var value = 0.0;
+  var amplitude = 0.5;
+  var frequency = 1.0;
+
+  for (var i = 0; i < octaves; i++) {
+    value += amplitude * noise(p * frequency);
+    p = p * 2.01 + vec2<f32>(1.7, 9.2);
+    amplitude *= 0.5;
+    frequency *= 1.0;
+  }
+  return value;
+}
+
+// Single aurora curtain layer
+fn auroraLayer(uv: vec2<f32>, time: f32, offset: f32, waviness: f32) -> f32 {
+  // Horizontal position with time-based drift
+  let drift = time * 0.15 + offset * 2.5;
+
+  // Create the curtain shape using sine waves
+  let wave1 = sin(uv.x * 2.0 * waviness + drift + offset * 6.0) * 0.3;
+  let wave2 = sin(uv.x * 3.5 * waviness + drift * 1.3 + offset * 4.0) * 0.15;
+  let wave3 = sin(uv.x * 7.0 * waviness + drift * 0.7 + offset * 8.0) * 0.08;
+
+  // FBM noise for organic turbulence
+  let noiseVal = fbm(vec2<f32>(uv.x * 1.5 * waviness + drift * 0.5, uv.y * 0.8 + offset * 3.0), 4);
+
+  // Curtain center position (wavy vertical line)
+  let curtainCenter = 0.5 + wave1 + wave2 + wave3 + (noiseVal - 0.5) * 0.25 * waviness;
+
+  // Distance from curtain center for glow
+  let dist = abs(uv.y - curtainCenter);
+
+  // Soft glow falloff
+  let glow = exp(-dist * dist * 15.0) * 0.8;
+
+  // Add shimmer using noise
+  let shimmer = fbm(vec2<f32>(uv.x * 4.0 + time * 0.3, uv.y * 8.0 + offset * 5.0), 3);
+  let shimmerEffect = glow * (0.7 + 0.3 * shimmer);
+
+  // Fade toward bottom of screen (aurora appears in upper portion)
+  let heightFade = smoothstep(0.0, 0.6, uv.y);
+
+  return shimmerEffect * heightFade;
+}
+
+// Stars in the background
+fn stars(uv: vec2<f32>, time: f32) -> f32 {
+  let grid = floor(uv * 50.0);
+  let h = hash(grid);
+
+  // Only show some cells as stars
+  let star = step(0.92, h);
+
+  // Twinkle effect
+  let twinkle = 0.5 + 0.5 * sin(time * (1.0 + h * 3.0) + h * 6.28);
+
+  let cellUv = fract(uv * 50.0) - 0.5;
+  let d = length(cellUv);
+  let point = exp(-d * d * 80.0);
+
+  return point * star * twinkle * 0.6;
+}
+
+@fragment
+fn main(@location(0) ndc: vec2<f32>) -> @location(0) vec4<f32> {
+  let time = u.time.x;
+  let intensity = u.params0.x;
+  let layerCount = u.params0.y;
+  let waviness = u.params0.z;
+
+  // Map NDC (-1..1) to UV (0..1)
+  let uv = ndc * 0.5 + 0.5;
+
+  // Dark sky background
+  let skyTop = vec3<f32>(0.0, 0.0, 0.02);
+  let skyBottom = vec3<f32>(0.01, 0.01, 0.04);
+  var col = mix(skyBottom, skyTop, uv.y);
+
+  // Add stars
+  let starVal = stars(uv, time);
+  // Dim stars where aurora is bright (computed later)
+  var auroraTotal = 0.0;
+
+  // Aurora color palette
+  let green = vec3<f32>(0.2, 0.9, 0.4);
+  let cyan = vec3<f32>(0.1, 0.7, 0.8);
+  let purple = vec3<f32>(0.5, 0.2, 0.8);
+  let pink = vec3<f32>(0.7, 0.2, 0.5);
+
+  // Accumulate aurora layers
+  let numLayers = i32(clamp(layerCount, 1.0, 5.0));
+
+  for (var i = 0; i < 5; i++) {
+    if (i >= numLayers) { break; }
+
+    let fi = f32(i);
+    let layerOffset = fi * 0.7;
+
+    let layer = auroraLayer(uv, time, layerOffset, waviness);
+
+    // Color varies per layer and position
+    let colorPhase = fi / f32(numLayers) + uv.x * 0.3 + time * 0.02;
+    let c1 = mix(green, cyan, sin(colorPhase * 3.14) * 0.5 + 0.5);
+    let c2 = mix(purple, pink, cos(colorPhase * 2.5) * 0.5 + 0.5);
+    let layerColor = mix(c1, c2, sin(colorPhase * 2.0 + fi) * 0.5 + 0.5);
+
+    col += layerColor * layer * intensity * (1.0 / f32(numLayers)) * 2.5;
+    auroraTotal += layer;
+  }
+
+  // Add stars (dimmed where aurora is bright)
+  let starDim = max(0.0, 1.0 - auroraTotal * 2.0);
+  col += vec3<f32>(starVal * starDim);
+
+  // Apply tint color
+  col *= u.color0.rgb;
+
+  // Tone mapping - prevent over-saturation
+  col = col / (col + vec3<f32>(1.0));
+  col = pow(col, vec3<f32>(0.9));
+
+  return vec4<f32>(col, u.color0.a);
+}
+`;

package/src/components/CalicoSwirl.tsx

@@ -0,0 +1,167 @@
+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 calico swirl effect. */
+  color?: ColorInput;
+  /** Animation speed multiplier. Default: 1.0 */
+  speed?: number;
+  /** Intensity of the effect. Default: 1.0 */
+  intensity?: number;
+};
+
+export default function CalicoSwirl({
+  color = '#ffffff',
+  speed = 1.0,
+  intensity = 1.0,
+  ...viewProps
+}: Props) {
+  const colors = useMemo(() => [color], [color]);
+  const params = useMemo(() => [intensity], [intensity]);
+
+  return (
+    <ShaderView
+      fragmentShader={CALICO_SWIRL_SHADER}
+      colors={colors}
+      params={params}
+      speed={speed}
+      isStatic={false}
+      {...viewProps}
+    />
+  );
+}
+
+const CALICO_SWIRL_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 m = mat2x2<f32>(0.80, 0.60, -0.60, 0.80);
+
+fn noise(p: vec2<f32>) -> f32 {
+  return sin(p.x) * sin(p.y);
+}
+
+fn fbm4(p_in: vec2<f32>) -> f32 {
+  var p = p_in;
+  var f = 0.0;
+  f += 0.5000 * noise(p);
+  p = m * p * 2.02;
+  f += 0.2500 * noise(p);
+  p = m * p * 2.03;
+  f += 0.1250 * noise(p);
+  p = m * p * 2.01;
+  f += 0.0625 * noise(p);
+  return f / 0.9375;
+}
+
+fn fbm6(p_in: vec2<f32>) -> f32 {
+  var p = p_in;
+  var f = 0.0;
+  f += 0.500000 * (0.5 + 0.5 * noise(p));
+  p = m * p * 2.02;
+  f += 0.250000 * (0.5 + 0.5 * noise(p));
+  p = m * p * 2.03;
+  f += 0.125000 * (0.5 + 0.5 * noise(p));
+  p = m * p * 2.01;
+  f += 0.062500 * (0.5 + 0.5 * noise(p));
+  p = m * p * 2.04;
+  f += 0.031250 * (0.5 + 0.5 * noise(p));
+  p = m * p * 2.01;
+  f += 0.015625 * (0.5 + 0.5 * noise(p));
+  return f / 0.96875;
+}
+
+fn fbm4_2(p: vec2<f32>) -> vec2<f32> {
+  return vec2<f32>(fbm4(p), fbm4(p + vec2<f32>(7.8)));
+}
+
+fn fbm6_2(p: vec2<f32>) -> vec2<f32> {
+  return vec2<f32>(fbm6(p + vec2<f32>(16.8)), fbm6(p + vec2<f32>(11.5)));
+}
+
+fn func(q: vec2<f32>, time: f32) -> vec4<f32> {
+  var q_mod = q;
+  q_mod += 0.03 * sin(vec2<f32>(0.27, 0.23) * time + length(q) * vec2<f32>(4.1, 4.3));
+
+  let o = fbm4_2(0.9 * q_mod);
+
+  var o_mod = o;
+  o_mod += 0.04 * sin(vec2<f32>(0.12, 0.14) * time + length(o));
+
+  let n = fbm6_2(3.0 * o_mod);
+
+  let f = 0.5 + 0.5 * fbm4(1.8 * q_mod + 6.0 * n);
+
+  let result = mix(f, f * f * f * 3.5, f * abs(n.x));
+
+  return vec4<f32>(o, n.x, n.y);
+}
+
+@fragment
+fn main(@location(0) ndc: vec2<f32>) -> @location(0) vec4<f32> {
+  let time = u.time.x;
+  let intensity = u.params0.x;
+
+  let resolution = u.resolution.xy;
+  let aspect = u.resolution.z;
+
+  var p = ndc;
+  p.y *= aspect;
+
+  let e = 2.0 / resolution.y;
+
+  let on = func(p, time);
+
+  let o = on.xy;
+  let n = on.zw;
+
+  var q = p;
+  q += 0.03 * sin(vec2<f32>(0.27, 0.23) * time + length(q) * vec2<f32>(4.1, 4.3));
+  let fbm_val = 0.5 + 0.5 * fbm4(1.8 * q + 6.0 * n);
+  let f = mix(fbm_val, fbm_val * fbm_val * fbm_val * 3.5, fbm_val * abs(n.x));
+
+  var col = vec3<f32>(0.0);
+  col = mix(vec3<f32>(0.2, 0.1, 0.4), vec3<f32>(0.3, 0.05, 0.05), f);
+  col = mix(col, vec3<f32>(0.9, 0.9, 0.9), dot(n, n));
+  col = mix(col, vec3<f32>(0.4, 0.3, 0.3), 0.2 + 0.5 * o.y * o.y);
+  col = mix(col, vec3<f32>(0.0, 0.2, 0.4), 0.5 * smoothstep(1.2, 1.3, abs(n.x) + abs(n.y)));
+  col = clamp(col * f * 2.0, vec3<f32>(0.0), vec3<f32>(1.0));
+
+  let kk1 = func(p + vec2<f32>(e, 0.0), time);
+  let kk2 = func(p + vec2<f32>(0.0, e), time);
+
+  var q1 = p + vec2<f32>(e, 0.0);
+  q1 += 0.03 * sin(vec2<f32>(0.27, 0.23) * time + length(q1) * vec2<f32>(4.1, 4.3));
+  let f1 = 0.5 + 0.5 * fbm4(1.8 * q1 + 6.0 * kk1.zw);
+  let fx = mix(f1, f1 * f1 * f1 * 3.5, f1 * abs(kk1.z));
+
+  var q2 = p + vec2<f32>(0.0, e);
+  q2 += 0.03 * sin(vec2<f32>(0.27, 0.23) * time + length(q2) * vec2<f32>(4.1, 4.3));
+  let f2 = 0.5 + 0.5 * fbm4(1.8 * q2 + 6.0 * kk2.zw);
+  let fy = mix(f2, f2 * f2 * f2 * 3.5, f2 * abs(kk2.z));
+
+  let nor = normalize(vec3<f32>(fx - f, 2.0 * e, fy - f));
+
+  let lig = normalize(vec3<f32>(0.9, 0.2, -0.4));
+  let dif = clamp(0.3 + 0.7 * dot(nor, lig), 0.0, 1.0);
+  let lin = vec3<f32>(0.70, 0.90, 0.95) * (nor.y * 0.5 + 0.5) + vec3<f32>(0.15, 0.10, 0.05) * dif;
+  col *= 1.2 * lin;
+
+  col = 1.0 - col;
+  col = 1.1 * col * col;
+
+  col = col * intensity;
+  col = col * u.color0.rgb;
+
+  return vec4<f32>(col, u.color0.a);
+}
+`;