What is this?
Sylva is an interactive Three.js landscape study: a procedural, moss-covered root grows through an editorial conservation scene and reacts to the pointer as if it were alive.
Sylva is an interactive Three.js landscape study: a procedural, moss-covered root grows through an editorial conservation scene and reacts to the pointer as if it were alive.Is this a reusable library or just a standalone page?It's a standalone, self-contained web page, not a library you import — the entire experience lives in one index.html built on a vendored Three.js r149 build.
It's a standalone, self-contained web page, not a library you import — the entire experience lives in one index.html built on a vendored Three.js r149 build.How do I run it locally?Just serve the repository root over any HTTP server and open the page — there's no install step or build pipeline.
Just serve the repository root over any HTTP server and open the page — there's no install step or build pipeline.Do I need anything besides a browser?Just a browser with WebGL2 support; if the Three.js scene can't start, the page still keeps its layout and core content.
Just a browser with WebGL2 support; if the Three.js scene can't start, the page still keeps its layout and core content.Is the moss landscape randomly different each time I visit?No — it's deterministic: the same seeded noise regrows the identical root, moss, and undergrowth on every load, with nothing downloaded like a pre-rendered moss plate or 3D model.
No — it's deterministic: the same seeded noise regrows the identical root, moss, and undergrowth on every load, with nothing downloaded like a pre-rendered moss plate or 3D model.Does the page contact any server after it loads?No — all geometry, noise, and imagery needed at runtime ship in the repo, and the page makes no external network request after it loads.
No — all geometry, noise, and imagery needed at runtime ship in the repo, and the page makes no external network request after it loads.Can I reuse the code, design, or artwork?No — Sylva's own code, design, and artwork are not licensed for reuse or redistribution, though the bundled Three.js (MIT) and Lexend font (OFL) keep their own open licenses.
No — Sylva's own code, design, and artwork are not licensed for reuse or redistribution, though the bundled Three.js (MIT) and Lexend font (OFL) keep their own open licenses.What happens to the moss when I move the pointer?The moss parts around the cursor and releases a short pollen trail as the pointer moves across the landscape, animated in the same loop as the rest of the scene.
The moss parts around the cursor and releases a short pollen trail as the pointer moves across the landscape, animated in the same loop as the rest of the scene.Are the Explore and Play buttons part of the main 3D scene?No, each liquid-metal button runs in its own sandboxed WebGL2 iframe so its shader state can't leak into the main page's renderer.
No, each liquid-metal button runs in its own sandboxed WebGL2 iframe so its shader state can't leak into the main page's renderer.How much moss does it actually render?Up to 250,000 instanced moss blades on desktop, built from swept tube geometry with recursive offshoots, ferns, flowers, and particles.
Up to 250,000 instanced moss blades on desktop, built from swept tube geometry with recursive offshoots, ferns, flowers, and particles.Where did the original composition idea come from?The layout started as an independent study of an editorial conservation composition by designer Daniel Snows; Sylva swaps the foreground artwork for original procedural geometry and motion and is not affiliated with the original designer.
The layout started as an independent study of an editorial conservation composition by designer Daniel Snows; Sylva swaps the foreground artwork for original procedural geometry and motion and is not affiliated with the original designer.What are similar projects?natural-disasters, clay-safari, dioramas, threejs-architecture-effects, LinearAbilityExtThreeJS, awesome-opus5-5-videos, three.js, canvas-ui
natural-disasters, clay-safari, dioramas, threejs-architecture-effects, LinearAbilityExtThreeJS, awesome-opus5-5-videos, three.js, canvas-uiWhich topics is it in?webgl2, procedural-generation, github-pages, generative-art, static-site, shaders, zero-dependency, creative-coding, threejs, canvas, webgl, 3d
webgl2, procedural-generation, github-pages, generative-art, static-site, shaders, zero-dependency, creative-coding, threejs, canvas, webgl, 3d