Simplify module exports

Author: Josiah Nunemaker

README.md

@@ -2,6 +2,8 @@
 
 Rotates your elements in 3D space based on your mouse position.
 
+### [Demo on Codepen](https://codepen.io/FracturedLoop/full/VBXpbj/)
+
 ## Installing
 
 Clone the repo
@@ -30,7 +32,7 @@ npm run dev
   
   // Optionally, if your environment supports ES modules, you can include Parabox.js as a module
   <script type="module">
-    import * as parabox from 'https://cdn.jsdelivr.net/npm/parabox.js/dist/parabox.es.js';
+    import parabox from 'https://cdn.jsdelivr.net/npm/parabox.js/dist/parabox.es.js';
   </script>
 
   // Using the built files

gulpfile.js

@@ -8,7 +8,7 @@ gulp.task('dev', () => {
 
 gulp.task('build:umd', async () => {
   const bundle = await rollup.rollup({
-    input: './src/index.js',
+    input: './src/parabox.js',
     plugins: [
       babel({
         exclude: 'node_modules/**',
@@ -26,7 +26,7 @@ gulp.task('build:umd', async () => {
 
 gulp.task('build:es', async () => {
   const bundle = await rollup.rollup({
-    input: './src/index.js',
+    input: './src/parabox.js',
   });
 
   bundle.write({

src/index.js

@@ -2,12 +2,12 @@ import { init as initParaboxShift, shiftChildren } from './parabox-shift.js';
 
 let paraboxes = [];
 
-function getTransformMagnitude(el) {
-  const magnitude =
-    el.dataset.paraboxMagnitude ||
-    getComputedStyle(el).getPropertyValue('--parabox-magnitude') ||
+function getTransformMultiplier(el) {
+  const multiplier =
+    el.dataset.paraboxMultiplier ||
+    getComputedStyle(el).getPropertyValue('--parabox-multiplier') ||
     1;
-  return magnitude;
+  return multiplier;
 }
 
 function tiltBox(e, el) {
@@ -16,8 +16,8 @@ function tiltBox(e, el) {
   const horToBoxCenter = e.clientX - rect.left - rect.width / 2;
   const verToBoxCenter = e.clientY - rect.top - rect.height / 2;
 
-  const transformX = horToBoxCenter * getTransformMagnitude(el);
-  const transformY = verToBoxCenter * getTransformMagnitude(el);
+  const transformX = horToBoxCenter * getTransformMultiplier(el);
+  const transformY = verToBoxCenter * getTransformMultiplier(el);
 
   el.style.boxShadow = `${((transformX * -1) / rect.width) *
     4}px ${((transformY * -1) / rect.height) * 4}px 4px rgba(0, 0, 0, 0.25)`;