@odyn-app/api 0.0.0-stage → 0.2.0

package/dist/ui/orb/orb-frame-clock.d.ts

@@ -0,0 +1,34 @@
+/**
+ * One shared clock that moves every spinning orb forward a few times a second.
+ *
+ * Left to itself, a CSS animation makes the browser redraw the whole window 60
+ * times a second for as long as it runs. While a reply is streaming, that
+ * redraw cost about 40% of a processor core in testing — and one 3px orb cost
+ * as much as four, because the price is the redraw itself, not the dots.
+ *
+ * So the orbs' CSS animations are paused as soon as they start, and this clock
+ * moves them to the right moment ORB_FRAMES_PER_SECOND times a second. Each
+ * style keeps its exact shape and easing; only the number of redraws drops.
+ * Between ticks nothing changes, and the browser skips the redraw.
+ */
+export declare const ORB_FRAMES_PER_SECOND = 12;
+/** Marks an orb's outer element, so a starting animation can be traced to one. */
+export declare const ORB_ROOT_ATTRIBUTE = "data-orb";
+/** Present on an orb held on its opening frame; the clock leaves those alone. */
+export declare const ORB_PAUSED_ATTRIBUTE = "data-orb-paused";
+/** Moves every clocked animation to where it should be at `now`. */
+export declare function tickOrbClock(now: number): void;
+/**
+ * Hands these animations to the shared clock, carrying on from wherever each
+ * one already is. Handing over one that is already clocked does nothing.
+ */
+export declare function clockOrbAnimations(animations: readonly Animation[], now?: number): void;
+/** Takes these animations off the clock. They stay paused where they are. */
+export declare function releaseOrbAnimations(animations: readonly Animation[]): void;
+/**
+ * Called by each orb while it is on screen. The first one starts listening for
+ * orb animations; the last one to leave stops. Returns the matching "leave".
+ */
+export declare function watchOrbAnimations(): () => void;
+/** How many animations the clock is driving — for tests. */
+export declare function clockedOrbAnimationCount(): number;

package/dist/ui/orb/orb-frame-clock.js

@@ -0,0 +1,110 @@
+/**
+ * One shared clock that moves every spinning orb forward a few times a second.
+ *
+ * Left to itself, a CSS animation makes the browser redraw the whole window 60
+ * times a second for as long as it runs. While a reply is streaming, that
+ * redraw cost about 40% of a processor core in testing — and one 3px orb cost
+ * as much as four, because the price is the redraw itself, not the dots.
+ *
+ * So the orbs' CSS animations are paused as soon as they start, and this clock
+ * moves them to the right moment ORB_FRAMES_PER_SECOND times a second. Each
+ * style keeps its exact shape and easing; only the number of redraws drops.
+ * Between ticks nothing changes, and the browser skips the redraw.
+ */
+export const ORB_FRAMES_PER_SECOND = 12;
+const ORB_FRAME_INTERVAL_MS = 1000 / ORB_FRAMES_PER_SECOND;
+/** Marks an orb's outer element, so a starting animation can be traced to one. */
+export const ORB_ROOT_ATTRIBUTE = 'data-orb';
+/** Present on an orb held on its opening frame; the clock leaves those alone. */
+export const ORB_PAUSED_ATTRIBUTE = 'data-orb-paused';
+/** Each clocked animation, with when its own timeline started (`performance.now()` scale). */
+const clockedAnimations = new Map();
+let clockTimer = null;
+let mountedOrbCount = 0;
+function readCurrentTime(animation) {
+    const { currentTime } = animation;
+    return typeof currentTime === 'number' ? currentTime : 0;
+}
+function stopClockIfIdle() {
+    if (clockedAnimations.size > 0 || clockTimer === null)
+        return;
+    clearInterval(clockTimer);
+    clockTimer = null;
+}
+/** Moves every clocked animation to where it should be at `now`. */
+export function tickOrbClock(now) {
+    for (const [animation, origin] of clockedAnimations) {
+        // The stylesheet removed it (the orb left the page, or reduce-motion was
+        // switched on), so stop driving it — setting its time would revive it.
+        if (animation.playState === 'idle') {
+            clockedAnimations.delete(animation);
+            continue;
+        }
+        animation.currentTime = now - origin;
+    }
+    stopClockIfIdle();
+}
+function tickWhenVisible() {
+    // A hidden window has nothing to show; the next visible tick jumps each
+    // animation straight to the right moment.
+    if (typeof document !== 'undefined' && document.hidden)
+        return;
+    tickOrbClock(performance.now());
+}
+/**
+ * Hands these animations to the shared clock, carrying on from wherever each
+ * one already is. Handing over one that is already clocked does nothing.
+ */
+export function clockOrbAnimations(animations, now = performance.now()) {
+    for (const animation of animations) {
+        if (animation.playState === 'idle' || clockedAnimations.has(animation))
+            continue;
+        clockedAnimations.set(animation, now - readCurrentTime(animation));
+        animation.pause();
+    }
+    if (clockedAnimations.size > 0)
+        clockTimer ??= setInterval(tickWhenVisible, ORB_FRAME_INTERVAL_MS);
+}
+/** Takes these animations off the clock. They stay paused where they are. */
+export function releaseOrbAnimations(animations) {
+    for (const animation of animations)
+        clockedAnimations.delete(animation);
+    stopClockIfIdle();
+}
+/**
+ * Some orb animations start after the orb first appears — a card opening, a
+ * row scrolling back into view. Catch each one the moment it starts.
+ */
+function handleAnimationStart(event) {
+    const { target } = event;
+    if (!(target instanceof Element))
+        return;
+    if (target.closest(`[${ORB_ROOT_ATTRIBUTE}]`) === null)
+        return;
+    if (target.closest(`[${ORB_PAUSED_ATTRIBUTE}]`) !== null)
+        return;
+    clockOrbAnimations(target
+        .getAnimations()
+        .filter((animation) => animation instanceof CSSAnimation && animation.animationName === event.animationName));
+}
+/**
+ * Called by each orb while it is on screen. The first one starts listening for
+ * orb animations; the last one to leave stops. Returns the matching "leave".
+ */
+export function watchOrbAnimations() {
+    if (typeof document === 'undefined')
+        return () => { };
+    mountedOrbCount += 1;
+    if (mountedOrbCount === 1)
+        document.addEventListener('animationstart', handleAnimationStart, true);
+    return () => {
+        mountedOrbCount -= 1;
+        if (mountedOrbCount === 0) {
+            document.removeEventListener('animationstart', handleAnimationStart, true);
+        }
+    };
+}
+/** How many animations the clock is driving — for tests. */
+export function clockedOrbAnimationCount() {
+    return clockedAnimations.size;
+}

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

@@ -0,0 +1 @@
+export declare function memoiseByVariant<Variant, Value>(build: (variant: Variant) => Value): (variant: Variant) => Value;

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

@@ -0,0 +1,11 @@
+export function memoiseByVariant(build) {
+    const cache = new Map();
+    return (variant) => {
+        const cached = cache.get(variant);
+        if (cached !== undefined)
+            return cached;
+        const built = build(variant);
+        cache.set(variant, built);
+        return built;
+    };
+}

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

@@ -0,0 +1,7 @@
+import type { CSSProperties } from 'react';
+import type { HelixVariant } from './orb-types';
+export interface GlobeDot {
+    readonly key: number;
+    readonly style: CSSProperties;
+}
+export declare const globeDots: (variant: HelixVariant) => readonly GlobeDot[];

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);