Lab
42 个交互设计 · 按编号挑选
S开屏10
S01→徽记穿越徽记像 L1 一样转动加载，随后指数放大，盘的月牙镂空成为看见页面的窗口（zoom-through）S02→环盘合体环与盘随 000→100 计数从两端靠拢合体，徽记圆从符号中涌出铺满再收回，页面在四周露出S03→加载归位L1 加载徽记转完一圈后沿弧线飞入页眉标志的位置，落定后字标从徽记里滑出（FLIP 共享元素）S04→睁眼开幕环与盘醒来成一双眼：张望、跟随指针、眨眼，闭眼后开屏像眼睑一样上下分开S05→字标描绘细线依次描出徽记圆、liu、ovo，轮廓填色、符号旋入，整张幕布带弧形下摆升起S06→百叶升起七列墨色百叶 + 底部进度细线，徽记转动；到 100 时由中间向两侧依次升起S07→光圈快门七叶光圈（多边形孔 + 叶片边线）先开到徽记，100 时咔嚓合上，再完全张开到页面S08→网点消散墨色屏其实是一层互相重叠的圆点；徽记收起后圆点由中心向外依次缩没，像半调网点散开露出页面S09→墨水上涨标志是空容器，墨水随进度带着波浪注满；满后一道墨潮卷过整屏，把开屏冲走、留下页面S10→收成卡片全屏墨色开屏加载完后 clip-path 收缩成首页第一张卡片，徽记与标签随之归位，其余内容浮现
T页面跳转10
T01→墨幕遮罩式 · 墨色幕布带弧边升起盖住页面、亮出目标页名，再继续上升离场T02→圆形扩散遮罩式 · 墨色圆从点击处扩散铺满，到达后同一点开孔把新页面透出来T03→徽记穿越遮罩式 · 徽记从点击的卡片里长大铺满并转动，随后镜头钻进盘的镂空，镂空成为新页面的窗口T04→百叶遮罩式 · 七条墨色百叶从点击所在列向两侧依次升起，再按同样顺序收走T05→加载幕遮罩式 · 斜切墨幕扫过，中央 L1 加载徽记转动、标志与进度线，再从另一侧扫离T06→景深交叠式 · View Transitions：旧页沉入暗处缩小，新页像一张纸从下方升起；返回时反向T07→推栈交叠式 · View Transitions：新页从右侧推入盖住旧页，旧页视差左移变暗；返回反向T08→展开揭示交叠式 · View Transitions + clip-path：新页从被点击元素的圆角形状展开铺满，旧页后退T09→卡片变形共享元素式 · View Transitions：卡片作品图变形为详情页主图，标题放大为大标题，其余内容溶解T10→布局延续共享元素式 · motion：作品图从页面中浮起，以弹簧飞入下一页的位置；页头常驻，导航圆点滑动
H主视觉入场10
H01→遮罩升起加载徽记共享布局飞入导航，标题逐字遮罩升起，标志拆件组装后注视指针H02→眼睛注视加载徽记停转放大成一双眼：睁眼、标题从眼后滑出，环与盘追随指针并随机眨眼H03→字符解码终端式加载百分比直接乱码解码成标题（Maple Mono 等宽），悬停单词重新解码，闲时随机闪码H04→点阵涟漪加载徽记坍缩成冲击波，Canvas 点阵从中心涟漪点亮，之后避让指针鼓起，点击再发一圈H05→化作字母共享元素：转动的加载徽记飞进标题，成为 motion 里的 o；之后它是个随指针转动的小表盘H06→巨幅字标墨底动感排版：超出视口的 liu / ovo 字形从两侧撞入，上下走马灯，指针视差并按速度倾斜H07→墨纸分屏墨底加载后纸面滑入对半分屏，徽记与文案在两侧反色共存（双层 + clip-path），分界线跟随指针H08→聚光透视墨底上的加载徽记化作一束光，展开成跟随指针的聚光圈，圈内是带栅格 / 基线标注的 X 光版主视觉，点击铺满H09→卡片叠放加载小方块长成 3D 卡堆的顶牌，其余卡片从下发出；卡堆随指针倾斜、悬停展开、点击洗牌H10→徽记罗盘加载徽记是阵列的第一枚，其余从中心波状旋入；所有徽记像罗盘一样把盘转向指针（按距离延迟），点击发出旋转波
C滚动12
C01→逐词点亮连续 · 双向 · sticky 段落随滚动逐词点亮，徽记同步转动开合（scrub）C02→环盘分合连续 · 双向 · 巨型徽记钉住，环与盘随滚动分离、旋转、合拢（scrub + 轻弹簧）C03→徽记穿越连续 · 双向 · 徽记按对数放大，盘的镂空变成通往下一屏的窗口（zoom-through + SVG mask）C04→横向长廊连续 · 双向 · 纵向滚动驱动钉住的横向画廊，卡片随离心距离缩放、内部视差C05→速度斜切连续 · 速度驱动 · 跑马灯随滚动速度加速并跟随方向，行与卡片按速度弹性斜切C06→整屏分页分段 · 滚轮/触控/键盘意图 → lenis.scrollTo 整屏翻页，惯性吞掉，右侧页码指示C07→卡片堆叠分段 · 双向 · 卡片逐张钉住，后一张覆盖时前一张缩小变暗（sticky stack）C08→一次揭示单向 · 不可逆 · 进入视口触发一次：遮罩行上升、计数器、线条、clip-path 揭幕、徽记组装C09→景深视差视差 · 双向 · 多层景深各自滚速 + 指针视差叠加，画框内图像慢于画框C10→舞台展开连续 · 双向 · clip-path 舞台从小窗展开到满屏，刻度/百分比/数据线随进度走C11→笔画描绘连续 · 双向 · 字标轮廓随滚动描线后填色，构造辅助线浮现，徽记由环盘组装C12→焦点列表分段 · 吸附 · 行随离中心距离缩放/翻转，lenis/snap 吸到焦点线，徽记转向当前项