Create psychedelic animations in real-time in the browser.
(P)art of your next trip.
Webgl shader animation created using liquid motion, distorted shapes, shadows, and light.
Live demo: https://collidingscopes.github.io/liquid-shape-distortions
The song used is Fahrenheit Fair Enough by Telefon Tel Aviv.
Use this to create:
- Animated backgrounds for music videos
- Concert / rave posters
- Stylized assets for creative projects
- Real-time rendering - real-time edits to the animation in the browser
- Randomization - Generate unique patterns with a single click
- Extensive controls - Fine-tune the animation parameters and canvas size
- Export options - Save your creations as images or videos
- Completely free - No paywalls, no premium options
- Open source - MIT licensed for personal and commercial use
| Control | Keyboard | Description |
|---|---|---|
| 🎲 | [R] | Randomize all inputs |
| ⏯️ | [Space] | Pause/play the animation |
| 📷 | [S] | Save a screenshot image |
| 🎥 | [V] | Start/stop video export |
| 🔊 | [M] | Toggle background music |
Additional keyboard shortcuts:
- [Tab] - Refresh pattern with a new random seed
- [T] - Restart animation from time = 0
This project is built using:
- WebGL shaders for high-performance rendering
- Vanilla JavaScript for logic and interactivity
- HTML5 Canvas for display
- CSS for styling
- dat.GUI for the control interface
- MP4 muxer for video encoding and export
The fragment shader uses:
- 3D simplex noise and fractal Brownian motion for organic patterns / liquid movement
- Seed-based randomization for unique visuals
- Real-time shader effects (bloom, saturation, grain)
-
Clone the repository:
git clone https://github.com/collidingScopes/liquid-shape-distortions.git -
Open
index.htmlin a web browser.
That's it! No build process, dependencies, or server setup required.
For development, you might want to use a local server:
npx http-server
The WebGL shaders used in this project can be resource-intensive. For optimal performance:
- Close unnecessary browser tabs
- Ensure your device has adequate GPU capabilities
- Reduce the canvas size if experiencing lag
- Ensure your device is not in battery-saving mode
Contributions are welcome! Feel free to submit issues or pull requests.
This project is licensed under the MIT License - see the LICENSE.txt file for details.
Check out other free and open-source projects by the same developer:
- Particular Drift - Turn photos into flowing particle animations
- Liquid Logo - Transform logos and icons into liquid metal animations
- Video-to-ASCII - Convert videos into ASCII pixel art
- Shape Shimmer - Turn photos into funky wave animations
- Colliding Scopes - Turn photos into kaleidoscope animations
- Manual Brick Breaker - Play brick breaker by waving your hands around
- Instagram: @stereo.drift
- Twitter/X: @measure_plan
- Email: [email protected]
- GitHub: collidingScopes
If you found this tool useful, feel free to buy me a coffee.
My name is Alan, and I enjoy building open source software for art, animation, games, and more. This would be much appreciated during late-night coding sessions!
