So, I’m not a designer, and this sort of thing is definitely not my forté, but here’s one idea:
Essentially, I’m watching the mouse’s movements and getting it’s X and Y positions as a percentage of the total window. Then, I multiply that percentage by the width and height of the eyes and set the pupil’s position to that. If the mouse if 50% of the way across the screen, the pupils should be 50% of the way across the eyes. It took some tweaking to not make it look like the poor man’s eyes were rolling back in his skull, but it works.
You should be able to apply this to whatever you’re doing. The hard part will be keeping the pupils constrained and aligned to your walnut character as I imagine it’s an image being loaded rather than elements in markup. I think you’ll want your walnut to be an SVG, if you have the choice. If not, good luck!