A cinematic music streaming experience designed for endless roads and nostalgic memories.
हॉर्न do is not just a music player—it's an interactive, aesthetic journey. Inspired by premium automotive dashboards, high-end audio interfaces, and the cultural essence of Indian highways, this application delivers a highly polished, immersive listening experience.
It combines cinematic video backgrounds, silky smooth animations, and multiplayer-like presence features so you never feel like you're driving alone.
- 🎵 Custom Mixtapes: Build and save your own personal mixtapes entirely in the browser using YouTube URLs. Stored locally via
IndexedDBso they never disappear. - 👥 Live Active Listeners: Powered by Vercel KV, see exactly how many people are enjoying the vibes with you in real-time.
- 🌌 Interactive Mouse Parallax: The entire background reacts to your cursor movements, creating a stunning 3D depth-of-field effect (can be toggled in settings).
- 🎛 Glassmorphic Media Dock: A responsive, buttery-smooth floating music player with full playback controls, shuffle, loop, and track navigation.
- 📺 Picture-in-Picture Mode: Watch the music video in a draggable, floating mini-player while you navigate other apps or tabs.
- 🕰 Minimalist Apple-style Clock: A beautiful, real-time minimalist clock perfectly centered in your dashboard.
- ✍️ Truck Shayari: Rotating, nostalgic, and sometimes funny Indian Truck quotes ("Shayari") that automatically cycle every 15 seconds.
- 🖼 Custom Backgrounds: Upload your own image or video backgrounds.
- 📱 Perfectly Mobile Responsive: Designed to look incredible whether you are on a massive 4K monitor or an iPhone SE.
This project pushes the boundaries of modern frontend web development.
- Next.js 16 (App Router)
- React 19
- Tailwind CSS
- Framer Motion (For fluid animations and physics-based interactions)
- Vercel KV (Redis) (For serverless real-time presence)
- idb-keyval (For robust IndexedDB local storage)
- React Player (For YouTube audio/video streaming)
To get a local copy up and running, follow these simple steps.
- Node.js 18.x or higher
- npm
-
Clone the repo
git clone https://github.com/Deadcoder001/Horn-Do.git
-
Navigate to the directory
cd Horn-Do -
Install NPM packages
npm install
(Note: An
.npmrcfile is included to automatically handle any React 19 peer-dependency conflicts with legacy packages vialegacy-peer-deps=true) -
Set up Vercel KV (Optional for Local, Required for Production) If you want the "Live Listeners" feature to work, you need to link a Vercel KV database and add your environment variables to a
.env.localfile:KV_REST_API_URL="your-kv-url" KV_REST_API_TOKEN="your-kv-token"
-
Run the Development Server
npm run dev
-
Open
http://localhost:3000in your browser.
The default playlist is stored in src/data/data.json. You can easily swap out the tracks with your own favorite YouTube links. The UI and color palette can be modified inside src/app/globals.css and tailwind.config.ts.
Ashif Elahi
- Portfolio: ashifelahi.netlify.app
- LinkedIn: Ashif Elahi
- GitHub: @Deadcoder001
If you would like to extend this project, contribute, or collaborate, feel free to contact me via email at asifelahi6@gmail.com.
Distributed under the MIT License. See LICENSE for more information.
"Keep Distance, OK Please!"