ENGINE / 01
GSAP
时间轴、滚动叙事、SVG 路径与多元素编排。让页面内容有节奏地展开。
CHOREOGRAPHY · SCROLL
01 / MOTION IS A LANGUAGE
让界面有反应。
让想法有生命。
Visual DNA Motion System 是 DAVYLAB 的专属动效系统。以 GSAP 编排叙事，以 Motion 驱动交互，以 Three.js 探索空间；让动画表达状态、关系与可能，而不只是装饰。
GSAP / CHOREOGRAPHYMOTION / INTERACTIONTHREE.JS / SPATIAL
01 · SIGNAL
02 · RESPONSE
03 · POSSIBILITY
SPARK → BUILD → PULSE
02 / ENGINE ARCHITECTURE
三种引擎，一套语言。
每个引擎有明确职责。不是每个页面都需要全部引擎；选择最适合当前交互的工具。
ENGINE / 02
Motion
组件进入退出、布局变化、拖拽与手势。让每次操作都有直接反馈。
INTERACTION · TRANSITION
ENGINE / 03
Three.js
真实的三维空间、粒子与可探索场景。只在空间本身有意义时启用。
SPATIAL · WEBGL
03 / INTERACTION PLAYGROUND
动效实验场。
点击、滚动、拖动或调节下方参数，直接观察不同动效模式。外部引擎加载失败时，基础内容仍保持可读。
GSAP / SCROLL CHOREOGRAPHY
滚动叙事
滚动到此区域时，步骤依次显现；可重播观察时间轴节奏。
SPARK / BUILD / PULSE
01
捕捉一个念头Notice a possibility
02
构建可用原型Make it tangible
03
根据反馈进化Learn and iterate
MOTION / REACTIVE UI
交互反馈
点击或触摸卡片，体验轻微缩放、弹性反馈与状态变化。
✳● READY
一个想法，正在成形。
触碰卡片，让界面回应你的动作。
THREE.JS / SPATIAL EXPLORATION
空间与粒子
拖动旋转、移动指针观察空间响应。此处为演示场景，不代表业务数据或真实知识关系。
3D 场景当前不可用。其他动效仍可正常体验。
04 / MOTION LIBRARY
先看效果，再决定怎么用。
选择一种动效，右侧立即播放约 1–5 秒的对应预览。说明、调节参数和导出配置始终围绕当前选中的效果。
预设仅保存在本机浏览器，不会上传到服务器。
USE CASE / 场景方案
LIVE PREVIEW / 01
淡入上移
2.0 SEC淡入上移
以轻微上移和透明度变化建立进入感。适合需要清楚层级、又不希望打断阅读的内容。
TUNE / CURRENT MOTION
微调所选效果
参数会实时作用于预览；不同效果使用相同的通用参数，并仅在支持时启用方向选项。
导入现有动效配置
粘贴此前导出的 JSON，或导入 .json 文件。系统会校验配置结构，并将有效参数应用到当前预览；无效文件不会覆盖当前设置。
支持导入本实验室 schema 标记的动效配置。
生成接入代码
将当前效果转成可复制的基础接入示例。选择你项目使用的引擎；正式接入时仍需检查选择器、生命周期和现有动画是否冲突。
代码随当前效果与参数自动更新。
配置会随效果与参数调整自动更新。
04 / MOTION TOKENS
调节动效性格。
统一控制实验场的节奏与强度。减少动态效果选项会停止非必要的持续运动。
当前参数仅用于本实验室预览，不会自动写入其他产品。系统级减少动态效果设置也会被尊重。