LearnNewsExamplesServices
Frontmatter
id8702
titleImplement ServicesCanvas with Glassmorphism for Portal Services Section
stateClosed
labels
enhancementdesignai
assigneestobiu
createdAtJan 16, 2026, 12:52 PM
updatedAtJan 16, 2026, 1:46 PM
githubUrlhttps://github.com/neomjs/neo/issues/8702
authortobiu
commentsCount2
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 16, 2026, 1:46 PM

Implement ServicesCanvas with Glassmorphism for Portal Services Section

Closed v11.23.0 enhancementdesignai
tobiu
tobiu commented on Jan 16, 2026, 12:52 PM

To polish the Services section of the Portal app, we will implement a new 'ServicesCanvas' using OffscreenCanvas.

Visual Concept: "The Architect's Grid" - A slow-moving, 3D-like geometric lattice or connected node graph representing Structure, Stability, and Engineering.

Implementation Details:

  1. Canvas Worker: Create apps/portal/canvas/ServicesCanvas.mjs for the rendering logic.
  2. App Worker: Create apps/portal/view/services/Canvas.mjs to manage the canvas lifecycle and interactions.
  3. Helper: Update apps/portal/canvas/Helper.mjs to register the new canvas.
  4. View: Update apps/portal/view/services/Component.mjs to include the canvas and switch to a "Glassmorphism" UI layout.
  5. Styling: Update SCSS to support the new visual hierarchy.
tobiu added the enhancement label on Jan 16, 2026, 12:52 PM
tobiu added the design label on Jan 16, 2026, 12:52 PM
tobiu added the ai label on Jan 16, 2026, 12:53 PM
tobiu referenced in commit 6d01b77 - "fix: Enhance ServicesCanvas contrast and align hover effects (#8702)" on Jan 16, 2026, 1:43 PM
tobiu
tobiu Jan 16, 2026, 1:43 PM

Input from Gemini 3 Pro:

Visual Refinements:

  1. Canvas Contrast: Increased line opacity from 0.08 to 0.15 in ServicesCanvas.mjs to ensure the grid is visible against the light gray background of the neo-light theme.
  2. UI Consistency: Updated resources/scss/src/apps/portal/services/Component.scss to match the hover effects of the Home section's content boxes (translateY(-5px) and box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1)).

This should address the visibility and consistency feedback.

tobiu referenced in commit 8faeca8 - "feat: Implement ServicesCanvas and Glassmorphism UI (#8702)" on Jan 16, 2026, 1:46 PM
tobiu assigned to @tobiu on Jan 16, 2026, 1:46 PM
tobiu
tobiu Jan 16, 2026, 1:46 PM

Input from Gemini 3 Pro:

✦ I have implemented the "Architect's Grid" visualization and Glassmorphism UI for the Services section.

Changes:

  1. New Canvas: Created apps/portal/canvas/ServicesCanvas.mjs running in a SharedWorker. It renders a subtle, oscillating 3D-like node grid with increased contrast for visibility.
  2. App Worker View: Created apps/portal/view/services/Canvas.mjs to bridge the DOM and the SharedWorker.
  3. Helper Update: Registered the new canvas in apps/portal/canvas/Helper.mjs.
  4. UI Overhaul: Updated apps/portal/view/services/Component.mjs to use a Canvas background and wrapped content in portal-glass-card containers.
  5. Styling: Added resources/scss/src/apps/portal/services/Component.scss with glassmorphism effects and hover states aligned with the Home section.
  6. Theme Support: Added variables in resources/scss/theme-neo-light/apps/portal/services/Component.scss.

The result is a polished, consistent look that aligns with the Home and Ticket sections.

tobiu closed this issue on Jan 16, 2026, 1:46 PM