react-native-effects 0.0.1 → 0.2.0

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);
+}
+`;

package/src/components/Campfire.tsx

@@ -0,0 +1,244 @@
+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 fire effect. */
+  color?: ColorInput;
+  /** Animation speed multiplier. Default: 1.0 */
+  speed?: number;
+  /** Size of the sparks. Default: 1.0 */
+  sparkSize?: number;
+  /** Intensity of the fire. Default: 1.0 */
+  fireIntensity?: number;
+  /** Intensity of the smoke. Default: 1.0 */
+  smokeIntensity?: number;
+};
+
+export default function Campfire({
+  color = '#ffffff',
+  speed = 1.0,
+  sparkSize = 1.0,
+  fireIntensity = 1.0,
+  smokeIntensity = 1.0,
+  ...viewProps
+}: Props) {
+  const colors = useMemo(() => [color], [color]);
+  const params = useMemo(
+    () => [sparkSize, fireIntensity, smokeIntensity],
+    [sparkSize, fireIntensity, smokeIntensity]
+  );
+
+  return (
+    <ShaderView
+      fragmentShader={CAMPFIRE_SHADER}
+      colors={colors}
+      params={params}
+      speed={speed}
+      isStatic={false}
+      {...viewProps}
+    />
+  );
+}
+
+const CAMPFIRE_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 mod289_3(x: vec3<f32>) -> vec3<f32> {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+fn mod289_4(x: vec4<f32>) -> vec4<f32> {
+  return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+fn permute(x: vec4<f32>) -> vec4<f32> {
+  return mod289_4(((x * 34.0) + 1.0) * x);
+}
+
+fn taylorInvSqrt(r: vec4<f32>) -> vec4<f32> {
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+fn snoise(v: vec3<f32>) -> f32 {
+  let C = vec2<f32>(1.0 / 6.0, 1.0 / 3.0);
+  let D = vec4<f32>(0.0, 0.5, 1.0, 2.0);
+
+  var i = floor(v + dot(v, vec3<f32>(C.y, C.y, C.y)));
+  let x0 = v - i + dot(i, vec3<f32>(C.x, C.x, C.x));
+
+  let g = step(vec3<f32>(x0.y, x0.z, x0.x), x0);
+  let l = 1.0 - g;
+  let i1 = min(g, vec3<f32>(l.z, l.x, l.y));
+  let i2 = max(g, vec3<f32>(l.z, l.x, l.y));
+
+  let x1 = x0 - i1 + vec3<f32>(C.x, C.x, C.x);
+  let x2 = x0 - i2 + vec3<f32>(C.y, C.y, C.y);
+  let x3 = x0 - vec3<f32>(D.y, D.y, D.y);
+
+  i = mod289_3(i);
+  let p = permute(permute(permute(
+    i.z + vec4<f32>(0.0, i1.z, i2.z, 1.0))
+    + i.y + vec4<f32>(0.0, i1.y, i2.y, 1.0))
+    + i.x + vec4<f32>(0.0, i1.x, i2.x, 1.0));
+
+  let n_ = 0.142857142857;
+  let ns = n_ * vec3<f32>(D.w, D.y, D.z) - vec3<f32>(D.x, D.z, D.x);
+
+  let j = p - 49.0 * floor(p * ns.z * ns.z);
+
+  let x_ = floor(j * ns.z);
+  let y_ = floor(j - 7.0 * x_);
+
+  let x = x_ * ns.x + vec4<f32>(ns.y, ns.y, ns.y, ns.y);
+  let y = y_ * ns.x + vec4<f32>(ns.y, ns.y, ns.y, ns.y);
+  let h = 1.0 - abs(x) - abs(y);
+
+  let b0 = vec4<f32>(x.x, x.y, y.x, y.y);
+  let b1 = vec4<f32>(x.z, x.w, y.z, y.w);
+
+  let s0 = floor(b0) * 2.0 + 1.0;
+  let s1 = floor(b1) * 2.0 + 1.0;
+  let sh = -step(h, vec4<f32>(0.0));
+
+  let a0 = vec4<f32>(b0.x, b0.z, b0.y, b0.w) + vec4<f32>(s0.x, s0.z, s0.y, s0.w) * vec4<f32>(sh.x, sh.x, sh.y, sh.y);
+  let a1 = vec4<f32>(b1.x, b1.z, b1.y, b1.w) + vec4<f32>(s1.x, s1.z, s1.y, s1.w) * vec4<f32>(sh.z, sh.z, sh.w, sh.w);
+
+  let p0 = vec3<f32>(a0.x, a0.y, h.x);
+  let p1 = vec3<f32>(a0.z, a0.w, h.y);
+  let p2 = vec3<f32>(a1.x, a1.y, h.z);
+  let p3 = vec3<f32>(a1.z, a1.w, h.w);
+
+  let norm = inverseSqrt(vec4<f32>(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+  let p0n = p0 * norm.x;
+  let p1n = p1 * norm.y;
+  let p2n = p2 * norm.z;
+  let p3n = p3 * norm.w;
+
+  var m = max(0.6 - vec4<f32>(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), vec4<f32>(0.0));
+  m = m * m;
+  return 42.0 * dot(m * m, vec4<f32>(dot(p0n, x0), dot(p1n, x1), dot(p2n, x2), dot(p3n, x3)));
+}
+
+fn prng(seed: vec2<f32>) -> f32 {
+  var s = fract(seed * vec2<f32>(5.3983, 5.4427));
+  s = s + dot(vec2<f32>(s.y, s.x), s + vec2<f32>(21.5351, 14.3137));
+  return fract(s.x * s.y * 95.4337);
+}
+
+const PI = 3.1415926535897932384626433832795;
+
+fn noiseStack(pos: vec3<f32>, octaves: i32, falloff: f32) -> f32 {
+  var noise = snoise(pos);
+  var off = 1.0;
+  var p = pos;
+
+  if (octaves > 1) {
+    p = p * 2.0;
+    off = off * falloff;
+    noise = (1.0 - off) * noise + off * snoise(p);
+  }
+  if (octaves > 2) {
+    p = p * 2.0;
+    off = off * falloff;
+    noise = (1.0 - off) * noise + off * snoise(p);
+  }
+  if (octaves > 3) {
+    p = p * 2.0;
+    off = off * falloff;
+    noise = (1.0 - off) * noise + off * snoise(p);
+  }
+  return (1.0 + noise) / 2.0;
+}
+
+fn noiseStackUV(pos: vec3<f32>, octaves: i32, falloff: f32) -> vec2<f32> {
+  let displaceA = noiseStack(pos, octaves, falloff);
+  let displaceB = noiseStack(pos + vec3<f32>(3984.293, 423.21, 5235.19), octaves, falloff);
+  return vec2<f32>(displaceA, displaceB);
+}
+
+@fragment
+fn main(@location(0) ndc: vec2<f32>) -> @location(0) vec4<f32> {
+  let time = u.time.x;
+  let sparkSize = u.params0.x;
+  let fireIntensity = u.params0.y;
+  let smokeIntensity = u.params0.z;
+
+  let resolution = u.resolution.xy;
+  let vUv = ndc * 0.5 + vec2<f32>(0.5, 0.5);
+  let fragCoord = vUv * resolution;
+
+  let xpart = fragCoord.x / resolution.x;
+  let ypart = fragCoord.y / resolution.y;
+
+  let clip = 210.0;
+  let ypartClip = fragCoord.y / clip;
+  let ypartClippedFalloff = clamp(2.0 - ypartClip, 0.0, 1.0);
+  let ypartClipped = min(ypartClip, 1.0);
+  let ypartClippedn = 1.0 - ypartClipped;
+
+  let xfuel = 1.0 - abs(2.0 * xpart - 1.0);
+
+  let timeSpeed = 0.5;
+  let realTime = timeSpeed * time;
+
+  let coordScaled = 0.01 * fragCoord;
+  let position = vec3<f32>(coordScaled, 0.0) + vec3<f32>(1223.0, 6434.0, 8425.0);
+  let flow = vec3<f32>(4.1 * (0.5 - xpart) * pow(ypartClippedn, 4.0), -2.0 * xfuel * pow(ypartClippedn, 64.0), 0.0);
+  let timing = realTime * vec3<f32>(0.0, -1.7, 1.1) + flow;
+
+  let displacePos = vec3<f32>(1.0, 0.5, 1.0) * 2.4 * position + realTime * vec3<f32>(0.01, -0.7, 1.3);
+  let displace3 = vec3<f32>(noiseStackUV(displacePos, 2, 0.4), 0.0);
+
+  let noiseCoord = (vec3<f32>(2.0, 1.0, 1.0) * position + timing + 0.4 * displace3) / 1.0;
+  let noise = noiseStack(noiseCoord, 3, 0.4);
+
+  let flames = pow(ypartClipped, 0.3 * xfuel) * pow(noise, 0.3 * xfuel);
+
+  let f = ypartClippedFalloff * pow(1.0 - flames * flames * flames, 8.0);
+  let fff = f * f * f;
+  var fire = 1.5 * vec3<f32>(f, fff, fff * fff) * fireIntensity;
+
+  let smokeNoise = 0.5 + snoise(0.4 * position + timing * vec3<f32>(1.0, 1.0, 0.2)) / 2.0;
+  let smoke = vec3<f32>(0.3 * pow(xfuel, 3.0) * pow(ypart, 2.0) * (smokeNoise + 0.4 * (1.0 - noise))) * smokeIntensity;
+
+  let sparkGridSize = 30.0;
+  var sparkCoord = fragCoord - vec2<f32>(0.0, 190.0 * realTime);
+  sparkCoord = sparkCoord - 30.0 * noiseStackUV(0.01 * vec3<f32>(sparkCoord, 30.0 * time), 1, 0.4);
+  sparkCoord = sparkCoord + 100.0 * flow.xy;
+
+  if (sparkCoord.y / sparkGridSize % 2.0 < 1.0) {
+    sparkCoord.x = sparkCoord.x + 0.5 * sparkGridSize;
+  }
+
+  let sparkGridIndex = vec2<f32>(floor(sparkCoord / sparkGridSize));
+  let sparkRandom = prng(sparkGridIndex);
+  let sparkLife = min(10.0 * (1.0 - min((sparkGridIndex.y + (190.0 * realTime / sparkGridSize)) / (24.0 - 20.0 * sparkRandom), 1.0)), 1.0);
+
+  var sparks = vec3<f32>(0.0);
+  if (sparkLife > 0.0) {
+    let sparkSizeScaled = xfuel * xfuel * sparkRandom * 0.08 * sparkSize;
+    let sparkRadians = 999.0 * sparkRandom * 2.0 * PI + 2.0 * time;
+    let sparkCircular = vec2<f32>(sin(sparkRadians), cos(sparkRadians));
+    let sparkOffset = (0.5 - sparkSizeScaled) * sparkGridSize * sparkCircular;
+    let sparkModulus = (sparkCoord + sparkOffset) % sparkGridSize - 0.5 * vec2<f32>(sparkGridSize);
+    let sparkLength = length(sparkModulus);
+    let sparksGray = max(0.0, 1.0 - sparkLength / (sparkSizeScaled * sparkGridSize));
+    sparks = sparkLife * sparksGray * vec3<f32>(1.0, 0.3, 0.0);
+  }
+
+  fire = fire * u.color0.rgb;
+
+  let finalColor = max(fire, sparks) + smoke;
+  return vec4<f32>(clamp(finalColor, vec3<f32>(0.0), vec3<f32>(1.0)), u.color0.a);
+}
+`;

package/src/components/CircularGradient.tsx

@@ -0,0 +1,76 @@
+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 at the center of the gradient. */
+  centerColor: ColorInput;
+  /** The color at the edge of the gradient. Default: transparent */
+  edgeColor?: ColorInput;
+  /** Horizontal center position (0-1). Default: 0.5 */
+  centerX?: number;
+  /** Vertical center position (0-1). Default: 0.5 */
+  centerY?: number;
+  /** Horizontal radius. Default: 0.5 */
+  sizeX?: number;
+  /** Vertical radius. Default: 0.5 */
+  sizeY?: number;
+};
+
+export default function CircularGradient({
+  centerColor,
+  edgeColor = 'rgba(0,0,0,0)',
+  centerX = 0.5,
+  centerY = 0.5,
+  sizeX = 0.5,
+  sizeY = 0.5,
+  ...viewProps
+}: Props) {
+  const colors = useMemo(
+    () => [centerColor, edgeColor],
+    [centerColor, edgeColor]
+  );
+  const params = useMemo(
+    () => [centerX, centerY, sizeX, sizeY],
+    [centerX, centerY, sizeX, sizeY]
+  );
+
+  return (
+    <ShaderView
+      fragmentShader={CIRCULAR_GRADIENT_SHADER}
+      colors={colors}
+      params={params}
+      isStatic={true}
+      {...viewProps}
+    />
+  );
+}
+
+const CIRCULAR_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 center = u.params0.xy;
+  let size = u.params0.zw;
+
+  let diff = uv - center;
+  let normalizedDiff = diff / size;
+  let dist = length(normalizedDiff);
+
+  let t = smoothstep(0.0, 1.0, dist);
+  let color = mix(u.color0, u.color1, t);
+  return color;
+}
+`;