react-native-ai-animations 0.0.0-stage → 0.8.0

package/src/skia/dot-orb.tsx

@@ -0,0 +1,248 @@
+import { Canvas, Path, Skia, type SkPath, useClock } from "@shopify/react-native-skia";
+import { useEffect, useMemo } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { Easing, useDerivedValue, useReducedMotion, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from "react-native-reanimated";
+import { useMotionPalette } from "../theme/provider";
+
+export type DotOrbVariant = "orbit" | "scan" | "constellation" | "helix";
+
+export type DotOrbProps = {
+  variant?: DotOrbVariant;
+  size?: number;
+  color?: string;
+  accent?: string;
+  speed?: number;
+  dotScale?: number;
+  paused?: boolean;
+  inset?: number;
+  scatter?: boolean | "loop";
+  style?: StyleProp<ViewStyle>;
+};
+
+type Frame = { back: SkPath; mid: SkPath; front: SkPath; accent: SkPath; lines: SkPath; linesOpacity: number };
+
+const TAU = Math.PI * 2;
+const STILL_TIME = 1800;
+const SCATTER_MS = 700;
+const LOOP_MOVE_MS = 900;
+const LOOP_GATHERED_MS = 1100;
+const LOOP_SCATTERED_MS = 400;
+
+function fibonacciSphere(count: number) {
+  const points: number[] = [];
+  const golden = Math.PI * (3 - Math.sqrt(5));
+  for (let index = 0; index < count; index += 1) {
+    const y = 1 - (index / (count - 1)) * 2;
+    const radius = Math.sqrt(1 - y * y);
+    const theta = golden * index;
+    points.push(Math.cos(theta) * radius, y, Math.sin(theta) * radius);
+  }
+  return points;
+}
+
+function buildEdges(points: number[], limit: number) {
+  const edges: number[] = [];
+  const count = points.length / 3;
+  for (let a = 0; a < count; a += 1) {
+    for (let b = a + 1; b < count; b += 1) {
+      const dx = points[a * 3] - points[b * 3];
+      const dy = points[a * 3 + 1] - points[b * 3 + 1];
+      const dz = points[a * 3 + 2] - points[b * 3 + 2];
+      if (dx * dx + dy * dy + dz * dz < limit * limit) edges.push(a, b);
+    }
+  }
+  const order: number[] = [];
+  const pairs = edges.length / 2;
+  for (let index = 0; index < pairs; index += 1) order.push(index);
+  for (let index = pairs - 1; index > 0; index -= 1) {
+    const swap = Math.floor((Math.sin(index * 12.9898) * 43758.5453 - Math.floor(Math.sin(index * 12.9898) * 43758.5453)) * (index + 1));
+    const temp = order[index];
+    order[index] = order[swap];
+    order[swap] = temp;
+  }
+  const shuffled: number[] = [];
+  order.forEach((pair) => shuffled.push(edges[pair * 2], edges[pair * 2 + 1]));
+  return shuffled;
+}
+
+function project(x: number, y: number, z: number, spin: number, tilt: number) {
+  "worklet";
+  const x1 = x * Math.cos(spin) + z * Math.sin(spin);
+  const z1 = -x * Math.sin(spin) + z * Math.cos(spin);
+  const y2 = y * Math.cos(tilt) - z1 * Math.sin(tilt);
+  const z2 = y * Math.sin(tilt) + z1 * Math.cos(tilt);
+  return [x1, y2, z2];
+}
+
+function smooth(value: number) {
+  "worklet";
+  const t = Math.min(1, Math.max(0, value));
+  return t * t * (3 - 2 * t);
+}
+
+export function DotOrb({
+  variant = "orbit",
+  size,
+  color,
+  accent,
+  speed = 1,
+  dotScale = 1,
+  paused = false,
+  inset = 0,
+  scatter = false,
+  style,
+}: DotOrbProps) {
+  const palette = useMotionPalette();
+  const reduceMotion = useReducedMotion();
+  const ink = color ?? palette.text;
+  const highlight = accent ?? palette.accent;
+  const clock = useClock();
+  const layout = useSharedValue({ width: size ?? 0, height: size ?? 0 });
+  const still = reduceMotion || paused;
+  const spread = useSharedValue(scatter === true ? 1 : 0);
+
+  useEffect(() => {
+    if (reduceMotion) {
+      spread.value = scatter === true ? 1 : 0;
+    } else if (scatter === "loop") {
+      const move = { duration: LOOP_MOVE_MS, easing: Easing.inOut(Easing.cubic) };
+      spread.value = withRepeat(withSequence(withDelay(LOOP_GATHERED_MS, withTiming(1, move)), withDelay(LOOP_SCATTERED_MS, withTiming(0, move))), -1);
+    } else {
+      spread.value = withTiming(scatter ? 1 : 0, { duration: SCATTER_MS, easing: Easing.out(Easing.cubic) });
+    }
+  }, [reduceMotion, scatter, spread]);
+
+  const sphere = useMemo(() => fibonacciSphere(variant === "constellation" ? 46 : 240), [variant]);
+  const edges = useMemo(() => (variant === "constellation" ? buildEdges(sphere, 0.6) : []), [sphere, variant]);
+
+  const frame = useDerivedValue<Frame>(() => {
+    const t = (still ? STILL_TIME : clock.value) * 0.001 * speed;
+    const width = layout.value.width;
+    const height = layout.value.height;
+    const cx = width / 2;
+    const cy = height / 2;
+    const pad = inset * width;
+    const radius = Math.min(width - pad * 2, height - pad * 2) * 0.4;
+    const s = spread.value;
+    let order = 0;
+    const dot = Math.max(0.6, radius * 0.045 * dotScale);
+    const back = Skia.Path.Make();
+    const mid = Skia.Path.Make();
+    const front = Skia.Path.Make();
+    const accentPath = Skia.Path.Make();
+    const lines = Skia.Path.Make();
+    let linesOpacity = 0;
+
+    const spot = (x: number, y: number) => {
+      const px = cx + x * radius;
+      const py = cy + y * radius;
+      order += 1;
+      if (s === 0) return [px, py];
+      const hx = Math.sin(order * 12.9898) * 43758.5453;
+      const hy = Math.sin(order * 78.233) * 43758.5453;
+      const tx = width * (0.06 + 0.88 * (hx - Math.floor(hx)));
+      const ty = height * (0.06 + 0.88 * (hy - Math.floor(hy)));
+      return [px + (tx - px) * s, py + (ty - py) * s];
+    };
+
+    const place = (x: number, y: number, z: number, scale: number) => {
+      const depth = (z + 1) / 2;
+      const r = dot * scale * (0.45 + 0.55 * depth);
+      const target = z < -0.3 ? back : z < 0.35 ? mid : front;
+      const at = spot(x, y);
+      target.addCircle(at[0], at[1], r);
+    };
+
+    if (variant === "orbit") {
+      const spin = t * 0.25;
+      const orbits = [
+        [0.35, 0.0, 0.9],
+        [1.15, 0.95, -0.7],
+        [-0.75, 2.2, 1.15],
+      ];
+      for (let o = 0; o < orbits.length; o += 1) {
+        const tiltX = orbits[o][0];
+        const rotZ = orbits[o][1];
+        const rate = orbits[o][2];
+        for (let p = 0; p < 13; p += 1) {
+          const theta = (p / 13) * TAU + Math.sin(p * 2.3 + o) * 0.25 + t * rate;
+          const bx = Math.cos(theta);
+          const bz = Math.sin(theta);
+          const y1 = -bz * Math.sin(tiltX);
+          const z1 = bz * Math.cos(tiltX);
+          const x2 = bx * Math.cos(rotZ) - y1 * Math.sin(rotZ);
+          const y2 = bx * Math.sin(rotZ) + y1 * Math.cos(rotZ);
+          const projected = project(x2, y2, z1, spin, 0.2);
+          place(projected[0], projected[1], projected[2], 1.15 + 0.35 * Math.sin(p * 1.7 + o));
+        }
+      }
+      for (let p = 0; p < 7; p += 1) {
+        const a = p * 0.9 + t * 0.6;
+        place(Math.cos(a) * 0.22, Math.sin(a * 1.3) * 0.22, Math.sin(a) * 0.5, 1.3);
+      }
+    } else if (variant === "scan") {
+      const spin = t * 0.35;
+      const sweep = -1.75 + ((t * 0.55) % 1) * 3.5;
+      for (let index = 0; index < sphere.length; index += 3) {
+        const projected = project(sphere[index], sphere[index + 1], sphere[index + 2], spin, 0.28);
+        const longitude = Math.atan2(projected[0], projected[2]);
+        const near = Math.abs(longitude - sweep);
+        if (projected[2] > 0 && near < 0.2) {
+          const at = spot(projected[0], projected[1]);
+          accentPath.addCircle(at[0], at[1], dot * 0.95 * (1.25 - near * 2));
+        } else {
+          place(projected[0], projected[1], projected[2], 0.62);
+        }
+      }
+    } else if (variant === "constellation") {
+      const spin = t * 0.22;
+      const cycle = (t % 6.5) / 6.5;
+      const grow = smooth(cycle / 0.6);
+      linesOpacity = (cycle < 0.85 ? 0.42 : 0.42 * (1 - smooth((cycle - 0.85) / 0.15))) * (1 - s);
+      const points: number[] = [];
+      for (let index = 0; index < sphere.length; index += 3) {
+        const projected = project(sphere[index], sphere[index + 1], sphere[index + 2], spin, 0.35);
+        points.push(projected[0], projected[1], projected[2]);
+        place(projected[0], projected[1], projected[2], 1.05);
+      }
+      const visible = Math.floor((edges.length / 2) * grow);
+      for (let pair = 0; pair < visible; pair += 1) {
+        const a = edges[pair * 2] * 3;
+        const b = edges[pair * 2 + 1] * 3;
+        lines.moveTo(cx + points[a] * radius, cy + points[a + 1] * radius);
+        lines.lineTo(cx + points[b] * radius, cy + points[b + 1] * radius);
+      }
+    } else if (variant === "helix") {
+      const spin = t * 0.2;
+      for (let strand = 0; strand < 3; strand += 1) {
+        for (let step = 0; step < 30; step += 1) {
+          const u = step / 29;
+          const y = Math.cos(Math.PI * u);
+          const ring = Math.sqrt(Math.max(0, 1 - y * y));
+          const longitude = (strand * TAU) / 3 + u * Math.PI * 2.4 + t * 1.1;
+          const projected = project(ring * Math.cos(longitude), y, ring * Math.sin(longitude), spin, 0.25);
+          place(projected[0], projected[1], projected[2], 0.85 + 0.6 * Math.sin(Math.PI * u));
+        }
+      }
+    }
+
+    return { back, mid, front, accent: accentPath, lines, linesOpacity };
+  });
+
+  const back = useDerivedValue(() => frame.value.back);
+  const mid = useDerivedValue(() => frame.value.mid);
+  const front = useDerivedValue(() => frame.value.front);
+  const accentLayer = useDerivedValue(() => frame.value.accent);
+  const lines = useDerivedValue(() => frame.value.lines);
+  const linesOpacity = useDerivedValue(() => frame.value.linesOpacity);
+
+  return (
+    <Canvas onSize={layout} style={[size !== undefined ? { width: size, height: size } : { flex: 1, alignSelf: "stretch" }, style]}>
+      {variant === "constellation" ? <Path path={lines} style="stroke" strokeWidth={1} color={ink} opacity={linesOpacity} /> : null}
+      <Path path={back} color={ink} opacity={0.25} />
+      <Path path={mid} color={ink} opacity={0.55} />
+      <Path path={front} color={ink} opacity={0.95} />
+      {variant === "scan" ? <Path path={accentLayer} color={highlight} /> : null}
+    </Canvas>
+  );
+}

package/src/skia/index.ts

@@ -0,0 +1,34 @@
+export { DotOrb, type DotOrbProps, type DotOrbVariant } from "./dot-orb";
+export { MatrixOrb, type MatrixOrbProps, type MatrixOrbState } from "./matrix-orb";
+export {
+  ImageGenerating,
+  MEDIA_GENERATING_SIZES,
+  MediaGenerating,
+  MediaGeneratingBlobs,
+  MediaGeneratingConstellation,
+  MediaGeneratingHelix,
+  MediaGeneratingMatrix,
+  MediaGeneratingOrbit,
+  MediaGeneratingScan,
+  VideoGenerating,
+  type ImageGeneratingProps,
+  type MediaGeneratingChrome,
+  type MediaGeneratingLabels,
+  type MediaGeneratingProps,
+  type MediaGeneratingSize,
+  type MediaGeneratingStyleProps,
+  type MediaGeneratingStatus,
+  type MediaGeneratingVariant,
+  type VideoGeneratingProps,
+} from "./media-generating";
+export {
+  VoiceWave,
+  VoiceWaveBars,
+  VoiceWaveDots,
+  VoiceWaveLines,
+  VoiceWavePulse,
+  type VoiceWaveProps,
+  type VoiceWaveStyleProps,
+  type VoiceWaveVariant,
+} from "./voice-wave";
+export { LiquidOrb, type LiquidOrbMaterial, type LiquidOrbProps, type LiquidOrbState } from "./liquid-orb";

package/src/skia/liquid-orb.tsx

@@ -0,0 +1,274 @@
+import { Blur, Canvas, Fill, Group, Oval, Paint, Path, Shader, Skia } from "@shopify/react-native-skia";
+import { useEffect, useMemo } from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import {
+  type SharedValue,
+  useDerivedValue,
+  useFrameCallback,
+  useReducedMotion,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { useMotionPalette } from "../theme/provider";
+
+export type LiquidOrbMaterial = "metal" | "water" | "iridescent" | "ring";
+
+export type LiquidOrbState = "idle" | "listening" | "thinking" | "speaking";
+
+export type LiquidOrbProps = {
+  material?: LiquidOrbMaterial;
+  state?: LiquidOrbState;
+  level?: SharedValue<number>;
+  size?: number;
+  speed?: number;
+  wobble?: number;
+  distortion?: number;
+  detail?: number;
+  tint?: string;
+  colors?: [string, string, string];
+  shadow?: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+
+const MATERIALS: Record<LiquidOrbMaterial, number> = { metal: 0, water: 1, iridescent: 2, ring: 1 };
+const DEFAULT_TINTS: Record<LiquidOrbMaterial, string> = { metal: "#B8C0CC", water: "#6FA8E8", iridescent: "#F2E9FF", ring: "#3FA9F5" };
+const RING_LAYERS = [
+  { lobes: 3, speed: 2.1, phase: 0, amplitude: 1, opacity: 1, stroke: 2 },
+  { lobes: 5, speed: -1.6, phase: 1.7, amplitude: 0.7, opacity: 0.6, stroke: 1.5 },
+  { lobes: 4, speed: 1.2, phase: 3.1, amplitude: 0.5, opacity: 0.4, stroke: 1.5 },
+];
+const STATE_MOTION: Record<LiquidOrbState, { speed: number; wobble: number; scale: number; distortion: number }> = {
+  idle: { speed: 0.6, wobble: 0.7, scale: 0.94, distortion: 0.8 },
+  listening: { speed: 1, wobble: 1, scale: 1, distortion: 1 },
+  thinking: { speed: 2.2, wobble: 0.45, scale: 0.86, distortion: 1.5 },
+  speaking: { speed: 1.2, wobble: 1.2, scale: 1.02, distortion: 1.1 },
+};
+
+const ORB = Skia.RuntimeEffect.Make(`
+uniform float2 resolution;
+uniform float time;
+uniform float level;
+uniform float wobble;
+uniform float distortion;
+uniform float detail;
+uniform float material;
+uniform float scale;
+uniform float3 tint;
+
+float hash(float2 p) {
+  return fract(sin(dot(p, float2(127.1, 311.7))) * 43758.5453);
+}
+
+float noise(float2 p) {
+  float2 i = floor(p);
+  float2 f = fract(p);
+  float2 u = f * f * (3.0 - 2.0 * f);
+  return mix(mix(hash(i), hash(i + float2(1.0, 0.0)), u.x), mix(hash(i + float2(0.0, 1.0)), hash(i + float2(1.0, 1.0)), u.x), u.y);
+}
+
+float fbm(float2 p) {
+  float v = 0.0;
+  float a = 0.5;
+  for (int k = 0; k < 4; k++) {
+    v += a * noise(p);
+    p = p * 2.03 + float2(1.7, 9.2);
+    a *= 0.5;
+  }
+  return v;
+}
+
+half4 main(float2 xy) {
+  float2 c = resolution * 0.5;
+  float R = min(resolution.x, resolution.y) * 0.34 * scale;
+  float2 p = (xy - c) / R;
+  float ang = atan(p.y, p.x);
+  float t = time;
+  float w = wobble * (0.06 * sin(3.0 * ang + t * 1.3) + 0.04 * sin(5.0 * ang - t * 0.9) + 0.03 * sin(2.0 * ang + t * 0.6));
+  w += level * (0.07 * sin(4.0 * ang + t * 3.1) + 0.05 * sin(7.0 * ang - t * 2.3) + 0.06);
+  float rad = 1.0 + w;
+  float d = length(p) - rad;
+  float aa = 1.5 / R;
+  float mask = 1.0 - smoothstep(-aa, aa, d);
+
+  float2 q = p / rad;
+  float z = sqrt(max(0.0, 1.0 - dot(q, q)));
+  float3 n = normalize(float3(q, z));
+  float2 wp = q * detail * 1.6 + float2(t * 0.25, -t * 0.18);
+  float warp = fbm(wp + fbm(wp + t * 0.15) * 1.5);
+  n = normalize(n + distortion * float3(warp - 0.5, fbm(wp * 1.3 + 3.1) - 0.5, 0.0) * 1.4);
+
+  float3 v = float3(0.0, 0.0, 1.0);
+  float fres = pow(1.0 - max(0.0, n.z), 2.5);
+  float3 L = normalize(float3(-0.45, -0.6, 0.7));
+  float spec = pow(max(0.0, dot(reflect(-L, n), v)), 48.0);
+  float3 col = float3(0.0);
+  float alpha = 0.0;
+
+  if (material < 0.5) {
+    float3 rv = reflect(-v, n);
+    float band = rv.y + 0.35 * fbm(rv.xy * 2.5 + t * 0.2);
+    float env = smoothstep(-0.06, 0.06, band) * 0.85 + 0.1;
+    float stripes = 0.5 + 0.5 * sin(rv.x * 7.0 + warp * 6.0);
+    col = mix(float3(0.05, 0.05, 0.06), float3(0.93, 0.93, 0.96), env * 0.7 + stripes * 0.3);
+    col = mix(col, tint, 0.12) + spec * 0.9 + fres * 0.15;
+    alpha = 1.0;
+  } else if (material < 1.5) {
+    float3 deep = tint * 0.5;
+    float3 shallow = mix(tint, float3(1.0), 0.55);
+    col = mix(shallow, deep, z * 0.75);
+    float sparkle = smoothstep(0.6, 0.76, fbm(q * detail * 4.0 + t * 0.6));
+    col += sparkle * 0.4 + fres * float3(0.7, 0.9, 1.0) * 0.85 + spec;
+    alpha = 0.8 + fres * 0.2;
+  } else {
+    float th = fres * 1.6 + warp * 0.9 + t * 0.05;
+    float3 film = 0.5 + 0.5 * cos(6.2831 * (th + float3(0.0, 0.33, 0.67)));
+    col = mix(float3(0.97), film, 0.55 * fres + 0.25);
+    col = mix(col, tint, 0.1) + spec * 1.2;
+    alpha = 0.16 + fres * 0.78 + spec;
+  }
+
+  alpha = clamp(alpha, 0.0, 1.0) * mask;
+  float glow = (material > 0.5 && material < 1.5) ? exp(-max(d, 0.0) * 8.0) * (0.35 + level * 0.3) * (1.0 - mask) : 0.0;
+  float3 rgb = col * alpha + tint * glow;
+  return half4(half3(rgb), half(alpha + glow));
+}
+`);
+
+type RingLayerProps = {
+  index: number;
+  size: number;
+  time: SharedValue<number>;
+  level: SharedValue<number>;
+  scale: SharedValue<number>;
+  still: boolean;
+  color: string;
+};
+
+function RingLayer({ index, size, time, level, scale, still, color }: RingLayerProps) {
+  const layer = RING_LAYERS[index];
+  const path = useDerivedValue(() => {
+    const center = size / 2;
+    const base = size * 0.3 * scale.value;
+    const amp = size * 0.14 * layer.amplitude * (0.12 + level.value * 0.88);
+    const t = (still ? 2.4 : time.value) * layer.speed + layer.phase;
+    const next = Skia.Path.Make();
+    for (let step = 0; step <= 96; step += 1) {
+      const theta = (step / 96) * Math.PI * 2;
+      const r = base + amp * Math.sin(layer.lobes * theta + t) * Math.cos(2 * theta - t * 0.7);
+      const x = center + Math.cos(theta) * r;
+      const y = center + Math.sin(theta) * r;
+      if (step === 0) next.moveTo(x, y);
+      else next.lineTo(x, y);
+    }
+    next.close();
+    return next;
+  }, [size, still]);
+  return <Path path={path} style="stroke" strokeWidth={layer.stroke * (size / 120)} strokeJoin="round" color={color} opacity={layer.opacity} />;
+}
+
+export function LiquidOrb({
+  material = "water",
+  state = "idle",
+  level,
+  size = 200,
+  speed = 1,
+  wobble = 0.6,
+  distortion = 0.5,
+  detail = 1,
+  tint,
+  colors,
+  shadow = true,
+  style,
+}: LiquidOrbProps) {
+  const palette = useMotionPalette();
+  const reduceMotion = useReducedMotion();
+  const color = tint ?? DEFAULT_TINTS[material];
+  const rgb = useMemo(() => {
+    const parsed = Skia.Color(color);
+    return [parsed[0], parsed[1], parsed[2]];
+  }, [color]);
+  const motion = STATE_MOTION[state];
+  const time = useSharedValue(0);
+  const smooth = useSharedValue(0);
+  const rate = useSharedValue(motion.speed * speed);
+  const shape = useSharedValue(motion.scale);
+  const wob = useSharedValue(motion.wobble * wobble);
+  const dist = useSharedValue(motion.distortion * distortion);
+  const fallback = useSharedValue(0);
+  const input = level ?? fallback;
+  const listensToLevel = state === "listening" || state === "speaking";
+
+  useEffect(() => {
+    const config = { damping: 18, stiffness: 120, mass: 1 };
+    rate.value = withSpring(motion.speed * speed, config);
+    shape.value = reduceMotion ? motion.scale : withSpring(motion.scale, config);
+    wob.value = withSpring(motion.wobble * wobble, config);
+    dist.value = withSpring(motion.distortion * distortion, config);
+  }, [dist, distortion, motion, rate, reduceMotion, shape, speed, wob, wobble]);
+
+  useFrameCallback((info) => {
+    const delta = Math.min(0.05, (info.timeSincePreviousFrame ?? 16) / 1000);
+    time.value += delta * rate.value;
+    const target = listensToLevel ? Math.min(1, Math.max(0, input.value)) : state === "thinking" ? 0.15 + 0.1 * Math.sin(time.value * 3) : 0;
+    smooth.value += (target - smooth.value) * Math.min(1, delta * 9);
+  }, !reduceMotion);
+
+  const uniforms = useDerivedValue(() => ({
+    resolution: [size, size],
+    time: reduceMotion ? 2.4 : time.value,
+    level: smooth.value,
+    wobble: wob.value,
+    distortion: dist.value,
+    detail,
+    material: MATERIALS[material],
+    scale: shape.value,
+    tint: rgb,
+  }), [detail, material, rgb, size, reduceMotion]);
+
+  const shadowWidth = useDerivedValue(() => size * 0.5 * shape.value * (1 + smooth.value * 0.08));
+  const shadowX = useDerivedValue(() => (size - shadowWidth.value) / 2);
+  const shadowOpacity = material === "iridescent" ? 0.1 : material === "water" ? 0.16 : 0.22;
+  const ring = material === "ring";
+  const hasShadow = shadow && !ring;
+  const ringColors = colors ?? [color, color, color];
+
+  if (!ORB) return null;
+
+  return (
+    <View style={[{ width: size, height: size * (hasShadow ? 1.12 : 1) }, style]}>
+      <Canvas style={{ width: size, height: size * (hasShadow ? 1.12 : 1) }}>
+        {hasShadow ? (
+          <Group
+            layer={
+              <Paint>
+                <Blur blur={size * 0.05} />
+              </Paint>
+            }
+          >
+            <Oval x={shadowX} y={size * 0.98} width={shadowWidth} height={size * 0.07} color={palette.text} opacity={shadowOpacity} />
+          </Group>
+        ) : null}
+        {ring ? (
+          RING_LAYERS.map((_, index) => (
+            <RingLayer
+              key={index}
+              index={index}
+              size={size}
+              time={time}
+              level={smooth}
+              scale={shape}
+              still={reduceMotion}
+              color={ringColors[index]}
+            />
+          ))
+        ) : (
+          <Group clip={Skia.XYWHRect(0, 0, size, size)}>
+            <Fill>
+              <Shader source={ORB} uniforms={uniforms} />
+            </Fill>
+          </Group>
+        )}
+      </Canvas>
+    </View>
+  );
+}