Can I change cursor?

I am trying to make a demonstration video by screen recording in hype.
Since the default cursor is an arrow, I would like to change it into something more friendly, like an transparent circle (see below), and I wish the cursor could change its color when it is pressed as an indicator to show the audience.

Thank you thank you :wink:

There are multiple ways to customize the cursor, some are native to Hype, while others require CSS.

Here is a small sample program I wrote that demonstrates how to implement different cursor types.

customCursors.hype.zip (64.9 KB)

1 Like

Very, very nice.

It is worth pointing out though that Hype does have some Cursor (hover) Actions that you can use if they meet your requirements.

Yeah those are stock and some added css style cursors are nice. How about something like below I'd imagine it would be a timeline with 3 timelines for for main animation, hover, click very curious to see how this would work in hype.

Oh, that's pretty cool. I'd suspect what is happening is that it is hiding the cursor and then transferring the position to normal DOM elements that have the animations. However, it might be interesting to try using an animated PNG or animated SVG for the CSS cursor URL and see if that works.

"Pretty cool" indeed, you know I thought of having it animated as well via .png file but I noticed that it has a click state going to a new timeline where it has a bit of back/bounce ease followed by it becoming invisible. I would love to recreate this if I had an Idea where to begin with timelines and a bit of scripting.

Probably hide the cursor and update the position of your replacement using an request animation frame update. I did a quick test with Hype Action Events… but pointer events auto on HYPE_elements to restore the pointer events none from HYPE_elements_container is a real pain and made me resign for now.

1 Like