Rosalana Sandbox is a lightweight WebGL wrapper for simple, beautiful shader effects. It focuses on a clean API, type safety, and fast setup so you can go from idea to a shader in minutes.
It's DX‑friendly, small, and intentionally minimal — perfect for gradients, ambient backgrounds, and animated GLSL experiments. If you're not building a full 3D engine, Sandbox is a delightful alternative to larger libraries like three.js or p5.js.
Bundle size comparison
| Library | Minified | Gzipped |
|---|---|---|
| Sandbox | 31 KB | 8 KB |
| three.js | 694 KB | 175 KB |
| p5.js | 1.1 MB | 351 KB |
Sandbox is ~22x smaller than three.js and ~44x smaller than p5.js.
It works in both WebGL1 and WebGL2 contexts, with automatic fallback and detection.
Table of Contents
- Installation
- Quick setup
- Playback control
- Shaders
- Uniforms
- Built‑in uniforms
- Hooks
- Chaining
- Error handling
- Vue integration
- Cleanup
- Options
- Limitations (by design)
- License
WebGL is a powerful tool that opens up a world of possibilities for what we can do on the web. But it's not easy to master. Even getting to the point where you can render anything takes dozens of lines of boilerplate code — even for something as simple as a static image or a basic effect.
What if it didn't have to be this way? What if simple things could stay simple? We have three.js for complex 3D scenes, but why should we go through the same setup hell when all we want is a simple shader animation?
That's why Sandbox was created. A tiny WebGL library, 22 times smaller than three.js, with one job: skip the WebGL ceremony and just run your shader. And that's exactly what it does.
import { Sandbox } from '@rosalana/sandbox';
Sandbox.create(canvas, {
fragment: `// your shader here`
});
That's it. Everything is set up and rendering starts immediately.
How? Sandbox handles all the WebGL setup for you, so you can focus on what matters: writing your shader.
It supports both WebGL1 and WebGL2, automatically detecting which one to use based on your shader code. It even switches contexts at runtime if needed — you won't even notice it happened.
The defaults are carefully chosen to work out of the box, so often the simple example above is all you need. But there's still flexibility when you want it: custom uniforms, FPS limiting, time manipulation, mouse interaction, and more. It automatically pauses when the canvas is out of view and syncs state with reactive JavaScript frameworks.
Most things are handled automatically, including built-in uniforms that Sandbox injects into your shader for you. This lets you focus on the creative work in GLSL while the library takes care of the rest.
Writing shaders can be challenging too. We're working on smart shader preprocessing to make that easier as well. Share your thoughts and feedback on GitHub and help us make Sandbox exactly what we've all been searching for.
You'll find detailed documentation and interactive demos at Github.
Top comments (0)