Movable and Scrollable Cursor for Mobile

Introduction

The "Movable and Scrollable Cursor for Mobile" project aims to develop a mobile application that functions like a facial cursor app with added scrolling capabilities. This app is designed for users who prefer hands-free navigation on their mobile devices, providing a PC-like experience through facial movements.

System Overview

This mobile application will utilize the device's front camera to detect facial movements, allowing users to control a cursor and scroll through content without using their hands. The app will be free to use and will include adjustable speed settings for personalized user experience.

Functional Requirements

• As a User, I should be able to control the cursor using facial movements.
• As a User, I should be able to scroll up by lifting my head.
• As a User, I should be able to scroll down by moving my head down.
• As a User, I should be able to click by moving my head left or right.
• As a User, I should be able to adjust the cursor speed to my preference.
• As a User, I should feel like I am using a PC without using my hands.

User Personas

• Lazy User: Prefers hands-free navigation and enjoys using technology to simplify tasks.
• Tech Enthusiast: Interested in innovative applications and enjoys experimenting with new tech.
• Accessibility User: Requires alternative navigation methods due to physical constraints.

Core User Flows

1. Facial Movement Detection:

   • User opens the app -> App accesses the front camera -> User moves head -> App detects movement -> Cursor moves accordingly.

2. Scrolling:

   • User lifts head -> App detects upward movement -> Content scrolls up.
   • User moves head down -> App detects downward movement -> Content scrolls down.

3. Clicking:

   • User moves head left or right -> App detects movement -> Click action is performed.

4. Speed Adjustment:

   • User accesses settings -> Adjusts speed slider -> Saves preferences -> Cursor speed updates.

Visuals Colors and Theme

• primary: #1A1A2E (Dark Blue)
• primary_light: #16213E (Lighter Blue)
• secondary: #E94560 (Crimson)
• accent: #0F3460 (Deep Blue)
• highlight: #F9F871 (Amber)
• bg: #0D0D0D (Black)
• surface: rgba(26, 26, 46, 0.8)
• text: #FFFFFF (White)
• text_muted: #B0B0B0 (Gray)
• border: rgba(233, 69, 96, 0.2)

Signature Design Concept

Interactive Galaxy Interface: The home screen will feature an interactive galaxy map where each star represents a different feature of the app. Users can click on stars to access features, drag to rotate the galaxy, and hover to highlight connections. This concept will be brought to life using @react-three/fiber for 3D rendering and gsap for smooth animations and transitions.

Interaction Model & Motion Direction

• Intended Interaction Model: Parallax
  • The landing page will feature layered depth via scroll, with decorative layers translating at different speeds to create a visually rich first impression.
  • Internal pages will maintain a static layout for clarity and ease of use.

Non-Functional Requirements

• The app must operate smoothly on both Android and iOS platforms.
• The app should have a low latency for facial movement detection.
• The app should be lightweight and not consume excessive battery power.

Tech Stack

• Frontend: React Native for mobile app
• Backend: FastAPI
• Database: MongoDB
• AI Models: Use camera + simple motion/brightness detection

Assumptions and Constraints

• Users will have devices with front cameras.
• The app will be free and not include any pay-to-use features.
• The app will require permission to access the camera.

Glossary

• Cursor: A movable indicator on a computer screen that shows a user's point of interaction.
• Facial Cursor: A cursor controlled by facial movements detected by a camera.
• Parallax: A scrolling technique where background images move slower than foreground images, creating an illusion of depth.