Skip to content

feat(graph): completed nodes orbit as stars around the task sphere #38

@diogobaltazar

Description

@diogobaltazar

Description

When a node is marked complete, it escapes the main sphere and relocates to an outer "stellar" orbit — smaller, luminous, star-like. Edges from completed nodes to their still-incomplete neighbours remain visible with the existing glow effect, preserving the sense of connection. The overall impression is a planet (the active task sphere) surrounded by a constellation of completed work.

Visual behaviour

  • Position: Completed nodes move to an outer invisible level beyond the sphere surface. The sphere supports as many outer levels as the graph has branch-depth levels — so a graph 4 levels deep gets 4 possible stellar rings, one per depth stratum.
  • Size: Completed nodes render at reduced size (suggested: ~40–50% of a normal node).
  • Appearance: Each completed node glows with a star-like shine — a bright core with a soft radial bloom, using the existing accent/glow token palette.
  • Edges: Edges from a completed node to any of its incomplete neighbours are still drawn, using the current edge glow/pulse effect unchanged.
  • Inactive nodes: Nodes not yet completed remain on the sphere exactly as today.

Acceptance criteria

  • Marking a node complete triggers an animated transition: it moves from its sphere position to the outer stellar level corresponding to its branch depth, shrinks to the reduced size, and adopts the star appearance.
  • Edges between a completed node and its incomplete neighbours continue to render with the existing effect.
  • Marking a node incomplete reverses the transition — it returns to the sphere.
  • The layout computation in graph.js is updated to place completed nodes on outer levels keyed by branch depth.
  • The star glow is implemented in App.css / inline styles in App.jsx without introducing new runtime dependencies.
  • Performance is acceptable with up to ~200 nodes (no frame-rate regression on the existing sphere animation).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions