Forem: Andriy Chemerynskiy

Experimenting with Three.js: Devlog #2

Andriy Chemerynskiy — Sun, 26 Dec 2021 16:55:38 +0000

Before you read it

This is not a tutorial and I am not a Three.js expert. I am going to document my learning journey and share it with you. If you find it useful then I would appreciate you leaving a comment or liking this post. Thanks and let's get started 😎

Controls and wall collision problem

In the previous devlog, I added PointerLockControls to my scene and assign movement on keypress (W, A, S, D keys). And as mentioned there is a problem that camera can pass throw walls.

I didn't work with game dev or 3D before, so it was difficult for me to think about a solution for this.

My initial thought was to create enough if statements that would prevent the camera from passing throw walls (it was a super dummy idea 😅).

After struggling with it for some time, I discovered that there is a much easier and better solution for this.

Introducing physics

I found this wonderful answer to my problem on Stackoverflow:

It sounds way better than adding an infinite number of if statements 🤔

In easier words, it means that the viewer is a ball and if it will collide with the wall then physics will do its job 😱

As Einstein once said:

(or something like that).

Using use-cannon

There is a great library for handling physics use-cannon.

I defined walls using useBox hook and sphere using useSphere. Here is the result:

For debug purposes, I used Debug component

Applying camera to the sphere

The last and most challenging part is to add the camera to the sphere.

I was lucky to find this tutorial: https://www.youtube.com/watch?v=ZnXKmODEFHA

I won't write in detail how it is done, because you can check it on your now 😉 But basically it just subscribing to sphere/ball position and setting the camera to that place.

And it is done 🎉

Here is how it looks all together:

It looks like something basic on this video, but it felt soooo good to hit that wall and be stoped by the laws of physics 😍

You might think that we are finished with controls and can move on to more advanced stuff. Not really...

PointerLockControls won't work on mobile and we need to find another way of doing it. But I would talk about it in the next devlog 😉

Thanks for reading! 🙌

Experimenting with Three.js: Devlog #1

Andriy Chemerynskiy — Sun, 19 Dec 2021 14:34:07 +0000

Before you read it

Intro

My jaw dropped when I saw for the first time things done in WebGL. It started a revolution in the web world. However, it was super difficult to do anything in it, because it was too low-level (and I didn't have so much experience in programming 😅).

Demo: http://madebyevan.com/webgl-water/

Then Three.js enters the scene. Doing WebGL magic becomes easier and more cool applications appear online.

Website: https://bruno-simon.com/

But still, it was not super easy to get something done in Three.js. Yes, it has great documentation and many examples, but in my opinion, for the average programmer, it was still difficult.

Let's check it again

It is 2021. Many things have changed. More cool applications created, more examples, better docs 💪

React is the number one js library. We have react-three-fiber which allows us to use Three.js in React way (components, hooks, etc.).

Awesome, now there is no need to write a lot of boilerplate low code to set the scene and have box rotating in it.

Learning sources

Of course, I would recommend digging into Three.js, react-three-fiber documentation.

If you need some more help with it then I would suggest you check:

Learn Three.js using React: Build a 3D Tesla Workshop 2021

It shows the basics of Three.js and how it can be integrated with React-based web applications.

Three.js Journey

I don't think that it needs any explanation. Bruno Simon created lots of art pieces with WebGL and can share his knowledge with you.

Let's play with it

After finishing Learn Three.js using React: Build a 3D Tesla Workshop 2021, I got fundamentals that would allow me to move on. Also, I learned how to use Three.js as a handbook and find everything I need.

Soon I was able to create my first scene:
// Detect dark theme var iframe = document.getElementById('tweet-1466117820526305283-812'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1466117820526305283&theme=dark" }

Here are used PointerLockControls, but I do not handle wall collisions which mean that the camera can pass throw walls and objects 🤦‍♂️
As well it is not real room texture but 6 walls that use box geometry 😄

But I am happy with what I have and it was easy to set it up 🙂

In the next post, I will go more deeply into Three.js stuff and show you how I handled walls collision using a few tricks ✨

Thanks for reading! 🙌

React + D3 Sunburst Chart ☀️

Andriy Chemerynskiy — Tue, 21 Sep 2021 05:47:37 +0000

In this post, I am going to show you how you can build a sunburst chart (or any chart) using React and D3.

Power of D3 and React 💪

D3 is the king of data visualisation. It appeared around 10 years ago and there are still not so many libraries that can compete with it.

What is more, most of JavaScript data visualisations libraries are built on top of D3, because it is low level and can be customized however you want.

React and D3 integration

If you look into D3 code samples you might notice that it looks similar to... Yes, jQuery! It is not only visualization library but JavaScript library for manipulating documents based on data.

There are 3 ways of integrating React and D3:

D3-oriented approach: D3 manages the chart
React-oriented approach: React manages the chart
Hybrid approach: React for element creation, D3 for updates

More info

One of the key benefits of managing the chart using D3 is that we can easily add transitions, but in this tutorial, we would rely on a React-oriented approach as we would not need transitions (at least yet 🌚).

Why not use existing React based component libraries?

Actually, you can (maybe you even should). There are many existing libraries with great API that would allow you creating different charts with low effort.

However, sometimes you might get stuck if that library doesn't support the feature (or chart) you want.

If you want to have full control over your visualisation then you should do it using D3.

Building sunburst chart 👨🏼‍💻

I know that many of you prefer to dive right into the code.

Here is codesandbox with full code for this tutorial:

Finding D3 sunburst chart code

Cool thing about D3 is that it has hundreds of visualisations with code for it. All you need to do is just google it:

We would use the second link as it is a simpler example: https://observablehq.com/@d3/sunburst

This code might scare you in the beginning but it is okay. You don't have to understand every line of it. Our goal is to integrate it into React.

Basic setup

Building our chart would start with adding svg ref:



import React from "react";

export const SunburstChart = () => {
  const svgRef = React.useRef<SVGSVGElement>(null);

  return <svg ref={svgRef} />;
};

We are going to add width (we will name it SIZE) and radius (we will name it RADIUS) from code sample.



import React from "react";
+ const SIZE = 975;
+ const RADIUS = SIZE / 2;

export const SunburstChart = () => {
  const svgRef = React.useRef<SVGSVGElement>(null);

-  return <svg ref={svgRef} />;
+  return <svg width={SIZE} height={SIZE} ref={svgRef} />;
};

This chart uses json data and we are going to download it and add into our app.



import React from "react";
+ import data from "./data.json";
const SIZE = 975;
const RADIUS = SIZE / 2;

export const SunburstChart = () => {
  const svgRef = React.useRef<SVGSVGElement>(null);

  return <svg width={SIZE} height={SIZE} ref={svgRef} />;
};

D3 manages the chart

Let's install d3 and @types/d3.



npm install d3 @types/d3

When installation is finished, we will put all chart setup code into useEffect with little modifications



import React from "react";
import data from "./data.json";
+ import * as d3 from "d3";

const SIZE = 975;
const RADIUS = SIZE / 2;

export const SunburstChart = () => {
  const svgRef = React.useRef<SVGSVGElement>(null);
+  
+  React.useEffect(() => {
+    const root = partition(data);
+
//   We already created svg element and will select its ref
-    const svg = d3.create("svg");
+    const svg = d3.select(svgRef.current);
+
+    svg
+      .append("g")
+      .attr("fill-opacity", 0.6)
+      .selectAll("path")
+      .data(root.descendants().filter((d) => d.depth))
+      .join("path")
+      .attr("fill", (d) => {
+        while (d.depth > 1) d = d.parent;
+        return color(d.data.name);
+      })
+      .attr("d", arc)
+      .append("title")
+      .text(
+        (d) =>
+          `${d
+            .ancestors()
+            .map((d) => d.data.name)
+            .reverse()
+            .join("/")}\n${format(d.value)}`
+      );
+
+    svg
+      .append("g")
+      .attr("pointer-events", "none")
+      .attr("text-anchor", "middle")
+      .attr("font-size", 10)
+      .attr("font-family", "sans-serif")
+      .selectAll("text")
+      .data(
+        root
+          .descendants()
+          .filter((d) => d.depth && ((d.y0 + d.y1) / 2) * 
+          (d.x1 - d.x0) > 10)
+      )
+      .join("text")
+      .attr("transform", function (d) {
+        const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI;
+        const y = (d.y0 + d.y1) / 2;
+        return `rotate(${
+          x - 90
+        }) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
+      })
+      .attr("dy", "0.35em")
+      .text((d) => d.data.name);
+
//   We don't need to return svg node anymore
-    return svg.attr("viewBox", getAutoBox).node();
+    svg.attr("viewBox", getAutoBox);
+  }, []);

   return <svg width={SIZE} height={SIZE} ref={svgRef} />;
};

Nice! Let's add missing functions:



...

export const SunburstChart = () => {
  const svgRef = React.useRef<SVGSVGElement>(null);
+
+  const partition = (data) =>
+    d3.partition().size([2 * Math.PI, RADIUS])(
+      d3
+        .hierarchy(data)
+        .sum((d) => d.value)
+        .sort((a, b) => b.value - a.value)
+    );
+
+  const color = d3.scaleOrdinal(
+    d3.quantize(d3.interpolateRainbow,data.children.length+1)
+  );
+
+  const format = d3.format(",d");
+
+  const arc = d3
+    .arc()
+    .startAngle((d) => d.x0)
+    .endAngle((d) => d.x1)
+    .padAngle((d) => Math.min((d.x1 - d.x0) / 2, 0.005))
+    .padRadius(RADIUS / 2)
+    .innerRadius((d) => d.y0)
+    .outerRadius((d) => d.y1 - 1);
+ 
// Custom autoBox function that calculates viewBox
// without doing DOM manipulations
-  function autoBox() {
-    document.body.appendChild(this);
-    const {x, y, width, height} = this.getBBox();
-    document.body.removeChild(this);
-    return [x, y, width, height];
-  }
+  const getAutoBox = () => {
+    if (!svgRef.current) {
+      return "";
+    }
+
+    const { x, y, width, height } = svgRef.current.getBBox();
+
+    return [x, y, width, height].toString();
+  };
+
  React.useEffect(() => {
    ...

At this point, we should see our chart:

Beautiful, isn't it? But it is not finished yet. We append chart elements using D3, but we don't handle updating it or cleaning it up.

We can do it in useEffect hook as well and let D3 manage it, but we will do it in React oriented way.

React manages the chart

To have a better developing experience and avoid bugs we are going to fix types issues before we move on.



...

+ interface Data {
+  name: string;
+  value?: number;
+ }

export const SunburstChart = () => {
  const svgRef = React.useRef<SVGSVGElement>(null);

  const partition = (data: Data) =>
-    d3.partition().size([2 * Math.PI, RADIUS])(
+    d3.partition<Data>().size([2 * Math.PI, RADIUS])(
      d3
        .hierarchy(data)
        .sum((d) => d.value)
        .sort((a, b) => b.value - a.value)
    );

...

  const arc = d3
-   .arc()
+   .arc<d3.HierarchyRectangularNode<Data>>()
    .startAngle((d) => d.x0)
    .endAngle((d) => d.x1)
    .padAngle((d) => Math.min((d.x1 - d.x0) / 2, 0.005))
    .padRadius(RADIUS / 2)
    .innerRadius((d) => d.y0)
    .outerRadius((d) => d.y1 - 1);

...

Remove append function and put everything in render

This part is a bit difficult and might require a bit of D3 understanding. What I like to do is to inspect svg element throw DevTools and slowly move everything in render.

As you can see we have 2 groups. The first group keeps all paths and the other one keeps text elements.

And we are going to repeat the same structure 😉



...

  React.useEffect(() => {
    const root = partition(data);

    const svg = d3.select(svgRef.current);
-
-    svg
-      .append("g")
-      .attr("fill-opacity", 0.6)
-      .selectAll("path")
-      .data(root.descendants().filter((d) => d.depth))
-      .join("path")
-      .attr("fill", (d) => {
-        while (d.depth > 1) d = d.parent;
-        return color(d.data.name);
-      })
-      .attr("d", arc)
-      .append("title")
-      .text(
-        (d) =>
-          `${d
-            .ancestors()
-            .map((d) => d.data.name)
-            .reverse()
-            .join("/")}\n${format(d.value)}`
-      );
-
-    svg
-      .append("g")
-      .attr("pointer-events", "none")
-      .attr("text-anchor", "middle")
-      .attr("font-size", 10)
-      .attr("font-family", "sans-serif")
-      .selectAll("text")
-      .data(
-        root
-          .descendants()
-          .filter((d) => d.depth && ((d.y0 + d.y1) / 2) * 
-          (d.x1 - d.x0) > 10)
-      )
-      .join("text")
-      .attr("transform", function (d) {
-        const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI;
-        const y = (d.y0 + d.y1) / 2;
-        return `rotate(${
-          x - 90
-        }) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
-      })
-      .attr("dy", "0.35em")
-      .text((d) => d.data.name);

    svg.attr("viewBox", getAutoBox);
  }, []);
+
+ const getColor = (d: d3.HierarchyRectangularNode<Data>) => {
+    while (d.depth > 1) d = d.parent;
+    return color(d.data.name);
+   };
+
+ const getTextTransform = 
+ (d: d3.HierarchyRectangularNode<Data>) => {
+    const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI;
+    const y = (d.y0 + d.y1) / 2;
+    return `rotate(${x - 90}) translate(${y},0) rotate(${x < + 180 ? 0 : 180})`;
+  };
+
+  const root = partition(data);

  return (
    <svg width={SIZE} height={SIZE} ref={svgRef}>
+      <g fillOpacity={0.6}>
+        {root
+          .descendants()
+          .filter((d) => d.depth)
+          .map((d, i) => (
+            <path 
+              key={`${d.data.name}-${i}`}
+              fill={getColor(d)}
+              d={arc(d)}
+             >
+              <text>
+                {d
+                  .ancestors()
+                  .map((d) => d.data.name)
+                  .reverse()
+                  .join("/")}
+                \n${format(d.value)}
+              </text>
+            </path>
+          ))}
+      </g>
+      <g
+        pointerEvents="none"
+        textAnchor="middle"
+        fontSize={10}
+        fontFamily="sans-serif"
+      >
+        {root
+          .descendants()
+          .filter((d) => d.depth && ((d.y0 + d.y1) / 2) * 
+          (d.x1 - d.x0) > 10)
+          .map((d, i) => (
+            <text
+              key={`${d.data.name}-${i}`}
+              transform={getTextTransform(d)}
+              dy="0.35em"
+            >
+              {d.data.name}
+            </text>
+          ))}
+      </g>
    </svg>
  );
};

Awesome, code looks much more readable!

Last thing we are going to do it to pass viewBox value directly without using attr() function.

getAutoBox has to be run only one time and we are going to keep output of this function in the state.




...

export const SunburstChart = () => {
  const svgRef = React.useRef<SVGSVGElement>(null);
+ const [viewBox, setViewBox] = React.useState("0,0,0,0");

...
- React.useEffect(() => {
-  const svg = d3.select(svgRef.current);
-  svg.attr("viewBox", getAutoBox);
- }, []);
+ React.useEffect(() => {
+   setViewBox(getAutoBox());
+ }, []);

...

  return (
    <svg 
     width={SIZE}
     height={SIZE}
+    viewBox={viewBox}
     ref={svgRef}
     >
...
};

Now we have chart fully managed by React with D3 calculations.

Demo + full code: https://codesandbox.io/s/ioop1?file=/src/SunburstChart.tsx

I hope this article was helpful and gave you a basic idea about integrating D3 charts with React 😉

Make sure to follow me as I will post more content related to D3 and React.

Thanks for reading!

I made a platform where you can get free feedback on your website

Andriy Chemerynskiy — Mon, 01 Mar 2021 05:11:56 +0000

Idea 💡

I noticed that there are not so many places where people can get feedback, receive critics and suggestions on their website so they can improve it, validate and get ideas.

People usually ask their friends for feedback or post it on different forums, but it's not a perfect solution.

So I decided to build Roast My Website that will help you to do it!

Building 🏗

Having a full-time job, friends, and girlfriend that I want to spend time with, it took me 1 month to finish the beta version of this project.

I chose technologies that I already know (or heard), so I would be confident implementing it👇

I am happy with the results as the app is quite fast thanks to Next.js (frontend) and Strapi (backend).

All pages are statically generated which boosts up the performance. If you are looking for hybrid static & server rendering (and other yummy features) then Next.js is the right choice.

Strapi saved me a lot of time as I wasn't writing backend from scratch and had a beautiful admin panel. It is definitely a time saver ⏳

Tailwind CSS is a very good library for creating interfaces, and it's very difficult to mess something up. I used it for the first time and think that I might use it in my next projects.

Here is a link to the project: https://roastmywebsite.net

Let me know your thoughts about it 🙌

P.S. Later I am going to write few posts about some tricks that I used while building it, so stay tuned 😉

React time input⏳

Andriy Chemerynskiy — Sun, 22 Nov 2020 16:31:34 +0000

At my work, I had to add input which is quite similar to YouTube's "Start at" input for sharing video:

I am a pro level programmer, so the first thing I did was googling. However, all inputs that I found were different from what I needed.

So I implemented my own clone of YouTube's "Start at" time input.

Before I jump into the implementation part, here is the demo of what we are going to archive:

Behind the scenes:

User types in
When he finishes typing and clicks somewhere else onBlur event is fired
Getting seconds from input value (getSecondsFromHHMMSS(value)
Converting those seconds back to hh:mm:ss format (toHHMMSS(seconds))

It may sound complicated now, but it will be clear a moment later 😉

So let's start coding.

Let's add a basic structure:



input {
  background-color: rgba(96, 108, 110, 0.15);
  height: 40px;
  padding: 10px 10px;
  color: #606c6e;
  font-size: 30px;
  outline: 0 solid transparent;
  border: 0 solid transparent;
  width: 100%;
  border-radius: 4px;
  letter-spacing: -0.4px;
  padding: 10px 18px;
  width: 200px;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 30px;
  text-align: center;
}



const TimeInput = () => {
  const [value, setValue] = React.useState("0:00");

  const onChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input 
     type="text"
     onChange={onChange}
     value={value}
     />
  );
};

ReactDOM.render(<TimeInput />,
  document.getElementById("root")
);

We created TimeInput component that has an initial value set to O:00 and we update the state on every change.

Now we will add onBlur handler:



const TimeInput = () => {
  const [value, setValue] = React.useState("0:00");

+  const onBlur = (event) => {
+    const value = event.target.value;
+    const seconds = Math.max(0, getSecondsFromHHMMSS(value));
+
+    const time = toHHMMSS(seconds);
+    setValue(time);
+  };

  ...

  return (
     <input
      type="text"
      onChange={onChange}
+     onBlur={onBlur}
      value={value}
     />
  );
};

ReactDOM.render(<TimeInput />,
  document.getElementById("root")
);

onBlur function makes the same steps that I described earlier:

Getting seconds from input value (getSecondsFromHHMMSS(value)

Converting those seconds back to hh:mm:ss format (toHHMMSS(seconds))

Math.max(0, getSecondsFromHHMMSS(value)) returns 0 if seconds are negative, so we don't have wrong values in our input.

Now let's take a closer look at getSecondsFromHHMMSS:



  const getSecondsFromHHMMSS = (value) => {
    const [str1, str2, str3] = value.split(":");

    const val1 = Number(str1);
    const val2 = Number(str2);
    const val3 = Number(str3);

    if (!isNaN(val1) && isNaN(val2) && isNaN(val3)) {
    // seconds
      return val1;
    }

    if (!isNaN(val1) && !isNaN(val2) && isNaN(val3)) {
    // minutes * 60 + seconds
      return val1 * 60 + val2;
    }

    if (!isNaN(val1) && !isNaN(val2) && !isNaN(val3)) {
    // hours * 60 * 60 + minutes * 60 + seconds
      return val1 * 60 * 60 + val2 * 60 + val3;
    }

    return 0;
  };

We split the input's value by ":". Then we grab 3 values from this array and convert them to numbers.

Depending on the context val1, val2, val3 represent different values and handle those cases:

Only seconds (eg. 10, 40, 70 etc.)
Minutes and seconds (eg. 1:20, 0:10, 14:40 etc.)
Hours, minutes, and seconds (eg. 1:12:40, 123:49:12 etc.)

Finally, we format seconds from getSecondsFromHHMMSS back to hh:mm:ss format:



const toHHMMSS = (secs) => {
    const secNum = parseInt(secs.toString(), 10);
    const hours = Math.floor(secNum / 3600);
    const minutes = Math.floor(secNum / 60) % 60;
    const seconds = secNum % 60;

    return [hours, minutes, seconds]
      .map((val) => (val < 10 ? `0${val}` : val))
      .filter((val, index) => val !== "00" || index > 0)
      .join(":")
      .replace(/^0/, "");
};

We get hours, minutes, seconds from total seconds using simple math
map those values and if the value is less than 10 we add 0 to it
We don't want to show values like 00 (exception is seconds), so we filter
join our strings with ":"
replace leading zero

And it's working 😎

Codepen: https://codepen.io/andrewchmr-the-vuer/pen/wvWLRVw

I hope this article was helpful and saved you the time of thinking about how to do this 😉

Thanks for reading!

Awesome animated cursor with React Hooks⚡️

Andriy Chemerynskiy — Mon, 01 Jun 2020 12:36:24 +0000

Don't you find built-in cursors kinda boring?🥱 Me too. So I built my own.

Let's start by adding basic styles and logic to our cursor.

.cursor {
  width: 40px;
  height: 40px;
  border: 2px solid #fefefe;
  border-radius: 100%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

html, body {
  cursor: none;
  background-color: #121212;
}

const Cursor = () => {
    return <div className="cursor"/>
}

ReactDOM.render(
    <div className="App">
        <Cursor/>
    </div>,
    document.getElementById('root')
);

Now we want to change our cursor's position based on mouse moves.

const Cursor = () => {
+   const [position, setPosition] = useState({x: 0, y: 0});
+
+   useEffect(() => {
+       addEventListeners();
+       return () => removeEventListeners();
+   }, []);
+
+   const addEventListeners = () => {
+       document.addEventListener("mousemove", onMouseMove);
+   };
+
+   const removeEventListeners = () => {
+       document.removeEventListener("mousemove", onMouseMove);
+   };
+
+   const onMouseMove = (e) => {
+       setPosition({x: e.clientX, y: e.clientY});
+   };                                                               
+
-   return <div className="cursor"/>
+   return <div className="cursor"
+           style={{
+               left: `${position.x}px`,
+               top: `${position.y}px`
+           }}/>
}

...

When a component is mounted we add an event listener that handles mousemove event and remove it when the component is going to unmount. In onMouseMove function we set new cursor's position based on e.clientX and e.clientY properties.

Now our cursor reacts to mouse moves, but as you can see it doesn't hide when the mouse leaves the screen. So let's fix it!

.cursor {
  ...
+ transition: all 150ms ease;
+ transition-property: opacity;
}

+ .cursor--hidden {
+   opacity: 0;
+ }

...

+ import classNames from "classnames";

const Cursor = () => {
    const [position, setPosition] = useState({x: 0, y: 0});
+   const [hidden, setHidden] = useState(false);

...

    const addEventListeners = () => {
        document.addEventListener("mousemove", onMouseMove);
+       document.addEventListener("mouseenter", onMouseEnter);
+       document.addEventListener("mouseleave", onMouseLeave);
    };

    const removeEventListeners = () => {
        document.removeEventListener("mousemove", onMouseMove);
+       document.removeEventListener("mouseenter", onMouseEnter);
+       document.removeEventListener("mouseleave", onMouseLeave);
    };
+
+   const onMouseLeave = () => {
+       setHidden(true);
+   };
+
+   const onMouseEnter = () => {
+       setHidden(false);
+   };
    ...
+
+   const cursorClasses = classNames(
+       'cursor',
+       {
+           'cursor--hidden': hidden
+       }
+   );                                                             
+
-   return <div className="cursor"
+   return <div className={cursorClasses}
            style={{
                left: `${position.x}px`,
                top: `${position.y}px`
            }}/>
}

...

So, I add mouseleave and mouseenter handler. When the mouse enters the screen's opacity becomes 1 and when leaves - equals to 0. Additionally, I add classnames library which is a simple utility for conditionally joining classNames together.

Now it looks way better, but let's add some more stuff!

Let's add click animation.

.cursor {
  ...
- transition-property: opacity;
+ transition-property:  opacity, background-color, transform, mix-blend-mode;
  ...
}

+ .cursor--clicked {
+   transform: translate(-50%, -50%) scale(0.9);
+   background-color: #fefefe;
+ }

...

const Cursor = () => {
    ...
+   const [clicked, setClicked] = useState(false);

    const addEventListeners = () => {
        ...
+       document.addEventListener("mousedown", onMouseDown);
+       document.addEventListener("mouseup", onMouseUp);
    };

    const removeEventListeners = () => {
        ...
+       document.removeEventListener("mousedown", onMouseDown);
+       document.removeEventListener("mouseup", onMouseUp);
    };
+
+   const onMouseDown = () => {
+       setClicked(true);
+   };
+
+   const onMouseUp = () => {
+       setClicked(false);
+   };

    ...

    const cursorClasses = classNames(
        'cursor',
        {
+           'cursor--clicked': clicked,
            'cursor--hidden': hidden
        }
    );

...

Mouse clicks are handled by mousedown and mouseup event. When the mouse is clicked, the cursor's scale changes to 0.9 and background to #fefefe.

Let's move on to our final animation!

Now we will add some effects when links have hovered.

...

+ .cursor--link-hovered {
+   transform: translate(-50%, -50%) scale(1.25);
+   background-color: #fefefe;
+ }
+
+ a {
+   text-decoration: underline;
+   color: #fefefe;
+ }

...

const Cursor = () => {
    ...
+   const [linkHovered, setLinkHovered] = useState(false);

    useEffect(() => {
       addEventListeners();
+      handleLinkHoverEvents();
       return () => removeEventListeners();
    }, []);
+   
    ...
+
+   const handleLinkHoverEvents = () => {
+       document.querySelectorAll("a").forEach(el => {
+           el.addEventListener("mouseover", () => setLinkHovered(true));
+           el.addEventListener("mouseout", () => setLinkHovered(false));
+       });
+   };

    const cursorClasses = classNames(
        'cursor',
        {
            'cursor--clicked': clicked,
            'cursor--hidden': hidden,
+           'cursor--link-hovered': linkHovered
        }
    );
    ...
}

ReactDOM.render(
    <div className="App">
+       <a>This is a link</a>
        <Cursor/>
    </div>,
    document.getElementById('root')
);

When a component is mounted, handleLinkHoverEvents add event listeners to all link elements. When a link hovers, cursor--link-hovered class is added.

In the final step, we will not render <Cursor/> on mobile/touch devices.

+ const isMobile = () => {
+     const ua = navigator.userAgent;
+     return /Android|Mobi/i.test(ua);
+ };

const Cursor = () => {
+   if (typeof navigator !== 'undefined' && isMobile()) return null;
    ...
}

...

And we are done! Here is a full codepen example:

Adding custom cursor animation is not as difficult as it seems to be. I hope that this article will give you a basic idea of what you can do to customize your own cursor.

Thanks for reading!