[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-95007":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":15,"starSnapshotCount":15,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},95007,"sylva","MengTo\u002Fsylva","MengTo","An interactive Three.js landscape study with a procedural, pointer-responsive moss world.","https:\u002F\u002Fmengto.github.io\u002Fsylva\u002F",null,"HTML",304,52,1,0,7,181,41,86.17,false,"main",true,[24,25,26,27,28,29],"creative-coding","github-pages","interactive-design","procedural-generation","threejs","webgl","2026-08-24 04:01:23","# Sylva\n\nSylva is an interactive Three.js landscape study: a procedural, moss-covered root grows through an editorial conservation hero and reacts to the pointer as if it were alive.\n\n[**View the live experience**](https:\u002F\u002Fmengto.github.io\u002Fsylva\u002F)\n\n![Sylva's living moss landscape and editorial interface](assets\u002Fsylva-preview.webp)\n\n## What is inside\n\n- A deterministic root and arch assembled from swept tube geometry, recursive offshoots, ferns, flowers, particles, and up to 250,000 instanced moss blades on desktop.\n- Pointer-responsive moss that parts around the cursor and releases a short pollen trail as the pointer moves across the landscape.\n- A spring-driven navigation dock with proximity magnification, moving specular rims, keyboard focus states, and small particle bursts when its sections change.\n- Two sandboxed WebGL2 button studies with animated liquid-metal surfaces for the Explore and Play controls.\n- Staged type, card, image, and procedural-scene entrances, including canvas-sampled pixel reveals over the two field-note photographs.\n- A responsive single-column composition for narrow screens and a reduced-motion path for visitors who request it.\n\n## How it is made\n\nThe complete page lives in [`index.html`](index.html). It uses a vendored Three.js r149 build to create the root, moss, undergrowth, flowers, moths, pointer spray, light, and camera movement at runtime. The same seeded noise grows the same landscape on every load; no model file or pre-rendered moss plate is downloaded.\n\nThe 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 remain isolated in sandboxed iframes so each control can own its WebGL2 state without leaking into the page.\n\nEverything required at runtime is included in this repository. The page makes no external network request after it loads.\n\n## Run locally\n\nServe the repository root over HTTP:\n\n```bash\npython3 -m http.server 4173 --bind 127.0.0.1\n```\n\nThen visit [http:\u002F\u002F127.0.0.1:4173\u002F](http:\u002F\u002F127.0.0.1:4173\u002F).\n\nThere is no install or build step. A browser with WebGL2 support is recommended; the page retains its layout and core content if the main Three.js scene cannot start.\n\n## Project structure\n\n```text\nsylva\u002F\n├── index.html                  # Complete experience\n├── sylva-assets\u002F\n│   ├── three.min.js             # Vendored Three.js r149 runtime\n│   ├── lexend-latin.woff2       # Local Lexend variable font\n│   ├── liquid-metal-explore.html\n│   ├── liquid-metal-play.html\n│   └── card-*.webp               # Field-note imagery\n├── assets\u002F                     # README preview\n├── licenses\u002F                   # Third-party license texts\n└── README.md\n```\n\n## With me\n\n- **[The Complete Shelf](https:\u002F\u002Fgithub.com\u002FMengTo\u002Fcomplete-shelf)** — an original, interactive Three.js library of seven clothbound hardcovers. [Live](https:\u002F\u002Fmengto.github.io\u002Fcomplete-shelf\u002F)\n- **[Towers](https:\u002F\u002Fgithub.com\u002FMengTo\u002Ftowers)** — a tower that builds itself from the ground up in four and a half seconds. [Live](https:\u002F\u002Fmengto.github.io\u002Ftowers\u002F)\n- **[Kage](https:\u002F\u002Fgithub.com\u002FMengTo\u002Fkage)** — an interactive five-chapter night walk through a Kyoto mountain temple, rendered live in Three.js and layered with cinematic generated imagery. [Live](https:\u002F\u002Fmengto.github.io\u002Fkage\u002F)\n- **[Sketchbook](https:\u002F\u002Fgithub.com\u002FMengTo\u002Fsketchbook)** — a page-flipping sketchbook of Singapore, built as one static HTML file. [Live](https:\u002F\u002Fmengto.com)\n\n## Design and attribution\n\nThe layout began as an independent study of an editorial conservation composition by [Daniel Snows](https:\u002F\u002Fwww.instagram.com\u002Fdanielsnows\u002F). Sylva preserves the broad compositional idea while replacing its foreground artwork with original procedural geometry, shaders, motion, and interactions. It is not affiliated with or endorsed by the original designer.\n\nThe local project notes record Higgsfield image generation and compositing for the supporting imagery. Three.js r149 is distributed under the MIT License, and Lexend is distributed under the SIL Open Font License 1.1; their license texts are included in [`licenses\u002F`](licenses\u002F).\n\nNo license is granted for reuse or redistribution of the Sylva code, design, or artwork. The bundled third-party components remain under their respective licenses.\n","Sylva 是一个基于 Three.js 的交互式程序化三维景观实验，生成具有生命感的苔藓覆盖根系地形，并实时响应鼠标指针。其核心功能包括：确定性种子驱动的递归根系与苔藓丛（支持25万实例化苔藓叶片）、指针触达时的动态分苔与花粉轨迹、弹簧驱动的导航控制台、沙箱隔离的WebGL2液态金属按钮，以及无外部依赖的纯静态部署。项目采用单HTML文件架构，所有资源内联，兼容响应式与减少动画偏好设置。适用于创意编码展示、网页交互艺术实验、前端图形技术教学及WebGL性能探索等场景。",2,"2026-08-19 02:30:10","CREATED_QUERY"]