Skip to content

Improve Skill Tree particle animation performance on low-end devices #6

@FatBy

Description

@FatBy

Description

The Skill Tree view uses Canvas 2D particle animation which can drop frames on integrated GPUs or low-end laptops.

Current Behavior

  • All particles rendered every frame regardless of device capability
  • No frame rate adaptation
  • Can cause lag on machines with integrated graphics

Expected Behavior

  • Detect low frame rates and reduce particle count dynamically
  • Option to disable particle animation entirely in Settings
  • requestAnimationFrame properly throttled

Files to Modify

  • src/components/blueprint/SkillTreeView.tsx (main animation loop)
  • Settings panel for toggle option

Helpful Context

The animation loop is in the useEffect that calls requestAnimationFrame. Look for the particles.forEach block.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions