react-native-effects 0.0.1 → 0.2.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Blazej Kustra
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,313 @@
+# react-native-effects
+
+https://github.com/user-attachments/assets/5141208a-655a-4de8-94fb-3e66351bf36f
+
+> **Experimental** — APIs may change without notice. Relies on `react-native-worklets` bundle mode, which is not enabled by default yet.
+
+WebGPU-powered effects running on **background thread** in React Native.
+
+## Features
+
+- **WebGPU rendering** via `react-native-webgpu`
+- **Off-thread rendering** using `react-native-worklets` bundle mode — the GPU render loop runs on a separate JS runtime, keeping the main thread free
+- **Drop-in components** — use like any React Native `View`
+- **Customizable** — control colors, speed, intensity, and effect-specific parameters
+- **Animated & static** modes for gradients
+- **Build your own** — create custom effects with `ShaderView` and WGSL shaders
+
+## Components
+
+| Component          | Description                                    |
+| ------------------ | ---------------------------------------------- |
+| `Iridescence`      | Mesmerizing iridescent animated effect         |
+| `LiquidChrome`     | Fluid metallic surface                         |
+| `Silk`             | Smooth flowing silk fabric                     |
+| `Campfire`         | Fire with drifting sparks and smoke            |
+| `CalicoSwirl`      | Warped noise pattern with flowing colors       |
+| `Aurora`           | Northern lights with flowing curtains of light |
+| `LinearGradient`   | Smooth linear gradients (static & animated)    |
+| `CircularGradient` | Customizable circular/radial gradients         |
+
+## ShaderView
+
+`ShaderView` is the core building block that powers every effect in this library. It takes a WGSL fragment shader and renders it on a WebGPU canvas, handling the render loop, uniform buffer, and React Native view integration for you.
+
+```tsx
+import { ShaderView } from 'react-native-effects';
+
+<ShaderView
+  fragmentShader={myShader}
+  colors={['#ff0000', '#0000ff']}
+  params={[1.0, 0.5]}
+  speed={1.0}
+  style={{ width: '100%', height: 300 }}
+/>;
+```
+
+| Prop                   | Type                   | Default | Description                                                                                             |
+| ---------------------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
+| `fragmentShader`       | `string`               | —       | WGSL fragment shader source                                                                             |
+| `colors`               | `ColorInput[]`         | `[]`    | Up to 2 colors mapped to `u.color0` and `u.color1`                                                      |
+| `params`               | `number[]`             | `[]`    | Up to 8 floats mapped to `u.params0.xyzw` and `u.params1.xyzw`                                          |
+| `speed`                | `number`               | `1.0`   | Animation speed multiplier                                                                              |
+| `isStatic`             | `boolean`              | `false` | Render once then stop the animation loop                                                                |
+| `transparent`          | `boolean`              | `false` | Clear the canvas to alpha `0` for an overlay-friendly transparent background                            |
+| `paramsSynchronizable` | `ParamsSynchronizable` | —       | Live 4-float input written into the dedicated `u.live` slot every frame (touch/scroll/audio). See below |
+
+All built-in effects (Silk, Aurora, Campfire, etc.) are thin wrappers around `ShaderView`. You can use it directly to create your own custom effects — see the [Custom Effects Guide](CUSTOM_EFFECTS.md) for a full walkthrough and a ready-to-use AI prompt.
+
+### Live input with `paramsSynchronizable`
+
+Static `params` are great for values that change on the JS thread occasionally, but the render loop runs off-thread — so feeding it fast, per-frame input (a finger drag, scroll progress, audio level) through React props would be laggy. `paramsSynchronizable` is the bridge: a 4-float [Synchronizable](https://docs.swmansion.com/react-native-worklets/docs/synchronization/synchronizable) that the off-thread render loop reads every frame and writes into its own dedicated `u.live` slot — so it never collides with the static `params` (you keep all 8 _and_ get a live channel).
+
+Create one with the `useParamsSynchronizable` hook and update it from your gesture or scroll handlers:
+
+```tsx
+import { ShaderView, useParamsSynchronizable } from 'react-native-effects';
+
+function TouchReactive() {
+  // initial resting value, read once: (x, y, active, extra)
+  const { paramsSynchronizable, setParamsSynchronizable } =
+    useParamsSynchronizable([0.5, 0.5, 0, 0]);
+
+  return (
+    <ShaderView
+      fragmentShader={myShader}
+      paramsSynchronizable={paramsSynchronizable}
+      style={{ width: '100%', height: 300 }}
+      onTouchMove={(e) => {
+        const { locationX, locationY } = e.nativeEvent;
+        setParamsSynchronizable(locationX, locationY, 1, 0);
+      }}
+    />
+  );
+}
+```
+
+Inside the shader, declare the `live` field on the `Uniforms` struct (right after `params1`) and read the live values from `u.live`:
+
+```wgsl
+let pointer = u.live.xy;   // (x, y) you wrote
+let active  = u.live.z;    // 1 while touching, 0 otherwise
+```
+
+`setParamsSynchronizable(x, y, active, extra)` runs on the JS thread; the four floats are by convention `(x, y, active, extra)` for pointer input or `(progress, …)` for scroll-driven effects, but the meaning is entirely up to your shader. For a ready-made pan-gesture variant, use [`ShaderViewWithPanGesture`](src/components/ShaderViewWithPanGesture/index.tsx).
+
+## Installation
+
+```sh
+npm install react-native-effects
+```
+
+### Peer dependencies
+
+```sh
+npm install react-native-webgpu react-native-worklets react-native-reanimated react-native-gesture-handler
+```
+
+### Android requirements
+
+`react-native-webgpu` uses `AHardwareBuffer` APIs that require **Android API 26+**, so your app must set `minSdkVersion` to at least `26` (the default in many templates is `24`). In an Expo project, use [`expo-build-properties`](https://docs.expo.dev/versions/latest/sdk/build-properties/):
+
+```json
+{
+  "expo": {
+    "plugins": [
+      ["expo-build-properties", { "android": { "minSdkVersion": 26 } }]
+    ]
+  }
+}
+```
+
+In a bare React Native project, set `minSdkVersion = 26` in `android/build.gradle`.
+
+### Bundle mode setup
+
+This library relies on `react-native-worklets` [Bundle Mode](https://docs.swmansion.com/react-native-worklets/docs/bundleMode). You need to configure Metro, Babel, and package.json in your app.
+
+**package.json** (add at root level)
+
+```json
+{
+  "worklets": {
+    "staticFeatureFlags": {
+      "BUNDLE_MODE_ENABLED": true,
+      "FETCH_PREVIEW_ENABLED": true
+    }
+  }
+}
+```
+
+<details>
+<summary><strong>Bare React Native</strong></summary>
+
+**babel.config.js**
+
+```js
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    ['react-native-worklets/plugin', { bundleMode: true, strictGlobal: true }],
+  ],
+};
+```
+
+**metro.config.js**
+
+```js
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const {
+  getBundleModeMetroConfig,
+} = require('react-native-worklets/bundleMode');
+
+let config = getDefaultConfig(__dirname);
+config = getBundleModeMetroConfig(config);
+
+// CRITICAL: Enable inlineRequires for worklets compatibility
+config.transformer = {
+  ...config.transformer,
+  getTransformOptions: async () => ({
+    transform: {
+      inlineRequires: true,
+    },
+  }),
+};
+
+module.exports = config;
+```
+
+</details>
+
+<details>
+<summary><strong>Expo</strong></summary>
+
+Install additional dev dependencies:
+
+```sh
+npm install -D babel-preset-expo @react-native/metro-config
+```
+
+**babel.config.js**
+
+```js
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'react-native-worklets/plugin',
+        { bundleMode: true, strictGlobal: true },
+      ],
+    ],
+  };
+};
+```
+
+**metro.config.js**
+
+```js
+const { getDefaultConfig } = require('expo/metro-config');
+const {
+  getBundleModeMetroConfig,
+} = require('react-native-worklets/bundleMode');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+let config = getDefaultConfig(__dirname);
+config = getBundleModeMetroConfig(config);
+
+// CRITICAL: Enable inlineRequires for worklets compatibility in Expo
+config.transformer = {
+  ...config.transformer,
+  getTransformOptions: async () => ({
+    transform: {
+      inlineRequires: true,
+    },
+  }),
+};
+
+module.exports = config;
+```
+
+</details>
+
+## Usage
+
+```tsx
+import { Iridescence, LiquidChrome, Aurora } from 'react-native-effects';
+
+// Full-screen animated background
+<Iridescence style={StyleSheet.absoluteFillObject} />
+
+// Metallic effect with custom speed
+<LiquidChrome style={{ width: '100%', height: 300 }} speed={1.5} />
+
+// Aurora borealis with custom parameters
+<Aurora
+  style={StyleSheet.absoluteFillObject}
+  color="#4ade80"
+  speed={1.0}
+  intensity={1.0}
+  layers={3}
+  waviness={1.0}
+/>
+```
+
+### Common Props
+
+All shader components accept standard `View` props plus:
+
+| Prop    | Type               | Default | Description                |
+| ------- | ------------------ | ------- | -------------------------- |
+| `color` | `string \| number` | varies  | Base tint color            |
+| `speed` | `number`           | `1.0`   | Animation speed multiplier |
+
+### Aurora
+
+| Prop        | Type     | Default | Description                    |
+| ----------- | -------- | ------- | ------------------------------ |
+| `intensity` | `number` | `1.0`   | Brightness of the aurora bands |
+| `layers`    | `number` | `3`     | Number of curtain layers (1-5) |
+| `waviness`  | `number` | `1.0`   | Turbulence of the curtains     |
+
+### Gradients
+
+```tsx
+import { LinearGradient, CircularGradient } from 'react-native-effects';
+
+<LinearGradient
+  style={{ width: '100%', height: 200 }}
+  colors={['#ff0000', '#0000ff']}
+  angle={45}
+/>
+
+<CircularGradient
+  style={{ width: 200, height: 200 }}
+  colors={['#ff0000', '#0000ff']}
+/>
+```
+
+## Create Your Own Effect
+
+Want to build a custom shader effect? Check out the [Custom Effects Guide](CUSTOM_EFFECTS.md) — it includes everything you need to know about the `ShaderView` API, the uniform layout, and the WGSL shader contract. It also has a ready-to-use AI prompt you can paste into ChatGPT or Claude to generate a complete custom effect.
+
+## Running the example app
+
+```sh
+yarn install
+yarn prebuild        # generates native iOS/Android projects
+yarn ios             # run on iOS simulator
+yarn android         # run on Android emulator
+```
+
+To start fresh after config changes, use `yarn prebuild:clean` instead of `yarn prebuild`.
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT

package/lib/module/components/Aurora.js

@@ -0,0 +1,184 @@
+"use strict";
+
+import { useMemo } from 'react';
+import ShaderView from "./ShaderView/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Aurora({
+  color = '#4ade80',
+  speed = 1.0,
+  intensity = 1.0,
+  layers = 3.0,
+  waviness = 1.0,
+  ...viewProps
+}) {
+  const colors = useMemo(() => [color], [color]);
+  const params = useMemo(() => [intensity, layers, waviness], [intensity, layers, waviness]);
+  return /*#__PURE__*/_jsx(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);
+}
+`;
+//# sourceMappingURL=Aurora.js.map

package/lib/module/components/Aurora.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","ShaderView","jsx","_jsx","Aurora","color","speed","intensity","layers","waviness","viewProps","colors","params","fragmentShader","AURORA_SHADER","isStatic"],"sourceRoot":"../../../src","sources":["components/Aurora.tsx"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAG/B,OAAOC,UAAU,MAAM,uBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAetC,eAAe,SAASC,MAAMA,CAAC;EAC7BC,KAAK,GAAG,SAAS;EACjBC,KAAK,GAAG,GAAG;EACXC,SAAS,GAAG,GAAG;EACfC,MAAM,GAAG,GAAG;EACZC,QAAQ,GAAG,GAAG;EACd,GAAGC;AACE,CAAC,EAAE;EACR,MAAMC,MAAM,GAAGX,OAAO,CAAC,MAAM,CAACK,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC9C,MAAMO,MAAM,GAAGZ,OAAO,CACpB,MAAM,CAACO,SAAS,EAAEC,MAAM,EAAEC,QAAQ,CAAC,EACnC,CAACF,SAAS,EAAEC,MAAM,EAAEC,QAAQ,CAC9B,CAAC;EAED,oBACEN,IAAA,CAACF,UAAU;IACTY,cAAc,EAAEC,aAAc;IAC9BH,MAAM,EAAEA,MAAO;IACfC,MAAM,EAAEA,MAAO;IACfN,KAAK,EAAEA,KAAM;IACbS,QAAQ,EAAE,KAAM;IAAA,GACZL;EAAS,CACd,CAAC;AAEN;AAEA,MAAMI,aAAa,GAAG,UAAW;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/module/components/CalicoSwirl.js

@@ -0,0 +1,155 @@
+"use strict";
+
+import { useMemo } from 'react';
+import ShaderView from "./ShaderView/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CalicoSwirl({
+  color = '#ffffff',
+  speed = 1.0,
+  intensity = 1.0,
+  ...viewProps
+}) {
+  const colors = useMemo(() => [color], [color]);
+  const params = useMemo(() => [intensity], [intensity]);
+  return /*#__PURE__*/_jsx(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);
+}
+`;
+//# sourceMappingURL=CalicoSwirl.js.map

package/lib/module/components/CalicoSwirl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","ShaderView","jsx","_jsx","CalicoSwirl","color","speed","intensity","viewProps","colors","params","fragmentShader","CALICO_SWIRL_SHADER","isStatic"],"sourceRoot":"../../../src","sources":["components/CalicoSwirl.tsx"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAG/B,OAAOC,UAAU,MAAM,uBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAWtC,eAAe,SAASC,WAAWA,CAAC;EAClCC,KAAK,GAAG,SAAS;EACjBC,KAAK,GAAG,GAAG;EACXC,SAAS,GAAG,GAAG;EACf,GAAGC;AACE,CAAC,EAAE;EACR,MAAMC,MAAM,GAAGT,OAAO,CAAC,MAAM,CAACK,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAC9C,MAAMK,MAAM,GAAGV,OAAO,CAAC,MAAM,CAACO,SAAS,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEtD,oBACEJ,IAAA,CAACF,UAAU;IACTU,cAAc,EAAEC,mBAAoB;IACpCH,MAAM,EAAEA,MAAO;IACfC,MAAM,EAAEA,MAAO;IACfJ,KAAK,EAAEA,KAAM;IACbO,QAAQ,EAAE,KAAM;IAAA,GACZL;EAAS,CACd,CAAC;AAEN;AAEA,MAAMI,mBAAmB,GAAG,UAAW;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}