@odyn-app/api 0.0.0-stage → 0.1.0

package/dist/ui/orb/orb-lens-primary.module.css

@@ -0,0 +1,195 @@
+/* focus — attention travels the cast: each circle pulls into focus in turn.
+   Four circles on the corners of a square, one size for all of them, so the
+   only thing separating them is which one is sharp.
+
+   A second longer than the three-circle version it grew out of: the square
+   has four stations to visit and each one keeps the same unhurried second.
+
+   The delays count down rather than up because a more negative delay seeds a
+   circle further into its cycle: -3s of a 4s cycle runs three quarters ahead,
+   which is what sends focus round the square clockwise. */
+.variants[data-variant="B1"] :global([data-orb-shape]) {
+  --orb-d: 6px;
+  animation: orb-focus 4s var(--orb-ease-smooth) infinite both;
+}
+
+.variants[data-variant="B1"] :global([data-orb-shape="a"]) {
+  --orb-ox: -4.5px;
+  --orb-oy: -4.5px;
+  animation-delay: 0s;
+}
+
+.variants[data-variant="B1"] :global([data-orb-shape="b"]) {
+  --orb-ox: 4.5px;
+  --orb-oy: -4.5px;
+  animation-delay: -3s;
+}
+
+.variants[data-variant="B1"] :global([data-orb-shape="c"]) {
+  --orb-ox: 4.5px;
+  --orb-oy: 4.5px;
+  animation-delay: -2s;
+}
+
+.variants[data-variant="B1"] :global([data-orb-shape="d"]) {
+  --orb-ox: -4.5px;
+  --orb-oy: 4.5px;
+  animation-delay: -1s;
+}
+
+/* Opacity gradient around the square: active = 1.0, next neighbour = 0.30,
+   diagonal = 0.10, far = 0.05. Two circles are always clearly visible, the
+   rest are ghost hints. */
+@keyframes orb-focus {
+  0%,
+  100% {
+    opacity: 0.05;
+    filter: blur(2px);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.12);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  12% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1);
+    animation-timing-function: linear;
+  }
+  22% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  /* Next neighbour — one quarter away: clearly visible */
+  38% {
+    opacity: 0.3;
+    filter: blur(1.2px);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.06);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  /* Diagonal — half a cycle away: ghost */
+  58% {
+    opacity: 0.1;
+    filter: blur(1.8px);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.1);
+    animation-timing-function: linear;
+  }
+  /* Far neighbour — three quarters away: barely there */
+  82% {
+    opacity: 0.05;
+    filter: blur(2px);
+    transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.12);
+  }
+}
+
+/* drift — the cast circles the stage on one track, sharp at the front and
+   blurred away at the back, so the orb reads as looking around. Uniform
+   size: the depth cue is doing the work, a size ladder would fight it. */
+.variants[data-variant="B2"] :global([data-orb-shape]) {
+  animation: orb-revolve 3.3s linear infinite both;
+}
+
+/* Evenly spaced around the track, so one is always at the front. */
+.variants[data-variant="B2"] :global([data-orb-shape="a"]) {
+  animation-delay: 0s;
+}
+
+.variants[data-variant="B2"] :global([data-orb-shape="b"]) {
+  animation-delay: -1.1s;
+}
+
+.variants[data-variant="B2"] :global([data-orb-shape="c"]) {
+  animation-delay: -2.2s;
+}
+
+/* rotate() then translateY() walks a circle. Linear all the way: an eased
+   rotation on a circular path reads as a wobble, not as travel. */
+@keyframes orb-revolve {
+  0% {
+    opacity: 1;
+    filter: blur(0);
+    transform: rotate(0deg) translateY(6.5px) scale(1);
+  }
+  25% {
+    opacity: 0.55;
+    filter: blur(1.3px);
+    transform: rotate(90deg) translateY(6.5px) scale(0.82);
+  }
+  50% {
+    opacity: 0.28;
+    filter: blur(2.4px);
+    transform: rotate(180deg) translateY(6.5px) scale(0.66);
+  }
+  75% {
+    opacity: 0.55;
+    filter: blur(1.3px);
+    transform: rotate(270deg) translateY(6.5px) scale(0.82);
+  }
+  100% {
+    opacity: 1;
+    filter: blur(0);
+    transform: rotate(360deg) translateY(6.5px) scale(1);
+  }
+}
+
+/* bloom — shapes emanate from the centre, blurring out as they grow.
+   Linear keeps the total ink even; on a front-loaded curve the shapes
+   jump to their large, blurred end state and the orb alternates between
+   a heavy blot and an empty haze. */
+.variants[data-variant="B3"] :global([data-orb-shape]) {
+  animation: orb-bloom 4.2s linear infinite both;
+}
+
+.variants[data-variant="B3"] :global([data-orb-shape="a"]) {
+  animation-delay: 0s;
+}
+
+.variants[data-variant="B3"] :global([data-orb-shape="b"]) {
+  animation-delay: -1.4s;
+}
+
+.variants[data-variant="B3"] :global([data-orb-shape="c"]) {
+  animation-delay: -2.8s;
+}
+
+/* Each ripple dies at 62% and waits out the rest, so the three overlapping
+   blooms leave gaps. Without the gap the aggregate is a constant haze and
+   the outward motion stops reading at all. Sharp circle appears, holds
+   briefly, then dissolves outward — blur only kicks in once opacity starts
+   dropping, so the circle stays crisp while it's visible and the blur reads
+   as the ripple dissipating. */
+@keyframes orb-bloom {
+  0% {
+    opacity: 0;
+    filter: blur(0);
+    transform: scale(0.35);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+  8% {
+    opacity: 1;
+    filter: blur(0);
+    transform: scale(0.55);
+    animation-timing-function: linear;
+  }
+  24% {
+    opacity: 1;
+    filter: blur(0);
+    transform: scale(0.72);
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  42% {
+    opacity: 0.1;
+    filter: blur(1.8px);
+    transform: scale(1.5);
+  }
+  62% {
+    opacity: 0;
+    filter: blur(2.8px);
+    transform: scale(2.4);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(2.8px);
+    transform: scale(2.4);
+  }
+}

package/dist/ui/orb/orb-lens-secondary.module.css

@@ -0,0 +1,143 @@
+/* converge — a single circle traces an equilateral triangle (top → bottom-right
+   → bottom-left → top) with handoff-style easing: full size and sharp at each
+   vertex, smaller and slightly blurred in transit.  orbB breathes at the
+   centroid as a subtle depth cue; orbC is hidden. */
+.variants[data-variant="B4"] :global([data-orb-shape="a"]) {
+  animation: orb-converge 3.6s linear infinite both;
+}
+.variants[data-variant="B4"] :global([data-orb-shape="b"]) {
+  animation: orb-breathe 3.6s ease-in-out infinite both;
+}
+.variants[data-variant="B4"] :global([data-orb-shape="c"]) {
+  display: none;
+}
+
+@keyframes orb-converge {
+  0% {
+    transform: translate(0px, -5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: linear;
+  }
+  10% {
+    transform: translate(0px, -5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
+  }
+  22% {
+    transform: translate(2.15px, -1.25px) scale(0.72);
+    filter: blur(0.8px);
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  33% {
+    transform: translate(4.3px, 2.5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: linear;
+  }
+  43% {
+    transform: translate(4.3px, 2.5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
+  }
+  55% {
+    transform: translate(0px, 2.5px) scale(0.72);
+    filter: blur(0.8px);
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  66% {
+    transform: translate(-4.3px, 2.5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: linear;
+  }
+  77% {
+    transform: translate(-4.3px, 2.5px) scale(1);
+    filter: blur(0);
+    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
+  }
+  88% {
+    transform: translate(-2.15px, -1.25px) scale(0.72);
+    filter: blur(0.8px);
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  100% {
+    transform: translate(0px, -5px) scale(1);
+    filter: blur(0);
+  }
+}
+
+/* handoff — the cast crosses the focal plane one after another, always left
+   to right, like work being passed on. The shorthand curve is only a
+   fallback; every segment below sets its own. */
+.variants[data-variant="B5"] :global([data-orb-shape]) {
+  animation: orb-handoff 2.8s linear infinite both;
+}
+
+/* Half a cycle apart, so one is always at the focal plane while the other is
+   invisible at an end and the loop point cannot be seen. */
+.variants[data-variant="B5"] :global([data-orb-shape="a"]) {
+  animation-delay: 0s;
+}
+
+.variants[data-variant="B5"] :global([data-orb-shape="c"]) {
+  animation-delay: -1.4s;
+}
+
+/* The third holds the centre and breathes — a soft depth cue behind the
+   traffic rather than another traveller. */
+.variants[data-variant="B5"] :global([data-orb-shape="b"]) {
+  animation-name: orb-breathe;
+  animation-duration: 3.6s;
+}
+
+/* Enters small from the left, reaches standard size at the focal plane, then
+   shrinks and fades out to the right. At the dwell (centre) the circle is
+   exactly 1× — no pulsing, no bounce, just a clean handoff. */
+@keyframes orb-handoff {
+  0% {
+    opacity: 0;
+    filter: blur(2.4px);
+    transform: translateX(-11px) scale(0.55);
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  22% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateX(-1px) scale(1);
+    animation-timing-function: linear;
+  }
+  37% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateX(0) scale(1);
+    animation-timing-function: linear;
+  }
+  52% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateX(1px) scale(1);
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  70% {
+    opacity: 0;
+    filter: blur(2.4px);
+    transform: translateX(11px) scale(0.55);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(2.4px);
+    transform: translateX(11px) scale(0.55);
+  }
+}
+
+@keyframes orb-breathe {
+  0%,
+  100% {
+    opacity: 0.16;
+    filter: blur(2.4px);
+    transform: scale(1.2);
+  }
+  50% {
+    opacity: 0.32;
+    filter: blur(1.6px);
+    transform: scale(0.98);
+  }
+}

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

@@ -0,0 +1,44 @@
+/* Shared stage for the Lens family. Variant choreography is split by group. */
+.lens {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 28px;
+  height: 28px;
+  transform-origin: 0 0;
+  transform: scale(var(--orb-k, 1));
+}
+
+.shape {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--orb-d, 7px);
+  height: var(--orb-d, 7px);
+  margin: calc(var(--orb-d, 7px) / -2) 0 0 calc(var(--orb-d, 7px) / -2);
+  border-radius: 50%;
+  background: currentColor;
+}
+
+:global([data-orb-paused]) .lens,
+:global([data-orb-paused]) .shape {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lens,
+  .shape {
+    animation: none !important;
+  }
+
+  .shape {
+    opacity: 0.3 !important;
+    filter: blur(1.4px) !important;
+    transform: none !important;
+  }
+
+  .shape:first-child {
+    opacity: 1 !important;
+    filter: blur(0) !important;
+  }
+}

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

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

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

@@ -0,0 +1,88 @@
+import { memoiseByVariant } from './orb-geometry-cache';
+const DOT_COUNT = 8;
+const RADIUS = 7;
+const circle = (index) => {
+    const angle = (index / DOT_COUNT) * Math.PI * 2 - Math.PI / 2;
+    return [Math.cos(angle) * RADIUS, Math.sin(angle) * RADIUS];
+};
+const square = (index) => {
+    const halfSize = RADIUS * 0.85;
+    const corners = [
+        [-halfSize, -halfSize],
+        [halfSize, -halfSize],
+        [halfSize, halfSize],
+        [-halfSize, halfSize],
+    ];
+    const progress = ((index / DOT_COUNT) * 4 + 0.5) % 4;
+    const side = Math.floor(progress) % 4;
+    const fraction = progress - Math.floor(progress);
+    const from = corners[side];
+    const to = corners[(side + 1) % 4];
+    return [
+        from[0] + (to[0] - from[0]) * fraction,
+        from[1] + (to[1] - from[1]) * fraction,
+    ];
+};
+const circleAt = (turn) => (index) => {
+    const angle = (index / DOT_COUNT) * Math.PI * 2 - Math.PI / 2 + turn;
+    return [Math.cos(angle) * RADIUS, Math.sin(angle) * RADIUS];
+};
+const scatter = (index) => {
+    const angle = (index / DOT_COUNT) * Math.PI * 2 - Math.PI / 2;
+    return [-Math.cos(angle) * RADIUS, Math.sin(angle) * RADIUS];
+};
+const diamond = (index) => {
+    const corners = [
+        [0, -RADIUS],
+        [RADIUS, 0],
+        [0, RADIUS],
+        [-RADIUS, 0],
+    ];
+    const progress = (index / DOT_COUNT) * 4;
+    const side = Math.floor(progress) % 4;
+    const fraction = progress - Math.floor(progress);
+    const from = corners[side];
+    const to = corners[(side + 1) % 4];
+    return [
+        from[0] + (to[0] - from[0]) * fraction,
+        from[1] + (to[1] - from[1]) * fraction,
+    ];
+};
+const centre = (index) => {
+    const angle = (index / DOT_COUNT) * Math.PI * 2 - Math.PI / 2;
+    return [Math.cos(angle) * 1.5, Math.sin(angle) * 1.5];
+};
+function morphShapes(variant) {
+    switch (variant) {
+        case 'M1':
+            return [circle, square, diamond, square];
+        case 'M2':
+            return [centre, circle, centre, circle];
+        case 'M3':
+            return [circleAt(0), circleAt(Math.PI / 2), circleAt(Math.PI), circleAt(Math.PI * 1.5)];
+        case 'M4':
+            return [circle, diamond, circle, diamond];
+        case 'M5':
+            return [circle, scatter, circle, scatter];
+    }
+}
+function buildMorphDots(variant) {
+    const shapes = morphShapes(variant);
+    const pair = (point) => `${point[0].toFixed(1)}px, ${point[1].toFixed(1)}px`;
+    return Array.from({ length: DOT_COUNT }, (_, index) => ({
+        key: index,
+        style: {
+            '--m-1': pair(shapes[0](index)),
+            '--m-2': pair(shapes[1](index)),
+            '--m-3': pair(shapes[2](index)),
+            '--m-4': pair(shapes[3](index)),
+            ...(variant === 'M5'
+                ? {
+                    '--m-depth': Math.abs(Math.cos((index / DOT_COUNT) * Math.PI * 2 - Math.PI / 2)).toFixed(2),
+                    animationDelay: `${-index * 10}ms`,
+                }
+                : {}),
+        },
+    }));
+}
+export const morphDots = memoiseByVariant(buildMorphDots);

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

@@ -0,0 +1,62 @@
+/* ---- Morph ---- */
+.morph {
+  position: absolute;
+  inset: 0;
+  transform: scale(var(--orb-k, 1));
+}
+
+.morphDot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 3px;
+  height: 3px;
+  margin: -1.5px 0 0 -1.5px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: orb-morph 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+@keyframes orb-morph {
+  0%, 5%   { transform: translate(var(--m-1)); }
+  25%, 30% { transform: translate(var(--m-2)); }
+  50%, 55% { transform: translate(var(--m-3)); }
+  75%, 80% { transform: translate(var(--m-4)); }
+  100%     { transform: translate(var(--m-1)); }
+}
+
+.morph[data-variant="M2"] {
+  animation: orb-morph-twist 9.6s linear infinite;
+}
+
+.morph[data-variant="M4"] {
+  animation: orb-morph-twist 9.6s linear infinite;
+}
+
+.morph[data-variant="M5"] .morphDot {
+  animation: orb-morph-scatter 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+@keyframes orb-morph-scatter {
+  0%, 12% { transform: translate(var(--m-1)); opacity: 1; }
+  38%, 62% { transform: translate(var(--m-2)); opacity: calc(1 - 0.6 * var(--m-depth, 0)); }
+  88%, 100% { transform: translate(var(--m-1)); opacity: 1; }
+}
+
+@keyframes orb-morph-twist {
+  from { transform: scale(var(--orb-k, 1)) rotate(0deg); }
+  to   { transform: scale(var(--orb-k, 1)) rotate(360deg); }
+}
+
+
+:global([data-orb-paused]) .morph,
+:global([data-orb-paused]) .morphDot {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .morph,
+  .morphDot {
+    animation: none !important;
+  }
+}

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

@@ -0,0 +1,8 @@
+import type { RingVariant } from './orb-types';
+export interface RingDot {
+    readonly key: number;
+    readonly rx: number;
+    readonly ry: number;
+    readonly delay: number;
+}
+export declare const ringDots: (variant: RingVariant) => readonly RingDot[];

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

@@ -0,0 +1,42 @@
+import { memoiseByVariant } from './orb-geometry-cache';
+const DOT_COUNT = 8;
+const RADIUS = 8;
+function ringDuration(variant) {
+    switch (variant) {
+        case 'C1':
+            return 1600;
+        case 'C2':
+            return 2000;
+        case 'C3':
+            return 1800;
+        case 'C4':
+            return 1600;
+        case 'C5':
+            return 2200;
+    }
+}
+function ringDelay(variant, index) {
+    const duration = ringDuration(variant);
+    switch (variant) {
+        case 'C1':
+        case 'C2':
+        case 'C3':
+            return -((DOT_COUNT - 1 - index) / DOT_COUNT) * duration;
+        case 'C4':
+            return index % 2 === 0 ? 0 : -(duration / 2);
+        case 'C5':
+            return -(((index * 3) % DOT_COUNT) / DOT_COUNT) * duration;
+    }
+}
+function buildRingDots(variant) {
+    return Array.from({ length: DOT_COUNT }, (_, index) => {
+        const angle = (index / DOT_COUNT) * Math.PI * 2 - Math.PI / 2;
+        return {
+            key: index,
+            rx: Math.cos(angle) * RADIUS,
+            ry: Math.sin(angle) * RADIUS,
+            delay: ringDelay(variant, index),
+        };
+    });
+}
+export const ringDots = memoiseByVariant(buildRingDots);

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

@@ -0,0 +1,113 @@
+/* --- Ring: eight circles on a fixed ring ----------------------------- */
+.ring {
+  position: absolute;
+  inset: 0;
+  transform: scale(var(--orb-k, 1));
+  --orb-ring-rest: 0.22;
+}
+
+:global(.dark) .ring {
+  --orb-ring-rest: 0.3;
+}
+
+
+.ringDot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 3px;
+  height: 3px;
+  margin: -1.5px 0 0 -1.5px;
+  border-radius: 50%;
+  background: currentColor;
+  transform: translate(var(--orb-rx), var(--orb-ry));
+}
+
+.ring[data-variant="C1"] .ringDot {
+  opacity: var(--orb-ring-rest);
+  animation: orb-ring-chase 1.6s linear infinite both;
+}
+
+@keyframes orb-ring-chase {
+  0%, 11% {
+    opacity: 1;
+  }
+  12.5%, 100% {
+    opacity: var(--orb-ring-rest);
+  }
+}
+
+.ring[data-variant="C2"] .ringDot {
+  animation: orb-ring-pulse 2s ease-in-out infinite both;
+}
+
+@keyframes orb-ring-pulse {
+  0%, 100% {
+    opacity: 0.18;
+    transform: translate(var(--orb-rx), var(--orb-ry)) scale(0.7);
+  }
+  50% {
+    opacity: 1;
+    transform: translate(var(--orb-rx), var(--orb-ry)) scale(1.15);
+  }
+}
+
+.ring[data-variant="C3"] .ringDot {
+  animation: orb-ring-comet 1.8s ease-in-out infinite both;
+}
+
+@keyframes orb-ring-comet {
+  0%, 100% {
+    opacity: 0.08;
+    transform: translate(var(--orb-rx), var(--orb-ry));
+  }
+  12% {
+    opacity: 1;
+    transform: translate(var(--orb-rx), var(--orb-ry));
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  35% {
+    opacity: 0.5;
+    transform: translate(var(--orb-rx), var(--orb-ry));
+  }
+  60% {
+    opacity: 0.12;
+    transform: translate(var(--orb-rx), var(--orb-ry));
+  }
+}
+
+.ring[data-variant="C4"] .ringDot {
+  animation: orb-ring-stagger 1.6s ease-in-out infinite both;
+}
+
+@keyframes orb-ring-stagger {
+  0%, 100% {
+    opacity: 1;
+    transform: translate(var(--orb-rx), var(--orb-ry));
+  }
+  50% {
+    opacity: 0.15;
+    transform: translate(var(--orb-rx), var(--orb-ry));
+  }
+}
+
+.ring[data-variant="C5"] .ringDot {
+  animation: orb-ring-comet 1.8s ease-in-out infinite both;
+}
+
+
+:global([data-orb-paused]) .ring,
+:global([data-orb-paused]) .ringDot {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ring,
+  .ringDot {
+    animation: none !important;
+  }
+
+  .ringDot {
+    opacity: 0.7 !important;
+  }
+}