noecosystem-design 0.1.0

package/packages/ui/src/cinematic/ecosystem-sphere.tsx

@@ -0,0 +1,627 @@
+'use client';
+
+import type { PointerEvent as ReactPointerEvent } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { type PortfolioNode, PUBLIC_PORTFOLIO_CORE, PUBLIC_PORTFOLIO_NODES } from './portfolio';
+import './cinematic.css';
+
+type EcosystemNode = PortfolioNode & {
+  theta: number;
+  phi: number;
+  orbitSpeed: number;
+  polarSpeed: number;
+  polarAmplitude: number;
+  phase: number;
+  wobblePhase: number;
+};
+
+type ProjectedNode = EcosystemNode & {
+  x: number;
+  y: number;
+  z: number;
+  scale: number;
+};
+
+const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+const TWO_PI = Math.PI * 2;
+
+// Token exception — cinematic canvas palette
+// Owner: @noe/design-tokens, Reason: Canvas 2D fillStyle requires opaque hex values not CSS vars; colors are derived from primitive palette (mint-100, mint-300, ink-950 variants) and isolated to cinematic stage.
+// Review: 2027-08-28, Affected: packages/ui/src/cinematic/*, Test: visual regression for cinematic stage
+const COLORS = {
+  mint: '#98e8cf', // primitive mint-100
+  teal: '#1dbf98', // primitive mint-300
+  ink: '#030d2d', // cinematic deep ink (graphite-derived, not semantic)
+  white: '#f9fafb',
+  muted: '#8fa1b8',
+};
+
+function seededUnit(value: string, salt: string) {
+  let hash = 2166136261;
+  const input = `${value}:${salt}`;
+  for (let index = 0; index < input.length; index += 1) {
+    hash ^= input.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0) / 4294967295;
+}
+
+function rotatePoint(theta: number, phi: number, rotationX: number, rotationY: number) {
+  const cosPhi = Math.cos(phi);
+  const sourceX = cosPhi * Math.cos(theta);
+  const sourceY = Math.sin(phi);
+  const sourceZ = cosPhi * Math.sin(theta);
+  const cosY = Math.cos(rotationY);
+  const sinY = Math.sin(rotationY);
+  const rotatedX = sourceX * cosY - sourceZ * sinY;
+  const rotatedZ = sourceX * sinY + sourceZ * cosY;
+  const cosX = Math.cos(rotationX);
+  const sinX = Math.sin(rotationX);
+  return {
+    x: rotatedX,
+    y: sourceY * cosX - rotatedZ * sinX,
+    z: sourceY * sinX + rotatedZ * cosX,
+  };
+}
+
+export interface EcosystemSphereProps {
+  nodes?: readonly PortfolioNode[];
+  className?: string;
+  ariaLabel?: string;
+}
+
+/**
+ * 3D ecosystem sphere — ported from NOEcosystem-Frontend-Light-Dark/app/EcosystemSphere.tsx.
+ * Canvas-based, handles light/dark via `data-theme` / `noecosystem-themechange`.
+ * Fully keyboard and pointer accessible; respects prefers-reduced-motion.
+ */
+export function EcosystemSphere({
+  nodes = PUBLIC_PORTFOLIO_NODES,
+  className,
+  ariaLabel = 'Interactive three-dimensional NOEcosystem operating ecosystem with the official NO logo at its fixed core and independently moving named capabilities. Hover, tap, or use arrow keys to inspect node roles.',
+}: EcosystemSphereProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const frameRef = useRef<number | null>(null);
+  const rotationRef = useRef({ x: -0.16, y: 0.35 });
+  const pointerRef = useRef({ active: false, x: 0, y: 0 });
+  const hoverRef = useRef(-1);
+  const projectedRef = useRef<ProjectedNode[]>([]);
+  const visibleRef = useRef(true);
+  const wakeFrameRef = useRef<() => void>(() => undefined);
+  const manualUntilRef = useRef(0);
+  const [activeNode, setActiveNode] = useState(0);
+  const [portfolioNodes] = useState<PortfolioNode[]>([...nodes]);
+  const activeNodeRef = useRef(0);
+  const ecosystemNodes = useMemo<EcosystemNode[]>(() => {
+    const denominator = Math.max(1, portfolioNodes.length - 1);
+    return portfolioNodes.map((node, index) => ({
+      ...node,
+      theta: GOLDEN_ANGLE * index,
+      phi: Math.asin((1 - (index / denominator) * 2) * 0.86),
+      orbitSpeed:
+        (seededUnit(node.id, 'direction') > 0.5 ? 1 : -1) *
+        (0.055 + seededUnit(node.id, 'orbit') * 0.055),
+      polarSpeed: 0.16 + seededUnit(node.id, 'polar-speed') * 0.18,
+      polarAmplitude: 0.045 + seededUnit(node.id, 'polar-amplitude') * 0.07,
+      phase: seededUnit(node.id, 'phase') * TWO_PI,
+      wobblePhase: seededUnit(node.id, 'wobble') * TWO_PI,
+    }));
+  }, [portfolioNodes]);
+
+  const selectNode = (index: number, manual = false) => {
+    activeNodeRef.current = index;
+    setActiveNode(index);
+    if (manual && typeof window !== 'undefined')
+      manualUntilRef.current = window.performance.now() + 8000;
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const context = canvas.getContext('2d');
+    if (!context) return;
+    let disposed = false;
+    let lightTheme = document.documentElement.dataset.theme === 'light';
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    // Use inline NO logo as text fallback instead of external image to avoid asset dependency.
+    let width = 0;
+    let height = 0;
+    const start = window.performance.now();
+    let lastFrameTime = start;
+    let motionTime = 0;
+    let lastActiveNode = -1;
+
+    const resize = () => {
+      const bounds = canvas.getBoundingClientRect();
+      const ratio = Math.min(window.devicePixelRatio || 1, 1.5);
+      width = Math.max(1, bounds.width);
+      height = Math.max(1, bounds.height);
+      canvas.width = Math.round(width * ratio);
+      canvas.height = Math.round(height * ratio);
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    };
+
+    const drawGreatCircle = (
+      centerX: number,
+      centerY: number,
+      radius: number,
+      rotationX: number,
+      rotationY: number,
+      axisOffset: number,
+    ) => {
+      context.beginPath();
+      for (let step = 0; step <= 72; step += 1) {
+        const angle = (step / 72) * Math.PI * 2;
+        const point = rotatePoint(angle + axisOffset, 0, rotationX, rotationY);
+        const x = centerX + point.x * radius;
+        const y = centerY + point.y * radius;
+        if (step === 0) context.moveTo(x, y);
+        else context.lineTo(x, y);
+      }
+      context.stroke();
+    };
+
+    const draw = (now: number) => {
+      frameRef.current = null;
+      if (disposed) return;
+      if (!visibleRef.current || document.hidden) return;
+
+      const elapsed = (now - start) / 1000;
+      const deltaTime = Math.min(0.05, Math.max(0, (now - lastFrameTime) / 1000));
+      lastFrameTime = now;
+      if (!prefersReducedMotion && !pointerRef.current.active) motionTime += deltaTime;
+
+      const rotationX = rotationRef.current.x;
+      const rotationY = rotationRef.current.y;
+      const centerX = width / 2;
+      const centerY = height / 2 + Math.min(10, height * 0.02);
+      const compact = width < 560;
+      const radius = compact
+        ? Math.min(width * 0.31, height * 0.32)
+        : Math.min(width * 0.34, height * 0.36);
+
+      context.clearRect(0, 0, width, height);
+
+      const glow = context.createRadialGradient(
+        centerX,
+        centerY,
+        0,
+        centerX,
+        centerY,
+        radius * 1.25,
+      );
+      glow.addColorStop(0, 'rgba(29, 191, 152, 0.14)');
+      glow.addColorStop(0.38, 'rgba(152, 232, 207, 0.055)');
+      glow.addColorStop(1, lightTheme ? 'rgba(243, 240, 234, 0)' : 'rgba(3, 13, 45, 0)');
+      context.fillStyle = glow;
+      context.beginPath();
+      context.arc(centerX, centerY, radius * 1.3, 0, Math.PI * 2);
+      context.fill();
+
+      context.save();
+      context.strokeStyle = lightTheme ? 'rgba(11, 111, 107, 0.18)' : 'rgba(152, 232, 207, 0.12)';
+      context.lineWidth = 1;
+      context.setLineDash([3, 7]);
+      context.beginPath();
+      context.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      context.stroke();
+      drawGreatCircle(centerX, centerY, radius, rotationX, rotationY, 0);
+      drawGreatCircle(centerX, centerY, radius, rotationX + Math.PI / 2, rotationY, Math.PI / 5);
+      context.restore();
+
+      const projected = ecosystemNodes.map((node) => {
+        const motionScale = compact ? 0.92 : 1;
+        const theta =
+          node.theta +
+          motionTime * node.orbitSpeed * motionScale +
+          Math.sin(motionTime * node.polarSpeed * 0.61 + node.wobblePhase) * 0.075 * motionScale;
+        const phi = Math.max(
+          -1.12,
+          Math.min(
+            1.12,
+            node.phi +
+              Math.sin(motionTime * node.polarSpeed + node.phase) *
+                node.polarAmplitude *
+                motionScale +
+              Math.sin(motionTime * node.polarSpeed * 0.47 + node.wobblePhase) *
+                node.polarAmplitude *
+                0.32 *
+                motionScale,
+          ),
+        );
+        const point = rotatePoint(theta, phi, rotationX, rotationY);
+        const perspective = 0.84 + (point.z + 1) * 0.13;
+        return {
+          ...node,
+          x: centerX + point.x * radius * perspective,
+          y: centerY + point.y * radius * perspective,
+          z: point.z,
+          scale: 0.72 + (point.z + 1) * 0.2,
+        };
+      });
+      projectedRef.current = projected;
+
+      const backNodes = projected.filter((node) => node.z < 0).sort((a, b) => a.z - b.z);
+      const frontNodes = projected.filter((node) => node.z >= 0).sort((a, b) => a.z - b.z);
+
+      for (const node of projected) {
+        const depthOpacity = 0.14 + (node.z + 1) * 0.17;
+        context.strokeStyle = lightTheme
+          ? `rgba(11, 111, 107, ${depthOpacity})`
+          : `rgba(152, 232, 207, ${depthOpacity})`;
+        context.lineWidth = node.z > 0 ? 1 : 0.65;
+        context.beginPath();
+        context.moveTo(centerX, centerY);
+        context.lineTo(node.x, node.y);
+        context.stroke();
+      }
+
+      if (!compact) {
+        for (let index = 0; index < projected.length; index += 1) {
+          const node = projected[index];
+          const next = projected[(index + 5) % projected.length];
+          if (!node || !next) continue;
+          const opacity = Math.max(0.04, ((node.z + next.z) / 2 + 1) * 0.055);
+          context.strokeStyle = lightTheme
+            ? `rgba(11, 111, 107, ${opacity})`
+            : `rgba(29, 191, 152, ${opacity})`;
+          context.lineWidth = 0.7;
+          context.beginPath();
+          context.moveTo(node.x, node.y);
+          context.quadraticCurveTo(centerX, centerY, next.x, next.y);
+          context.stroke();
+        }
+      }
+
+      if (!prefersReducedMotion) {
+        projected.forEach((node, index) => {
+          if ((compact && index % 3 !== 0) || (!compact && index % 2 !== 0)) return;
+          const phase = (elapsed * 0.28 + index / projected.length) % 1;
+          const outbound = index % 2 === 0;
+          const progress = outbound ? phase : 1 - phase;
+          const x = centerX + (node.x - centerX) * progress;
+          const y = centerY + (node.y - centerY) * progress;
+          const opacity = Math.max(0.16, (node.z + 1) * 0.34);
+          context.shadowColor = COLORS.mint;
+          context.shadowBlur = 9;
+          context.fillStyle = lightTheme
+            ? `rgba(11, 111, 107, ${opacity})`
+            : `rgba(152, 232, 207, ${opacity})`;
+          context.beginPath();
+          context.arc(x, y, node.z > 0 ? 2.1 : 1.3, 0, Math.PI * 2);
+          context.fill();
+          context.shadowBlur = 0;
+        });
+      }
+
+      const drawNode = (node: ProjectedNode) => {
+        const originalIndex = projected.indexOf(node);
+        const highlighted =
+          originalIndex === hoverRef.current || originalIndex === activeNodeRef.current;
+        const opacity = 0.45 + (node.z + 1) * 0.26;
+        const nodeRadius = (highlighted ? 5.8 : 4.1) * node.scale;
+        context.shadowColor = COLORS.mint;
+        context.shadowBlur = highlighted ? 14 : node.z > 0 ? 7 : 2;
+        context.fillStyle = highlighted
+          ? lightTheme
+            ? '#0b6f6b'
+            : COLORS.mint
+          : lightTheme
+            ? `rgba(11, 111, 107, ${opacity})`
+            : `rgba(29, 191, 152, ${opacity})`;
+        context.beginPath();
+        context.arc(node.x, node.y, nodeRadius, 0, Math.PI * 2);
+        context.fill();
+        context.shadowBlur = 0;
+      };
+
+      backNodes.forEach(drawNode);
+      frontNodes.forEach(drawNode);
+
+      const coreRadius = compact ? Math.max(27, radius * 0.18) : Math.max(34, radius * 0.21);
+      context.shadowColor = COLORS.teal;
+      context.shadowBlur = 24;
+      const coreSurface = context.createRadialGradient(
+        centerX - coreRadius * 0.28,
+        centerY - coreRadius * 0.32,
+        coreRadius * 0.08,
+        centerX,
+        centerY,
+        coreRadius,
+      );
+      coreSurface.addColorStop(0, '#effcf8');
+      coreSurface.addColorStop(0.46, '#98e8cf');
+      coreSurface.addColorStop(1, '#3bcaa7');
+      context.fillStyle = coreSurface;
+      context.strokeStyle = 'rgba(249, 250, 251, 0.9)';
+      context.lineWidth = 1.35;
+      context.beginPath();
+      context.arc(centerX, centerY, coreRadius, 0, Math.PI * 2);
+      context.fill();
+      context.stroke();
+      context.shadowBlur = 0;
+
+      // Core label — avoid external image dependency; render NO text directly.
+      context.fillStyle = lightTheme ? '#171918' : '#030d2d';
+      context.font = `800 ${Math.round(coreRadius * 0.62)}px "SF Pro Display", -apple-system, sans-serif`;
+      context.textAlign = 'center';
+      context.textBaseline = 'middle';
+      context.fillText('NO', centerX, centerY + 1);
+
+      const labelFontSize = compact ? 7.8 : 9.4;
+      const labelLineHeight = compact ? 8.9 : 11.4;
+      const labelGap = compact ? 5 : 8;
+      const labelSpacing = compact ? 1.6 : 2.4;
+      const labelExtent = compact ? 1.48 : 1.08;
+      const labelBounds = {
+        left: Math.max(5, centerX - radius * labelExtent),
+        right: Math.min(width - 5, centerX + radius * labelExtent),
+        top: Math.max(7, centerY - radius * labelExtent),
+        bottom: Math.min(height - 7, centerY + radius * labelExtent),
+      };
+      const labelPlacements = projected.map((node) => {
+        const originalIndex = projected.indexOf(node);
+        const highlighted =
+          originalIndex === hoverRef.current || originalIndex === activeNodeRef.current;
+        const fontSize = highlighted ? labelFontSize + (compact ? 0.4 : 0.7) : labelFontSize;
+        const fontWeight = highlighted ? 750 : 620;
+        context.font = `${fontWeight} ${fontSize}px "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif`;
+        const textWidth = context.measureText(node.name).width;
+        const onLeft = node.x < centerX;
+        const offset = compact ? 5 : 8;
+        const coreGuard = coreRadius + (compact ? 5 : 11);
+        let x = onLeft ? node.x - offset - textWidth : node.x + offset;
+        if (onLeft && x + textWidth > centerX - coreGuard) x = centerX - coreGuard - textWidth;
+        else if (!onLeft && x < centerX + coreGuard) x = centerX + coreGuard;
+        x = Math.max(labelBounds.left, Math.min(labelBounds.right - textWidth, x));
+        const baseY = Math.max(
+          labelBounds.top + labelLineHeight / 2,
+          Math.min(labelBounds.bottom - labelLineHeight / 2, node.y),
+        );
+        return { node, onLeft, highlighted, fontSize, fontWeight, textWidth, x, baseY, y: baseY };
+      });
+
+      for (const onLeft of [true, false]) {
+        const group = labelPlacements
+          .filter((p) => p.onLeft === onLeft)
+          .sort((a, b) => a.baseY - b.baseY);
+        let cursor = labelBounds.top + labelLineHeight / 2;
+        for (const placement of group) {
+          placement.y = Math.max(placement.baseY, cursor);
+          cursor = placement.y + labelLineHeight + labelSpacing;
+        }
+        const overflow = cursor - labelSpacing - labelLineHeight / 2 - labelBounds.bottom;
+        if (overflow > 0)
+          group.forEach((p) => {
+            p.y -= overflow;
+          });
+        for (let index = group.length - 2; index >= 0; index -= 1) {
+          const cur = group[index];
+          const nxt = group[index + 1];
+          if (!cur || !nxt) continue;
+          cur.y = Math.min(cur.y, nxt.y - labelLineHeight - labelSpacing);
+        }
+      }
+
+      labelPlacements
+        .sort((a, b) => a.node.z - b.node.z)
+        .forEach((placement) => {
+          const anchorX = placement.onLeft
+            ? placement.x + placement.textWidth + labelGap * 0.35
+            : placement.x - labelGap * 0.35;
+          const nodeDistance = Math.hypot(placement.node.x - centerX, placement.node.y - centerY);
+          const lineAngle = Math.atan2(
+            placement.node.y - centerY,
+            placement.node.x - centerX || (placement.onLeft ? -1 : 1),
+          );
+          const lineStartX =
+            nodeDistance < coreRadius + 5
+              ? centerX + Math.cos(lineAngle) * (coreRadius + 5)
+              : placement.node.x;
+          const lineStartY =
+            nodeDistance < coreRadius + 5
+              ? centerY + Math.sin(lineAngle) * (coreRadius + 5)
+              : placement.node.y;
+          context.strokeStyle = placement.highlighted
+            ? lightTheme
+              ? 'rgba(11, 111, 107, 0.78)'
+              : 'rgba(152, 232, 207, 0.72)'
+            : lightTheme
+              ? `rgba(11, 111, 107, ${0.22 + (placement.node.z + 1) * 0.08})`
+              : `rgba(152, 232, 207, ${0.2 + (placement.node.z + 1) * 0.08})`;
+          context.lineWidth = placement.highlighted ? 0.9 : 0.55;
+          context.beginPath();
+          context.moveTo(lineStartX, lineStartY);
+          context.lineTo(anchorX, placement.y);
+          context.stroke();
+          context.textAlign = 'left';
+          context.textBaseline = 'middle';
+          context.font = `${placement.fontWeight} ${placement.fontSize}px "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif`;
+          context.lineWidth = compact ? 2.2 : 2.8;
+          context.strokeStyle = lightTheme ? 'rgba(243, 240, 234, 0.94)' : 'rgba(37, 36, 35, 0.88)';
+          context.strokeText(placement.node.name, placement.x, placement.y);
+          context.fillStyle = lightTheme
+            ? placement.highlighted
+              ? '#171918'
+              : `rgba(23, 25, 24, ${0.64 + (placement.node.z + 1) * 0.12})`
+            : placement.highlighted
+              ? COLORS.white
+              : `rgba(249, 250, 251, ${0.64 + (placement.node.z + 1) * 0.12})`;
+          context.fillText(placement.node.name, placement.x, placement.y);
+        });
+
+      const cyclingIndex = projected.length ? Math.floor(elapsed / 5) % projected.length : 0;
+      if (
+        !prefersReducedMotion &&
+        !compact &&
+        hoverRef.current < 0 &&
+        now > manualUntilRef.current &&
+        cyclingIndex !== lastActiveNode
+      ) {
+        lastActiveNode = cyclingIndex;
+        selectNode(cyclingIndex);
+      }
+
+      if (!prefersReducedMotion) frameRef.current = window.requestAnimationFrame(draw);
+    };
+
+    resize();
+    const wake = () => {
+      if (!disposed && visibleRef.current && !document.hidden && frameRef.current === null) {
+        frameRef.current = window.requestAnimationFrame(draw);
+      }
+    };
+    wakeFrameRef.current = wake;
+    const resizeObserver = new ResizeObserver(() => {
+      resize();
+      wake();
+    });
+    resizeObserver.observe(canvas);
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        visibleRef.current = entry.isIntersecting;
+        if (!entry.isIntersecting && frameRef.current !== null) {
+          window.cancelAnimationFrame(frameRef.current);
+          frameRef.current = null;
+        } else wake();
+      },
+      { threshold: 0.05 },
+    );
+    intersectionObserver.observe(canvas);
+    const onVisibilityChange = () => {
+      if (document.hidden && frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      } else wake();
+    };
+    const onThemeChange = (event: Event) => {
+      const detail = (event as CustomEvent<{ theme?: string }>).detail;
+      lightTheme = detail?.theme === 'light' || document.documentElement.dataset.theme === 'light';
+      wake();
+    };
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    window.addEventListener('noecosystem-themechange', onThemeChange);
+    wake();
+
+    return () => {
+      disposed = true;
+      resizeObserver.disconnect();
+      intersectionObserver.disconnect();
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+      window.removeEventListener('noecosystem-themechange', onThemeChange);
+      if (frameRef.current !== null) window.cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+      wakeFrameRef.current = () => undefined;
+    };
+  }, [ecosystemNodes]);
+
+  const updateHover = (clientX: number, clientY: number) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const bounds = canvas.getBoundingClientRect();
+    const localX = clientX - bounds.left;
+    const localY = clientY - bounds.top;
+    let nearest = -1;
+    let nearestDistance = 24;
+    projectedRef.current.forEach((node, index) => {
+      const distance = Math.hypot(node.x - localX, node.y - localY);
+      if (distance < nearestDistance) {
+        nearest = index;
+        nearestDistance = distance;
+      }
+    });
+    hoverRef.current = nearest;
+    if (nearest >= 0) selectNode(nearest, true);
+  };
+
+  const handlePointerDown = (event: ReactPointerEvent<HTMLCanvasElement>) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    pointerRef.current = { active: true, x: event.clientX, y: event.clientY };
+    manualUntilRef.current = window.performance.now() + 8000;
+    updateHover(event.clientX, event.clientY);
+    wakeFrameRef.current();
+  };
+  const handlePointerMove = (event: ReactPointerEvent<HTMLCanvasElement>) => {
+    if (pointerRef.current.active) {
+      const deltaX = event.clientX - pointerRef.current.x;
+      const deltaY = event.clientY - pointerRef.current.y;
+      rotationRef.current.y += deltaX * 0.006;
+      rotationRef.current.x = Math.max(
+        -0.85,
+        Math.min(0.85, rotationRef.current.x + deltaY * 0.004),
+      );
+      pointerRef.current = { active: true, x: event.clientX, y: event.clientY };
+    }
+    updateHover(event.clientX, event.clientY);
+    wakeFrameRef.current();
+  };
+  const handlePointerUp = (event: ReactPointerEvent<HTMLCanvasElement>) => {
+    pointerRef.current.active = false;
+    if (event.currentTarget.hasPointerCapture(event.pointerId))
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    wakeFrameRef.current();
+  };
+  const stepNode = (direction: number) => {
+    const next =
+      (activeNodeRef.current + direction + ecosystemNodes.length) % ecosystemNodes.length;
+    selectNode(next, true);
+    wakeFrameRef.current();
+  };
+  const selected = ecosystemNodes[activeNode] || ecosystemNodes[0];
+  if (!selected) return null;
+
+  return (
+    <div className={className ? `ecosystem-sphere ${className}` : 'ecosystem-sphere'}>
+      <canvas
+        ref={canvasRef}
+        tabIndex={0}
+        aria-label={ariaLabel}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerUp}
+        onPointerLeave={() => {
+          if (!pointerRef.current.active) {
+            hoverRef.current = -1;
+            wakeFrameRef.current();
+          }
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            stepNode(1);
+          } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            stepNode(-1);
+          } else if (event.key === 'Home') {
+            event.preventDefault();
+            selectNode(0, true);
+            wakeFrameRef.current();
+          } else if (event.key === 'End') {
+            event.preventDefault();
+            selectNode(ecosystemNodes.length - 1, true);
+            wakeFrameRef.current();
+          }
+        }}
+      />
+      <div className="ecosystem-sphere-detail" key={selected.id}>
+        <span>{selected.name}</span>
+        <strong>{selected.layer}</strong>
+      </div>
+      <ul className="sr-only">
+        <li>
+          {PUBLIC_PORTFOLIO_CORE.name} — {PUBLIC_PORTFOLIO_CORE.layer}
+        </li>
+        {ecosystemNodes.map((node) => (
+          <li key={node.id}>
+            {node.name} — {node.layer}. {node.summary}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default EcosystemSphere;

package/packages/ui/src/cinematic/index.ts

@@ -0,0 +1,5 @@
+export * from './ecosystem-motion-showcase';
+export * from './ecosystem-sphere';
+export * from './kinetic-experience';
+export * from './portfolio';
+export * from './system-anatomy';