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

package/src/skia/media-generating.tsx

@@ -0,0 +1,389 @@
+import {
+  Blur,
+  Canvas,
+  Circle,
+  FractalNoise,
+  Group,
+  LinearGradient,
+  Paint,
+  Rect,
+  useClock,
+  vec,
+} from "@shopify/react-native-skia";
+import { useEffect, useState, type ReactNode } from "react";
+import {
+  type DimensionValue,
+  type LayoutChangeEvent,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import Animated, {
+  cancelAnimation,
+  Easing,
+  FadeIn,
+  LinearTransition,
+  type SharedValue,
+  useAnimatedStyle,
+  useDerivedValue,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+import { withAlpha } from "../internal/color";
+import { formatElapsed, useElapsed } from "../internal/use-elapsed";
+import { ShimmerText } from "../text/shimmer-text";
+import { moodstoneSwatches, type MotionPalette } from "../theme/palette";
+import { useMotionPalette } from "../theme/provider";
+import { DotOrb, type DotOrbVariant } from "./dot-orb";
+import { MatrixOrb } from "./matrix-orb";
+
+const EASE_IN_OUT = Easing.inOut(Easing.quad);
+const HEADER_TEXT: TextStyle = { fontSize: 14, lineHeight: 20, fontWeight: "500" };
+const CHIP_TEXT: TextStyle = { fontSize: 13, lineHeight: 18, fontWeight: "600" };
+const DEFAULT_BLOBS = [moodstoneSwatches.lilac, moodstoneSwatches.sky, moodstoneSwatches.blossom];
+const SWEEP_MS = 1400;
+const BAND = 0.6;
+const TRACK = 2;
+const SEGMENT = 0.28;
+const ORBITS = [
+  { x: 0.3, y: 0.35, rx: 0.22, ry: 0.18, speed: 0.00042, phase: 0 },
+  { x: 0.68, y: 0.6, rx: 0.2, ry: 0.24, speed: -0.00035, phase: 2.1 },
+  { x: 0.45, y: 0.75, rx: 0.26, ry: 0.14, speed: 0.00028, phase: 4.2 },
+];
+
+export type MediaGeneratingVariant = "blobs" | "matrix" | DotOrbVariant;
+
+export type MediaGeneratingStatus = "queued" | "generating";
+
+export type MediaGeneratingLabels = Record<MediaGeneratingStatus, string>;
+
+export type MediaGeneratingChrome = "header" | "overlay" | "none";
+
+export type MediaGeneratingSize = "1024x1024" | "1024x1536" | "1536x1024";
+
+export const MEDIA_GENERATING_SIZES: Record<MediaGeneratingSize, { width: number; height: number }> = {
+  "1024x1024": { width: 1024, height: 1024 },
+  "1024x1536": { width: 1024, height: 1536 },
+  "1536x1024": { width: 1536, height: 1024 },
+};
+
+export type MediaGeneratingProps = {
+  variant?: MediaGeneratingVariant;
+  chrome?: MediaGeneratingChrome;
+  label?: string;
+  status?: MediaGeneratingStatus;
+  labels?: Partial<MediaGeneratingLabels>;
+  progress?: number;
+  meta?: string;
+  startedAt?: number;
+  showTimer?: boolean;
+  formatTimer?: (seconds: number) => string;
+  size?: MediaGeneratingSize;
+  aspectRatio?: number;
+  width?: DimensionValue;
+  maxHeight?: number;
+  radius?: number;
+  dotColor?: string;
+  accentColor?: string;
+  blobColors?: string[];
+  grain?: boolean;
+  sweep?: boolean;
+  dots?: number;
+  scatter?: boolean | "loop";
+  cover?: ReactNode;
+  icon?: ReactNode;
+  textStyle?: StyleProp<TextStyle>;
+  colors?: Partial<MotionPalette>;
+  style?: StyleProp<ViewStyle>;
+};
+
+const DEFAULT_LABELS: MediaGeneratingLabels = { queued: "Queued", generating: "Generating" };
+
+export function MediaGenerating({
+  variant = "blobs",
+  chrome = "header",
+  label,
+  status,
+  labels,
+  progress,
+  meta,
+  startedAt,
+  showTimer = true,
+  formatTimer = formatElapsed,
+  size = "1024x1024",
+  aspectRatio,
+  width = "100%",
+  maxHeight = 360,
+  radius = 16,
+  dotColor,
+  accentColor,
+  blobColors = DEFAULT_BLOBS,
+  grain = true,
+  sweep,
+  dots = 14,
+  scatter = false,
+  cover,
+  icon,
+  textStyle,
+  colors,
+  style,
+}: MediaGeneratingProps) {
+  const palette = useMotionPalette(colors);
+  const reduceMotion = useReducedMotion();
+  const seconds = useElapsed(startedAt, true);
+  const copy = { ...DEFAULT_LABELS, ...labels };
+  const title = status ? copy[status] : (label ?? copy.generating);
+  const headline = chrome === "header" && label && status ? label : title;
+  const percent = progress === undefined ? undefined : Math.round(Math.min(1, Math.max(0, progress)) * 100);
+  const chip = withAlpha(palette.background, 0.72);
+  const showSweep = sweep ?? variant === "blobs";
+  const timer = showTimer && startedAt !== undefined ? formatTimer(seconds) : null;
+  const dimensions = MEDIA_GENERATING_SIZES[size] ?? MEDIA_GENERATING_SIZES["1024x1024"];
+  const ratio = aspectRatio ?? dimensions.width / dimensions.height;
+
+  const field = cover ?? (
+    variant === "blobs" ? (
+      <BlobField colors={blobColors} grain={grain} sweep={showSweep && !reduceMotion} sweepColor={palette.text} still={reduceMotion} />
+    ) : variant === "matrix" ? (
+      <MatrixOrb cover dots={dots} color={dotColor ?? palette.accent} state={status === "queued" ? "idle" : "thinking"} />
+    ) : (
+      <DotOrb variant={variant} color={dotColor ?? palette.text} accent={accentColor ?? palette.accent} inset={0.09} scatter={scatter} />
+    )
+  );
+
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={percent === undefined ? headline : `${headline} ${percent}%`}
+      accessibilityValue={percent === undefined ? undefined : { min: 0, max: 100, now: percent }}
+      style={[{ width, gap: 10 }, style]}
+    >
+      {chrome === "header" ? (
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          {icon}
+          {reduceMotion ? (
+            <Text style={[HEADER_TEXT, textStyle, { color: palette.textSecondary }]}>{headline}</Text>
+          ) : (
+            <ShimmerText text={headline} activeColor={palette.text} mutedColor={palette.textTertiary} textStyle={[HEADER_TEXT, textStyle]} />
+          )}
+          {timer ? <Text style={[HEADER_TEXT, textStyle, { color: palette.textTertiary, fontVariant: ["tabular-nums"] }]}>{timer}</Text> : null}
+        </View>
+      ) : null}
+      <View
+        style={{
+          width: "100%",
+          aspectRatio: ratio,
+          maxWidth: maxHeight * ratio,
+          maxHeight,
+          borderRadius: radius,
+          borderCurve: "continuous",
+          overflow: "hidden",
+        }}
+      >
+        <View style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}>{field}</View>
+        {chrome === "overlay" ? (
+          <View style={{ position: "absolute", top: 12, left: 12, right: 12, flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <Animated.View
+              layout={reduceMotion ? undefined : LinearTransition.duration(260).easing(EASE_IN_OUT)}
+              style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingHorizontal: 10, height: 26, borderRadius: 13, backgroundColor: chip }}
+            >
+              {icon}
+              <PulseLabel key={title} text={title} animate={!reduceMotion} textStyle={[CHIP_TEXT, textStyle, { color: palette.text }]} />
+              {timer ? <Text style={[CHIP_TEXT, textStyle, { color: palette.textSecondary, fontVariant: ["tabular-nums"] }]}>{timer}</Text> : null}
+            </Animated.View>
+            <View style={{ flex: 1 }} />
+            {percent !== undefined ? (
+              <Animated.View
+                entering={reduceMotion ? undefined : FadeIn.duration(260).easing(EASE_IN_OUT)}
+                style={{ paddingHorizontal: 10, height: 26, borderRadius: 13, justifyContent: "center", backgroundColor: chip }}
+              >
+                <Text style={[CHIP_TEXT, textStyle, { color: palette.text, fontVariant: ["tabular-nums"] }]}>{`${percent}%`}</Text>
+              </Animated.View>
+            ) : null}
+          </View>
+        ) : null}
+        {meta ? (
+          <View style={{ position: "absolute", left: 12, bottom: 14, paddingHorizontal: 10, height: 24, borderRadius: 12, justifyContent: "center", backgroundColor: chip }}>
+            <Text style={[CHIP_TEXT, textStyle, { color: palette.textSecondary }]}>{meta}</Text>
+          </View>
+        ) : null}
+        <ProgressTrack
+          progress={progress}
+          active={status === "generating" || (chrome === "overlay" && status === undefined)}
+          animate={!reduceMotion}
+          color={palette.accent}
+          track={withAlpha(palette.text, 0.12)}
+        />
+      </View>
+    </View>
+  );
+}
+
+export type ImageGeneratingProps = Omit<MediaGeneratingProps, "chrome"> & { header?: boolean };
+
+export function ImageGenerating({ header = true, label = "Creating image", width = "88%", ...props }: ImageGeneratingProps) {
+  return <MediaGenerating chrome={header ? "header" : "none"} label={label} width={width} {...props} />;
+}
+
+export type VideoGeneratingProps = Omit<MediaGeneratingProps, "status"> & { status: MediaGeneratingStatus };
+
+export function VideoGenerating({ variant = "matrix", chrome = "overlay", size, aspectRatio = size ? undefined : 16 / 9, ...props }: VideoGeneratingProps) {
+  return <MediaGenerating variant={variant} chrome={chrome} size={size} aspectRatio={aspectRatio} {...props} />;
+}
+
+type BlobFieldProps = { colors: string[]; grain: boolean; sweep: boolean; sweepColor: string; still: boolean };
+
+function BlobField({ colors, grain, sweep, sweepColor, still }: BlobFieldProps) {
+  const size = useSharedValue({ width: 0, height: 0 });
+  const clock = useClock();
+  const time = useDerivedValue(() => (still ? 0 : clock.value), [still]);
+  const canvasWidth = useDerivedValue(() => size.value.width);
+  const canvasHeight = useDerivedValue(() => size.value.height);
+  return (
+    <Canvas onSize={size} style={{ flex: 1 }}>
+      <Group
+        layer={
+          <Paint>
+            <Blur blur={36} />
+          </Paint>
+        }
+      >
+        {colors.slice(0, ORBITS.length).map((color, index) => (
+          <Blob key={index} index={index} color={withAlpha(color, 0.55)} size={size} time={time} />
+        ))}
+      </Group>
+      {grain ? (
+        <Rect x={0} y={0} width={canvasWidth} height={canvasHeight} opacity={0.07}>
+          <FractalNoise freqX={0.9} freqY={0.9} octaves={3} />
+        </Rect>
+      ) : null}
+      {sweep ? <SweepBand size={size} time={time} color={sweepColor} /> : null}
+    </Canvas>
+  );
+}
+
+type SizeValue = SharedValue<{ width: number; height: number }>;
+
+function Blob({ index, color, size, time }: { index: number; color: string; size: SizeValue; time: SharedValue<number> }) {
+  const orbit = ORBITS[index];
+  const cx = useDerivedValue(() => size.value.width * (orbit.x + orbit.rx * Math.sin(time.value * orbit.speed + orbit.phase)));
+  const cy = useDerivedValue(() => size.value.height * (orbit.y + orbit.ry * Math.cos(time.value * orbit.speed * 1.3 + orbit.phase)));
+  const r = useDerivedValue(() => Math.min(size.value.width, size.value.height) * (0.34 + 0.04 * Math.sin(time.value * 0.0009 + orbit.phase)));
+  return <Circle cx={cx} cy={cy} r={r} color={color} />;
+}
+
+function SweepBand({ size, time, color }: { size: SizeValue; time: SharedValue<number>; color: string }) {
+  const start = useDerivedValue(() => {
+    const progress = (time.value % SWEEP_MS) / SWEEP_MS;
+    const w = size.value.width;
+    return vec(-w * BAND + progress * w * (1 + BAND), 0);
+  });
+  const end = useDerivedValue(() => vec(start.value.x + size.value.width * BAND, 0));
+  const w = useDerivedValue(() => size.value.width);
+  const h = useDerivedValue(() => size.value.height);
+  return (
+    <Rect x={0} y={0} width={w} height={h}>
+      <LinearGradient start={start} end={end} colors={[withAlpha(color, 0), withAlpha(color, 0.1), withAlpha(color, 0)]} />
+    </Rect>
+  );
+}
+
+function PulseLabel({ text, animate, textStyle }: { text: string; animate: boolean; textStyle: StyleProp<TextStyle> }) {
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    if (!animate) return;
+    const curve = Easing.inOut(Easing.ease);
+    opacity.value = withRepeat(
+      withSequence(withTiming(0.45, { duration: 800, easing: curve }), withTiming(1, { duration: 800, easing: curve })),
+      -1,
+      false,
+    );
+    return () => cancelAnimation(opacity);
+  }, [animate, opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+
+  return (
+    <Animated.View entering={animate ? FadeIn.duration(260).easing(EASE_IN_OUT) : undefined}>
+      <Animated.Text style={[textStyle, animatedStyle]}>{text}</Animated.Text>
+    </Animated.View>
+  );
+}
+
+type ProgressTrackProps = { progress?: number; active: boolean; animate: boolean; color: string; track: string };
+
+function ProgressTrack({ progress, active, animate, color, track }: ProgressTrackProps) {
+  const [trackWidth, setTrackWidth] = useState(0);
+  const fill = useSharedValue(progress ?? 0);
+  const sweep = useSharedValue(0);
+  const determinate = progress !== undefined;
+
+  useEffect(() => {
+    if (!determinate) return;
+    const target = Math.min(1, Math.max(0, progress ?? 0));
+    fill.value = animate ? withTiming(target, { duration: 420, easing: Easing.out(Easing.cubic) }) : target;
+  }, [animate, determinate, fill, progress]);
+
+  useEffect(() => {
+    if (determinate || !active || !animate) {
+      cancelAnimation(sweep);
+      return;
+    }
+    sweep.value = 0;
+    sweep.value = withRepeat(withTiming(1, { duration: 1600, easing: Easing.inOut(Easing.cubic) }), -1, false);
+    return () => cancelAnimation(sweep);
+  }, [active, animate, determinate, sweep]);
+
+  const fillStyle = useAnimatedStyle(() => {
+    if (determinate) return { width: trackWidth * fill.value, transform: [{ translateX: 0 }] };
+    const segment = trackWidth * SEGMENT;
+    return { width: segment, transform: [{ translateX: -segment + sweep.value * (trackWidth + segment) }] };
+  });
+
+  const handleLayout = (event: LayoutChangeEvent) => setTrackWidth(event.nativeEvent.layout.width);
+
+  if (!active && !determinate) return null;
+
+  return (
+    <Animated.View
+      entering={animate ? FadeIn.duration(260).easing(EASE_IN_OUT) : undefined}
+      onLayout={handleLayout}
+      style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: TRACK, backgroundColor: track, overflow: "hidden" }}
+    >
+      <Animated.View style={[{ height: TRACK, backgroundColor: color, borderRadius: TRACK / 2 }, fillStyle]} />
+    </Animated.View>
+  );
+}
+
+export type MediaGeneratingStyleProps = Omit<MediaGeneratingProps, "variant">;
+
+export function MediaGeneratingBlobs(props: MediaGeneratingStyleProps) {
+  return <MediaGenerating {...props} variant="blobs" />;
+}
+
+export function MediaGeneratingMatrix(props: MediaGeneratingStyleProps) {
+  return <MediaGenerating {...props} variant="matrix" />;
+}
+
+export function MediaGeneratingOrbit(props: MediaGeneratingStyleProps) {
+  return <MediaGenerating {...props} variant="orbit" />;
+}
+
+export function MediaGeneratingScan(props: MediaGeneratingStyleProps) {
+  return <MediaGenerating {...props} variant="scan" />;
+}
+
+export function MediaGeneratingConstellation(props: MediaGeneratingStyleProps) {
+  return <MediaGenerating {...props} variant="constellation" />;
+}
+
+export function MediaGeneratingHelix(props: MediaGeneratingStyleProps) {
+  return <MediaGenerating {...props} variant="helix" />;
+}

package/src/skia/voice-wave.tsx

@@ -0,0 +1,215 @@
+import { Canvas, LinearGradient, Path, Skia, useClock, vec } from "@shopify/react-native-skia";
+import { useState } from "react";
+import { View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from "react-native";
+import { type SharedValue, useDerivedValue, useFrameCallback, useReducedMotion, useSharedValue } from "react-native-reanimated";
+
+const DEFAULT_HEIGHT = 32;
+const SAMPLE_STEP = 2;
+const MIN_AMPLITUDE = 1.5;
+const EDGE_PADDING = 2;
+const HISTORY = 96;
+const PUSH_MS = 70;
+
+type WaveLayer = {
+  frequency: number;
+  speed: number;
+  phase: number;
+  amplitude: number;
+  strokeWidth: number;
+  opacity: number;
+};
+
+const LAYERS: WaveLayer[] = [
+  { frequency: 1.1, speed: 0.0024, phase: 2.6, amplitude: 0.55, strokeWidth: 1.5, opacity: 0.45 },
+  { frequency: 2.3, speed: -0.0031, phase: 1.4, amplitude: 0.75, strokeWidth: 1.5, opacity: 0.6 },
+  { frequency: 1.6, speed: 0.0042, phase: 0, amplitude: 1, strokeWidth: 2, opacity: 1 },
+];
+
+export type VoiceWaveVariant = "lines" | "bars" | "dots" | "pulse";
+
+export type VoiceWaveProps = {
+  level: SharedValue<number>;
+  colors: [string, string, string];
+  variant?: VoiceWaveVariant;
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+type LayerProps = {
+  layer: WaveLayer;
+  width: number;
+  height: number;
+  level: SharedValue<number>;
+  clock: SharedValue<number>;
+  color: string;
+};
+
+function WaveLayerPath({ layer, width, height, level, clock, color }: LayerProps) {
+  const path = useDerivedValue(() => {
+    const middle = height / 2;
+    const reach = middle - EDGE_PADDING;
+    const amplitude = (MIN_AMPLITUDE + level.value * (reach - MIN_AMPLITUDE)) * layer.amplitude;
+    const offset = clock.value * layer.speed + layer.phase;
+    const next = Skia.Path.Make();
+    for (let x = 0; x <= width; x += SAMPLE_STEP) {
+      const progress = x / width;
+      const envelope = Math.sin(Math.PI * progress);
+      const y = middle + amplitude * envelope * Math.sin(2 * Math.PI * layer.frequency * progress + offset);
+      if (x === 0) next.moveTo(x, y);
+      else next.lineTo(x, y);
+    }
+    return next;
+  });
+
+  return <Path path={path} style="stroke" strokeWidth={layer.strokeWidth} strokeCap="round" strokeJoin="round" color={color} opacity={layer.opacity} />;
+}
+
+function Lines({ width, height, level, clock, colors }: Omit<LayerProps, "layer" | "color"> & { colors: string[] }) {
+  return (
+    <>
+      {LAYERS.map((layer, index) => (
+        <WaveLayerPath key={index} layer={layer} width={width} height={height} level={level} clock={clock} color={colors[index]} />
+      ))}
+    </>
+  );
+}
+
+type FieldProps = { width: number; height: number; level: SharedValue<number>; clock: SharedValue<number>; colors: string[]; still: boolean };
+
+function Bars({ width, height, level, colors, still }: FieldProps) {
+  const history = useSharedValue<number[]>(new Array(HISTORY).fill(0));
+  const last = useSharedValue(0);
+  const smooth = useSharedValue(0);
+
+  useFrameCallback((info) => {
+    smooth.value += (level.value - smooth.value) * 0.35;
+    if (info.timestamp - last.value < PUSH_MS) return;
+    last.value = info.timestamp;
+    const next = history.value.slice(1);
+    next.push(smooth.value);
+    history.value = next;
+  }, !still);
+
+  const path = useDerivedValue(() => {
+    const bar = 3;
+    const gap = 3;
+    const count = Math.min(HISTORY, Math.floor((width + gap) / (bar + gap)));
+    const middle = height / 2;
+    const samples = still ? new Array(HISTORY).fill(level.value) : history.value;
+    const next = Skia.Path.Make();
+    for (let index = 0; index < count; index += 1) {
+      const sample = samples[HISTORY - count + index] ?? 0;
+      const h = Math.max(bar, sample * (height - 4));
+      const x = width - (count - index) * (bar + gap) + gap;
+      next.addRRect(Skia.RRectXY(Skia.XYWHRect(x, middle - h / 2, bar, h), bar / 2, bar / 2));
+    }
+    return next;
+  });
+
+  return (
+    <Path path={path}>
+      <LinearGradient start={vec(0, 0)} end={vec(width, 0)} colors={[colors[0], colors[1], colors[2]]} />
+    </Path>
+  );
+}
+
+function Dots({ width, height, level, clock, colors }: FieldProps) {
+  const path = useDerivedValue(() => {
+    const spacing = 11;
+    const count = Math.max(3, Math.floor(width / spacing));
+    const start = (width - (count - 1) * spacing) / 2;
+    const middle = height / 2;
+    const reach = middle - 4;
+    const t = clock.value * 0.006;
+    const next = Skia.Path.Make();
+    for (let index = 0; index < count; index += 1) {
+      const progress = index / (count - 1);
+      const envelope = Math.sin(Math.PI * progress);
+      const wave = Math.sin(t + index * 0.55) * Math.sin(t * 0.43 + index * 0.21);
+      const y = middle + wave * reach * envelope * (0.15 + level.value * 0.85);
+      const r = 1.6 + Math.abs(wave) * level.value * 1.8 * envelope;
+      next.addCircle(start + index * spacing, y, r);
+    }
+    return next;
+  });
+
+  return (
+    <Path path={path}>
+      <LinearGradient start={vec(0, 0)} end={vec(width, 0)} colors={[colors[0], colors[1], colors[2]]} />
+    </Path>
+  );
+}
+
+function Pulse({ width, height, level, clock, colors }: FieldProps) {
+  const path = useDerivedValue(() => {
+    const middle = height / 2;
+    const reach = middle - 3;
+    const t = clock.value * 0.004;
+    const next = Skia.Path.Make();
+    for (let x = 0; x <= width; x += 2) {
+      const progress = x / width;
+      const envelope = Math.pow(Math.sin(Math.PI * progress), 1.5);
+      const carrier = Math.sin(x * 0.21 - t * 5.2);
+      const burst = Math.pow(Math.abs(Math.sin(x * 0.027 + t * 1.7)), 3);
+      const y = middle + carrier * burst * envelope * reach * (0.08 + level.value * 0.92);
+      if (x === 0) next.moveTo(x, y);
+      else next.lineTo(x, y);
+    }
+    return next;
+  });
+
+  return (
+    <>
+      <Path path={path} style="stroke" strokeWidth={5} strokeCap="round" strokeJoin="round" color={colors[1]} opacity={0.18} />
+      <Path path={path} style="stroke" strokeWidth={1.8} strokeCap="round" strokeJoin="round">
+        <LinearGradient start={vec(0, 0)} end={vec(width, 0)} colors={[colors[0], colors[2], colors[0]]} />
+      </Path>
+    </>
+  );
+}
+
+export function VoiceWave({ level, colors, variant = "lines", height = DEFAULT_HEIGHT, style }: VoiceWaveProps) {
+  const [width, setWidth] = useState(0);
+  const reduceMotion = useReducedMotion();
+  const ticking = useClock();
+  const clock = useDerivedValue(() => (reduceMotion ? 1200 : ticking.value), [reduceMotion]);
+
+  const handleLayout = (event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width);
+  const props = { width, height, level, clock, colors, still: reduceMotion };
+
+  return (
+    <View style={[{ flex: 1, height }, style]} onLayout={handleLayout}>
+      {width > 0 ? (
+        <Canvas style={{ width, height }}>
+          {variant === "bars" ? (
+            <Bars {...props} />
+          ) : variant === "dots" ? (
+            <Dots {...props} />
+          ) : variant === "pulse" ? (
+            <Pulse {...props} />
+          ) : (
+            <Lines width={width} height={height} level={level} clock={clock} colors={colors} />
+          )}
+        </Canvas>
+      ) : null}
+    </View>
+  );
+}
+
+export type VoiceWaveStyleProps = Omit<VoiceWaveProps, "variant">;
+
+export function VoiceWaveLines(props: VoiceWaveStyleProps) {
+  return <VoiceWave {...props} variant="lines" />;
+}
+
+export function VoiceWaveBars(props: VoiceWaveStyleProps) {
+  return <VoiceWave {...props} variant="bars" />;
+}
+
+export function VoiceWaveDots(props: VoiceWaveStyleProps) {
+  return <VoiceWave {...props} variant="dots" />;
+}
+
+export function VoiceWavePulse(props: VoiceWaveStyleProps) {
+  return <VoiceWave {...props} variant="pulse" />;
+}

package/src/text/index.ts

@@ -0,0 +1,3 @@
+export { ShimmerText, type ShimmerTextProps } from "./shimmer-text";
+export { StreamingText, type StreamingTextProps } from "./streaming-text";
+export { SpokenText, type SpokenTextProps } from "./spoken-text";