"Your command center for deep work."
FlowState was designed and built during Cyber Cypher, an 18-hour national hackathon hosted by NMIMS Mumbai. We qualified Round 1 and shipped this project under real time pressure — from problem framing to working demo in under 18 hours.
Built by:
- Aaryan Raorane — UI/UX direction, product decisions, frontend implementation
- Tejas Kute — architecture, component structure, technical execution
FlowState is a premium, intent-focused operating system concept designed to help professionals regain control over their focus. By unifying emails, meetings, and commitments into a single, visually stunning interface, FlowState eliminates the "tab-switching" tax and promotes continuous deep work.
FlowState parses intent for maximum efficiency:
- Action Required: Priority emails that need your immediate decision are highlight 82F7 ed.
- Thread Continuity: A visual timeline that bridges the gap between email threads and calendar events.
- Focus Mode: A dedicated environment that blocks distractions and signals focus time to your team.
A state-of-the-art visual system built for long-duration deep work:
- Cinematic & Pearl Shadows: Custom 4-layer shadow hierarchy (Ambient, Depth, Detail, Atmosphere) for physical depth.
- Organic Curves: Standardized 24px organic curves (
rounded-3xl) across the entire UI. - Glassmorphism Pro: High-fidelity backdrop blurs and saturated overlays.
- Ambient Lighting: Subtle grain overlays and radial glows that respond to your theme.
- Omni-Search Palette:
⌘ + Knavigate anywhere or trigger actions instantly. - Physics-Based Motion: Powered by Framer Motion and Lenis for high-end inertia scrolling.
FlowState is built with a modern stack designed for scalability.
| Category | Technology | Description |
|---|---|---|
| Framework | React 18 | Component-based UI library |
| Build Tool | Vite 6 | Next-generation frontend tooling |
| Styling | Tailwind CSS 4 | Utility-first CSS framework |
| Animations | Framer Motion 12 | Production-ready motion library |
| Scrolling | Lenis | Smooth scroll normalization |
| Icons | Lucide React | Consistent icon set |
| Typography | Inter | Highly legible variable font |
The project follows a modular, view-based architecture.
src/
├── app/
│ ├── components/ # Atomic & Molecule UI components
│ ├── context/ # Theme and Global State providers
│ ├── data/ # Centralized Mock Data & Type definitions
│ ├── views/ # Modular View components (Inbox, Calendar, Dashboard, etc.)
│ └── App.tsx # Main Entry & View Router
├── styles/
│ ├── flowstate.css # Core Design System (Shadows, Curves, Gradients)
│ ├── theme.css # Shadcn/Tailwind palette definitions
│ └── fonts.css # Typography setup
└── main.tsx # Application Entry PointFollow these steps to set up the project locally.
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/tejaskute284-dotcom/flowstate.git cd flowstate -
Install dependencies
npm install # or yarn install -
Start the development server
npm run dev # or yarn dev -
Open in browser Visit
http://localhost:5173to view the application.
Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request