Return of the Creepy Face

On Monday, I posted an article about a fun JavaScript plugin - Creepy Face - which I implemented onto my experiments page with much enjoyment. Well, someone from the social media team got in touch to let me know they had a React version of the plugin ready to try.

I’m pleased to say that React-Creepyface works just as well as it’s origin, in fact it was even easier to setup without having to worry about react state management, useEffect and things like that. If you’re using it in Gatsby you just pull some images into the page with a static graphql query, then add your component like so:

  style={{ width: 300 }}
    hover: data.imageHover.childImageSharp.fixed.src,
    looks: [
      { angle: 0, src: data.imageAngle0.childImageSharp.fixed.src },
      { angle: 45, src: data.imageAngle45.childImageSharp.fixed.src },
      { angle: 90, src: data.imageAngle90.childImageSharp.fixed.src },
      { angle: 135, src: data.imageAngle135.childImageSharp.fixed.src },
      { angle: 180, src: data.imageAngle180.childImageSharp.fixed.src },
      { angle: 225, src: data.imageAngle225.childImageSharp.fixed.src },
      { angle: 270, src: data.imageAngle270.childImageSharp.fixed.src },
      { angle: 315, src: data.imageAngle315.childImageSharp.fixed.src }

And there you have it, another creepy face added to my experiments page! Thanks again to the people at for letting me know about this update.

© 2023 - 2024 Pursuit of Loot.

Twitter Spotify RSS
Back to top