I am building my first React site and having trouble understanding how to best layout pages and running into issues like this: I have a cursor animation -- throughout the entire webpage, the cursor is a small circle, but when I hover over certain divs within components that make up each section of the page (hero, about, work, etc.), the circle grows. Trouble is, because each of the effected divs are in a different component, the initial state (small circle) of the cursor resets on each section, making a weird experience and the circle has trouble following the cursor smoothly.
So... is the best way to set something like this up just to have the entire page as one big component? Or is there a way to route things so that the animation is on the entire page but changes when hovered on certain sections? Am I missing something? For clarity, adding screenshots of how I have the page setup and some of the internal component code as well.
main page build in app.js code used for the initial state of the cursor (small circle follow) within a section component code used to grow the circle on hover of a div within the section component
I've tried moving the initial state code to the app.js file, but then the hover effect doesn't work because the initial state and the hover state are being called up in different files. I've also tried adding the entire code to each section, but that doesn't work because the inital state has to reset in each section, so sometimes you see the 'small circle' twice on the page, etc.