https://github.com/saganaki22/lofilamp
Interactive SVG lava lamp with dynamic blob animations, color customization, and integrated lofi music player.
https://github.com/saganaki22/lofilamp
css-animation interactive-art javascript lava-lamp lofi-music relaxation-tool svg-animation web-animation
Last synced: 4 months ago
JSON representation
Interactive SVG lava lamp with dynamic blob animations, color customization, and integrated lofi music player.
- Host: GitHub
- URL: https://github.com/saganaki22/lofilamp
- Owner: Saganaki22
- License: apache-2.0
- Created: 2025-03-08T01:26:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-08T05:56:15.000Z (over 1 year ago)
- Last Synced: 2025-04-12T09:43:11.166Z (about 1 year ago)
- Topics: css-animation, interactive-art, javascript, lava-lamp, lofi-music, relaxation-tool, svg-animation, web-animation
- Language: HTML
- Homepage: http://drbaph.is-a.dev/LofiLamp/
- Size: 94.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.