交大设计学院毕展在线展平台

全站动效与页面转场

在线展的首页、专业选择、作品互动与页面切换都依赖动效，但路由切换时直接卸载旧页会中断动画，也容易让 fixed 图层互相覆盖。前端将 Motion 作为全站共用的动画层：以 AnimatePresence 管理进出场，以 motion component 处理遮罩揭示、按钮反馈与操作提示；转场期间保留新旧页的独立 slot，让遮罩与内容可在同一段动画内完成交接。

2025 首页以 Motion 驱动动态几何遮罩和文字，构成进场效果。2026 首页需要维持持续变化的动态海报，因此以 Canvas 2D 绘制逐字文字流与方块矩阵，再由 WebGL fragment shader 绘制流动背景；三个图层共享文字读取进度，使矩阵的生长节奏可跟随文字变化。

2.5D 差速展厅与虚拟渲染

展厅需要在平面网页中呈现作品、人物信息、前景与背景之间的空间层次。系统以四个深度层承载这些素材，并让各层以不同滚动速度移动，形成 2.5D 差速效果。桌面端将纵向滚轮映射为横向浏览，Lenis 则负责平滑与惯性，让长距离移动仍保持连续。

展厅原本按横向画布设计，直接缩到手机直向屏幕会使作品与文字过小。系统会根据 viewport 比例自动旋转画布及对应的操作坐标，让手机用户维持直向握持，也能以屏幕长边浏览完整展厅；同一份图层数据和互动设置因此可覆盖桌面与手机。

每个专业包含多个学生展位，而每个展位又由多张高分辨率图层与互动素材组成；若一次渲染完整展厅，DOM、图片请求与内存使用量都会随作品数量线性增加。每个深度层因此使用 TanStack Virtual，只保留视口附近的展位。前端以 React Query 缓存展位数据，并在进入页面时预先加载目录、起始展位和当前作品的媒体，将等待时间提前到用户开始浏览之前。

每个展位可配置 slide、scroll、video 三种互动：以点击切换图组、在指定区域滚动内容，或播放作品视频；前台依后台保存的图层与互动数据组合出对应界面。

展览编辑、媒体管线与多届版本

学生可自行上传作品图层与媒体、填写作品数据，并在后台调整图层坐标、尺寸与深度；管理端负责排序、提交状态与审核。系统支持上海交通大学 JAccount OAuth，方便学生与教师直接以校内账号进入系统。

学生可直接上传原始图片与视频，无需自行处理图片压缩或视频格式。后端统一将图片转为 WebP，利用其较高压缩比降低传输带宽；最前景图层的滚动速度最快，单张长图可超过 10,000px，浏览器解码整张图片时容易造成卡顿，因此后端会将超宽图切成多个水平 tile，让前端分段懒加载。视频则重编码为 MP4 并加入 faststart，因为视频预览必须尽快取得第一帧；若 MP4 的 metadata 位于文件末端，播放器往往要下载完整文件后才能开始播放。

前后台以 Docker 部署。/2025 与 /2026 是同一项目中的两届展览：gallery 引擎与数据模型可重用，首页视觉、专业入口与各届展览内容则分别重写与配置，让新版能在保留旧版入口的前提下迭代。