@odyn-app/api 0.0.0-stage → 0.1.0

package/dist/ui/orb/orb-helix-geometry.js

@@ -0,0 +1,130 @@
+import { memoiseByVariant } from './orb-geometry-cache';
+const RADIUS = 8.5;
+const TILT = (14 * Math.PI) / 180;
+const SPIN_STEPS = 8;
+const RING_ARC_STEPS = 3;
+const HALF_TURN = Math.PI;
+const RINGS = [
+    { latitude: 52, count: 8 },
+    { latitude: 26, count: 8 },
+    { latitude: 0, count: 8 },
+    { latitude: -26, count: 8 },
+    { latitude: -52, count: 8 },
+];
+function projectGlobe(x, y, z, spin) {
+    const spinCosine = Math.cos(spin);
+    const spinSine = Math.sin(spin);
+    const spunX = x * spinCosine - z * spinSine;
+    const spunZ = x * spinSine + z * spinCosine;
+    const tiltCosine = Math.cos(TILT);
+    const tiltSine = Math.sin(TILT);
+    return {
+        x: spunX,
+        y: y * tiltCosine - spunZ * tiltSine,
+        z: y * tiltSine + spunZ * tiltCosine,
+    };
+}
+function globeOpacity(z) {
+    const depth = Math.max(0, Math.min(1, (z / RADIUS + 0.15) / 1.15));
+    return 0.12 + 0.88 * depth * depth;
+}
+function ringDirection(ring) {
+    return ring % 2 === 0 ? -1 : 1;
+}
+const SEQUENTIAL_MOVES = (() => {
+    const moves = [];
+    for (let pass = 0; pass < 2; pass++) {
+        for (let ring = 0; ring < RINGS.length; ring++) {
+            moves.push({ ring, angle: ringDirection(ring) * HALF_TURN });
+        }
+    }
+    return moves;
+})();
+const SCRAMBLED_MOVES = [2, 1, 3, 0, 4, 2, 1, 3, 0, 4].map((ring) => ({ ring, angle: ringDirection(ring) * HALF_TURN }));
+function ringTurnPoses(initialX, initialY, initialZ, ringIndex, moves) {
+    let x = initialX;
+    let y = initialY;
+    let z = initialZ;
+    const poses = [[x, y, z]];
+    for (const move of moves) {
+        const startX = x;
+        const startZ = z;
+        for (let step = 1; step <= RING_ARC_STEPS; step++) {
+            if (ringIndex === move.ring) {
+                const angle = move.angle * (step / RING_ARC_STEPS);
+                const cosine = Math.cos(angle);
+                const sine = Math.sin(angle);
+                x = startX * cosine - startZ * sine;
+                y = initialY;
+                z = startX * sine + startZ * cosine;
+            }
+            poses.push([x, y, z]);
+        }
+    }
+    return poses;
+}
+const SLOW_SPIN = 0.4;
+const BURST_SPIN = (Math.PI * 2 - SLOW_SPIN * 4) / 4;
+const BREATH_POSES = (() => {
+    const poses = [{ scale: 1, spin: 0 }];
+    let spin = 0;
+    const steps = [
+        { scale: 1, kind: 'slow' },
+        { scale: 0.9, kind: 'burst' },
+        { scale: 0.9, kind: 'slow' },
+        { scale: 0.8, kind: 'burst' },
+        { scale: 0.8, kind: 'slow' },
+        { scale: 0.9, kind: 'burst' },
+        { scale: 0.9, kind: 'slow' },
+        { scale: 1, kind: 'burst' },
+    ];
+    for (const step of steps) {
+        spin += step.kind === 'slow' ? SLOW_SPIN : BURST_SPIN;
+        poses.push({ scale: step.scale, spin });
+    }
+    return poses;
+})();
+function globeKeyframeStyle(initialX, initialY, initialZ, variant, ringIndex) {
+    const style = {};
+    const write = (index, point) => {
+        style[`--g${index}x`] = `${point.x.toFixed(2)}px`;
+        style[`--g${index}y`] = `${(-point.y).toFixed(2)}px`;
+        style[`--g${index}o`] = globeOpacity(point.z).toFixed(3);
+    };
+    if (variant === 'G5') {
+        BREATH_POSES.forEach((pose, index) => {
+            write(index, projectGlobe(initialX * pose.scale, initialY * pose.scale, initialZ * pose.scale, pose.spin));
+        });
+        return style;
+    }
+    if (variant === 'G3' || variant === 'G4') {
+        const moves = variant === 'G3' ? SEQUENTIAL_MOVES : SCRAMBLED_MOVES;
+        ringTurnPoses(initialX, initialY, initialZ, ringIndex, moves)
+            .forEach(([x, y, z], index) => write(index, projectGlobe(x, y, z, 0)));
+        return style;
+    }
+    const direction = variant === 'G2' && ringIndex % 2 === 1 ? -1 : 1;
+    for (let index = 0; index < SPIN_STEPS; index++) {
+        write(index, projectGlobe(initialX, initialY, initialZ, direction * (index / SPIN_STEPS) * Math.PI * 2));
+    }
+    return style;
+}
+function buildGlobeDots(variant) {
+    const dots = [];
+    let index = 0;
+    RINGS.forEach((ring, ringIndex) => {
+        const latitude = (ring.latitude * Math.PI) / 180;
+        const initialY = Math.sin(latitude) * RADIUS;
+        const ringRadius = Math.cos(latitude) * RADIUS;
+        for (let dotIndex = 0; dotIndex < ring.count; dotIndex++) {
+            const longitude = (dotIndex / ring.count) * Math.PI * 2;
+            dots.push({
+                key: index,
+                style: globeKeyframeStyle(Math.cos(longitude) * ringRadius, initialY, Math.sin(longitude) * ringRadius, variant, ringIndex),
+            });
+            index += 1;
+        }
+    });
+    return dots;
+}
+export const globeDots = memoiseByVariant(buildGlobeDots);

package/dist/ui/orb/orb-helix.module.css

@@ -0,0 +1,155 @@
+/* ---- Globe (Helix family) ---- */
+.helix {
+  position: absolute;
+  inset: 0;
+  transform: scale(var(--orb-k, 1));
+}
+
+.helixDot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 2px;
+  height: 2px;
+  margin: -1px 0 0 -1px;
+  border-radius: 50%;
+  background: currentColor;
+  will-change: transform, opacity;
+}
+
+.helix[data-variant="G1"] .helixDot {
+  animation: orb-globe-spin 4.5s linear infinite both;
+}
+.helix[data-variant="G2"] .helixDot {
+  animation: orb-globe-spin 3.6s linear infinite both;
+}
+.helix[data-variant="G3"] .helixDot {
+  animation: orb-globe-ringturn 2.8s linear infinite both;
+}
+.helix[data-variant="G4"] .helixDot {
+  animation: orb-globe-ringturn 2.8s linear infinite both;
+}
+.helix[data-variant="G5"] .helixDot {
+  animation: orb-globe-breathe 3.6s linear infinite both;
+}
+
+@keyframes orb-globe-spin {
+  0%, 100% {
+    transform: translate(var(--g0x), var(--g0y));
+    opacity: var(--g0o);
+  }
+  12.5% {
+    transform: translate(var(--g1x), var(--g1y));
+    opacity: var(--g1o);
+  }
+  25% {
+    transform: translate(var(--g2x), var(--g2y));
+    opacity: var(--g2o);
+  }
+  37.5% {
+    transform: translate(var(--g3x), var(--g3y));
+    opacity: var(--g3o);
+  }
+  50% {
+    transform: translate(var(--g4x), var(--g4y));
+    opacity: var(--g4o);
+  }
+  62.5% {
+    transform: translate(var(--g5x), var(--g5y));
+    opacity: var(--g5o);
+  }
+  75% {
+    transform: translate(var(--g6x), var(--g6y));
+    opacity: var(--g6o);
+  }
+  87.5% {
+    transform: translate(var(--g7x), var(--g7y));
+    opacity: var(--g7o);
+  }
+}
+
+@keyframes orb-globe-ringturn {
+  0% { transform: translate(var(--g0x), var(--g0y)); opacity: var(--g0o); }
+  2.5% { transform: translate(var(--g1x), var(--g1y)); opacity: var(--g1o); }
+  5% { transform: translate(var(--g2x), var(--g2y)); opacity: var(--g2o); }
+  7.5%, 10% { transform: translate(var(--g3x), var(--g3y)); opacity: var(--g3o); }
+  12.5% { transform: translate(var(--g4x), var(--g4y)); opacity: var(--g4o); }
+  15% { transform: translate(var(--g5x), var(--g5y)); opacity: var(--g5o); }
+  17.5%, 20% { transform: translate(var(--g6x), var(--g6y)); opacity: var(--g6o); }
+  22.5% { transform: translate(var(--g7x), var(--g7y)); opacity: var(--g7o); }
+  25% { transform: translate(var(--g8x), var(--g8y)); opacity: var(--g8o); }
+  27.5%, 30% { transform: translate(var(--g9x), var(--g9y)); opacity: var(--g9o); }
+  32.5% { transform: translate(var(--g10x), var(--g10y)); opacity: var(--g10o); }
+  35% { transform: translate(var(--g11x), var(--g11y)); opacity: var(--g11o); }
+  37.5%, 40% { transform: translate(var(--g12x), var(--g12y)); opacity: var(--g12o); }
+  42.5% { transform: translate(var(--g13x), var(--g13y)); opacity: var(--g13o); }
+  45% { transform: translate(var(--g14x), var(--g14y)); opacity: var(--g14o); }
+  47.5%, 50% { transform: translate(var(--g15x), var(--g15y)); opacity: var(--g15o); }
+  52.5% { transform: translate(var(--g16x), var(--g16y)); opacity: var(--g16o); }
+  55% { transform: translate(var(--g17x), var(--g17y)); opacity: var(--g17o); }
+  57.5%, 60% { transform: translate(var(--g18x), var(--g18y)); opacity: var(--g18o); }
+  62.5% { transform: translate(var(--g19x), var(--g19y)); opacity: var(--g19o); }
+  65% { transform: translate(var(--g20x), var(--g20y)); opacity: var(--g20o); }
+  67.5%, 70% { transform: translate(var(--g21x), var(--g21y)); opacity: var(--g21o); }
+  72.5% { transform: translate(var(--g22x), var(--g22y)); opacity: var(--g22o); }
+  75% { transform: translate(var(--g23x), var(--g23y)); opacity: var(--g23o); }
+  77.5%, 80% { transform: translate(var(--g24x), var(--g24y)); opacity: var(--g24o); }
+  82.5% { transform: translate(var(--g25x), var(--g25y)); opacity: var(--g25o); }
+  85% { transform: translate(var(--g26x), var(--g26y)); opacity: var(--g26o); }
+  87.5%, 90% { transform: translate(var(--g27x), var(--g27y)); opacity: var(--g27o); }
+  92.5% { transform: translate(var(--g28x), var(--g28y)); opacity: var(--g28o); }
+  95% { transform: translate(var(--g29x), var(--g29y)); opacity: var(--g29o); }
+  97.5%, 100% { transform: translate(var(--g30x), var(--g30y)); opacity: var(--g30o); }
+}
+
+@keyframes orb-globe-breathe {
+  0% {
+    transform: translate(var(--g0x), var(--g0y));
+    opacity: var(--g0o);
+  }
+  19% {
+    transform: translate(var(--g1x), var(--g1y));
+    opacity: var(--g1o);
+  }
+  25% {
+    transform: translate(var(--g2x), var(--g2y));
+    opacity: var(--g2o);
+  }
+  44% {
+    transform: translate(var(--g3x), var(--g3y));
+    opacity: var(--g3o);
+  }
+  50% {
+    transform: translate(var(--g4x), var(--g4y));
+    opacity: var(--g4o);
+  }
+  69% {
+    transform: translate(var(--g5x), var(--g5y));
+    opacity: var(--g5o);
+  }
+  75% {
+    transform: translate(var(--g6x), var(--g6y));
+    opacity: var(--g6o);
+  }
+  94% {
+    transform: translate(var(--g7x), var(--g7y));
+    opacity: var(--g7o);
+  }
+  100% {
+    transform: translate(var(--g8x), var(--g8y));
+    opacity: var(--g8o);
+  }
+}
+
+
+:global([data-orb-paused]) .helix,
+:global([data-orb-paused]) .helixDot {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .helix,
+  .helixDot {
+    animation: none !important;
+  }
+}

package/dist/ui/orb/orb-lattice-geometry.d.ts

@@ -0,0 +1,35 @@
+import type { LatticeFrameVariant, LatticeVariant } from './orb-types';
+/**
+ * The stacked-PR waits, drawn as frames on the 3×3 grid. Each frame is three
+ * rows of three cells:
+ *   '#' lit · '+' half · '.' resting ink · '-' sitting out (dim)
+ * Frames are spaced evenly round the period and every cell eases from one
+ * frame to the next linearly, so a lit cell hands over to its
+ * neighbour and leaves a short fading trail — that is what makes a shape read
+ * as moving rather than blinking from place to place.
+ *
+ * One vocabulary: a chevron says which way the work is going. Up is the stack
+ * being rebuilt; right is out to GitHub; left is in from it. Waiting climbs
+ * without a chevron: something is happening, but not by Odyn's hand.
+ */
+type Frame = readonly [string, string, string];
+export declare const LATTICE_FRAMES: Record<LatticeFrameVariant, readonly Frame[]>;
+export declare function isLatticeFrameVariant(variant: LatticeVariant): variant is LatticeFrameVariant;
+/** The opacity a frame character stands for, as a CSS value. */
+export declare function frameOpacity(ch: string): string;
+export interface LatticeCell {
+    readonly key: string;
+    readonly left: number;
+    readonly top: number;
+    readonly delay: number;
+    readonly ax: number;
+    readonly ay: number;
+    readonly bx: number;
+    readonly by: number;
+    readonly still: boolean;
+    readonly mid: boolean;
+    /** Frame-drawn looks only: this cell's opacity and scale at each frame. */
+    readonly frames: Readonly<Record<string, string>> | null;
+}
+export declare const latticeCells: (variant: LatticeVariant) => readonly LatticeCell[];
+export {};

package/dist/ui/orb/orb-lattice-geometry.js

@@ -0,0 +1,148 @@
+import { memoiseByVariant } from './orb-geometry-cache';
+const GRID_SIZE = 3;
+const PITCH = 6;
+const MIDPOINT = (GRID_SIZE - 1) / 2;
+const SWIRL = 1.05;
+const SPREAD = 1.6;
+const PERIMETER = (() => {
+    const ring = [];
+    for (let x = 0; x < GRID_SIZE; x++)
+        ring.push([x, 0]);
+    for (let y = 1; y < GRID_SIZE; y++)
+        ring.push([GRID_SIZE - 1, y]);
+    for (let x = GRID_SIZE - 2; x >= 0; x--)
+        ring.push([x, GRID_SIZE - 1]);
+    for (let y = GRID_SIZE - 2; y >= 1; y--)
+        ring.push([0, y]);
+    return ring;
+})();
+const PERIMETER_INDEX = new Map(PERIMETER.map(([x, y], index) => [`${x},${y}`, index]));
+function cellDelay(variant, x, y) {
+    const deltaX = x - MIDPOINT;
+    const deltaY = y - MIDPOINT;
+    switch (variant) {
+        case 'S1':
+            return Math.hypot(deltaX, deltaY) * 700 -
+                (deltaX === 0 && deltaY === 0 ? 180 : 0);
+        case 'S2':
+            return ((x + y) / (2 * (GRID_SIZE - 1))) * 1500;
+        case 'S3': {
+            const index = PERIMETER_INDEX.get(`${x},${y}`);
+            if (index === undefined)
+                return 0;
+            return -(((PERIMETER.length - index) % PERIMETER.length) / PERIMETER.length) * 1700;
+        }
+        case 'S4':
+            return (x / (GRID_SIZE - 1)) * 1100;
+        case 'S5': {
+            const index = PERIMETER_INDEX.get(`${x},${y}`);
+            if (index === undefined)
+                return 0;
+            return -(((index * 3) % PERIMETER.length) / PERIMETER.length) * 1700;
+        }
+        // Frame-drawn: the frames carry the timing, so no cell is offset.
+        case 'S6':
+        case 'S7':
+        case 'S8':
+        case 'S9':
+            return 0;
+    }
+}
+export const LATTICE_FRAMES = {
+    // Moving work: restack, moving onto main, carrying work up, switching layers.
+    S6: [
+        ['...', '...', '.#.'],
+        ['...', '.#.', '#+#'],
+        ['.#.', '#+#', '+.+'],
+        ['#+#', '+.+', '...'],
+        ['+.+', '...', '...'],
+    ],
+    // Sending: submit, pushing, merging on GitHub.
+    S7: [
+        ['...', '#..', '...'],
+        ['#..', '+#.', '#..'],
+        ['+#.', '.+#', '+#.'],
+        ['.+#', '..+', '.+#'],
+        ['..+', '...', '..+'],
+    ],
+    // Fetching: sync, pulling main, reading the stack, checking gh.
+    S8: [
+        ['...', '..#', '...'],
+        ['..#', '.#+', '..#'],
+        ['.#+', '#+.', '.#+'],
+        ['#+.', '+..', '#+.'],
+        ['+..', '...', '+..'],
+    ],
+    // Waiting on someone else: CI during a merge, chats finishing first. Climb:
+    // the outer columns go up hand over hand while the middle sits out.
+    S9: [
+        ['.-.', '.-.', '#-.'],
+        ['.-.', '#-.', '+-#'],
+        ['#-.', '+-#', '.-+'],
+        ['+-#', '.-+', '.-.'],
+        ['.-+', '.-.', '.-.'],
+        ['.-.', '.-.', '.-.'],
+    ],
+};
+export function isLatticeFrameVariant(variant) {
+    return variant in LATTICE_FRAMES;
+}
+/** The opacity a frame character stands for, as a CSS value. */
+export function frameOpacity(ch) {
+    switch (ch) {
+        case '#': return '1';
+        case '+': return '0.5';
+        case '-': return 'var(--orb-dim)';
+        default: return 'var(--orb-rest)';
+    }
+}
+/**
+ * One cell's frames as custom properties (`--orb-f0`, `--orb-s0`, …) that the
+ * shared `orb-frames-N` keyframes in orb-lattice.module.css read. Keyframes
+ * cannot be generated per cell inside a CSS module, so the cell carries its
+ * own values and N keyframes serve every frame-drawn look.
+ */
+function frameVars(frames, x, y) {
+    const vars = {};
+    frames.forEach((frame, i) => {
+        const ch = frame[y]?.[x] ?? '.';
+        vars[`--orb-f${i}`] = frameOpacity(ch);
+        vars[`--orb-s${i}`] = ch === '#' ? '1.15' : '1';
+    });
+    return vars;
+}
+function swirl(x, y, angle) {
+    const deltaX = x - MIDPOINT;
+    const deltaY = y - MIDPOINT;
+    const cosine = Math.cos(angle);
+    const sine = Math.sin(angle);
+    return [
+        ((deltaX * cosine - deltaY * sine) * SPREAD - deltaX) * PITCH,
+        ((deltaX * sine + deltaY * cosine) * SPREAD - deltaY) * PITCH,
+    ];
+}
+function buildLatticeCells(variant) {
+    const cells = [];
+    for (let y = 0; y < GRID_SIZE; y++) {
+        for (let x = 0; x < GRID_SIZE; x++) {
+            const [ax, ay] = swirl(x, y, -SWIRL);
+            const [bx, by] = swirl(x, y, SWIRL);
+            const key = `${x},${y}`;
+            cells.push({
+                key,
+                left: x * PITCH,
+                top: y * PITCH,
+                delay: cellDelay(variant, x, y),
+                ax,
+                ay,
+                bx,
+                by,
+                still: (variant === 'S3' || variant === 'S5') && !PERIMETER_INDEX.has(key),
+                mid: x === MIDPOINT && y === MIDPOINT,
+                frames: isLatticeFrameVariant(variant) ? frameVars(LATTICE_FRAMES[variant], x, y) : null,
+            });
+        }
+    }
+    return cells;
+}
+export const latticeCells = memoiseByVariant(buildLatticeCells);

package/dist/ui/orb/orb-lattice.module.css

@@ -0,0 +1,165 @@
+/* --- Lattice: discrete dots on a fixed 3×3 grid ------------------- */
+
+.lattice {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 28px;
+  height: 28px;
+  transform-origin: 0 0;
+  /* Three 3px dots on a 6px pitch measure 15px, so the grid is offset to sit
+     centred on the 28px stage. It deliberately does not fill the stage: that
+     is what keeps its visual weight level with the Lens circles. */
+  transform: scale(var(--orb-k, 1)) translate(6.5px, 6.5px);
+  /* Resting ink of an unlit cell — the grid stays legible between beats.
+     --orb-dim is for cells sitting a choreography out entirely. */
+  --orb-rest: 0.14;
+  --orb-dim: 0.07;
+}
+
+/* Light ink on a dark surface reads dimmer at the same alpha. */
+:global(.dark) .lattice {
+  --orb-rest: 0.2;
+  --orb-dim: 0.1;
+}
+
+
+.cell {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: var(--orb-rest);
+}
+
+/* One wave shape drives all three sweeps. What separates them is the pair of
+   duration and per-cell stagger: the stagger sets how fast the wavefront
+   travels, the duration how many cells it holds lit at once — which is to
+   say, how wide the band reads. */
+.lattice[data-variant="S1"] .cell {
+  animation: orb-wave 1.7s var(--orb-ease-in-out) infinite both;
+}
+
+.lattice[data-variant="S2"] .cell {
+  animation: orb-wave 1.7s var(--orb-ease-in-out) infinite both;
+}
+
+.lattice[data-variant="S4"] .cell {
+  animation: orb-wave 1.6s var(--orb-ease-in-out) infinite both;
+}
+
+.lattice[data-variant="S3"] .cell {
+  animation: orb-comet 1.7s var(--orb-ease-smooth) infinite both;
+}
+
+/* Interior cells sit out `orbit` and drop back, so the ring reads as a
+   ring and the travelling head has something to stand out against. */
+.lattice[data-variant="S3"] .cell[data-still] {
+  animation: none;
+  opacity: var(--orb-dim);
+}
+
+.lattice[data-variant="S5"] .cell {
+  animation: orb-comet 1.7s var(--orb-ease-smooth) infinite both;
+}
+
+.lattice[data-variant="S5"] .cell[data-still] {
+  animation: none;
+  opacity: var(--orb-dim);
+}
+
+/* Swells and subsides on the same symmetric curve, so there is no flash and
+   no hard edge — the cell rises out of its resting ink and sinks back into
+   it. The long tail after 56% is the gap between beats. */
+@keyframes orb-wave {
+  0% {
+    opacity: var(--orb-rest);
+    transform: scale(1);
+    animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
+  }
+  28% {
+    opacity: 1;
+    transform: scale(1.18);
+    animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
+  }
+  56% {
+    opacity: var(--orb-rest);
+    transform: scale(1);
+  }
+  100% {
+    opacity: var(--orb-rest);
+    transform: scale(1);
+  }
+}
+
+/* Starts lit and decays, so staggered ring cells form a head and tail.
+   The decay spans ~3.5 of the 8 ring positions — enough to read as a comet. */
+@keyframes orb-comet {
+  0% {
+    opacity: 1;
+    transform: scale(1.2);
+    /* Linear, so the cells behind the head form an even gradient instead
+       of collapsing to rest within the first two. */
+    animation-timing-function: linear;
+  }
+  45% {
+    opacity: var(--orb-rest);
+    transform: scale(1);
+  }
+  100% {
+    opacity: var(--orb-rest);
+    transform: scale(1);
+  }
+}
+
+
+/* --- The stacked-PR waits: frame-drawn on the same grid ------------
+   Each cell carries its own opacity and scale per frame as custom properties
+   (`--orb-f0`, `--orb-s0`, … from LATTICE_FRAMES in orb-lattice-geometry.ts),
+   so one keyframe per FRAME COUNT serves every look. The frames sit evenly
+   round the period; the timing function applies between each pair. */
+.lattice[data-variant="S6"] .cell,
+.lattice[data-variant="S7"] .cell,
+.lattice[data-variant="S8"] .cell {
+  animation: orb-frames-5 1.3s linear infinite both;
+}
+
+/* Waiting climbs: the outer columns go up hand over hand, the middle sits
+   out, and the last frame rests before the next climb. */
+.lattice[data-variant="S9"] .cell {
+  animation: orb-frames-6 1.6s linear infinite both;
+}
+
+@keyframes orb-frames-5 {
+  0%, 100% { opacity: var(--orb-f0); transform: scale(var(--orb-s0)); }
+  20% { opacity: var(--orb-f1); transform: scale(var(--orb-s1)); }
+  40% { opacity: var(--orb-f2); transform: scale(var(--orb-s2)); }
+  60% { opacity: var(--orb-f3); transform: scale(var(--orb-s3)); }
+  80% { opacity: var(--orb-f4); transform: scale(var(--orb-s4)); }
+}
+
+@keyframes orb-frames-6 {
+  0%, 100% { opacity: var(--orb-f0); transform: scale(var(--orb-s0)); }
+  16.667% { opacity: var(--orb-f1); transform: scale(var(--orb-s1)); }
+  33.333% { opacity: var(--orb-f2); transform: scale(var(--orb-s2)); }
+  50% { opacity: var(--orb-f3); transform: scale(var(--orb-s3)); }
+  66.667% { opacity: var(--orb-f4); transform: scale(var(--orb-s4)); }
+  83.333% { opacity: var(--orb-f5); transform: scale(var(--orb-s5)); }
+}
+
+:global([data-orb-paused]) .lattice,
+:global([data-orb-paused]) .cell {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lattice,
+  .cell {
+    animation: none !important;
+  }
+
+  .cell[data-mid] {
+    opacity: 1 !important;
+  }
+}