共生矩阵
设计系统

三行引入，属性驱动

运行时在 DOMContentLoaded 时自动执行 SM.init()；动态插入的内容调用 SM.init(容器) 重新绑定。所有 .sm-btn 会被自动补上填充层。

深色优先，浅色同构

数值实时读取自当前主题，点右上角切换即可对照浅色版本。组件只引用 token，不写字面色值。

宋体标题，黑体正文，等宽标注，宽体品牌字

--sm-font-display Noto Serif SC 用于标题与数据；--sm-font-body Noto Sans SC 用于正文；--sm-font-mono IBM Plex Mono 用于英文标注、编号和代码；--sm-font-brand Michroma 只用于 SIMATRIX 字标，呼应 Logo 的宽体字母。字号全部是流式 clamp，.sm-mega 每页最多两处。

4px 基准

时长与曲线

界面反馈用 --sm-dur-1/2，组件过渡用 --sm-dur-3，入场与 3D 切换用 --sm-dur-4。--sm-ease-liquid 带轻微回弹，专用于玻璃镜片和层叠板这类“液体”运动。

液态玻璃

.sm-glass 由四层叠成：背景模糊并提高饱和度、顶部内高光与底部暗边、斜向镜面描边、跟随指针移动的高光。加 data-sm-glass 后，高光与描边角度会随鼠标变化。.sm-glass--strong 用于需要更高可读性的浮层，比如底栏和提示。

流体镜片

选中态是一块会流动的玻璃镜片：切换时先向目标方向拉长、同时轻微压扁，再回弹收拢到新位置。导航、Tab 和底栏共用 SM.lensTo(lens, target)，镜片元素由运行时自动插入。下面的导航条在鼠标悬停时也会跟随。

Logo

沿用 SiMatrix 原有标志：银色 SM 字母交织，青色电路线连接两端。运行时注入去底后的透明图形（深浅主题各一版，存放在 assets/logo-mark*.png），配宽体字标 SIMATRIX 与“共生秩序”。data-sm-logo 默认横排，="lg" 为大号，="mark" 只显示图形。悬停时图形沿 Y 轴翻转。

按钮与链接

实体按钮悬停时填充层从左向右铺满；玻璃按钮 .sm-btn--glass.sm-glass 用在动态背景上。data-sm-arrow 追加箭头，data-sm-magnetic 让按钮跟随指针。主按钮每屏最多一个。

标签与状态

标签用于分类和关键词：--accent 标记与人相关的维度，--cool 标记行业和系统。状态点带持续扩散的脉冲。.sm-chip 是放在玻璃上的胶囊标题。

导航

导航固定在顶部，链接放在一枚悬浮的玻璃胶囊里，选中态由流体镜片表示，跟随滚动位置和鼠标悬停移动。宽度低于 960px 时链接收起，由底栏接管。顶部 data-sm-progress 显示阅读进度。

移动端底栏

手机端（≤760px）固定在底部的玻璃底栏，取代顶部链接。向下滚动时收窄并隐藏文字，向上滚动时恢复，选中态同样使用流体镜片。图标用 data-icon 指定：home、layers、grid、spark、chat。文档中用 .sm-dock--static 展示。

分段 Tab · 3D 面板

玻璃分段控件加 3D 面板舞台：切换时离开的面板向一侧旋转后退，新面板从另一侧转入。data-sm-tabs-auto="7000" 开启自动轮播，当前标签下会出现进度线，悬停或聚焦时暂停。同一容器上加 data-sm-stack，等轴测层叠板会跟随切换，点击层叠板也能切换。

3D 轮播

Coverflow 式的空间轮播：当前卡片居中并带倒影，两侧卡片转向并后退、逐层变暗。支持鼠标或手指拖动（拖动过程中实时跟手），也支持方向键、点击两侧卡片、玻璃分页器和前后按钮。窄屏下自动减小旋转角度与纵深。

卡片 · 点阵图形

卡片用于并列的三项能力，默认带 3D 倾斜与景深（见“3D 倾斜”）。data-sm-glyph 用 5×5 点阵画出图形：h 是人，a 是智能体，. 是空位，行之间用 | 分隔；data-sm-glyph-size="lg" 是大号。悬停时点阵依次放大。

读数面板

浮在动态画面上的玻璃面板，用来显示实时读数或联系方式。首屏面板通过 data-sm-readout-* 与矩阵画布连接，数值会实时更新。

作品叠卡 · Deck

首页和实验室首屏使用的作品展示。它是分段 Tab 的 .sm-tabs--deck 变体：未选中的面板按顺序层叠在后方，切换时最前面的卡片被抛出、再回到队尾。外层的 .sm-deck-tilt 给整组卡片一个斜向视角。

设备框 · Screen

产品截图与示意画面统一放进 .sm-screen：浏览器式顶栏、固定比例的视窗（--sm-ar）、可选的玻璃角标。设备框始终是深色，以保持截图本身的观感。

项目示意画 · Art

程序绘制的蓝图式动画，适合装饰性场景；项目展示请使用「产品界面演示」。<canvas data-sm-art="类型">，颜色全部取自主题 token，只在可见时运行。可用类型：pcb、probe、cantilever、erp、mes、wave、calendar、deploy、license、scope、gantt、graph、matrix-test。

项目卡 · 筛选 · 详情

项目页的组合：容器 data-sm-filter，筛选条 data-sm-filter-bar 中的按钮带 data-filter，卡片带 data-cat（可多个，空格分隔）。筛选时镜片流向新按钮，卡片以 3D 方式重新入场。卡片加 data-sm-open="#id" 打开玻璃详情页 <dialog class="sm-dialog">；手机上详情从底部升起。

数字带 · Facts

用发丝线分隔的关键数字，数字配合 data-sm-count 滚动出现。只放项目文档中能核实的数字。

矩阵格

用 1px 间隙拼出发丝线网格，适合 4–6 条同级内容。列数由 --sm-cols 指定，窄屏时自动降为 2 列、1 列。

待发布案例

赋能案例的占位状态。字段结构就是正式案例的模板：行业、赋能范围、交付形态、成效指标。案例发布后，把 .sm-skeleton 换成文字并去掉“待发布”标签即可。

数据

数字使用宋体与等宽数字，放进 data-sm-count 后，进入视口时从 0 滚动到目标值。单位用 <sup>。

信息行

用于需要复制的信息，值可以整段选中。复制按钮用 data-sm-copy-target 指向值，或用 data-sm-copy 指定复制文本；剪贴板不可用时，会自动选中文字。

表单

官网暂时不用表单，这个组件为后续收集合作意向预留。输入框聚焦时出现琥珀色描边与外环。

提示

玻璃材质的轻量反馈，从底部中间弹出，2.4 秒后消失；手机端会避开底栏。可以写成 data-sm-toast="文案"，也可以调用 SM.toast('文案')。

跑马灯

运行时会复制一份内容，实现无缝循环；鼠标悬停时暂停。速度由 --sm-marquee-dur 控制。

宣言

整页只出现一次的大号宋体句子，<em> 部分显示为琥珀色。

界面组件 · UI Kit

固定在 960×600 的画布上设计，像素级可控；放进任何尺寸的容器都由 data-sm-fit 等比缩放。界面始终是深色，和设备框一致。可用的零件：

演示播放器 · Play

在 .sm-ui 上加 data-sm-play="循环毫秒"，里面的元素用属性声明在第几毫秒发生什么。只在可见时播放；不可见或开启“减少动态效果”时直接显示最终状态，所以缩略图和截图总是完整的。

缩放容器 · Fit

<div class="sm-fit" data-sm-fit> 铺满父容器，并把里面 960×600 的 .sm-ui 等比缩放到容器大小（写入 --sm-k）。通常放在 .sm-screen__view 或 .sm-project__visual 里，同一段界面既能做 360px 宽的卡片缩略图，也能做详情页里的大图。

3D 探针 · Probe3D

<canvas class="sm-probe3d" data-sm-probe3d>：进入视口时才从 cdnjs 按需加载 three.js，渲染一根程式化的 MEMS 探针。铜种子层、镍本体、金镀层沿厚度方向周期性展开，弹簧做触压动作，铑针尖落在焊盘上。可拖动旋转，松手 2.5 秒后恢复自动旋转；离开视口暂停渲染。

站内嵌入 · Embed

.sm-embed[data-sm-embed] 把站内托管的完整应用（如 etchlab/）用 iframe 嵌入页面。进入视口后开始计时，12 秒内没有加载成功、或被宿主环境拦截时，自动切换为 .sm-embed__fallback 里的静态画面和“在新页面打开”按钮。

透视矩阵

品牌的核心动效：一片向地平线延伸的网格平面。琥珀色光柱是人类判断节点，青色方块是沿网格移动的智能体，身后的轨迹代表上下文。智能体每到达一个节点，就记为一次“协同事件”：平面上泛起环形波纹，节点之间升起一道弧线。鼠标在平面上移动时，会变成一个临时节点吸引附近的智能体，镜头也会随鼠标轻微平移。画布离开视口时自动暂停。

3D 倾斜

data-sm-tilt="9"：元素朝鼠标方向倾斜，数值是最大角度，同时表面出现一道跟随指针的反光。子元素加 data-sm-depth="40" 会沿 Z 轴浮起相应的像素，倾斜时形成前后错位的立体感。

渐显

data-sm-reveal：元素上移、去模糊并淡入。可选值有 fade、scale、left，以及 rise3d（从下方后仰的角度立起）。在父元素上加 data-sm-stagger，子元素会依次出现。

逐字升起

data-sm-split 把标题拆成单字，带透视地依次立起；标点会跟着前一个字一起出现，读屏软件仍然读出完整句子。首屏标题加载后立即播放；值为 view 时，等进入视口再播放。

磁吸

data-sm-magnetic="0.28"，数值是跟随系数。

聚光

data-sm-spotlight：一圈跟随鼠标的琥珀色径向光斑，卡片和矩阵格已经内置所需的定位。

数字滚动

data-sm-count="80"，可选 data-sm-duration（单位毫秒，默认 1600）。小数位数和目标值保持一致。

解码

data-sm-scramble：英文等宽标签从随机字符逐位还原成原文。进入视口时播放一次，鼠标悬停时再次播放。只用于英文标签。

视差

data-sm-parallax="-0.14"：滚动时元素以给定系数位移，负值表示比页面滚得更快，向上离开。加上 data-sm-fade 后会同时淡出。官网首屏文案使用了这个效果，往下滚动就能看到它与透视矩阵之间的层次分离。

页面转场

官网分为首页、能力、项目、实验室、关于、联系六个页面。页面之间使用跨文档 View Transitions：旧页面向后退入景深并模糊，新页面从前方落位；导航胶囊和底栏保持不动，镜片停在新页面。浏览器不支持时退化为普通跳转。导航链接加 aria-current="page" 即可让镜片定位到当前页。

速查