A beautiful Chrome extension for lofi music lovers with over 10+ beautiful scenes and tracks to choose from. Relax, focus, and vibe with curated lofi tracks and stunning animated scenes. Now featuring Cloudinary-powered media streaming for optimal performance.
- Over 10+ Premium Tracks: Hand-picked lofi beats perfect for studying, working, or relaxing
- Cloudinary-Powered Streaming: Fast, reliable audio delivery with optimized cloud storage
- Autoplay: Seamlessly transitions to the next track when one ends
- Loop Mode: Repeat your favorite track endlessly with the elegant loop button
- Background Playback: Music continues playing even when you close the popup
- Over 10+ Beautiful Scenes: Carefully selected lofi-inspired video backgrounds
- Cloud-Hosted Videos: Smooth playback powered by Cloudinary CDN
- Synchronized Experience: Music and visuals create the perfect ambient atmosphere
- Smooth Transitions: Elegant scene switching with no interruptions
- Glassmorphic UI: Modern, translucent design with soft blur effects
- Minimalist Aesthetic: Warm beige and pink color palette inspired by lofi art
- Smooth Animations: Micro-interactions and hover effects for a premium feel
- Compact Interface: Optimized to show 3 tracks at once for easy browsing
- Simple Playback: Play, pause, and seek with elegant controls
- Progress Tracking: Visual progress bar with time display
- Quick Selection: Browse and switch tracks/scenes instantly
- Persistent State: Remembers your last selection and loop preference
Coming soon!
-
Clone the repository
git clone https://github.com/yourusername/lofi-horizon.git cd lofi-horizon -
Open Chrome Extensions
- Navigate to
chrome://extensions/ - Enable Developer mode (toggle in top-right corner)
- Navigate to
-
Load the extension
- Click Load unpacked
- Select the
Lofi-Horizonfolder - The extension icon will appear in your toolbar
-
Start vibing! 🎵
- Click the Lofi Horizon icon
- Select your favorite track and scene
- Hit play and enjoy
- First Launch: The extension opens with "Ambient Dreams" track and "Wistful Moments" scene pre-selected
- Click Play: Music won't auto-start - you're in control
- Browse Content: Click the menu button (⋮⋮⋮) to explore all tracks and scenes
- Tracks Tab: Browse 21 lofi tracks with compact, streamlined cards
- Scenes Tab: Explore 22 beautiful animated backgrounds with video previews
- Loop Button: Toggle loop mode (🔁) to repeat the current track
- Selection: Click any track or scene to select it (won't auto-redirect)
- Play/Pause: Central button with pulsing animation
- Progress Bar: Drag to seek, displays current time and total duration
- Menu Button: Access track/scene selection page
- Loop Button: Enable/disable loop mode (in selection page)
- Disabled (default): Automatically plays the next track when one ends
- Enabled: Repeats the current track continuously
- Visual Feedback: Button glows with warm beige when active
Lofi Horizon embraces the aesthetic principles of lofi culture:
- Nostalgia: Warm beige tones evoke vintage vinyl and analog equipment
- Minimalism: Clean, uncluttered interface for distraction-free listening
- Softness: Gentle glows, subtle shadows, and 85% opacity for a dreamy feel
- Harmony: Carefully curated color palette inspired by lofi album art
- HTML5: Semantic structure
- CSS3: Glassmorphism, animations, responsive design
- Vanilla JavaScript: No frameworks, pure performance
- Chrome Extension APIs: Background scripts, storage, messaging
- Cloudinary: Cloud-based media storage and delivery for audio and video
- SVG Icons: Scalable, theme-aware graphics
Lofi-Horizon/
├── manifest.json # Extension configuration
├── popup.html # Main UI structure
├── popup.js # UI logic and controls
├── offscreen.html # Offscreen audio player
├── offscreen.js # Audio playback logic
├── styles.css # All styling and animations
├── icons/ # Extension icons
│ ├── icon16.png
│ ├── icon48.png
│ └── icon128.png
└── README.md # You are here!
Note: Audio and video files are hosted on Cloudinary for optimized delivery
- Ambient Dreams
- Clouds Passing By
- Glass Window Tears
- Petals in the Wind
- December Embers
- Cozy Evening
- Study Session Echoes
- Café Corner
- Faded Polaroids
- Dusty Grooves
- Cat Café Lounge
- Chill Study Beat
- Laundromat Dreams
- Endgame Theory
- Fading Neon Lights
- Backyard Memories
- Focus Flow
- London Streets
- Seaside Café
- Velvet Sky Dreams
- Background Hum
- Stargazing Whiskers
- Dawn Vigil
- Warm Whisker Glow
- Sunday Afternoon Purr
- Dozing in the Dark
- Hearthside Solace
- Ticket to Nowhere
- City Light Watcher
- Quiet Company
- Bedroom Serenade
- Loyal Afternoon
- Unfinished Deadlines
- Rain-Soaked Steps
- Tomorrow's Plans
- Puddle Party
- Storm Lullaby
- Paws & Daydreams
- Cloud Gazing Companion
- Feline Reverie
- Treehouse Twilight
- Wistful Moments (default)
- Retro Rails Companion
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a 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
- Add more lofi tracks and scenes
- Implement playlist functionality
- Add shuffle mode
- Create keyboard shortcuts
- Improve accessibility
- Add dark/light theme toggle
Found a bug? Please open an issue with:
- Clear description of the problem
- Steps to reproduce
- Expected vs actual behavior
- Screenshots (if applicable)
- Browser version
This project is licensed under the MIT License - see the LICENSE file for details.
- Music: All lofi tracks are royalty-free or properly licensed
- Videos: Animated scenes from various lofi artists and creators
- Inspiration: The global lofi hip-hop community
- Design: Inspired by lofi album art and aesthetic principles
If you enjoy Lofi Horizon:
- ⭐ Star this repository
- 🐦 Share it with friends
- 💬 Leave feedback
- 🎵 Keep vibing!