search

Algorithm-Arena / weekly-challenge-12-fools-cursor

3 stars 1 forks source link

Submission - rotating cursor #2

Open evgenyvinnik opened 6 months ago

evgenyvinnik commented 6 months ago

Code: https://github.com/evgenyvinnik/rotating-cursor

Live demo: https://evgenyvinnik.github.io/rotating-cursor/

Video: https://youtu.be/jzbybHXtTvI

Flavor text for the submission: Quite proud of the result because how universal it is really (it is so universal in fact that I decided that I do not want to bother with some custom UI and just went with the straight out of the box React template): what we have here is a React Component <CursorArea/> which could wrap any other component like this:

        <CursorArea padding="20px">
          <img src={logo} className="App-logo" alt="logo" />
        </CursorArea>

Padding is required - that is our "capture" zone, in which we would listen to mouse events and display custom cursor (which I have chosen to be the gauntlet BTW).

nikpundik commented 6 months ago

Love the idea of having a custom react element with a custom cursor, also the cursor effect is very pleasing.

vjeux commented 6 months ago

This is exactly what I pictured in my mind when I setup the challenge, having something you can drop into your project to make it work for April Fools. So good!