Attention Blackhole is an interactive web experience designed to test a user’s ability to maintain focus in the presence of distractions. Users must concentrate on a central point while various notifications and visual interruptions attempt to break their attention.
In today’s digital world, attention is constantly being pulled in multiple directions. This project simulates that environment by introducing distractions while the user tries to stay focused, creating a simple yet powerful cognitive challenge.
- User must focus on a central element
- Time-based attention test
- Increasing difficulty
- Random pop-up notifications
- Visual interruptions
- Attention-breaking elements
- Track how long user stays focused
- Score based on performance
- Notification sounds
- Focus-enhancing ambient audio
- Smooth transitions
- Dynamic pop-ups
- Interactive UI effects
- Responsive layout
- Touch interaction support
-
Intro Screen
- Instructions to focus
-
Focus Phase Begins
- Central object appears
-
Distractions Appear
- Notifications try to divert attention
-
User Resists Distractions
- Maintains focus
-
Result Screen
- Displays focus score
- Dark minimal theme
- Central glowing focus point
- High-contrast distractions
- Clean and immersive layout
- HTML – Structure
- CSS – Styling & animations
- JavaScript – Logic & interactions
- Demonstrate how attention is affected by distractions
- Create a simple cognitive challenge
- Combine psychology with interactive UI
👉 https://attention-blackhole.netlify.app/
This project highlights the challenge of maintaining focus in a distraction-heavy digital world, turning a simple interaction into a meaningful cognitive experience.