Master your guitar chord transitions — one minute at a time.
Features • How It Works • Getting Started • Contributing • License
GripShift is a minimalist, open-source web application designed to help guitar players build muscle memory and speed up chord transitions. Based on JustinGuitar's proven "One Minute Changes" exercise, it strips away all distractions — no ads, no sign-ups, no clutter. Just you, two chords, and 60 seconds.
| Feature | Description |
|---|---|
| 🎯 Chord Display | Two large, clearly colored chords centered on screen |
| 🔀 Randomizer | Randomly select from 25 predefined chord pairs — never repeats the same pair twice |
| ⏱️ 60-Second Timer | Countdown display and progress bar |
| 3️⃣ Prep Countdown | 3-seconds countdown to prepare yourself before the timer starts |
| 🎮 Simple Controls | Start/Pause toggle, Restart, and Change Chords |
| 🌙 Dark Theme | Easy on the eyes, clean and focused interface |
| 📱 Mobile-First | Fullscreen layout optimized for phones and practice on the go |
| 🚀 No Backend | Fully client-side — zero latency, zero sign-up, zero tracking |
1. OPEN the app 2. TAP Start 3. PRACTICE switching
┌─────┬─────┐ 3... 2... 1... between the two
│ A │ C │ ┌────────────────┐ chords as fast and
│ │ │ │ ⏵ ↺ 🔀 │ cleanly as you can
└─────┴─────┘ └────────────────┘
01:00 GO!
- Random Chord Pair: The app shows two chords (e.g., A → C). Tap Change Chords to pick a new random pair.
- Start the Timer: Press Play. A 3-second preparation countdown helps you get ready.
- Practice: Switch between the two chords as many times as you can in 60 seconds. Count each clean transition.
- Track Progress: Aim for 30+ transitions per minute. As you improve, challenge yourself with harder pairs.
# Clone the repository
git clone git@github.com:l4ur4oliveira/gripshift.git
cd grip-shift
# Install dependencies
npm install
# Start the development server
npm run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm start |
Start production server |
npm run lint |
Run ESLint |
grip-shift/
├── docs/ # Specifications
│ ├── SPEC-app.md # Practice app spec
│ ├── SPEC-root.md # Landing page spec
│ └── MIGRATION.md # Vite → Next.js migration guide
├── public/
│ ├── hero-image.jpg # Landing page preview
│ └── logo.svg # Brand logo
├── src/
│ └── app/
│ ├── app/
│ │ └── page.jsx # Practice app route (/app)
│ ├── globals.css # Tailwind theme & global styles
│ ├── layout.jsx # Root layout & metadata
│ └── page.jsx # Landing page (/)
├── AGENTS.md # AI agent instructions
├── next.config.js
├── package.json
└── README.md
Contributions are welcome and appreciated! Here's how you can help:
Open an issue with:
- A clear title and description
- Steps to reproduce
- Expected vs. actual behavior
Open an issue keeping in mind the MVP philosophy: simple, focused, distraction-free.
- Fork the repository
- Create a feature branch:
git checkout -b feat/my-feature - Make your changes following the specs
- Make sure the specs are up to date, and add new ones if needed
- Run
npm run lintto check code quality - Commit with a clear message:
git commit -m "feat: add my feature" - Push:
git push origin feat/my-feature - Open a Pull Request
- Follow the existing code style (functional components, hooks, Tailwind)
- Keep changes minimal and focused — avoid feature creep
- Update docs/ specs if your change affects behavior
- Test on mobile viewport sizes
- Dark theme only
If GripShift helps you become a better guitar player, consider supporting my work!
Your support keeps the project alive, ad-free, and open source.
Distributed under the MIT License. See LICENSE for more information.
Copyright © 2026 Laura de Oliveira
- Justin Sandercoe (JustinGuitar.com) — for the "One Minute Changes" exercise that inspired this tool
- Open Source community — for the amazing tools that made this possible