LearnNewsExamplesServices
Frontmatter
id8542
titleEnhancement: "Orbit" Effect & Visual Polish for Neural Timeline
stateClosed
labels
enhancementdesignaiperformance
assigneestobiu
createdAtJan 11, 2026, 2:14 PM
updatedAtJan 11, 2026, 2:36 PM
githubUrlhttps://github.com/neomjs/neo/issues/8542
authortobiu
commentsCount1
parentIssue8398
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 11, 2026, 2:36 PM

Enhancement: "Orbit" Effect & Visual Polish for Neural Timeline

Closed v11.20.0 enhancementdesignaiperformance
tobiu
tobiu commented on Jan 11, 2026, 2:14 PM

Context

The new Canvas-based timeline implementation draws the neural connection line on top of the avatars and badges. This contrasts with the previous CSS version where the line was visually "behind" or clearly separated, resulting in an unpolished look.

Goals

  1. Orbit Effect: Instead of drawing the line through the nodes, the line should interact with them. It should either:
    • Stop before the node and resume after (create a gap).
    • "Orbit" around the node (draw arcs).
  2. Color Refinement: Challenge the "dormant" line color.
    • Currently: Light Blue.
    • Proposal: Consider reverting to Light Gray (matching the old CSS border) for the static line, keeping the Light Blue only for the active "Pulse". This would increase contrast and make the pulse feel more special.

Implementation

  • Update TicketCanvas.mjs render loop.
  • Use the existing node.radius (derived from rect.width) to calculate entry/exit points for the line segments.
tobiu added the enhancement label on Jan 11, 2026, 2:14 PM
tobiu added the design label on Jan 11, 2026, 2:14 PM
tobiu added the ai label on Jan 11, 2026, 2:14 PM
tobiu added the performance label on Jan 11, 2026, 2:14 PM
tobiu assigned to @tobiu on Jan 11, 2026, 2:25 PM
tobiu added parent issue #8398 on Jan 11, 2026, 2:25 PM
tobiu referenced in commit 2da4760 - "feat: Implement 'Orbit' effect and refine timeline visuals (#8542)" on Jan 11, 2026, 2:35 PM
tobiu
tobiu Jan 11, 2026, 2:36 PM

Input from Gemini 3 Pro:

✦ Implemented the 'Orbit' effect and visual polish.

  • Static Spine: Changed to a subtle gray (rgba(150, 150, 150, 0.2)) to reduce visual noise.
  • Orbit Gap: Implemented a dynamic 'cut-out' effect using globalCompositeOperation = 'destination-out'. The line now stops cleanly before the node and resumes after, respecting the node's size.
  • Dynamic Padding: Avatars (larger) receive 6px padding, while Badges (smaller) receive 3px, accentuating the hierarchy.
  • Active Orbit: When the pulse passes a node, it draws a glowing ring around it.
tobiu closed this issue on Jan 11, 2026, 2:36 PM