Seeing Cursors, Seeing People
A simple experiment to reconnect users through live cursors
Why all that?
This project began as a simple exploration of real-time web technologies.
I wanted to create something minimalist yet impactful. Something that makes users feel less alone while navigating a webpage.
By showing live cursor positions of everyone currently visiting the site, this small experiment transforms an otherwise solitary experience into a shared moment.
It won't break the Internet, but it’s fun, surprising, and a little poetic.
Technical Insights
To make this project work, I combined a few key tools:
- Node.js for the back-end application handling real-time communication.
- WebSockets to synchronize cursor positions instantly across users.
- Heroku for hosting the real-time application, offering a free and reliable environment for experimentation.
- Cursor.com, an AI-enhanced code editor that significantly sped up development by providing context-aware suggestions.
This was my first time working with Node.js and Heroku, and setting up a separate back-end application felt abstract at first. However, once the pieces came together, was amazing by how everything worked seamlessly.
Cursor.com x Anthropic.com proved invaluable during this process. Its integration of AI allowed me to add and refine functionality much faster than expected. Although Anthropic it’s not a free tool, the $1.50 spent for 4 hours of coding assistance was well worth the time saved.
Try It Yourself
Curious to add this to your own site?
Just embed the following script tag in the end of your HTML, and you’re good to go:
Future Directions
While the project currently focuses on live cursors, I’m considering adding more features, such as a minimalistic chat feature with short text bubbles appearing near cursors, or some even less usefull feature as colitions between cursors to generate interactions.
The goal is to keep everything lightweight, intuitive, and easy to integrate, ensuring that it complements any webpage without disrupting its design.
