Add files via upload

README.md

@@ -0,0 +1,36 @@
+# Motion Hover Effects
+
+Demos for the tutorial "How to Create Motion Hover Effects with Image Distortions using Three.js" by Niccolò Miranda and Clément Roche.
+
+![Motion Hover Effects featured image](https://tympanus.net/codrops/wp-content/uploads/2019/10/demo3.jpg)
+
+[Article on Codrops](https://tympanus.net/codrops/?p=44003)
+
+[Demo](http://tympanus.net/Tutorials/MotionHoverEffects/)
+
+## Credits
+
+- [Three.js](https://threejs.org/) 
+- [GSAP](https://greensock.com/gsap/) 
+- [Fit Plane to screen](https://gist.github.com/ayamflow/96a1f554c3f88eef2f9d0024fc42940f)
+- Images from [Unsplash.com](https://unsplash.com/)
+- [Le Murmure](https://velvetyne.fr/fonts/le-murmure/) font by Jérémy Landes and Alex Slobzheninov
+
+## License
+This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.
+
+## Misc
+
+Follow Niccolò: [Twitter](https://twitter.com/niccolomiranda), [Dribbble](https://dribbble.com/niccolomiranda), [Instagram](https://www.instagram.com/niccolomiranda/), [LinkedIn](https://www.linkedin.com/in/niccolomiranda/) 
+
+Follow Clément: [Twitter](https://twitter.com/clementroche_), [LinkedIn](https://www.linkedin.com/in/clment-roche/), [Codepen](https://codepen.io/ClementRoche/)
+
+Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)
+
+
+[© Codrops 2019](http://www.codrops.com)
+
+
+
+
+

css/common.css

@@ -0,0 +1,26 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  min-width: 100vw;
+}
+
+canvas {
+  display: block;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.link {
+  cursor: pointer;
+}
+
+.link img {
+  display: none;
+}

css/reset.css

@@ -0,0 +1,52 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v4.0 | 20180602
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+	display: block;
+}
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+    display: none;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}