noecosystem-design 0.1.0

package/packages/ui/src/cinematic/ecosystem-motion-showcase.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import './cinematic.css';
+import type {
+  CSSProperties,
+  KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+} from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+const experiments = [
+  {
+    number: '01',
+    eyebrow: 'Shared foundations',
+    title: 'One foundation.\nMany possibilities.',
+    description:
+      'Common capabilities become reusable building blocks—ready to support each experience without starting over.',
+    signal: 'CORAL',
+  },
+  {
+    number: '02',
+    eyebrow: 'Connected by design',
+    title: 'Connect with intent.\nNot by accident.',
+    description:
+      'Products and capabilities remain focused while exchanging only the signals and services they need.',
+    signal: 'CYAN',
+  },
+  {
+    number: '03',
+    eyebrow: 'Human at the center',
+    title: 'Complexity underneath.\nClarity at the surface.',
+    description:
+      'The system can be sophisticated underneath while the experience remains direct, calm, and easy to control.',
+    signal: 'MINT',
+  },
+] as const;
+
+const gridDots = Array.from({ length: 48 }, (_, index) => index);
+
+export function EcosystemMotionShowcase({ id = 'principles' }: { id?: string }) {
+  const rootRef = useRef<HTMLElement>(null);
+  const scrollFrameRef = useRef(0);
+  const [active, setActive] = useState(0);
+  const [orb, setOrb] = useState({ x: 0, y: 0 });
+  const dragRef = useRef({ active: false, startX: 0, startY: 0 });
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const panels = Array.from(root.querySelectorAll<HTMLElement>('[data-experiment]'));
+    const scenes = Array.from(root.querySelectorAll<HTMLElement>('.noe-scene'));
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+        if (!visible) return;
+        const next = Number((visible.target as HTMLElement).dataset.experiment);
+        if (Number.isFinite(next)) setActive(next);
+      },
+      { rootMargin: '-22% 0px -42%', threshold: [0.08, 0.35, 0.62] },
+    );
+    panels.forEach((panel) => observer.observe(panel));
+
+    const updateSceneProgress = () => {
+      scrollFrameRef.current = 0;
+      if (reducedMotion.matches) return;
+      const rect = root.getBoundingClientRect();
+      const scrollable = Math.max(1, root.offsetHeight - window.innerHeight);
+      const progress = Math.max(0, Math.min(1, -rect.top / scrollable));
+      const sceneFloat = progress * (experiments.length - 1);
+      root.style.setProperty('--experiment-progress', progress.toFixed(4));
+      scenes.forEach((scene, index) => {
+        const shift = sceneFloat - index;
+        const presence = Math.max(0, 1 - Math.abs(shift));
+        scene.style.setProperty('--scene-presence', presence.toFixed(4));
+        scene.style.setProperty('--scene-shift', shift.toFixed(4));
+      });
+    };
+    const onScroll = () => {
+      if (!scrollFrameRef.current)
+        scrollFrameRef.current = window.requestAnimationFrame(updateSceneProgress);
+    };
+    updateSceneProgress();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll, { passive: true });
+    reducedMotion.addEventListener('change', updateSceneProgress);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+      reducedMotion.removeEventListener('change', updateSceneProgress);
+      if (scrollFrameRef.current) window.cancelAnimationFrame(scrollFrameRef.current);
+    };
+  }, []);
+
+  const startOrbDrag = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    dragRef.current = {
+      active: true,
+      startX: event.clientX - orb.x,
+      startY: event.clientY - orb.y,
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const moveOrb = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    if (!dragRef.current.active) return;
+    const clamp = (value: number, limit: number) => Math.max(-limit, Math.min(limit, value));
+    setOrb({
+      x: clamp(event.clientX - dragRef.current.startX, 126),
+      y: clamp(event.clientY - dragRef.current.startY, 96),
+    });
+  };
+  const releaseOrb = () => {
+    dragRef.current.active = false;
+    setOrb({ x: 0, y: 0 });
+  };
+  const moveOrbWithKeyboard = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+    const step = 12;
+    const clamp = (value: number, limit: number) => Math.max(-limit, Math.min(limit, value));
+    const movement = {
+      ArrowLeft: { x: -step, y: 0 },
+      ArrowRight: { x: step, y: 0 },
+      ArrowUp: { x: 0, y: -step },
+      ArrowDown: { x: 0, y: step },
+    }[event.key as string];
+    if (movement) {
+      event.preventDefault();
+      setOrb((current) => ({
+        x: clamp(current.x + movement.x, 126),
+        y: clamp(current.y + movement.y, 96),
+      }));
+    } else if (event.key === 'Home' || event.key === 'Escape' || event.key === ' ') {
+      event.preventDefault();
+      setOrb({ x: 0, y: 0 });
+    }
+  };
+
+  return (
+    <section className="noe-experiments" id={id} ref={rootRef} data-active-experiment={active}>
+      <div className="noe-experiment-stage">
+        <header className="noe-stage-header">
+          <span>NO / ECOSYSTEM PRINCIPLES</span>
+        </header>
+
+        <div
+          className={`noe-scene noe-scene-foundation${active === 0 ? ' is-active' : ''}`}
+          aria-hidden={active !== 0}
+        >
+          <div className="noe-dot-field">
+            {gridDots.map((index) => (
+              <i key={index} style={{ '--dot-index': index } as CSSProperties} />
+            ))}
+          </div>
+          <div className="noe-foundation-block block-a">IDENTITY</div>
+          <div className="noe-foundation-block block-b">DATA</div>
+          <div className="noe-foundation-block block-c">PAYMENTS</div>
+          <div className="noe-scene-caption">Reusable building field · live assembly</div>
+        </div>
+
+        <div
+          className={`noe-scene noe-scene-network${active === 1 ? ' is-active' : ''}`}
+          aria-hidden={active !== 1}
+        >
+          <svg viewBox="0 0 760 620" role="presentation">
+            <path id="data-path-a" d="M85 410 C180 90 410 120 670 270" />
+            <path id="data-path-b" d="M90 205 C260 500 430 520 665 352" />
+            <path id="data-path-c" d="M150 315 C310 220 465 210 610 325" />
+            <path id="data-path-d" d="M205 105 C270 220 480 395 570 520" />
+            <g className="noe-network-nodes">
+              <circle cx="85" cy="410" r="10" />
+              <circle cx="90" cy="205" r="7" />
+              <circle cx="205" cy="105" r="8" />
+              <circle cx="378" cy="310" r="26" className="is-core" />
+              <circle cx="670" cy="270" r="9" />
+              <circle cx="665" cy="352" r="7" />
+              <circle cx="570" cy="520" r="10" />
+            </g>
+          </svg>
+          <i className="noe-packet packet-a" />
+          <i className="noe-packet packet-b" />
+          <i className="noe-packet packet-c" />
+          <div className="noe-network-core">
+            <span aria-hidden="true" style={{ fontWeight: 800, color: 'var(--noe-graphite)' }}>
+              NO
+            </span>
+          </div>
+          <span className="noe-network-label label-a">CAPABILITY</span>
+          <span className="noe-network-label label-b">EXPERIENCE</span>
+          <div className="noe-scene-caption">Bidirectional signal map · public abstraction</div>
+        </div>
+
+        <div
+          className={`noe-scene noe-scene-human${active === 2 ? ' is-active' : ''}`}
+          aria-hidden={active !== 2}
+        >
+          <div className="noe-human-orbits">
+            <i />
+            <i />
+            <i />
+            <i />
+          </div>
+          <button
+            className="noe-human-orb"
+            type="button"
+            tabIndex={active === 2 ? 0 : -1}
+            style={{ '--orb-x': `${orb.x}px`, '--orb-y': `${orb.y}px` } as CSSProperties}
+            onPointerDown={startOrbDrag}
+            onPointerMove={moveOrb}
+            onPointerUp={releaseOrb}
+            onPointerCancel={releaseOrb}
+            onKeyDown={moveOrbWithKeyboard}
+            aria-label="Move the human-centered control with drag or arrow keys; press Home to reset"
+          >
+            <span>YOU</span>
+          </button>
+          <div className="noe-human-readout">
+            <span>CONTROL</span>
+            <strong>{orb.x === 0 && orb.y === 0 ? 'CENTERED' : 'RESPONDING'}</strong>
+          </div>
+          <div className="noe-scene-caption">Drag the center · release to restore</div>
+        </div>
+
+        <div className="noe-stage-footer">
+          <span>{(experiments[active] ?? experiments[0]!).signal} SIGNAL</span>
+          <div>
+            {experiments.map((item, index) => (
+              <i className={index === active ? 'is-active' : ''} key={item.number} />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="noe-experiment-panels">
+        {experiments.map((experiment, index) => (
+          <article
+            className={`noe-experiment-panel${active === index ? ' is-active' : ''}`}
+            data-experiment={index}
+            key={experiment.number}
+          >
+            <div className="noe-experiment-copy">
+              <div className="noe-experiment-meta">
+                <span>{experiment.number}</span>
+                <span>{experiment.eyebrow}</span>
+              </div>
+              <h2>
+                {experiment.title.split('\n').map((line, lineIndex) => (
+                  <span key={line} style={{ '--line-index': lineIndex } as CSSProperties}>
+                    {line}
+                  </span>
+                ))}
+              </h2>
+              <p>{experiment.description}</p>
+              <div className="noe-experiment-rule">
+                <i />
+              </div>
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default EcosystemMotionShowcase;