Fun with Mouse Location

One of the things I'm currently geeking out on is creative ways to use the mouse locator. Warby Parker is actually one of my favorite e-commerce sites - spectacular UX experience, which makes sense, as they have no physical storefronts.

Designed by a badass firm out of New York called High Tide, they've always played around with interesting ways to display product. For example, they used to allow users to take a picture of themselves and then place images of glasses on their photo. Now, every pair of glasses they've got, they take 7 pictures of the model looking in different directions, from left to right. Depending on where your mouse is located, a different image is displayed, allowing users to move the model's head back and forth. It's actually a pretty simple CSS process and doesn't overload their Production Team with a crazy amount of work. 

But you should see users on this site. Everyone loves making the model shake their heads. It's pleasurable, kind of funny, and really displays the product well. It really makes you want to keep doing the trick on a number of products. Pretty dope. Also, I kind of have a crush on their massive product hero image at the top. Check it out here: 

Another trickier, more robust, and totally purposeless site that employs this creatively is Pointer Pointer. All you do is click your mouse somewhere in the field and you get a picture of someone pointing right at where your mouse is on the screen. It's just for fun and is supremely enjoyable but what's going on behind the scenes is kind of tricky.

They have different sets of photos each time you log on, and each image is named 258_683 or 199_321 or something, denoting the X and Y axis of that photo's "point." This means that they have to tag these individual images by hand, which entails a huge amount of work for such a pointless, ticklish experiment. 

They also cheat a bit. There's generally only ("only") 90 - 100 images loaded each time you log on. Each image only has one "true" pointing coordinate, so they mess with the image padding to move picture with the closest XY coordinate so that the person in the picture is pointing right at your mouse. That's a tricky little piece of CSS math that is beyond me but it definitely makes the site seem more magical. That's amount of work for something so trivial rivals even reshooting Star Wars in ASCI characters. Good job nerds. You done good. Click on the image to see it in action.