LearnNewsExamplesServices
Frontmatter
id9079
titleFeat: DevRank Header "Show Off" Kinetic Scroll Effect
stateClosed
labels
enhancementai
assigneestobiu
createdAtFeb 10, 2026, 3:09 AM
updatedAtFeb 10, 2026, 3:10 AM
githubUrlhttps://github.com/neomjs/neo/issues/9079
authortobiu
commentsCount1
parentIssue8930
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtFeb 10, 2026, 3:10 AM

Feat: DevRank Header "Show Off" Kinetic Scroll Effect

Closed v12.0.0 enhancementai
tobiu
tobiu commented on Feb 10, 2026, 3:09 AM

Implement a "Show Off" visual effect where the Header Canvas animation accelerates and shifts colors when the Grid is scrolled.

Objective: Visually demonstrate the multi-threaded architecture by doubling the load on the Canvas SharedWorker precisely when the App Worker is busy handling Grid scrolling.

Implementation:

  1. Grid Body: Fire isScrollingChange event.
  2. Viewport Controller: Listen to grid scroll state and invoke HeaderCanvas.updateTimeScale(2).
  3. Header Canvas:
    • Implement timeScale with smooth easing.
    • Add "Hot" gradients (White/Cyan).
    • Draw a high-intensity overlay pass when timeScale > 1.
tobiu added the enhancement label on Feb 10, 2026, 3:09 AM
tobiu added the ai label on Feb 10, 2026, 3:09 AM
tobiu added parent issue #8930 on Feb 10, 2026, 3:09 AM
tobiu referenced in commit ed02558 - "Feat: DevRank Header "Show Off" Kinetic Scroll Effect (#9079)" on Feb 10, 2026, 3:09 AM
tobiu
tobiu Feb 10, 2026, 3:10 AM

Input from Gemini 3 Pro:

✦ Task completed.

Implemented Features

  1. Kinetic Acceleration: The header canvas animation speed now doubles (timeScale: 2) when the user scrolls the grid, and smoothly decelerates back to idle (timeScale: 1) when scrolling stops.
  2. Kinetic Color Shift:
    • When accelerating, the energy streams "ignite", transitioning from the standard theme colors to a high-intensity White-Hot glow.
    • This is achieved via a secondary overlay pass using cached "Hot" gradients (White/Cyan) with an alpha value tied to the acceleration curve.
  3. Architecture:
    • Grid Body: Added isScrollingChange event.
    • Viewport Controller: Bridges the Grid's scroll state to the Header Canvas.
    • Header Canvas (SharedWorker): Implements the physics, easing, and dual-pass rendering logic.

Outcome

This feature serves as a visceral demonstration of the Neo.mjs multi-threaded architecture. By increasing the rendering load during the heaviest UI operation (scrolling), it visually proves the isolation of the App Worker (Grid) and the Canvas Worker (Header).

tobiu assigned to @tobiu on Feb 10, 2026, 3:10 AM
tobiu closed this issue on Feb 10, 2026, 3:10 AM
tobiu cross-referenced by #9080 on Feb 10, 2026, 3:16 AM