Lofi Lamp

An interactive Lofi lava lamp visualization with customizable colors, controls, and lofi music. Perfect for relaxation and focus during work or study sessions.

Features

• Interactive Lofi Lamp: A beautiful, animated lava lamp created entirely with SVG and CSS.
• Color Customization: Change the color of the lava with preset options or use the custom color picker.
• Physics Controls: Adjust viscosity, heat, tension, and glare to create your perfect lava lamp experience.
• Ambient Light: Toggle ambient lighting effects for a more immersive experience.
• Starry Background: Enable a starry background that automatically activates after 50 seconds for an enhanced atmosphere.
• Responsive Design: Enjoy the lamp on any device but it is generally better on desktop.
• Fullscreen Mode: Enter fullscreen for a distraction-free experience.
• Audio Player: Built-in audio player for Lofi music to enhance your focus and relaxation.

How to Use

1. Open the Lofi Lamp: Launch the index.html file in your browser.
2. Adjust the Controls: Click the control panel tab on the left to access all customization options.
3. Change Colors: Select from preset colors or use the custom color picker.
4. Adjust Physics: Use the sliders to modify the behavior of the lava.
5. Toggle Features: Turn ambient light on/off or enable the starry background.
6. Play Music: Use the audio player at the bottom to play, pause, and control the volume of the lofi music.
7. Go Fullscreen: Click the "Enter Fullscreen" button for an immersive experience.

Setup

1. Clone this repository or download the files.
2. Open index.html in your browser.

Technical Details

The Lofi Lamp is built using:

• HTML5 for structure
• CSS3 for styling and animations
• SVG for the lava lamp graphics
• JavaScript for interactivity
• Web Audio API for audio visualization

The lava effect is created using SVG filters with a combination of Gaussian blur and color matrix transformations, providing a realistic fluid simulation without the need for heavy computational resources.

Browser Compatibility

The Lofi Lamp works best in modern browsers that support SVG filters and CSS animations:

• Chrome (recommended)
• Firefox
• Safari
• Edge

License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.

Acknowledgments

• Inspired by classic lava lamps and the lofi study aesthetic
• SVG filter techniques based on various open source projects
• Icons from Google Material Design icons

---

Created with ❤️ for all the lofi lovers and focus seekers out there.