Mouse Interactions and Frontend help
I need help with three aspects of my web portfolio's about section, I am currently just going focus on a specific part which i will provide a Codepen link that is similar to what I have (I'm currently using nextjs and styled component in my personal project):
Link: https://codepen.io/jorgeo/pen/jOXebZZ
1. Eye Animation and Mouse Interaction:
I have a single eye with a red pupil and surrounding text . I'm trying to make the pupil smoothly follow the mouse movements while keeping the elements around it in sync. The challenge is ensuring that the pupil remains centered and the movements are fluid. Currently, the elements are positioned absolutely, and I'm open to suggestions. If possible I also want the elements to move at a slightly different speed, to create a sort of parallax.
Note: In the codepen I have linked it doesn't quite show the text around the pupil, The first image i've attached is how it looks in my project, but wasnt able to replicate it the same way , the dive with the class "circle-rotate" should be the one that does this.
Note2: I have tried various methods to move the eye based on mouse movement but i have had no luck. The reason why i initially have the elements with position absolute was becuase I'm using gsap and it was for some animations im creating onscroll, but im willing to change those css atributes.
2. Iridescent Color Effect:
I want to achieve a prismatic/iridescent color effect in the eye, simulating the way real-life colors change when viewed from different angles. I'd prefer this effect to be more than a simple gradient; it should be a shiny, dynamic effect that responds to mouse movements. This aspect is intertwined with the third point, color selection, as I'd like suggestions for colors that match the overall design. I have provided a quite a few different examples of what I mean with this color effect, but the main take away is, I want to slightly alter the color based on the mouse movement if possible and see how I can create this color effect. (the next images after the first are the various examples of colors) Note: I've also seen things like "holographic foil" or something similar which is also interesting to me.
3. Color Suggestions:
While I'm aiming for iridescent colors, I'm open to ideas regarding color selection for the eye and background. Currently, I have a black background and a white eye, but I'm open to changing these elements to achieve the desired aesthetic. But the main objective is for someone to guide me or help me find where I can look to achieve the goal of moving the eye based on the mouse and adding the iridescent color effect.
5 Replies
another example
I have a code example for eye tracking https://codepen.io/z-/pen/pRKNbP the key part is
Math.atan2(x,y) which gives you the angle from 0,0 to x,y (offset x and y to make the target 0,0. In this example the centre of the eye is 50,50 so I subtract that from the cursor position). The code was written a long time ago so I wouldn't recommend copy and pasting, I would not recommend using jQuery.
For the iridescence you want to have a large texture/gradient for background the an iridescent gradient and just shift it across what needs the effect in the direction of motion (so if the pupil moves left, the texture/gradient shifts left too). If the thing tilts left the texture moves left too. I haven't done it myselfZed Dash
CodePen
Tracking eye
Thinking about animation in headers lead me to wanting to have some sort of tracker, poke its eye for it to change colour....
👍 thanks, will look into it
your codepens are absolutely wild to me. i hope to become as good as you one day
Awe thank you. My suggestion is that not only are there no bad ideas, the bad ideas are often the most interesting to make and provides a challenge to make it work