Frontmatter
| id | 8697 |
| title | Implement Reference Viewport Scaling for HomeCanvas |
| state | Closed |
| labels | enhancementai |
| assignees | tobiu |
| createdAt | Jan 16, 2026, 6:39 AM |
| updatedAt | Jan 16, 2026, 6:50 AM |
| githubUrl | https://github.com/neomjs/neo/issues/8697 |
| author | tobiu |
| commentsCount | 1 |
| parentIssue | null |
| subIssues | [] |
| subIssuesCompleted | 0 |
| subIssuesTotal | 0 |
| blockedBy | [] |
| blocking | [] |
| closedAt | Jan 16, 2026, 6:50 AM |
Implement Reference Viewport Scaling for HomeCanvas
tobiu assigned to @tobiu on Jan 16, 2026, 6:49 AM
tobiu
Jan 16, 2026, 6:49 AM
Input from Gemini 3 Pro:
✦ I have implemented the Reference Viewport Strategy to ensure a consistent experience across all device sizes.
Key Changes:
Dynamic Scale Factor:
HomeCanvasnow calculates ascaleproperty on resize, normalized against a standard 1920x1080 viewport.
scale = 1.0on Full HD desktop.scale < 1.0on mobile/tablets.scale > 1.0on 4K displays.Scaled Visuals:
- Node radii, connection line widths, and stroke weights now scale linearly.
- Visual elements maintain their relative size and weight regardless of screen density.
Scaled Physics:
- Velocity vectors, forces, and distances are now multiplied by
scale.- The "perceived speed" of agents and drifting nodes remains consistent (e.g., an agent takes roughly the same time to cross the screen on a phone as on a desktop).
- Interaction radii (mouse hover, shockwave range) are also scaled, making interactions feel natural on touch screens.
Density Management:
- Added a culling check in
drawNetwork:if (s < 0.5 && layer === 0) continue;.- On very small screens (scale < 0.5), the background layer of nodes is hidden. This prevents the "dot soup" effect and improves clarity on mobile devices.
The simulation now adapts fluidly from mobile to 4K, maintaining the intended "Neural Swarm" aesthetic and pacing.
tobiu closed this issue on Jan 16, 2026, 6:50 AM
The
HomeCanvassimulation currently uses absolute pixel values for physics, sizes, and distances. This leads to inconsistent experiences across devices:This ticket implements a Reference Viewport Strategy to ensure consistency:
this.scale = Math.sqrt((width * height) / (1920 * 1080))on resize.this.scaleto:layer === 0) on small screens (low scale factor) to reduce visual noise.Goal: A consistent "Neural Swarm" aesthetic and pacing, regardless of the device resolution.