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

Custom cursor that rotates
https://github.com/evgenyvinnik/rotating-cursor

Last synced: about 2 months ago
JSON representation

Custom cursor that rotates

• Host: GitHub
• URL: https://github.com/evgenyvinnik/rotating-cursor
• Owner: evgenyvinnik
• License: apache-2.0
• Created: 2024-04-07T03:16:18.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-07T16:55:06.000Z (9 months ago)
• Last Synced: 2024-04-23T09:23:06.838Z (9 months ago)
• Language: TypeScript
• Homepage: https://evgenyvinnik.github.io/rotating-cursor/
• Size: 711 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# About

This is a submission for the weekly frontend programming challenge - ["Weekly Challenge #12 - Fools Cursor"](https://github.com/Algorithm-Arena/weekly-challenge-12-fools-cursor)

The goal of this challenge was to implement a program that rotates your cursor towards the interactive elements on the screen.

# Solution

I have implemented a special component `CursorArea`, which represents a special `div`, which has mouse tracking events enabled within it.

As user enters the `div`, the system captures cursor position in regards to the `div` center, calculates necessary angle and presents cursor that is turning in the correct direction. Overall system has 16 different custom cursors in a shape of gauntlet (cause it looks cool!).

Component has single prop: `padding`.

This is a necessity, because the core idea is to surround some important UI elements with the `CursorArea`, so two things are achieved:

- those UI elements would be shown prominently

- there is exist some area in which cursor could be redrawn (as it would be impossible in a "tight-fitting" `div`)

# Usage

Component usage is very simple, for example this is how you surround the button

```

  Click Me!

```

or an input

```

  

    Text input: 

  

```

# Live demo

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

# Video

https://youtu.be/jzbybHXtTvI