Sylva: a procedural Three.js moss landscape in a single HTML file

What Sylva is, and who it is built for

Sylva is a landscape study rather than a library or a framework. The README describes it as an interactive Three.js landscape study in which a procedural, moss-covered root grows through an editorial conservation hero and reacts to the pointer. The repository is dominated by a single file: index.html holds the complete experience, with sylva-assets/ supplying the vendored Three.js r149 runtime, a local Lexend variable font, two liquid-metal iframe documents and the field-note imagery. There is no package manifest, no bundler config and no test suite in the top-level entries, which are limited to .gitignore, README.md, assets/, index.html, licenses/ and sylva-assets/.

The audience is narrow and specific. Creative coders who want a worked example of procedural geometry, instanced vegetation and pointer interaction in one page will find the code readable. Front-end engineers evaluating how to keep a WebGL scene and a conventional HTML interface on a shared animation loop will find that arrangement here too. People looking for a drop-in npm package, a configuration surface or a documented API will not find one, because the README presents the page itself as the deliverable.

The mechanism: seeded noise, swept tubes and instanced moss

Three.js r149 is vendored into sylva-assets/three.min.js and used at runtime to build the root, moss, undergrowth, flowers, moths, pointer spray, light and camera movement. The README states that the same seeded noise grows the same landscape on every load, and that no model file or pre-rendered moss plate is downloaded. That determinism is the interesting design decision: the scene is generated from a seed rather than loaded from disk, so the visual result is reproducible without shipping geometry.

Scale is handled with instancing. The README gives a figure of up to 250,000 instanced moss blades on desktop. The root and arch are assembled from swept tube geometry with recursive offshoots, and ferns, flowers and particles fill out the undergrowth. Pointer input is not a camera-only effect: the moss parts around the cursor and releases a short pollen trail as the pointer moves across the landscape.

The interface is plain HTML and CSS around that scene. Pointer parallax, the navigation dock, the card reveals and the WebGL renderer share one animation loop. The two liquid-metal controls for the Explore and Play buttons are the exception, isolated in sandboxed iframes so each control owns its WebGL2 state without leaking into the page. The README also notes staged entrances for type, cards, images and procedural scenes, including canvas-sampled pixel reveals over the two field-note photographs. A responsive single-column composition covers narrow screens, and a reduced-motion path exists for visitors who request it.

Running Sylva locally: serve the root, open the page

There is no install or build step. The README instructs you to serve the repository root over HTTP and then open it in a browser. From a clone of the repository, the documented command is:

python3 -m http.server 4173 --bind 127.0.0.1

After that server is running, the README points to http://127.0.0.1:4173/ as the address to visit. You should see the landscape load with the editorial layout around it, and moving the pointer across the scene should part the moss and leave a short pollen trail. If the main Three.js scene cannot start, the README states that the page retains its layout and core content, so a blank canvas with intact typography is the documented fallback rather than a failure you need to debug.

A browser with WebGL2 support is recommended. The repository ships its own copy of Three.js and a local Lexend variable font, and the README states that the page makes no external network request after it loads, so there is nothing to fetch beyond the files in the repository root. The two liquid-metal button studies live at sylva-assets/liquid-metal-explore.html and sylva-assets/liquid-metal-play.html and are loaded as sandboxed iframes rather than opened directly.

The constraint that matters: no license is granted

The README is unusually direct here. It states that no license is granted for reuse or redistribution of the Sylva code, design or artwork, and that the bundled third-party components remain under their respective licenses. The repository's licenses/ directory carries the texts for those components: Three.js r149 under the MIT License and Lexend under the SIL Open Font License 1.1.

The practical split is therefore between the vendored parts and the project itself. The third-party components keep their own terms, while the procedural geometry, shaders, motion, interactions and imagery that make Sylva what it is do not come with a grant. The repository metadata does not carry a license identifier either. If your plan involves copying the moss instancing approach into a product, that is a conversation with the author, not something the repository settles. This is a description of what the README says, not legal advice.

Attribution is handled separately. The README explains that the layout began as an independent study of an editorial conservation composition by Daniel Snows, that Sylva preserves the broad compositional idea while replacing the foreground artwork with original procedural geometry, shaders, motion and interactions, and that it is not affiliated with or endorsed by the original designer. The project notes also record Higgsfield image generation and compositing for the supporting imagery.

Where Sylva stops being the right tool

The strongest limitation is structural: index.html is the complete experience, so there is no module boundary to import, no public API to call and no configuration file to edit. Anything you want to change means editing that file, and the README does not document a configuration surface, a plugin path or a way to swap the scene for another. A team that needs a maintained dependency with versioned releases will not get one; the release list for the repository is empty.

The performance envelope is also described in desktop terms. The README gives the 250,000 instanced moss blade figure specifically for desktop, and the fallback it describes for a scene that cannot start is a page that keeps its layout and core content, not a degraded but still animated scene. That means mobile and low-power devices sit in an undocumented middle ground: the reduced-motion path and the single-column layout are documented, but a lower blade count or a mobile-specific path is not mentioned in the README.

Finally, the effect depends on pointer movement. The moss parts around the cursor and the pollen trail follows pointer motion, so the interaction that gives the page its character is absent on touch devices in the way the README describes it. The README does not document a touch equivalent.

How Sylva differs from the rest of the MengTo Three.js series

The README lists three sibling projects, and the comparison is useful because they are built on the same stack with different goals. The Complete Shelf is described as an interactive Three.js library of seven clothbound hardcovers. Towers is described as a tower that builds itself from the ground up in four and a half seconds. Kage is described as an interactive five-chapter night walk through a Kyoto mountain temple, rendered live in Three.js and layered with cinematic generated imagery. Sketchbook is described as a page-flipping sketchbook of Singapore, built as one static HTML file.

The difference in approach is what each one generates. Towers is a construction sequence with a stated duration, so its subject is time. Kage is chaptered, so its subject is narrative progression through a scene. Sylva is neither: it is a seeded landscape that is already grown when the page loads, and the variable is the pointer rather than a timeline. The Complete Shelf and Sketchbook lean on object manipulation, a shelf of books and a page flip, while Sylva's interaction is environmental, the moss parting and releasing pollen.

If you are choosing among them for study, the criterion is which mechanism you want to read. Sylva is the one to open if you care about instanced vegetation, seeded procedural geometry and pointer-driven environmental response. Towers is the one to open if you care about a scripted build sequence.

Maintenance, upgrades and what the repository does not say

The last push to the repository was on 2026-08-18. The repository is not archived. There are no retrieved releases, so there is no versioned upgrade path to follow and no changelog to read for breaking changes.

Upgrade cost concentrates in one place: the vendored Three.js build. Because sylva-assets/three.min.js is a pinned r149 copy rather than a dependency resolved at install time, moving to a newer Three.js means replacing that file and reconciling index.html with whatever changed in the renderer, geometry or material APIs between r149 and your target version. The README does not document that procedure, and it does not state which Three.js versions the scene has been checked against. The same applies to lexend-latin.woff2, which is a local font file rather than a remote request.

What protects the project from ordinary dependency drift is the absence of a network dependency. The README states that everything required at runtime is included in the repository and that the page makes no external network request after it loads, so a working checkout does not break because a CDN moved or a package was unpublished. The cost of that property is that updates are manual. The README does not document rollback, and the repository has no release tags to roll back to.

Editorial conclusion

Sylva suits creative coders and front-end engineers who want to read how a deterministic procedural scene, instanced moss and pointer interaction are assembled in one static page, and who are content to study it rather than ship it. It is the wrong choice if you need a reusable component under a permissive license, because the README states that no license is granted for reuse or redistribution of the code, design or artwork, and it is also wrong if you need a documented API, since index.html is the entire program. Before adopting anything from it, read index.html alongside licenses/ to separate the vendored Three.js r149 and Lexend assets from the project's own code, and confirm the WebGL2 requirement against the browsers you actually target.

Frequently asked questions

Official sources

1. Issues
2. MengTo/sylva on GitHub
3. Project website
4. README