A recreation of the iOS "liquid glass" media player effect, built with SvelteKit and powered by live Spotify data. This project was inspired by the iOS 26 "liquid glass" update and this video, pushing the boundaries of what's possible with web-based glass morphism effects.
- Live Spotify Integration: Real-time music data pulled every ~5 seconds
- Liquid Glass UI: Recreates the iOS media player interface with glass morphism effects
- Dynamic Progress Bar: Shows actual playback progress from your Spotify account
- Chrome-Based Browser Required: Optimized for Chrome-based browsers for the best glass effects
- Background Video: Features a looping background video that complements the glass aesthetic
- SvelteKit: Modern web framework for the UI
- TypeScript: Type-safe JavaScript
- Tailwind CSS: Utility-first CSS framework for styling
- Glass Morphism Effects: Custom CSS and SVG effects for the liquid glass appearance
- n8n Workflow: Handles Spotify API integration and data processing
- Redis Cache: Prevents hitting Spotify's rate limits when handling multiple users
- Spotify Web API: Sources live music data including track info, progress, and album art
The backend uses an n8n workflow to efficiently manage Spotify API calls and cache responses in Redis, ensuring smooth real-time updates without exceeding API limits.
- Node.js (v18 or higher)
- A Chrome-based browser (Chrome, Edge, Opera, Brave, Vivaldi)
- Spotify Premium account (for live data integration)
- Clone the repository:
git clone https://github.com/TechnoTalksDev/liquid-glass.git
cd liquid-glass- Install dependencies:
npm install
# or
pnpm install
# or
yarn installOnce you've installed dependencies, start the development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openTo create a production version of your app:
npm run buildYou can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.
The application displays a beautiful glass morphism interface that mirrors your currently playing Spotify track. Here's what makes it special:
- Real-time Updates: Music data refreshes every 2.5 seconds to show live progress
- Dynamic Colors: Album art dominant colors create a glowing effect around the cover
- Responsive Design: Optimized for various screen sizes while maintaining the glass aesthetic
- Browser Compatibility: Best experienced on Chrome-based browsers due to advanced CSS effects
The n8n workflow backend handles:
- Spotify OAuth authentication
- API rate limit management through Redis caching
- Real-time data synchronization
- Multiple user session handling
Note: Playback controls (play/pause, skip, volume) are displayed for UI completeness but are non-functional to prevent unauthorized control of user's music.
The default background features this ambient video that complements the liquid glass aesthetic. You can toggle between video and static wallpaper modes.
This project requires a Chrome-based browser for optimal performance. The glass morphism effects may not render correctly in Firefox, Safari, or other non-Chromium browsers.
This project was built in a day as an experimental recreation of iOS liquid glass effects. If you encounter any quirks or have suggestions for improvements, feel free to open an issue or submit a pull request!
- Inspired by the iOS 26 "liquid glass" update
- Special thanks to this video tutorial that sparked the initial idea
- Built with ❤️ using SvelteKit and modern web technologies