Using a custom cursor in Hype

Using a custom cursor icon either in Muse or Hype can be quite simple!

What you will need:

1. Curser icon at 128x128px or larger
(this is the source file, and this is just the recommended size from me, this file is not necessary)

2. Curser icon at 50×50 pixels as PNG
(this will be the version for retina displays)

3. Curser icon at 25×25 pixels as PNG
(this will be the version for regular displays)

The two PNG files should be named like always without special characters, and with 1x and 2x at the end. Like this:

cursor_1x.png (for standard displays)
cursor_2x.png (for retina)

Keep in mind, that the top left corner of the image will be placed where the top left corner of the original cursor was.

Some additional notes are below the code, so please scroll down, before you do it yourself 😉

In the following video I show you how to use those files.
(no sound, it’s just a screenrecording)

And these are the codes I have used:

	<style>
		* {
  			cursor: url('${resourcesFolderName}/cursor_1x.png'), auto !important;
			cursor: -webkit-image-set(
  				url('${resourcesFolderName}/cursor_1x.png') 1x,
  				url('${resourcesFolderName}/cursor_2x.png') 2x
			), auto !important;
		}
	</style>

	<style>
		* {
  			cursor: url('${resourcesFolderName}/cursor_1x.png'), auto !important;
			cursor: -webkit-image-set(
  				url('${resourcesFolderName}/cursor_1x.png') 1x,
  				url('${resourcesFolderName}/cursor_2x.png') 2x
			), auto !important;
		}
		.hand {
  			cursor: url('${resourcesFolderName}/hand_1x.png'), auto !important;
			cursor: -webkit-image-set(
  				url('${resourcesFolderName}/hand_1x.png') 1x,
  				url('${resourcesFolderName}/hand_2x.png') 2x
			), auto !important;
		}
	</style>

As mentioned above, here some additional notes:

Your files do not have to be called “cursor_1x.png” and “hand_1x.png”. You can call them whatever you like. Just make sure that you update the code to match the new filename!
The filenames are always case-sensitive. So be aware of capitalisation.
Also the sizes I have mentioned above are just recommendations by me. If you want a smaller or larger cursor, that is of cause also possible.

Btw: You could even have a cursor that is an animated/interactive symbol! You would have a symbol that is built in Hype, and it will be attached to the regular cursor (which would be hidden, so it looks like the symbol is the cursor).
But this needs to be set up a bit differently. If you are interested, let me know, and I will do a tutorial for that!

PS: I had to update the code a bit (I added “!important”), because otherwise Hype might overwrite the cursor in some scenarios. And I was too lazy to re-record the video, in there you will still see the old code.