滚动 · 曝光Scroll to expose

一次曝光One exposure 透镜、点阵、序曲：三套原生 Web 设计体系Lens, Lattice, Overture: three native web design systems

往下滚动，光点会依次打开它们。窗里每一帧都是体系自己的实时渲染，不是录屏也不是截图；每个体系两页：首屏和组件集成页，展开后直接操作。在页面里滚到底，再向下滚 3 格进入下一站。Scroll and the point of light opens each one in turn. Every frame inside is the system's own live rendering, not a recording or a screenshot. Each system has two pages, a first screen and a kit of its components, ready to use once open. Scroll to the end of the pages, then three more notches to move on.

MIT · 开源Open source
3 套体系systems · 78 个组件components
零框架 · 原生 HTML/CSS/JSNo framework · plain HTML/CSS/JS

01透镜Lens玻璃 · 液体 · 光Glass · Liquid · Light18 类组件 · WebGL2 · 13 种合成音效 · 零运行时依赖18 components · WebGL2 · 13 synthesized sounds · zero runtime dependencies

玻璃承载信息，液体表达连续变化，光表达状态。实时背景折射、弹簧形变和原创合成音；所有可交互的部分都由同一块透镜承载。Glass carries information, liquid shows continuous change, light shows state. Live background refraction, spring deformation and synthesized sound; everything you can touch is carried by one lens.

完整展示Full showcase 单文件版Single file 源码Source

02点阵Lattice点 · 集 · 映射Point · Set · Map14 类组件 · three.js · WebGL2 · 真实定理依赖数据14 components · three.js · WebGL2 · a real theorem dependency graph

万物皆点集，交互即映射。文字、吸引子、定理之瀑和证明树都是同一张 GPU 点阵：点先被放进无散度流场，再被弹簧拉进下一个集合。Everything is a point set; every interaction is a map. Lettering, attractors, a theorem waterfall and proof trees are one GPU lattice: points pour through a divergence-free flow, then springs pull them into the next set.

完整展示Full showcase 组件目录Catalog 源码Source

03序曲Overture光圈 · 显影 · 弹簧Aperture · Develop · Spring46 类组件 · WebGPU / WebGL2 · 品牌工坊 · 示例照片为 AI 生成46 components · WebGPU / WebGL2 · brand studio · sample photos are AI-generated

摄影、歌剧与时装。开幕是光圈，显影是显影，共振是弹簧：三个运动原语驱动全部交互。暗场、印纸、夜场三套主题，WebGPU / WebGL2 渲染。Photography, opera and fashion. Opening is an aperture, revealing is developing, resonance is a spring: three motion primitives drive every interaction. Three themes, rendered with WebGPU / WebGL2.

完整展示Full showcase 46 个组件46 components 组件目录Catalog 源码Source

拿去用。Take it. 三套体系都以 MIT 许可证开源：可以商用、修改、闭源，只需保留版权声明。仓库按原样提供，不再维护。All three systems are MIT-licensed: use them commercially, change them, ship them closed, as long as the copyright notice stays. Provided as-is and not actively maintained.

本地运行Run locally: git clone https://github.com/ruiqichenbiec/design-systems
node serve.mjs → http://127.0.0.1:4300/
各体系Systems: lens/ · lattice/ · overture/ · ds-viewer/ （组件目录生成器）(catalog generator)
第三方Third party: three.js（MIT）；Bodoni Moda、Manrope、Inter Tight 等字体（SIL OFL）。序曲的示例照片由 AI 生成。three.js (MIT); Bodoni Moda, Manrope, Inter Tight and other fonts (SIL OFL). Overture's sample photos are AI-generated.
浏览器Browsers: 需要 WebGL2；序曲在支持时使用 WebGPU。系统开启“减弱动态”时，页面默认仍播放完整动效，可在右上角切换。WebGL2 required; Overture uses WebGPU where available. The page plays full motion by default even when the OS asks for reduced motion; switch it at the top right.