Help reverse engineering cursor effect

Design help Custom code
1

Hi Webflow Community,

Building a brutalist wedding photography portfolio site for a client and thinking of experimenting with some custom cursors inspired by this site:

(I’m mainly interested in the desktop experience, although I think the way it translates to mobile on this site is also quite slick, tbh).

I have been Googling around and can only find the cursor: url() property. I tried playing with that but couldn’t get it to work. I think by .jpg file was just too large, or I needed to use a .svg file. Anyway, ideally I’d be able to create a cursor that isn’t based on a static jpg/svg file anyway (or limited in size) but I can’t find any guides online for how to do that. As you can see in the example above, the hover effect changes dynamically as you move it over elements, and is definitely larger than ~168x168 px… I see this kind of effect often when research more brutalists sites and would love someone’s input. It’s possible this technique is just too complex for me…

Nick

P.S. would be particularly interested in incorporating this glitch effect with the custom cursor effect; i.e. have the word “menu” be the cursor, with the glitch effect applied.

1 Like
2

Hello @npfosi

Using custom cursor is a nice touch. I highly recommend checking @dram Dram’s guide to custom cursors in Webflow

Works great! I’m using the approach for a client site with some different cursor hover effects. See here > https://intermodels.webflow.io/ I still have a lot of work btw :sweat_smile:

About the hover effect, there was a post here in the forum, but I can’t find it right now.

Piter :webflow_heart:

1 Like
3

Wow thanks, super helpful resource. Not sure how I didn’t turn this up myself. Also great site! Have to look at it more but first reaction is a thumb’s up!

2 Likes