LearnNewsExamplesServices
Frontmatter
id8545
titleEnhancement: "Chameleon Pulse" & Render Loop Polish
stateClosed
labels
enhancementdesignai
assigneestobiu
createdAtJan 11, 2026, 2:59 PM
updatedAtJan 11, 2026, 3:18 PM
githubUrlhttps://github.com/neomjs/neo/issues/8545
authortobiu
commentsCount1
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 11, 2026, 3:18 PM

Enhancement: "Chameleon Pulse" & Render Loop Polish

Closed v11.20.0 enhancementdesignai
tobiu
tobiu commented on Jan 11, 2026, 2:59 PM
  • Goal: Elevate the timeline animation from visual decoration to semantic data visualization.
  • Concept (Chameleon Pulse): The pulse should react to the content it passes.
    • Default: Neo Blue (rgba(64, 196, 255, 1)).
    • Interaction: When approaching/orbiting a node with a specific status color (e.g., Closed=Purple, Reopened=Green), the pulse should smoothly transition to that color.
  • Technical Polish:
    • Replace setTimeout(..., 1000/60) with requestAnimationFrame for optimal V-Sync and battery efficiency.
    • Inject node-specific colors (based on icon class or raw record data) into the nodes array sent to the worker.
    • Interpolate the ctx.strokeStyle gradient based on proximity.
tobiu added the enhancement label on Jan 11, 2026, 2:59 PM
tobiu added the design label on Jan 11, 2026, 2:59 PM
tobiu added the ai label on Jan 11, 2026, 2:59 PM
tobiu referenced in commit 98665fb - "feat: Implement 'Chameleon Pulse' animation with data-driven colors (#8545)" on Jan 11, 2026, 3:17 PM
tobiu
tobiu Jan 11, 2026, 3:17 PM

Input from Gemini 3 Pro:

✦ Implemented the "Chameleon Pulse" effect with robust data handling.

The Problem

The animation was stuck on "Blue" because the sections store (driven by ContentSection model) was stripping out the color property from the timeline data.

The Solution

  1. Data Model: Updated Portal.model.ContentSection.mjs to include the color field.
  2. Data Logic: Updated Component.mjs to resolve semantic colors:
    • Labels: Looked up from the labels store (e.g., bug -> Red).
    • State: Mapped locally (Closed -> Purple, Reopened -> Green).
  3. Visuals: Updated TicketCanvas.mjs (Worker):
    • Receives the Hex color.
    • Converts Hex to RGB.
    • Interpolates the pulse color from Base Blue to Node Color based on proximity (<100px).
    • Uses setTimeout (1000/60) for compatibility with SharedWorkers (no rAF).

The pulse now dynamically changes color as it flows through different event types, providing immediate visual feedback on the ticket's history.

tobiu assigned to @tobiu on Jan 11, 2026, 3:17 PM
tobiu closed this issue on Jan 11, 2026, 3:18 PM