How it works

The demo uses :before and :after elements to create a fake drop shadow, since CSS text shadows are quite slow to animate. A simple JS snippet then finds all elements with the .popart class and sets the custom text-content attribute, so that the Pseudo Elements can copy the heading text. That get's read in CSS using attr(text-content); Now we just have to set their transform properties on mousemove and we're done!

If you like this design, why dont you check out some of my other design experiments