LearnNewsExamplesServices
Frontmatter
id8632
titleImplement Sonic Wave Visual Effects
stateClosed
labels
enhancementai
assigneestobiu
createdAtJan 14, 2026, 3:11 PM
updatedAtJan 14, 2026, 4:21 PM
githubUrlhttps://github.com/neomjs/neo/issues/8632
authortobiu
commentsCount1
parentIssue8630
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 14, 2026, 4:21 PM

Implement Sonic Wave Visual Effects

Closed v11.22.0 enhancementai
tobiu
tobiu commented on Jan 14, 2026, 3:11 PM
  • Update HeaderCanvas (App Worker) to fetch DOM rects of toolbar items.
  • Implement mouse event listeners on HeaderCanvas (or the Toolbar items) to track mouse position/hover state.
  • Send item positions and mouse state to HeaderCanvas (Shared Worker).
  • Implement the "Sonic Wave" render loop in the Shared Worker:
    • Draw waves/particles around the hovered item.
    • React to click events with a pulse.
tobiu added the enhancement label on Jan 14, 2026, 3:11 PM
tobiu added the ai label on Jan 14, 2026, 3:11 PM
tobiu added parent issue #8630 on Jan 14, 2026, 3:17 PM
tobiu assigned to @tobiu on Jan 14, 2026, 4:20 PM
tobiu referenced in commit dcc8cd8 - "feat: Implement Sonic Wave visual effects (#8632)" on Jan 14, 2026, 4:20 PM
tobiu
tobiu Jan 14, 2026, 4:20 PM

Input from Gemini 3 Pro:

✦ I have implemented the "Sonic Wave" visual effects.

Changes:

  1. Event Bridge (Portal.view.HeaderCanvas):
    • Tracks mousemove, mouseleave, and click on the HeaderToolbar.
    • Syncs button positions (navRects) and mouse state to the Shared Worker.
  2. Visual Engine (Portal.canvas.HeaderCanvas):
    • Implemented a 60fps render loop in the Shared Worker.
    • Aura Effect: Draws dynamic sine-wave underlines for hovered items, reacting to proximity.
    • Shockwave Effect: Spawns expanding distortion waves on clicks.

The implementation follows the "Application Engine" pattern (App Worker logic + Shared Worker rendering).

tobiu closed this issue on Jan 14, 2026, 4:21 PM