I have always wanted to write a card component that comes closer to your mouse as you move towards it, begging to be clicked. Although this isn't quite that, its close.

Despite what looks like complex behaviour the css and JavaScript involved is pretty simple and more css than JS.

I wrote this in lit-element as I feel that its so vanilla you can port this to whatever framework you like, (You can just use it, its a custom element after all).

If your browser doesn't support this, nothing will happen, so thats nice.

What is supposed to happen?

• mouse comes closer (actually what happens is the card moves away, not sure how to fix), card moves in that direction which is sort of parallax with mouse.
• If moved far away, card sits back in static position
• movement should reduce when user is on card