A beautifully designed, minimalist Pomodoro timer built with Next.js. AION helps you focus with a clean interface, smooth animations, and a distraction-free environment.
- Flip Clock Display: Elegant flip-style clock animation with smooth transitions
- Multiple Durations: Choose from 5, 15, or 25-minute sessions via lever selector
- Precise Timing: Millisecond-accurate timer with smooth countdown
- Session Tracking: Automatically tracks completed Pomodoro sessions
- Control Buttons: Play, pause (stop), and reset functionality
- Progress Visualization: Visual progress bar showing session completion
- Minimalist Design: Clean, distraction-free interface with decorative elements
- Responsive: Works seamlessly on desktop and mobile devices
- Dark/Light Mode Support: Adaptive favicons and icons
- Framework: Next.js 16 with App Router
- Language: TypeScript
- Styling: Tailwind CSS 4
- UI: Custom React components with smooth animations
- Deployment: Optimized for production builds
- Node.js 18+ and npm (or yarn/pnpm)
- Clone the repository:
git clone git@github.com:morphine-cake/Aion.git
cd AION- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
- Select Duration: Use the lever selector to choose 5, 15, or 25 minutes
- Start Timer: Click the play button to begin your Pomodoro session
- Pause: Click the stop button to pause the timer
- Reset: Click the reset button to restart the current session
- Track Progress: Watch the progress bar and completed session counter
AION/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Main timer page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── ControlButton.tsx # Play/Stop/Reset buttons
│ ├── DecorationFan.tsx # Decorative fan element
│ ├── DoubleDigitCard.tsx # Flip clock digit cards
│ ├── FlipClock.tsx # Main clock component
│ ├── LeverSelector.tsx # Duration selector
│ └── ProgressBar.tsx # Progress visualization
├── public/ # Static assets
│ ├── assets/ # SVG assets
│ ├── favicon/ # Favicon files
│ ├── icon/ # Control icons
│ └── SEO-image/ # Social media images
└── package.json # Dependencies and scripts
AION follows a minimalist design approach, focusing on:
- Clarity: Clean interface without distractions
- Elegance: Smooth animations and transitions
- Functionality: Intuitive controls and clear feedback
- Aesthetics: Thoughtful use of space and visual hierarchy
Visit the live application at: https://aion.burakbasci.com
Burak Başcı
- Website: burakbasci.com
- GitHub: @morphine-cake
This project is licensed under the ISC License.
Made with ❤️ by Burak Başcı