background mouse shadow

Author: goldst

blocks/cursor/cursor--temp.cur

@@ -2,5 +2,5 @@
 :root,
 html,
 body {
-    cursor: url(cursor--temp.cur) 12 12, auto;
+    cursor: none;
 }

blocks/cursor/cursor--temp.png

@@ -1,5 +1,6 @@
 import './card/card.js';
 import './button/button.js';
+import './page/Page.js';
 import projects from './projects/projects.js';
 import projectCard from './project-card/project-card.js';
 import tags from './tags/tags.js';

blocks/cursor/cursor.css

@@ -0,0 +1,63 @@
+import MC from '../../js/mouseShadow/MouseShadowController.js';
+
+/**
+ * Base for the mouse shadow controller for button blocks, which automates
+ * the mouse shadow effect
+ * @abstract
+ * @extends MouseShadowController
+ */
+class Page extends MC {
+    /**
+     * @param {String} [modifier = ''] Modifier of the button block.
+     *   Default '' means mo modifier.
+     * @returns {void}
+     */
+    constructor() {
+        super(document.getElementsByTagName('html')[0], ['page'], '.page');
+    }
+
+    /**
+     * more specific version of {MouseShadowController}'s
+     * mousemoveEventShadow that already specifies where to find the
+     * passed shadow functions and what elements it applies to
+     * @see MouseShadowController
+     * @returns {void}
+     */
+    mousemoveEventShadow() {
+        super.mousemoveEventShadow(
+            this._shadowFunction,
+            '*',
+            this._postShadowFunction
+        );
+    }
+
+    /**
+     * function which takes an object args which contains e mousemove
+     * event (event) and returns css changes
+     * @param {object} args
+     * @returns {object} object of css properties and their values
+     */
+    _shadowFunction(args) {
+        const
+            rect = args.eventControlElement.domElement.getBoundingClientRect(),
+            hover = [
+                args.event.clientX - rect.left,
+                args.event.clientY - rect.top
+            ];
+
+        return {
+            '--page--mouse-shadow-left': hover[0],
+            '--page--mouse-shadow-top': hover[1],
+            '--page--center': Math.max(
+                Math.abs(args.event.clientX - 0.5 * rect.width), 
+                Math.abs(args.event.clientY - 0.5 * rect.height)),
+            '--page--center-v': Math.abs(args.event.clientY - 0.5 * rect.height)
+        };
+    }
+
+    _postShadowFunction() {
+
+    }
+}
+
+new Page().mousemoveEventShadow();

blocks/index.js

@@ -44,6 +44,18 @@ html,
     --_h: var(--h, calc(var(--_w) * 0.618033988));
 
     background-color: var(--c0);
+    background-image:
+    radial-gradient(
+        circle at
+        calc(
+            var(--page--mouse-shadow-left, -10000) * 1px
+        )
+        calc(
+            var(--page--mouse-shadow-top, -10000) * 1px
+        ),
+        var(--c1) 0,
+        var(--c0) calc(var(--page--center) * 0.05vw)
+    );
     color: var(--c1);
     font-family: "Manrope", Arial, Verdana, Tahoma, sans-serif;
     height: 100vh;