Frontmatter
| id | 8542 |
| title | Enhancement: "Orbit" Effect & Visual Polish for Neural Timeline |
| state | Closed |
| labels | enhancementdesignaiperformance |
| assignees | tobiu |
| createdAt | Jan 11, 2026, 2:14 PM |
| updatedAt | Jan 11, 2026, 2:36 PM |
| githubUrl | https://github.com/neomjs/neo/issues/8542 |
| author | tobiu |
| commentsCount | 1 |
| parentIssue | 8398 |
| subIssues | [] |
| subIssuesCompleted | 0 |
| subIssuesTotal | 0 |
| blockedBy | [] |
| blocking | [] |
| closedAt | Jan 11, 2026, 2:36 PM |
Enhancement: "Orbit" Effect & Visual Polish for Neural Timeline
tobiu assigned to @tobiu on Jan 11, 2026, 2:25 PM
tobiu added parent issue #8398 on Jan 11, 2026, 2:25 PM

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
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
Implementation
TicketCanvas.mjsrender loop.node.radius(derived fromrect.width) to calculate entry/exit points for the line segments.