Designing a Gamified Homing Projectile Animation for Level-Up Points

[realdevelogic]

The goal is to create an engaging animation where "level-up points" (represented as a projectile) originate from a UI card and travel dynamically towards a target at the bottom of the page. This animation would give users a sense of accomplishment and reward by visually connecting an action (e.g., earning points) with the resulting progress (e.g., level-up). the current method that I'm using is not performant enough, and lags on low end devices, I'm using a Canvas that's drawn over the entire page and is accessible from all tabs, I dynamically add projectile components to a children array that the Canvas then renders when a new one is added.
I'm using transforms3d to change translateX, translateY, rotateZ, rotateY, rotateX, and useDerivedValue, and a sharedValue representing current progress level of the animation.
Is there an alternative that would be more performant?

<Canvas
          ref={ref}
          pointerEvents="none"
          style={{
            height: SCREEN_HEIGHT,
            width: SCREEN_WIDTH,
            backgroundColor: "transparent",
            pointerEvents: "none",
          }}
        >
          {drawables.map(({ component: Component, id, props, type }) => {
            return (
              <Component
                {...props}
                onReachDestination={() => {
                  console.log("reached destination");
                }}
              />
            );
          })}
 </Canvas>
 

[LoserAntbear]

@realdevelogic Have you been able to figure this one out? Seems like conditional element rendering is not very performant within Canvas.