Animated Simple Cursor Dot Custom CSS Help - Keep getting ERROR?

Hey I'm trying this neat little dot cursor effect to work on my site and I'm not sure where to start? I love this cursor because its super simple and fits the minimal design of the sight I'm working on but I cannot figure out how to get it to work properly. I keep getting the following ERROR:

Here is the link to the code. 

Any help would be greatly appreciated. 🙂 

Which exact code did you add to Squarespace?

Hi tuanphan, I applied the CSS and JS from the link in the OP. 

Have you added this CSS & JS yet?

Also, current Codepen code use Babel, have you converted it to standard JavaScript yet?

On 1/26/2023 at 3:38 AM, tuanphan said:

Have you added this CSS & JS yet?

Also, current Codepen code use Babel, have you converted it to standard JavaScript yet?

I have not converted it. That might be the issue. How would I do that? Sorry, I'm relatively new to html/css in squarespace. Do I need to add those links as well? I guess I am a little lost. 

Try adding this to Code Injection > Footer

<div id="app"/>
<style>
  /* play with vars for different effets */
:root {
  --color-cursor: 220, 90, 90;
  --cursor-outline-shade: 0.3;
  --cursor-size: 10px;
  --cursor-outline-size: 12px;
}

html,
body {
  cursor: none;
  background-color: #2f2c2c;
  color: #fff;
  font-family: "Inter", sans-serif;
}

html *,
body * {
  cursor: none;
}

#app {
  text-align: center;
}

h1 {
  margin-bottom: 0.7em;
  font-size: 3em;
  font-weight: 800;
  text-align: center;
}

a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  transition: 0.5s ease;
}
a:hover {
  color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

p {
  width: 80%;
  max-width: 32em;
  margin: 0 auto 1em;
  line-height: 1.7;
  font-weight: 300;
}

hr {
  border: 0;
  height: 2px;
  width: 3em;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 auto 1em;
}

h1 + hr {
  margin: 0 auto 2em;
}

#cursor-dot,
#cursor-dot-outline {
  z-index: 999;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

#cursor-dot {
  width: var(--cursor-size);
  height: var(--cursor-size);
  background-color: rgba(var(--color-cursor), 1);
}

#cursor-dot-outline {
  width: var(--cursor-outline-size);
  height: var(--cursor-outline-size);
  background-color: rgba(var(--color-cursor), var(--cursor-outline-shade));
}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script>
  function useEventListener(eventName, handler, element = document) {
  const savedHandler = React.useRef();

  React.useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  React.useEffect(() => {
    const isSupported = element && element.addEventListener;
    if (!isSupported) return;

    const eventListener = event => savedHandler.current(event);

    element.addEventListener(eventName, eventListener);

    return () => {
      element.removeEventListener(eventName, eventListener);
    };
  }, [eventName, element]);
}

/**
 * Animated Cursor
 * Replaces the native cursor with a custom animated cursor.
 *
 * @author Stephen Scaff
 */
function AnimatedCursor({
  color = '220, 90, 90',
  outerAlpha = 0.4,
  innerSize = 8,
  outerSize = 8,
  outerScale = 5,
  innerScale = 0.7 })
{
  const cursorOuterRef = React.useRef();
  const cursorInnerRef = React.useRef();
  const requestRef = React.useRef();
  const previousTimeRef = React.useRef();
  const [coords, setCoords] = React.useState({ x: 0, y: 0 });
  const [isVisible, setIsVisible] = React.useState(true);
  const [isActive, setIsActive] = React.useState(false);
  const [isActiveClickable, setIsActiveClickable] = React.useState(false);
  let endX = React.useRef(0);
  let endY = React.useRef(0);

  const onMouseMove = React.useCallback(({ clientX, clientY }) => {
    setCoords({ x: clientX, y: clientY });
    cursorInnerRef.current.style.top = clientY + 'px';
    cursorInnerRef.current.style.left = clientX + 'px';
    endX.current = clientX;
    endY.current = clientY;
  }, []);

  const animateOuterCursor = React.useCallback(
  time => {
    if (previousTimeRef.current !== undefined) {
      coords.x += (endX.current - coords.x) / 8;
      coords.y += (endY.current - coords.y) / 8;
      cursorOuterRef.current.style.top = coords.y + 'px';
      cursorOuterRef.current.style.left = coords.x + 'px';
    }
    previousTimeRef.current = time;
    requestRef.current = requestAnimationFrame(animateOuterCursor);
  },
  [requestRef] // eslint-disable-line
  );

  React.useEffect(() => requestRef.current = requestAnimationFrame(animateOuterCursor), [animateOuterCursor]);

  const onMouseDown = React.useCallback(() => setIsActive(true), []);
  const onMouseUp = React.useCallback(() => setIsActive(false), []);
  const onMouseEnter = React.useCallback(() => setIsVisible(true), []);
  const onMouseLeave = React.useCallback(() => setIsVisible(false), []);

  useEventListener('mousemove', onMouseMove, document);
  useEventListener('mousedown', onMouseDown, document);
  useEventListener('mouseup', onMouseUp, document);
  useEventListener('mouseenter', onMouseEnter, document);
  useEventListener('mouseleave', onMouseLeave, document);

  React.useEffect(() => {
    if (isActive) {
      cursorInnerRef.current.style.transform = `scale(${innerScale})`;
      cursorOuterRef.current.style.transform = `scale(${outerScale})`;
    } else {
      cursorInnerRef.current.style.transform = 'scale(1)';
      cursorOuterRef.current.style.transform = 'scale(1)';
    }
  }, [innerScale, outerScale, isActive]);

  React.useEffect(() => {
    if (isActiveClickable) {
      cursorInnerRef.current.style.transform = `scale(${innerScale * 1.3})`;
      cursorOuterRef.current.style.transform = `scale(${outerScale * 1.4})`;
    }
  }, [innerScale, outerScale, isActiveClickable]);

  React.useEffect(() => {
    if (isVisible) {
      cursorInnerRef.current.style.opacity = 1;
      cursorOuterRef.current.style.opacity = 1;
    } else {
      cursorInnerRef.current.style.opacity = 0;
      cursorOuterRef.current.style.opacity = 0;
    }
  }, [isVisible]);

  React.useEffect(() => {
    const clickables = document.querySelectorAll(
    'a, input[type="submit"], input[type="image"], label[for], select, button, .link');

    clickables.forEach(el => {
      el.style.cursor = 'none';

      el.addEventListener('mouseover', () => {
        setIsActive(true);
      });
      el.addEventListener('click', () => {
        setIsActive(true);
        setIsActiveClickable(false);
      });
      el.addEventListener('mousedown', () => {
        setIsActiveClickable(true);
      });
      el.addEventListener('mouseup', () => {
        setIsActive(true);
      });
      el.addEventListener('mouseout', () => {
        setIsActive(false);
        setIsActiveClickable(false);
      });
    });

    return () => {
      clickables.forEach(el => {
        el.removeEventListener('mouseover', () => {
          setIsActive(true);
        });
        el.removeEventListener('click', () => {
          setIsActive(true);
          setIsActiveClickable(false);
        });
        el.removeEventListener('mousedown', () => {
          setIsActiveClickable(true);
        });
        el.removeEventListener('mouseup', () => {
          setIsActive(true);
        });
        el.removeEventListener('mouseout', () => {
          setIsActive(false);
          setIsActiveClickable(false);
        });
      });
    };
  }, [isActive]);

  const styles = {
    cursor: {
      zIndex: 999,
      position: 'fixed',
      opacity: 1,
      pointerEvents: 'none',
      transition: 'opacity 0.15s ease-in-out, transform 0.15s ease-in-out' },

    cursorInner: {
      position: 'fixed',
      borderRadius: '50%',
      width: innerSize,
      height: innerSize,
      pointerEvents: 'none',
      backgroundColor: `rgba(${color}, 1)`,
      transition: 'opacity 0.15s ease-in-out, transform 0.25s ease-in-out' },

    cursorOuter: {
      position: 'fixed',
      borderRadius: '50%',
      pointerEvents: 'none',
      width: outerSize,
      height: outerSize,
      backgroundColor: `rgba(${color}, ${outerAlpha})`,
      transition: 'opacity 0.15s ease-in-out, transform 0.15s ease-in-out' } };



  return /*#__PURE__*/(
    React.createElement(React.Fragment, null, /*#__PURE__*/
    React.createElement("div", { ref: cursorOuterRef, style: styles.cursorOuter }), /*#__PURE__*/
    React.createElement("div", { ref: cursorInnerRef, style: styles.cursorInner })));


}


function App() {
  return /*#__PURE__*/(
    React.createElement("div", { className: "App" }, /*#__PURE__*/
    React.createElement(AnimatedCursor, null), /*#__PURE__*/
    React.createElement("section", null, /*#__PURE__*/
    React.createElement("h1", null, "Animated Cursor ", /*#__PURE__*/React.createElement("br", null), "React Component"), /*#__PURE__*/
    React.createElement("hr", null), /*#__PURE__*/
    React.createElement("p", null, "An animated cursor component made as a ", /*#__PURE__*/React.createElement("a", null, "Functional Component"), ", using ", /*#__PURE__*/React.createElement("a", null, "React hooks"), " like ", /*#__PURE__*/React.createElement("a", null, "useEffect"), " to handle event listeners, local state, an  ", /*#__PURE__*/React.createElement("a", null, "RequestAnimationFrame"), " management."), /*#__PURE__*/
    React.createElement("p", null, "Hover over these ", /*#__PURE__*/React.createElement("a", null, "links"), " and see how that animated cursor does it's thing. Kinda nifty, right? Not right for most things, but a nice move for more interactive-type projects. Here's another ", /*#__PURE__*/React.createElement("a", { href: "" }, "link to nowhere.")), /*#__PURE__*/
    React.createElement("p", null, "Play with the ", /*#__PURE__*/React.createElement("a", null, "css variables"), " to influence the cursor, cursor outline size, and amount of scale on target hover. I suppose those could all be ", /*#__PURE__*/React.createElement("a", null, "props"), " with some. Click in the margin to check click animation."), /*#__PURE__*/
    React.createElement("p", null, "There's probably a better way to manage these kind of events, but this was the best I could come up with. Recently started mucking more with React cause I'm down with the simplicity of Functional Components and Hooks. And if you read the docs, the future ain't class components. So, best get on them functions."))));



}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('app'));
</script>