{"version":"1.0","type":"rich","title":"implement mouse movement","description":"A React component uses SVG to render a single circle that tracks the mouse cursor across a 960-by-500 viewport. The `useState` hook stores the cursor’s x and y coordinates, initialized at the center, while the `useCallback` hook wraps the `handleMouseMove` event handler to update that state on every mouse movement. The circle’s `cx` and `cy` attributes are bound to the stored coordinates, and the SVG element’s `onMouseMove` prop triggers the update. This example demonstrates interactive state management and event handling within a React-driven SVG visualization.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/540adaadafcb4fca97654751a0d6c928?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}