https://github.com/severidade/spinkicks
Personalizar o cursor de um site é uma maneira simples e poderosa de enriquecer a experiência do usuário.
https://github.com/severidade/spinkicks
css-modules-react react-testing-library reactjs typescript video vite vitest
Last synced: 22 days ago
JSON representation
Personalizar o cursor de um site é uma maneira simples e poderosa de enriquecer a experiência do usuário.
- Host: GitHub
- URL: https://github.com/severidade/spinkicks
- Owner: severidade
- Created: 2024-11-07T14:23:11.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-29T13:38:04.000Z (5 months ago)
- Last Synced: 2025-03-16T19:54:42.607Z (about 2 months ago)
- Topics: css-modules-react, react-testing-library, reactjs, typescript, video, vite, vitest
- Language: TypeScript
- Homepage: http://spinkicks.severidade.com.br/
- Size: 79.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cursor Customizado em React: Design e Funcionalidade para um Site Mais Interativo
**Personalizar o cursor de um site** é uma maneira simples e poderosa de enriquecer a experiência do usuário. Muitas vezes, o cursor padrão passa despercebido, mas ao **criar um cursor customizado**, é possível tornar a **navegação mais envolvente, divertida e até informativa**. Este estudo explora o desenvolvimento de um componente de cursor em React, com o objetivo de atender a essas necessidades e melhorar a interação do usuário com a interface.
## Tecnologias Utilizadas
Optei por usar **React** em conjunto com **JavaScript/TypeScript** e **CSS Modules**, sem recorrer a **bibliotecas externas**, pois criar o cursor do zero me permitiu ter um **controle total** sobre o **comportamento** e o **design** do mesmo, sem as limitações que uma solução pronta poderia impor.
Essa abordagem também foi uma oportunidade de aprofundar minhas habilidades nestas tecnologias, explorando os conceitos de manipulação do DOM, efeitos de hover e a sincronização entre o movimento do mouse e os estilos aplicados.
O **CSS Modules** foi escolhido por permitir a criação de estilos encapsulados e isolados, o que facilita a reutilização do componente em outras aplicações sem o risco de sobreposição ou conflitos com outros estilos.
## O Dilema do Cursor Customizado e a Acessibilidade
Ao desenvolver interfaces interativas, é tentador implementar elementos visuais chamativos, como cursores customizados. No entanto, é essencial considerar alguns pontos cruciais.
Em **dispositivos móveis**, não existe cursor, o que torna essa **feature irrelevante**. Para essas situações, é interessante não apenas desenvolver uma experiência equivalente para o *touch*, mas também pensar na performance, removendo o código desnecessário para dispositivos móveis.
Do ponto de vista da *acessibilidade*, considerando que alguns usuários configuram seus dispositivos para reduzir animações e outros fazem uso de leitores de tela, é preciso garantir que a ausência do cursor customizado não prejudique a experiência.
Dito isso, é importante sempre ponderar: o cursor customizado agrega valor real à identidade do projeto? A perda dessa feature em mobile compromete a experiência? Existe uma forma de compensar essa perda em diferentes dispositivos?
## Sumário de Versões do Projeto
Este repositório contém diferentes versões do projeto, cada uma implementando funcionalidades específicas. Abaixo estão os links para cada versão:
- [Versão Custom Cursor v1](https://github.com/severidade/spinkicks/tree/feature/custom-cursor-v1): Implementa o cursor customizado.