panelui-native 0.22.6 → 0.25.0

package/src/components/loader/index.tsx

@@ -0,0 +1,812 @@
+/**
+ * Loading animations.
+ *
+ * ## Why one component and not nine
+ *
+ * These are interchangeable. A loader is chosen once, for the character it
+ * gives a screen, and then it is the same loader everywhere — so the thing
+ * that varies is a value, not a component. `variant` keeps the swap to one
+ * word and keeps every one of them on the same props: the same colour
+ * resolution, the same `speed`, the same reduced-motion behaviour, the same
+ * accessibility. Nine exports would mean nine chances for those to drift.
+ *
+ * ## Why they are drawn the way they are
+ *
+ * Anything with a fixed, small number of moving pieces is a view per piece
+ * with a `useAnimatedStyle` on it: three dots is three transforms a frame, and
+ * that is cheaper than rebuilding a path string.
+ *
+ * Anything whose count is high, or whose shape is derived rather than
+ * declared, is a single SVG path rebuilt on the UI thread. Fifteen bars
+ * following a bouncing ball is one animated prop that way and fifteen the
+ * other, and the fifteen do not stay in step with each other for free.
+ *
+ * ## Reduced motion
+ *
+ * Every variant draws a representative still frame rather than freezing at
+ * whatever it happened to be showing. A stopped animation should look like a
+ * shape someone drew, not like a bug caught mid-cycle.
+ */
+import { memo, useEffect, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import Svg, { Ellipse, Path } from 'react-native-svg';
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useFrameCallback,
+  useReducedMotion,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { useCSSVariable } from 'uniwind';
+import { tv } from 'tailwind-variants';
+import { useIconColor } from '../../icons';
+import { cn } from '../../utils/cn';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedEllipse = Animated.createAnimatedComponent(Ellipse);
+
+export type LoaderVariant =
+  | 'pulse-dots'
+  | 'bounce-dots'
+  | 'pulsating-dots'
+  | 'liquid-dots'
+  | 'bar-cascade'
+  | 'bouncing-bars'
+  | 'symmetric-wave'
+  | 'morph-ring'
+  | 'wave-physics';
+
+export type LoaderSize = 'sm' | 'md' | 'lg';
+
+const loaderVariants = tv({
+  base: 'items-center justify-center',
+});
+
+export interface LoaderProps extends Omit<ViewProps, 'children'> {
+  /**
+   * Which animation to draw. They are interchangeable — pick one for the
+   * character it gives the screen and keep it.
+   */
+  variant?: LoaderVariant;
+  /** Overall scale. The geometry of every variant is multiplied by it. */
+  size?: LoaderSize;
+  /**
+   * Ink. Takes a theme token by name — `"--color-primary"` — as readily as a
+   * literal, and the token is usually what you want: a literal cannot follow
+   * the theme into dark mode.
+   *
+   * With neither, the loader draws in the readable foreground of the surface
+   * it is on, so one inside a filled button is legible without being told.
+   */
+  color?: string;
+  /** Multiplier on the tempo. `1` is the designed speed; `2` is twice as fast. */
+  speed?: number;
+  /**
+   * What a screen reader announces. Defaults to "Loading". Say what is
+   * loading when the loader is the only thing on the screen.
+   */
+  label?: string;
+  className?: string;
+}
+
+/** Geometry at `md`. Every number here is multiplied by the size scale. */
+const GEOMETRY = {
+  'pulse-dots': { dot: 10, gap: 6, count: 3 },
+  'bounce-dots': { dot: 10, gap: 6, count: 3, travel: 8 },
+  'pulsating-dots': { dot: 11, gap: 8, count: 3 },
+  'liquid-dots': { radius: 11, travel: 15, width: 72, height: 32 },
+  'bar-cascade': { bar: 5, gap: 4, count: 5, min: 8, max: 26 },
+  'bouncing-bars': { bar: 5, gap: 6, count: 3, height: 30 },
+  'symmetric-wave': { bar: 5, gap: 5, count: 9, min: 7, max: 26 },
+  'morph-ring': { box: 34, border: 3 },
+  'wave-physics': { bar: 5, gap: 3, count: 15, base: 7, peak: 26 },
+} as const;
+
+const SIZE_SCALE: Record<LoaderSize, number> = { sm: 0.75, md: 1, lg: 1.35 };
+
+/**
+ * A theme token rather than a colour. Tokens are named, not written, so the
+ * leading `--` tells the two apart without the caller having to say which.
+ */
+function isToken(value: string | undefined): value is string {
+  return typeof value === 'string' && value.startsWith('--');
+}
+
+/** One decimal is past the point a path string can show, and cheaper to build. */
+function q(value: number): number {
+  'worklet';
+  return Math.round(value * 10) / 10;
+}
+
+/** A closed circle as a path subpath, so several can share one `Path`. */
+function circle(cx: number, cy: number, r: number): string {
+  'worklet';
+  return (
+    `M${q(cx - r)},${q(cy)}` +
+    `A${q(r)},${q(r)} 0 1 0 ${q(cx + r)},${q(cy)}` +
+    `A${q(r)},${q(r)} 0 1 0 ${q(cx - r)},${q(cy)}Z`
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* dots                                                                       */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * One dot.
+ *
+ * A component rather than a loop of `useAnimatedStyle` inside the parent: the
+ * count is geometry, and a loop of hooks is a rule waiting to be broken by
+ * whoever changes it.
+ */
+const Dot = memo(function Dot({
+  size,
+  color,
+  delay,
+  duration,
+  from,
+  to,
+  property,
+  still,
+  animate,
+}: {
+  size: number;
+  color: string;
+  delay: number;
+  duration: number;
+  from: number;
+  to: number;
+  property: 'opacity' | 'translateY' | 'scale';
+  /** The value to hold when nothing is animating. */
+  still: number;
+  animate: boolean;
+}) {
+  const progress = useSharedValue(animate ? from : still);
+
+  useEffect(() => {
+    if (!animate) {
+      progress.value = still;
+      return;
+    }
+    progress.value = from;
+    progress.value = withDelay(
+      delay,
+      // Reversing rather than a three-stop keyframe: every one of these
+      // animations returns to where it started, and a reversed repeat says so
+      // in one line without a midpoint to keep in step.
+      withRepeat(
+        withTiming(to, { duration, easing: Easing.inOut(Easing.quad) }),
+        -1,
+        true
+      )
+    );
+    return () => cancelAnimation(progress);
+  }, [animate, delay, duration, from, to, still, progress]);
+
+  const style = useAnimatedStyle(() => {
+    if (property === 'opacity') return { opacity: progress.value };
+    if (property === 'translateY') {
+      return { transform: [{ translateY: progress.value }] };
+    }
+    return {
+      opacity: 0.5 + (progress.value - 1) * 1,
+      transform: [{ scale: progress.value }],
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        { width: size, height: size, borderRadius: size / 2, backgroundColor: color },
+        style,
+      ]}
+    />
+  );
+});
+
+/* -------------------------------------------------------------------------- */
+/* bars                                                                       */
+/* -------------------------------------------------------------------------- */
+
+/** One bar. Same reasoning as `Dot`. */
+const Bar = memo(function Bar({
+  width,
+  color,
+  delay,
+  duration,
+  from,
+  to,
+  mode,
+  barHeight,
+  still,
+  animate,
+}: {
+  width: number;
+  color: string;
+  delay: number;
+  duration: number;
+  /*
+   * In `height` mode these are pixels; in `scale` mode they are multipliers of
+   * `barHeight`. Keeping the box separate from the range is the whole reason
+   * `barHeight` exists — conflated, a scale target reads as a height and the
+   * bar grows to thirty times its size.
+   */
+  from: number;
+  to: number;
+  /** `height` grows the bar from its baseline; `scale` squashes a fixed one. */
+  mode: 'height' | 'scale';
+  /** The bar's laid-out height. Only used by `scale`. */
+  barHeight?: number;
+  still: number;
+  animate: boolean;
+}) {
+  const progress = useSharedValue(animate ? from : still);
+
+  useEffect(() => {
+    if (!animate) {
+      progress.value = still;
+      return;
+    }
+    progress.value = from;
+    progress.value = withDelay(
+      delay,
+      withRepeat(
+        withTiming(to, { duration, easing: Easing.inOut(Easing.quad) }),
+        -1,
+        true
+      )
+    );
+    return () => cancelAnimation(progress);
+  }, [animate, delay, duration, from, to, still, progress]);
+
+  const style = useAnimatedStyle(() =>
+    mode === 'height'
+      ? { height: progress.value }
+      : { transform: [{ scaleY: progress.value }] }
+  );
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width,
+          borderRadius: width / 2,
+          backgroundColor: color,
+          ...(mode === 'scale' ? { height: barHeight } : null),
+        },
+        style,
+      ]}
+    />
+  );
+});
+
+/* -------------------------------------------------------------------------- */
+/* liquid dots                                                                */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Two blobs that merge as they cross.
+ *
+ * The merge is the whole animation, and it is drawn rather than filtered: a
+ * blur-and-threshold pass is how this is usually done, and SVG filters do not
+ * render on native at all. Instead the two circles and the neck between them
+ * are three subpaths of one path, unioned by the non-zero fill rule — which
+ * costs one animated prop a frame, and gives a crisper edge than a threshold
+ * ever does.
+ *
+ * The neck is what sells it. It pinches inward as the blobs separate and
+ * vanishes once they are far enough apart, so they let go of each other
+ * instead of snapping.
+ */
+function LiquidDots({
+  color,
+  scale,
+  speed,
+  animate,
+}: {
+  color: string;
+  scale: number;
+  speed: number;
+  animate: boolean;
+}) {
+  const g = GEOMETRY['liquid-dots'];
+  const r = g.radius * scale;
+  const travel = g.travel * scale;
+  const width = g.width * scale;
+  const height = g.height * scale;
+  const cy = height / 2;
+  const mid = width / 2;
+
+  // -1 to 1: where the left blob is along its travel. The right blob mirrors.
+  const t = useSharedValue(animate ? -1 : -0.35);
+
+  useEffect(() => {
+    if (!animate) {
+      t.value = -0.35;
+      return;
+    }
+    t.value = -1;
+    t.value = withRepeat(
+      withTiming(1, { duration: 2000 / speed, easing: Easing.inOut(Easing.quad) }),
+      -1,
+      true
+    );
+    return () => cancelAnimation(t);
+  }, [animate, speed, t]);
+
+  const props = useAnimatedProps(() => {
+    const x1 = mid + t.value * travel;
+    const x2 = mid - t.value * travel;
+    const left = Math.min(x1, x2);
+    const right = Math.max(x1, x2);
+    const gap = right - left;
+
+    let d = circle(left, cy, r) + circle(right, cy, r);
+
+    /*
+     * The neck only exists while the blobs are close enough to be pulling on
+     * each other: `1` when they are concentric, and gone by the time they are
+     * a radius apart. Squared, so it thins out quickly rather than trailing.
+     *
+     * The thickness is what the cutoff is really on. A falloff that only
+     * approaches zero leaves a hairline spanning the gap for the whole of the
+     * rest of the travel, and a one-pixel bar between two circles reads as a
+     * drawing mistake rather than as a thinning neck — so below the point
+     * where it is still legibly a neck, it is not drawn at all.
+     */
+    const pull = Math.max(0, 1 - gap / (r * 2.2));
+    const half = r * pull * pull * 0.95;
+    if (half > r * 0.12 && gap > 1) {
+      // Pinched at the middle: the control point sits inside the straight
+      // line between the two, which is what makes the join read as surface
+      // tension rather than as a rectangle.
+      const waist = half * 0.55;
+      d +=
+        `M${q(left)},${q(cy - half)}` +
+        `Q${q((left + right) / 2)},${q(cy - waist)} ${q(right)},${q(cy - half)}` +
+        `L${q(right)},${q(cy + half)}` +
+        `Q${q((left + right) / 2)},${q(cy + waist)} ${q(left)},${q(cy + half)}Z`;
+    }
+
+    return { d };
+  });
+
+  return (
+    <Svg width={width} height={height}>
+      <AnimatedPath animatedProps={props} fill={color} fillRule="nonzero" />
+    </Svg>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* wave physics                                                               */
+/* -------------------------------------------------------------------------- */
+
+/** How many bounces the ball takes crossing the row once. */
+const BOUNCES = 4;
+
+/**
+ * A ball bouncing along a row of bars, pushing them down where it lands.
+ *
+ * The only variant with anything like physics in it, and the reason it is
+ * procedural rather than a keyframe list: the bar heights are a function of
+ * where the ball is, so they are derived every frame instead of stored. Fifteen
+ * bars precomputed would be fifteen arrays that have to agree with each other
+ * and with the ball, and none of them could respond to `speed`.
+ *
+ * Both the bars and the ball read the same clock, which is what keeps the
+ * dent under the ball rather than near it.
+ */
+function WavePhysics({
+  color,
+  scale,
+  speed,
+  animate,
+}: {
+  color: string;
+  scale: number;
+  speed: number;
+  animate: boolean;
+}) {
+  const g = GEOMETRY['wave-physics'];
+  const barWidth = g.bar * scale;
+  const step = (g.bar + g.gap) * scale;
+  const base = g.base * scale;
+  const peak = g.peak * scale;
+  const ballR = (g.bar * 1.1) * scale;
+  const bounce = peak * 0.9;
+
+  const width = (g.count - 1) * step + barWidth;
+  const height = base + peak + bounce + ballR * 2;
+  const floor = height;
+
+  const clock = useSharedValue(0);
+
+  const frame = useFrameCallback((info) => {
+    'worklet';
+    // Accumulated rather than read off the total, so `speed` can change
+    // mid-animation without the ball jumping to where the new rate would have
+    // put it. A dropped frame is clamped: a 300ms hitch played at full rate
+    // is a lurch, not a bounce.
+    const delta = Math.min(info.timeSincePreviousFrame ?? 16, 48) / 1000;
+    clock.value += delta * speed * 0.35;
+  }, false);
+
+  const { setActive } = frame;
+  useEffect(() => {
+    setActive(animate);
+    return () => setActive(false);
+  }, [animate, setActive]);
+
+  /** Where the ball is, as a bar index, and how far through its hop. */
+  const ballAt = (time: number) => {
+    'worklet';
+    // Back and forth along the row, then back again — one continuous pass.
+    const cycle = time % 2;
+    const across = cycle < 1 ? cycle : 2 - cycle;
+    const index = across * (g.count - 1);
+    let phase = (across * BOUNCES) % 1;
+    if (across === 0 || across === 1) phase = 0;
+    // A parabola per hop: the ball is slowest at the top, which is the only
+    // part of a bounce anyone actually reads.
+    const lift = 4 * phase * (1 - phase);
+    return { index, lift };
+  };
+
+  const barProps = useAnimatedProps(() => {
+    const { index, lift } = animate ? ballAt(clock.value) : { index: 7, lift: 0.5 };
+    // The ball presses hardest when it is on the ground, so the dent is the
+    // inverse of the hop.
+    const press = Math.max(0, 1 - lift * 2);
+    let d = '';
+
+    for (let i = 0; i < g.count; i++) {
+      const distance = Math.abs(i - index);
+      // A raised crest travelling with the ball, three bars wide either side.
+      const crest = distance < 3 ? Math.cos((distance / 3) * (Math.PI / 2)) : 0;
+      // And a dent right under it, narrower than the crest so the bar the
+      // ball is standing on is pushed down through its own rise.
+      const dent =
+        distance < 1.5
+          ? Math.cos((distance / 1.5) * (Math.PI / 2)) * press * (peak * 0.5)
+          : 0;
+      const barHeight = Math.max(base * 0.5, base + crest * peak - dent);
+      const x = q(barWidth / 2 + i * step);
+      d += `M${x},${q(floor)}L${x},${q(floor - barHeight)}`;
+    }
+
+    return { d };
+  });
+
+  const ballProps = useAnimatedProps(() => {
+    const { index, lift } = animate ? ballAt(clock.value) : { index: 7, lift: 0.5 };
+    const press = Math.max(0, 1 - lift * 2);
+    // The ball rides the bar directly under it, which is the crest of the
+    // wave (so the full `peak`) minus however hard it is pressing.
+    const rest = base + peak - press * (peak * 0.5);
+
+    // Squash on the ground, stretch at the top — the oldest trick there is,
+    // and the thing that separates a bouncing ball from a moving circle.
+    const squash = press;
+    return {
+      cx: q(barWidth / 2 + index * step),
+      cy: q(floor - rest - ballR + squash * ballR * 0.3 - lift * bounce),
+      rx: q(ballR * (1 + squash * 0.25)),
+      ry: q(ballR * (1 - squash * 0.28)),
+    };
+  });
+
+  return (
+    <Svg width={width} height={height}>
+      <AnimatedPath
+        animatedProps={barProps}
+        stroke={color}
+        strokeWidth={barWidth}
+        strokeLinecap="round"
+        fill="none"
+        opacity={0.55}
+      />
+      <AnimatedEllipse animatedProps={ballProps} fill={color} />
+    </Svg>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* morph ring                                                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * A square turning into a circle and back while it rotates.
+ *
+ * The rotation is what makes the morph legible: a square becoming a circle in
+ * place mostly reads as a square getting smaller, and turning it means the
+ * corners are visibly going somewhere as they round off.
+ */
+function MorphRing({
+  color,
+  scale,
+  speed,
+  animate,
+}: {
+  color: string;
+  scale: number;
+  speed: number;
+  animate: boolean;
+}) {
+  const g = GEOMETRY['morph-ring'];
+  const box = g.box * scale;
+  const border = Math.max(2, g.border * scale);
+
+  const progress = useSharedValue(animate ? 0 : 0.5);
+
+  useEffect(() => {
+    if (!animate) {
+      progress.value = 0.5;
+      return;
+    }
+    progress.value = 0;
+    progress.value = withRepeat(
+      withTiming(1, { duration: 2000 / speed, easing: Easing.inOut(Easing.quad) }),
+      -1,
+      true
+    );
+    return () => cancelAnimation(progress);
+  }, [animate, speed, progress]);
+
+  const style = useAnimatedStyle(() => ({
+    borderRadius: box * (0.1 + progress.value * 0.4),
+    transform: [{ rotate: `${progress.value * 180}deg` }],
+  }));
+
+  /*
+   * The padding is the rotation's. A square turned 45° needs its diagonal, so
+   * it sweeps past its own box by nearly half its width on each side — laid
+   * out flush, the corners spill over whatever is next to it.
+   */
+  const overhang = (box * Math.SQRT2 - box) / 2;
+
+  return (
+    <View style={{ padding: overhang }}>
+      <Animated.View
+        style={[
+          { width: box, height: box, borderWidth: border, borderColor: color },
+          style,
+        ]}
+      />
+    </View>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* root                                                                       */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * A loading animation.
+ *
+ * Nine of them, chosen with `variant`. They all take the same colour, the same
+ * `speed`, and the same treatment under reduced motion, so swapping one for
+ * another is a one-word change.
+ */
+export const Loader = memo(function Loader({
+  variant = 'pulse-dots',
+  size = 'md',
+  color,
+  speed = 1,
+  label = 'Loading',
+  className,
+  ...props
+}: LoaderProps) {
+  const reducedMotion = useReducedMotion();
+  const animate = !reducedMotion && speed > 0;
+  const scale = SIZE_SCALE[size];
+  const rate = speed > 0 ? speed : 1;
+
+  /*
+   * A loader inside a filled surface has to be drawn in that surface's
+   * foreground rather than the page's: a button in the primary colour is one
+   * of the most likely places for a loader to appear, and in most themes the
+   * primary colour *is* the page's foreground — so one resolving
+   * `--color-foreground` for itself would be invisible exactly there.
+   * Surfaces already publish their readable foreground for icons.
+   */
+  const inherited = useIconColor();
+  const token = useCSSVariable(isToken(color) ? color : '--color-foreground');
+  const resolved = typeof token === 'string' ? token : undefined;
+  const ink =
+    (isToken(color) ? resolved : color) ?? inherited ?? resolved ?? '#0a0a0a';
+
+  const frame = (content: ReactNode) => (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      className={loaderVariants({ className })}
+      {...props}
+    >
+      {content}
+    </View>
+  );
+
+  if (variant === 'liquid-dots') {
+    return frame(
+      <LiquidDots color={ink} scale={scale} speed={rate} animate={animate} />
+    );
+  }
+
+  if (variant === 'wave-physics') {
+    return frame(
+      <WavePhysics color={ink} scale={scale} speed={rate} animate={animate} />
+    );
+  }
+
+  if (variant === 'morph-ring') {
+    return frame(
+      <MorphRing color={ink} scale={scale} speed={rate} animate={animate} />
+    );
+  }
+
+  if (variant === 'pulse-dots') {
+    const g = GEOMETRY['pulse-dots'];
+    return frame(
+      <View className="flex-row items-center" style={{ gap: g.gap * scale }}>
+        {Array.from({ length: g.count }, (_unused, i) => (
+          <Dot
+            key={i}
+            size={g.dot * scale}
+            color={ink}
+            delay={(i * 200) / rate}
+            duration={700 / rate}
+            from={0.2}
+            to={1}
+            still={i === 1 ? 1 : 0.45}
+            property="opacity"
+            animate={animate}
+          />
+        ))}
+      </View>
+    );
+  }
+
+  if (variant === 'bounce-dots') {
+    const g = GEOMETRY['bounce-dots'];
+    const travel = g.travel * scale;
+    return frame(
+      <View
+        className="flex-row items-center"
+        style={{ gap: g.gap * scale, paddingTop: travel }}
+      >
+        {Array.from({ length: g.count }, (_unused, i) => (
+          <Dot
+            key={i}
+            size={g.dot * scale}
+            color={ink}
+            delay={(i * 100) / rate}
+            duration={300 / rate}
+            from={0}
+            to={-travel}
+            still={-travel * (i === 1 ? 1 : 0.35)}
+            property="translateY"
+            animate={animate}
+          />
+        ))}
+      </View>
+    );
+  }
+
+  if (variant === 'pulsating-dots') {
+    const g = GEOMETRY['pulsating-dots'];
+    return frame(
+      <View
+        className="flex-row items-center"
+        // A dot at its largest is half again its laid-out size, and it grows
+        // about its centre — so a quarter of a dot on each side is the room
+        // the scale needs, plus a little for the rounding.
+        style={{ gap: g.gap * scale, padding: g.dot * scale * 0.3 }}
+      >
+        {Array.from({ length: g.count }, (_unused, i) => (
+          <Dot
+            key={i}
+            size={g.dot * scale}
+            color={ink}
+            delay={(i * 200) / rate}
+            duration={600 / rate}
+            from={1}
+            to={1.5}
+            still={i === 1 ? 1.4 : 1.1}
+            property="scale"
+            animate={animate}
+          />
+        ))}
+      </View>
+    );
+  }
+
+  if (variant === 'bar-cascade') {
+    const g = GEOMETRY['bar-cascade'];
+    return frame(
+      <View
+        className="flex-row items-center"
+        style={{ gap: g.gap * scale, height: g.max * scale }}
+      >
+        {Array.from({ length: g.count }, (_unused, i) => (
+          <Bar
+            key={i}
+            width={g.bar * scale}
+            color={ink}
+            delay={(i * 100) / rate}
+            duration={500 / rate}
+            from={g.min * scale}
+            to={g.max * scale}
+            // A still frame that shows the cascade's shape rather than a row
+            // of equal bars, which would say nothing about what it does.
+            still={(g.min + (g.max - g.min) * Math.abs(Math.sin(i * 0.9))) * scale}
+            mode="height"
+            animate={animate}
+          />
+        ))}
+      </View>
+    );
+  }
+
+  if (variant === 'bouncing-bars') {
+    const g = GEOMETRY['bouncing-bars'];
+    return frame(
+      <View
+        className="flex-row items-center"
+        style={{ gap: g.gap * scale, height: g.height * scale }}
+      >
+        {Array.from({ length: g.count }, (_unused, i) => (
+          <Bar
+            key={i}
+            width={g.bar * scale}
+            color={ink}
+            delay={(i * 200) / rate}
+            duration={500 / rate}
+            from={0.3}
+            to={1}
+            barHeight={g.height * scale}
+            still={0.4 + i * 0.25}
+            mode="scale"
+            animate={animate}
+          />
+        ))}
+      </View>
+    );
+  }
+
+  // symmetric-wave
+  const g = GEOMETRY['symmetric-wave'];
+  /*
+   * The delay is symmetric about the middle rather than running left to right,
+   * so the wave opens outward from the centre and arrives back at it. A
+   * straight ramp reads as a queue; this reads as one thing breathing.
+   */
+  const offsets = [0, 1, 2, 3, 4, 3, 2, 1, 0];
+  return frame(
+    <View
+      className="flex-row items-center"
+      style={{ gap: g.gap * scale, height: g.max * scale }}
+    >
+      {Array.from({ length: g.count }, (_unused, i) => (
+        <Bar
+          key={i}
+          width={g.bar * scale}
+          color={ink}
+          delay={((offsets[i] ?? 0) * 100) / rate}
+          duration={600 / rate}
+          from={g.min * scale}
+          to={g.max * scale}
+          still={(g.min + (g.max - g.min) * (1 - (offsets[i] ?? 0) / 4)) * scale}
+          mode="height"
+          animate={animate}
+        />
+      ))}
+    </View>
+  );
+});
+Loader.displayName = 'Loader';