LearnNewsExamplesServices
Frontmatter
id8683
titleHome Hero Canvas: Visual Polish (Blue Shockwave) & GC Optimization
stateClosed
labels
enhancementaiperformance
assigneestobiu
createdAtJan 15, 2026, 11:56 AM
updatedAtJan 15, 2026, 12:01 PM
githubUrlhttps://github.com/neomjs/neo/issues/8683
authortobiu
commentsCount1
parentIssue8661
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 15, 2026, 12:01 PM

Home Hero Canvas: Visual Polish (Blue Shockwave) & GC Optimization

Closed v11.22.0 enhancementaiperformance
tobiu
tobiu commented on Jan 15, 2026, 11:56 AM

Refactor apps/portal/canvas/HomeCanvas.mjs to adjust visual styles and improve rendering performance.

Visual Changes:

  • Change the "Red/Crimson" shockwave color to "Light Blue/Cyan" (using the HIGHLIGHT constant) to match the Neo.mjs brand and "Neon" theme.

Performance Improvements:

  • Eliminate GC Pressure in drawNetwork: The getPos helper function currently allocates a new object {x, y} for every node and connection check (10k+ allocations per frame). This must be inlined or refactored to use primitive variables.
  • Optimize drawShockwaves: Replace template string RGBA construction (e.g., `rgba(..., ${alpha})`) with ctx.globalAlpha + Constant Hex Colors to reduce string garbage.

Goal:

  • Achieve stable 60fps with reduced Garbage Collection pauses.
tobiu added the enhancement label on Jan 15, 2026, 11:56 AM
tobiu added the ai label on Jan 15, 2026, 11:56 AM
tobiu added the performance label on Jan 15, 2026, 11:56 AM
tobiu changed title from Home Hero Canvas: Visual Polish (Blue Shockwave) & GC Optimization (#8661) to Home Hero Canvas: Visual Polish (Blue Shockwave) & GC Optimization on Jan 15, 2026, 11:56 AM
tobiu added parent issue #8661 on Jan 15, 2026, 11:56 AM
tobiu referenced in commit 85a3dc5 - "refactor: Optimize HomeCanvas rendering and update shockwave visuals (#8683)" on Jan 15, 2026, 12:00 PM
tobiu
tobiu Jan 15, 2026, 12:00 PM

Input from Gemini 3 Pro:

✦ I have completed the refactoring of HomeCanvas.mjs.

Changes:

  1. Visual Update: Shockwaves now use the HIGHLIGHT (Cyan) and PRIMARY (Blue) colors instead of Crimson, creating a cleaner "Neon" look consistent with the theme.
  2. GC Optimization (Network): I inlined the getPos helper function within the drawNetwork loop. This eliminates the allocation of thousands of temporary {x, y} objects per frame during the parallax calculation.
  3. GC Optimization (Shockwaves): I replaced the template string RGBA construction (e.g., `rgba(...)`) with ctx.globalAlpha combined with constant hex colors. This reduces string garbage collection during shockwave rendering.

The changes have been pushed to dev.

tobiu assigned to @tobiu on Jan 15, 2026, 12:00 PM
tobiu closed this issue on Jan 15, 2026, 12:01 PM