sylva
An interactive Three.js landscape study with a procedural, pointer-responsive moss world.
What is it?
What it is
An interactive Three.js landscape study featuring a procedural, moss-covered root that grows through an editorial conservation hero and reacts to the pointer as if it were alive.
Why it exists
To create an immersive, interactive web experience that demonstrates procedural generation, real-time responsiveness, and creative coding through a living moss landscape that responds to user interaction.
Who should use it
Web developers and creative coders interested in building self‑contained, interactive Three.js experiences with procedural generation, custom shaders, and complex UI interactions. Designers exploring editorial‑conservation compositions and wanting to replace static assets with live, deterministic geometry and particle systems. Anyone who wants to study how to bundle a full WebGL scene in a single HTML file without external network requests.
Who should avoid it
Beginners looking for simple static sites or tutorials that avoid Three.js and WebGL. Users on devices or browsers without WebGL2 support who cannot tolerate fallback degradation. Those seeking a permissive license for reuse or redistribution of the artwork and code. Developers who prefer a build step or modular component architecture.
How it works
A quick walkthrough in plain English
How sylva works
Step 1 of 3
You interact with it
Open sylva, send a request, or connect it to your stack.
Features
Advantages
- Fully self-contained: runs entirely client-side with no external network requests after initial load
- Self-hosted Three.js r149 build eliminates dependency management complexity
- High-performance rendering with efficient instancing capabilities
- Accessible design includes reduced-motion mode for users requesting it
- Professional-quality visual effects like liquid-metal controls and dynamic particle systems
- Clean separation of concerns with sandboxed WebGL2 iframes for controls
- No installation or build steps required—just serve the repository over HTTP
Disadvantages
- Requires WebGL2 support, limiting compatibility with older browsers or devices
- Vendored Three.js adds significant bundle size overhead compared to CDN-based solutions
- Complex setup process involving a Python HTTP server rather than standard web hosting
- Code is proprietary (no license granted for reuse or redistribution) which may restrict commercial use
- Steep learning curve for developers unfamiliar with Three.js and advanced WebGL concepts
Installation
native
Serve the repository root over HTTP using Python's http.server: ```bash python3 -m http.server 4173 --bind 127.0.0.1 ``` Then visit [http://127.0.0.1:4173/](http://127.0.0.1:4173/).
FAQ
How do I run Sylva locally?
Serve the repository root over HTTP using `python3 -m http.server 4173 --bind 127.0.0.1` then visit http://127.0.0.1:4173/. There is no install or build step required.
What is Sylva and what interactive features does it offer?
Sylva is an interactive Three.js landscape study featuring a procedural, moss-covered root that grows through an editorial composition. Key features include pointer-responsive moss that parts around the cursor and releases a pollen trail, a spring-driven navigation dock with magnification and particle effects, sandboxed liquid-metal controls for Explore and Play, staged entrance animations, and responsive design for different screen sizes.
Does Sylva require any external dependencies or network requests?
No external network requests are made after the initial load. All required assets are bundled within the repository: a vendored Three.js r149 build, local fonts, and asset files. The page works offline once loaded, though it will retain its layout even if the main Three.js scene fails to initialize.
How is the landscape generated deterministically?
The same seeded noise algorithm generates identical landscapes on every load, ensuring reproducibility. This means the procedural root, moss, undergrowth, flowers, and other elements are regenerated consistently without requiring any downloadable models or pre-rendered textures.
Where can I view the live experience?
The live experience is available at https://mengto.github.io/sylva/, which serves the full interactive Three.js landscape study built entirely within the repository.
Featured in Videos
YouTube tutorials and walkthroughs for sylva
Alternatives
Similar projects ranked by category, topics, and text overlap.
