Take back your time. Build better habits. Live intentionally.
Friction is a beautifully crafted digital wellness app that helps you reclaim screen time, build mindful habits, and stay productive — without the noise.
- 📊 Screen Time Dashboard — Track hours reclaimed and daily interceptions at a glance
- 🚪 Friction Gate — Intentional pause screen before accessing distracting apps
- 📚 Curated Reading — Access free public-domain self-help classics (Meditations, Art of War, and more)
- 🧘 Wellness Activities — Guided mindfulness prompts including forest bathing, grounding, and breathwork
- 💪 Daily Workouts — Quick bodyweight challenges with progress tracking
- 🏆 Community Leaderboard — See how you stack up against other users going screen-free
- 📈 History & Trends — Visualize your digital detox journey over time
- ⚙️ Settings — Customize friction levels, quiet hours, and blocked apps
| Layer | Technology |
|---|---|
| Framework | React 18 + TypeScript |
| Build Tool | Vite 5 |
| Styling | Tailwind CSS + shadcn/ui |
| Animations | Framer Motion |
| Routing | React Router v6 |
| State | TanStack React Query |
| Charts | Recharts |
- Node.js 18+ or Bun
- npm, yarn, or bun
# Clone the repository
git clone https://github.com/YOUR_USERNAME/friction.git
cd friction
# Install dependencies
npm install
# Start development server
npm run devThe app will be available at http://localhost:5173.
npm run build
npm run previewsrc/
├── components/ # Reusable UI components
│ ├── ui/ # shadcn/ui primitives
│ ├── BookCard.tsx # Reading card component
│ ├── WellnessCard.tsx
│ ├── WorkoutCard.tsx
│ └── ...
├── pages/ # Route pages
│ ├── HomePage.tsx # Main dashboard
│ ├── GatePage.tsx # Friction gate
│ ├── ProductivityPage.tsx
│ ├── HistoryPage.tsx
│ └── SettingsPage.tsx
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
└── index.css # Design tokens & global styles
Friction embraces a dark, minimal aesthetic inspired by digital wellbeing. The UI is intentionally calm — dominated by negative space, subtle animations, and muted tones — to contrast with the overstimulating apps it helps you avoid.
- Real-time community chat
- Workout streak tracking with fire animations
- Push notifications for quiet hours
- PWA support for mobile install
- Backend integration with user accounts
- Stripe subscription for premium features
This project is open source under the MIT License.
Built with ❤️ to help you put your phone down.