Animate selected-file dependency links in the 3D view

[braedonsaunders]

The 3D graph was the last link view without the active-file motion that landed for Code view (the leftover “later” item from the closed #82 discussion). Selecting a file in 3D now lights up its dependency edges with travelling particles and the same outgoing/incoming colors the 2D path already uses. Idle links stay still.

What changed

• Added graph3dLinkParticles, which reuses forceLinkVisual / forceLinkRole so 2D and 3D cannot drift on selection, direction, or reduced-motion.
• Wired 3d-force-graph’s own directional-particle API (linkDirectionalParticles, speed, width, color) instead of hand-rolled meshes.
• Particles run only on the selected file’s links: orange outgoing, purple incoming (same CSS-var semantics as Code view, resolved to hex for WebGL). Nothing selected → count/speed/width are 0. prefers-reduced-motion: reduce also yields 0.
• Beads use those same orange/purple colors rather than Code view’s white dash beads. White spheres vanish against the light 3D background; colored beads keep the direction cue readable.
• Thickness still comes from the shared 1–6 control (graph3dLinkWidth). Selection, thickness, and reduced-motion changes reapply the 3D accessors via applyLinkThickness; leaving the view still tears down the instance.
• Particle budget is modest: 2 beads per active link at speed 0.008. No animated-link cap was added; 2×N particles on a hub is the remaining cost if a very high-degree file is selected.

vizUsesForceLinkParticles('graph3d') stays false. That helper is the SVG/CSS particle layer (Code view only). 3D uses the library API.

How to see it

1. Analyze a repo (this one is fine).
2. Switch Visualization to 3D Graph.
3. Click a node with a few dependencies — those edges should thicken and show moving beads (orange out, purple in).
4. Click the background to clear the selection — motion should stop and leftover beads should disappear.
5. Switch away from 3D and back; change thickness; the scene should stay consistent.

Tests

npm test is green (214). Extended tests/code-canvas.test.mjs and tests/graph3d-config.test.mjs for:

• particles on for the selected file’s in/out links
• particles off when nothing is selected
• orange vs purple direction mapping
• reduced-motion producing no animation
• library accessors wired through the shared helper

Left out

• No new npm/CDN dependency and no build step.
• Did not enable the SVG force-link-particle path on 3D (wrong renderer).
• Did not change 2D Graph (still static accent, by existing design).
• Did not close Feature Request: Code Canvas #82.

Diff scope

index.html and tests/ only.

  

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
codeflow	Ready	Preview	Sep 3, 2026 3:37pm UTC

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.