Hover Motion Intro Animation | Codrops

I admire websites that incorporate playful interactive visuals as they add a unique character to a brand and engage visitors. Recently, I discovered sink.design, where they call these visuals “Play.”

Simply click on it and see a new experiment each time. One of these experiments is as follows:

Rows of text move in sync with your mouse movements, which is impressive, especially considering the entire setup is rotated. I imagined how it would look with an image grid instead of text and added some filter animations. I also thought about how this effect could work as an introductory animation on a webpage, revealing content upon clicking an enter button. I drew inspiration from a Dribbble shot by Nick Hart for this.

This is what the hover motion looks like:

When you click the button to enter, the center image goes fullscreen and the content moves in.

I hope you enjoy this little mashup and find it inspiring!