3 files changed, 204 insertions, 0 deletions
diff --git a/src/index.jsx b/src/index.jsx
new file mode 100644
index 0000000..d036580
--- /dev/null
+++ b/src/index.jsx
@@ -0,0 +1,130 @@
+/**
+ * Mousey Index
+ * @module src/index.jsx
+ */
+
+import { initializeDOM } from "./utility/index.js";
+
+// We will build 100 elements
+let elementCount = 100;
+
+// Keep track of current element offset
+let currentIndex = 0;
+
+// Set when we're done
+let almostDone = 0;
+
+// Append a bunch of elements
+let elements = [];
+
+// Keep track of coordinates
+let coordinates = [];
+
+/**
+ * Start the application and bind events
+ */
+function initialize() {
+  initializeDOM();
+  makeElements();
+  window.addEventListener("mousemove", handleMouseMove);
+  window.addEventListener("click", handleClick);
+  animate();
+}
+
+/**
+ * Animate the divs
+ */
+function animate(time) {
+  requestAnimationFrame(animate);
+  updateElements(time);
+}
+
+/**
+ * Update one element
+ */
+function updateElement({ element, coordinate, percent, time }) {
+  // Slow down time!
+  time /= 100;
+
+  // Set the color, size, and position
+  let hue = Math.round((percent * 360 + time) % 360);
+  let size = (Math.cos(percent * 10 + time / 30) + 1 / 2) * 50;
+
+  let xpos = coordinate.pageX + Math.sin(percent + time / 30) * 20;
+  let ypos = coordinate.pageY + Math.cos(percent + time / 30) * 20;
+
+  // Update the element
+  element.style.width = size + "px";
+  element.style.height = size + "px";
+  element.style.left = xpos + "px";
+  element.style.top = ypos + "px";
+  element.style.background = `hsl(${hue}deg 100% 50%)`;
+}
+
+/**
+ * Update the current element positions
+ */
+function updateElements(time) {
+  // Loop over all the elements
+  for (let index = 0; index < coordinates.length; index += 1) {
+    // Get the element index offset by the current index
+    let elementIndex =
+      (index - currentIndex + coordinates.length) % coordinates.length;
+
+    // Get the next DIV and update it
+    let element = elements[elementIndex];
+    let coordinate = coordinates[elementIndex];
+
+    // Convert the index to a value between 0..1
+    let percent = elementIndex / elementCount;
+
+    updateElement({ element, coordinate, percent, time });
+  }
+}
+
+function handleClick() {
+  almostDone = 0;
+}
+
+/**
+ * Handle when we click on the page
+ */
+function handleMouseMove(event) {
+  // Get the mouse coordinates
+  const { pageX, pageY } = event;
+  appendCoordinate({ pageX, pageY });
+}
+
+/**
+ * Append a coordinate to the rotating list
+ */
+function appendCoordinate({ pageX, pageY }) {
+  if (almostDone > elementCount) return;
+  coordinates[currentIndex] = { pageX, pageY };
+  currentIndex = (currentIndex + 1) % elementCount;
+  almostDone += 1;
+}
+
+/**
+ * Make a bunch of DOM elements
+ */
+function makeElements() {
+  for (let index = 0; index < elementCount; index++) {
+    let element = makeElement();
+    elements.push(element);
+  }
+}
+
+/**
+ * Make a DOM element
+ */
+function makeElement() {
+  let element = document.createElement("div");
+  element.style.position = "absolute";
+  element.style.transform = "translate3d(-50%, -50%, 0)";
+  document.body.appendChild(element);
+  return element;
+}
+
+// Run the application
+initialize();
diff --git a/src/utility/index.js b/src/utility/index.js
new file mode 100644
index 0000000..80b7cb2
--- /dev/null
+++ b/src/utility/index.js
@@ -0,0 +1,18 @@
+import Stars from "./stars";
+
+// Initialize the DOM
+export function initializeDOM() {
+  document.body.style.color = "#fff";
+  document.body.style.margin = 0;
+  document.body.style.padding = 0;
+  document.body.style.height = "100%";
+  document.body.style.width = "100%";
+  document.body.style.fontFamily = "Helvetica, Arial";
+  document.body.style.overflow = "hidden";
+  document.body.parentNode.style.margin = 0;
+  document.body.parentNode.style.padding = 0;
+  document.body.parentNode.style.height = "100%";
+  document.body.parentNode.style.width = "100%";
+  document.body.parentNode.style.backgroundColor = "#111";
+  Stars();
+}
diff --git a/src/utility/stars.js b/src/utility/stars.js
new file mode 100644
index 0000000..84b982a
--- /dev/null
+++ b/src/utility/stars.js
@@ -0,0 +1,56 @@
+/**
+ * Stars
+ * @module src/utility/stars.js
+ */
+
+export default function Stars() {
+  var canvas = document.createElement("canvas"),
+    ctx = canvas.getContext("2d");
+  document.body.appendChild(canvas);
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  canvas.style.position = "absolute";
+  canvas.style.top = "0px";
+  canvas.style.left = "0px";
+  canvas.style.zIndex = -1;
+  document.body.addEventListener("resize", go);
+  document.body.parentNode.style.backgroundColor = "black";
+  ctx.strokeStyle = "white";
+  var s = Math.sin,
+    c = Math.cos;
+  go();
+  function ri(n) {
+    return Math.random() * n;
+  }
+  function rr(a, b) {
+    return (b - a) * Math.random() + a;
+  }
+  function go() {
+    var w = (canvas.width = window.innerWidth);
+    var h = (canvas.height = window.innerHeight);
+    ctx.clearRect(0, 0, w, h);
+    var n = Math.sqrt(w * h) | 0;
+    while (n--) {
+      var x = ri(w);
+      var y = ri(h);
+      var r0 = rr(0, 1);
+      var r1 = rr(0, 1);
+      var r2 = rr(0, 1);
+      var t0 = ri(2 * Math.PI);
+      var t1 = ri(2 * Math.PI);
+      var t2 = ri(2 * Math.PI);
+      var x0 = x + c(t0) * r0;
+      var y0 = y + s(t0) * r0;
+      var x1 = x + c(t1) * r1;
+      var y1 = y + s(t1) * r1;
+      var x2 = x + c(t2) * r2;
+      var y2 = y + s(t2) * r2;
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      ctx.bezierCurveTo(x0, y0, x1, y1, x2, y2);
+      var color = rr(0, 255) | 0;
+      ctx.strokeStyle = "rgb(" + color + "," + color + "," + color + ")";
+      ctx.stroke();
+    }
+  }
+}