dsh-drawai 0.4.1 → 0.4.3

package/lib/motion/shotcraft/upstream/gallery/api/library.json

@@ -1 +1 @@
-{"generatedAt": "2026-07-19T05:01:54.882Z", "revision": "bdd94be16d60fa8f", "stats": {"cardCount": 124, "styleCount": 150, "previewCount": 150, "mediaCount": 150, "newest": "2026-10-02T21:01:48.000Z"}, "cards": [{"name": "assemble-then-type-flyin", "summary": "空的暗底网格上，无文字的组件骨架先从四面八方飞入贴合；随后各处文字逐字从 3D 空间旋转着飞来落位，先大标题后小标注，全部落位后页面成形", "use": "页面/海报\"自己长出来\"的开场；排版类产品的能力展示；从骨架到成稿的两段式叙事", "duration": "约5.6s（168f@30fps）", "energy": "中高（骨架段稀疏、文字段密集，能量单调上升到收尾）", "intention": "把\"页面生成\"拆成两个语义清楚的阶段：先立骨架（框、卡片、分隔线、 色块，全部无字），再填文字。文字用逐字 3D 旋转落位，是因为骨架段 只有平面位移——两段的运动维度必须不同，否则观众读不出\"这是第二步\"。", "source": "references/shots/effects/assemble-then-type-flyin.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "assemble-then-type-flyin", "label": "assemble-then-type-flyin", "description": "空的暗底网格上，无文字的组件骨架先从四面八方飞入贴合；随后各处文字逐字从 3D 空间旋转着飞来落位，先大标题后小标注，全部落位后页面成形", "media": {"url": "./media/assemble-then-type-flyin.mp4?v=1790980736765", "type": "mp4"}}], "sourceUrl": "./source/assemble-then-type-flyin.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "aurora-bloom-bg-flip", "summary": "浅灰底从底部升起紫橙柔焦 blob，随后整个底色在约 0.36s 内压暗到近黑、blob 压成余晖；文案同步 blur-out 换句 blur-in，换句间留空档不 cross-fade", "use": "叙事转折点（\"多年以来…→一切都变了\"）；品牌片从铺垫拉到重音的那一拍；深浅色系之间的段落切换", "duration": "约5.2s（156f@30fps）", "energy": "由低到高（前 2/3 是酝酿，压暗那一瞬是全片重音）", "intention": "把\"底色反转\"当成重音符号用：前 56% 让极光慢慢升起、观众适应浅底， 然后用不到 0.4s 把整个画面压到近黑——这一下比任何缩放/闪白都更像 \"翻页\"。文案的换句必须卡在反转之后，且中间留空档，让观众先接住画面 变化再读新句。", "source": "references/shots/effects/aurora-bloom-bg-flip.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "aurora-bloom-bg-flip", "label": "aurora-bloom-bg-flip", "description": "浅灰底从底部升起紫橙柔焦 blob，随后整个底色在约 0.36s 内压暗到近黑、blob 压成余晖；文案同步 blur-out 换句 blur-in，换句间留空档不 cross-fade", "media": {"url": "./media/aurora-bloom-bg-flip.mp4?v=1790980736766", "type": "mp4"}}], "sourceUrl": "./source/aurora-bloom-bg-flip.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "autolayout-gap-dial", "summary": "间距拨盘驱动布局——一排链接块带框选描边+缝隙间距标注，徽章数字逐格跳动、块被参数实时推开再弹簧回弹归位；\"参数驱动布局\"的可视化", "use": "设计工具/低代码产品的\"改一个数、界面跟着动\"卖点镜头；\"用设计工具语义做包装\"的品类语言", "duration": "~5s（150f：框选入场 + 预备回收 10f + 拉松 34f + 屏息 hold 20f + 弹簧回弹 + 落定 hold）", "energy": "中（工具理性型，爽点在数字与位移的锁定同步）", "intention": "\"参数改了、UI 变了\"是设计工具的核心承诺，但通常拍成\"点面板→切 结果\"的前后对比，因果被剪掉了。本卡把因果拍成连续镜头：间距徽章 数字逐格跳，链接块**同帧**被推开，测量线实时拉长——数字就是缰绳， 布局就是马。框选描边+8 手柄+间距标注全是设计工具的母语，观众一眼 认出\"这是在工具里调参数\"。回程故意用欠阻尼弹簧过冲（缩到比起点 更紧再回稳），把\"归位\"做成一次有弹性的收尾。与 type-and-filter 分工：那是\"输入内容→列表收敛\"的检索因果，本卡是\"拨数值→几何 重排\"的参数因果。", "source": "references/shots/interaction/autolayout-gap-dial.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "autolayout-gap-dial", "label": "autolayout-gap-dial", "description": "间距拨盘驱动布局——一排链接块带框选描边+缝隙间距标注，徽章数字逐格跳动、块被参数实时推开再弹簧回弹归位；\"参数驱动布局\"的可视化", "media": {"url": "./media/autolayout-gap-dial.mp4?v=1790980736767", "type": "mp4"}}], "sourceUrl": "./source/autolayout-gap-dial.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "avatar-bracket-carousel", "summary": "\"Your ___ agent\" 填空排版，四角对焦框钉在句中不动，头像队列在框内垂直 spring 轮换三次，入框放大清晰、出框按距离缩小淡化模糊，角色标签同步更换，切换瞬间对焦框呼吸 7%", "use": "\"一个位置，多种角色\"的能力枚举；团队/身份/预设/人格类产品的核心一句话镜头", "duration": "约 5.2s（156f@30fps）", "energy": "中（三次等距切换构成稳定节拍器，对焦框脉冲是唯一装饰性动作）", "intention": "\"我们的 agent 能当导演、剪辑、动画师、音效师\"列成四行就是一张清单。塞进一句话的一个槽位里， 它变成一个承诺加四次证明：句子不动，只有槽里的人在换。四角对焦框是这个手法的关键 ——它不参与轮换，但它把观众的眼睛钉死在那 92×92 的方框里，所以四次更换才读作 \"同一个位置\"而不是\"四张头像飘过\"。", "source": "references/shots/ui-entrance/avatar-bracket-carousel.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "avatar-bracket-carousel", "label": "avatar-bracket-carousel", "description": "\"Your ___ agent\" 填空排版，四角对焦框钉在句中不动，头像队列在框内垂直 spring 轮换三次，入框放大清晰、出框按距离缩小淡化模糊，角色标签同步更换，切换瞬间对焦框呼吸 7%", "media": {"url": "./media/avatar-bracket-carousel.mp4?v=1790980736768", "type": "mp4"}}], "sourceUrl": "./source/avatar-bracket-carousel.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "basic-3d-scene", "summary": "impress.js 式空间演示：卡片以不同位置/旋转/缩放散布 3D 空间，相机取各步姿态之逆依次飞行对齐，末步拉到 OVERVIEW 总览", "use": "概念/路线图/三步法的空间化讲述；替代平面 slides 的\"每一步都换个空间视角\"", "duration": "约 7.5s（225f@30fps；四站，三段飞行 28/32/32f，每站停留 ≥30f）", "energy": "中（每次转场有空间惊喜，停留段安静读卡）", "intention": "把\"翻页\"变成\"在想法的空间里旅行\"：每张卡不仅有位置还有姿态（第二站世界左转 38°、第三站整个画框侧躺 90°），相机对齐它时观众的世界也跟着转——空间变化本身成为\"进入新章节\"的仪式感。", "source": "references/shots/camera/basic-3d-scene.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "basic-3d-scene", "label": "basic-3d-scene", "description": "impress.js 式空间演示：卡片以不同位置/旋转/缩放散布 3D 空间，相机取各步姿态之逆依次飞行对齐，末步拉到 OVERVIEW 总览", "media": {"url": "./media/basic-3d-scene.mp4?v=1790980736769", "type": "mp4"}}], "sourceUrl": "./source/basic-3d-scene.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "beat-cut-moves", "summary": "硬切当节拍乐器——连闪定格：三次白闪各硬切同一画面的一个裁切（全景→卡片→特写），快门余韵沉降后停在特写收束", "use": "高光段落把\"切\"本身打成鼓点；颁奖连拍式的仪式感、关键信息的加冕", "duration": "全程 140f ≈4.7s（活素材 30f + 三闪 + hold 70f）", "energy": "高", "intention": "库内节奏词汇一直只管\"一条运动内\"的速率（speed-ramp-freeze 是同一条 take 里定格再解冻）和\"落定后停多久\"（R 系呼吸判例），没有词管**多镜之间切点 怎么排**。本卡补这一块：硬切不做任何过渡，切点间隔本身就是乐谱—— 三次白闪、间隔渐紧（22f→18f），读作快门连拍（A）。与 R 系不 冲突：R 管落定后的停，本卡管切点排布，切串结束必须接足量 hold 把 呼吸还回去。注意这是刻意的例外——节奏偏好判例是单向\"放慢\"，硬切 串切得越狠，切完的 hold 要比平常更长。", "source": "references/shots/rhythm/beat-cut-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "paparazzi-flash", "label": "paparazzi-flash 连闪定格", "description": "硬切当节拍乐器——连闪定格：三次白闪各硬切同一画面的一个裁切（全景→卡片→特写），快门余韵沉降后停在特写收束", "use": "高光时刻仪式感：颁奖连拍、关键数字的加冕", "media": {"url": "./media/paparazzi-flash.mp4?v=1790980736770", "type": "mp4"}}], "sourceUrl": "./source/beat-cut-moves.md", "category": "rhythm", "tags": ["rhythm", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "beat-step-list-theme-cycle", "summary": "三通道节拍器——深色场形容词列表逐拍上移一行，视口中央固定胶囊\"接住\"下一个词并换色，整场底色同拍跟换；行、色、场三通道锁死同一拍点", "use": "\"同一产品多种气质/多主题展示\"段落（modern/playful/expressive 式形容词连打）；全片节奏最密的一段；音乐段对拍", "duration": "铺垫 30f + 每拍 18f × 拍数 + 收尾 hold；4 拍约 4.7s（demo 140f）", "energy": "高（0.6s 一拍三通道齐跳，密度型高能）", "intention": "换一次主题色是功能演示；0.6 秒换一次、连换三次、每次\"选中行+胶囊色 +全场底色\"三件事同帧齐跳——就成了节拍器。用最便宜的变量切换做出 全片最高的节奏密度。命门有二：一是**三通道必须锁同一拍点**，任何 一通道慢半拍，\"齐跳\"退化成三个各自为政的动画；二是**跳与滑的分界** ——跳变只占拍头 6f，其余 12f 完全静置，拍点要\"跳\"不要\"滑\"， 匀速滚动的列表就只是列表。", "source": "references/shots/rhythm/beat-step-list-theme-cycle.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "beat-step-list-theme-cycle", "label": "beat-step-list-theme-cycle", "description": "三通道节拍器——深色场形容词列表逐拍上移一行，视口中央固定胶囊\"接住\"下一个词并换色，整场底色同拍跟换；行、色、场三通道锁死同一拍点", "media": {"url": "./media/beat-step-list-theme-cycle.mp4?v=1790980736771", "type": "mp4"}}], "sourceUrl": "./source/beat-step-list-theme-cycle.md", "category": "rhythm", "tags": ["rhythm", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "before-after-slider-scrub", "summary": "前后对比拉杆——\"处理前/后\"两版叠放，分割杆先猛甩后慢扫，杆过处新版\"显影\"揭出", "use": "AI 增强/优化/重构类功能的效果对比段落（\"用前 vs 用后\"一镜讲清）", "duration": "4–5s", "energy": "中（快甩是打击点，慢扫是阅读期）", "intention": "AI 图像产品发布片的标准对比语法：同一画面\"处理前\"（低对比灰蒙） 与\"处理后\"（清晰版）叠放，带圆手柄的竖分割杆先从左端猛甩到 70% （overshoot 回弹）、停一拍，再以约 1/5 的速度慢扫回来让观众看清 差异——**快甩慢扫的速度对比就是节奏**：快甩宣告\"变了\"， 慢扫证明\"变在哪\"。", "source": "references/shots/data/before-after-slider-scrub.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "before-after-slider-scrub", "label": "before-after-slider-scrub", "description": "前后对比拉杆——\"处理前/后\"两版叠放，分割杆先猛甩后慢扫，杆过处新版\"显影\"揭出", "media": {"url": "./media/before-after-slider-scrub.mp4?v=1790980736772", "type": "mp4"}}], "sourceUrl": "./source/before-after-slider-scrub.md", "category": "data", "tags": ["data", "interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "bezier-source-converge-merge", "summary": "左侧四个来源节点各有一条细贝塞尔曲线连向右侧同一汇聚点，曲线先错峰由左向右 draw-on，节点沿自己的曲线滑向汇聚点并三段式加速缩小到消失，强调色数据包全程沿路径滑行，吞并完成后曲线从左端反向擦除只留品牌标志（demo：白瓷圆片托 video-shotcraft 镜刻标志）", "use": "\"多源整合/统一接入/数据汇聚\"的核心机制镜头；集成、聚合、单一入口类产品的说明段落", "duration": "约 5.6s（168f@30fps）", "energy": "中（长镜慢速推进，靠数据包滑行维持活性；吞并瞬间是唯一小高点）", "intention": "\"我们把四个来源统一了\"是一句抽象话。这个动效把它变成可看的物理过程：先建立四条独立 的通路（draw-on 是\"连上了\"），再让四个来源真的顺着通路走进同一个点并被吸进去（缩小 到 0 是\"被吞并\"），最后擦掉通路只留品牌标志（\"现在只有一个\"）。三段叙事各自有明确的 起止，观众不需要旁白就能读出因果。", "source": "references/shots/ui-entrance/bezier-source-converge-merge.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "bezier-source-converge-merge", "label": "bezier-source-converge-merge", "description": "左侧四个来源节点各有一条细贝塞尔曲线连向右侧同一汇聚点，曲线先错峰由左向右 draw-on，节点沿自己的曲线滑向汇聚点并三段式加速缩小到消失，强调色数据包全程沿路径滑行，吞并完成后曲线从左端反向擦除只留品牌标志（demo：白瓷圆片托 video-shotcraft 镜刻标志）", "media": {"url": "./media/bezier-source-converge-merge.mp4?v=1790980736773", "type": "mp4"}}], "sourceUrl": "./source/bezier-source-converge-merge.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "blur-slide", "summary": "标题逐词入场，y 0.38em→0 + blur 18→0 + opacity 0→1 三通道走同一条 ease-out 同步收敛，词间隔约 4f；副标题在标题收完前就错峰跟进", "use": "几乎所有标题/副标题成对出现的场合；产品页首屏文案、章节小标题；需要\"专业但不抢戏\"的默认文字 reveal", "duration": "约 4.0s（120f@30fps）", "energy": "低（一次性收敛，无峰值无循环）", "intention": "这是文字 reveal 的**默认解**——没有奇观、没有机械感，只是把词一个个 柔和地放到位。它的专业感全来自一件事：y、blur、opacity 三个通道共用 同一个进度 `p`、同一条缓动，所以词是\"从虚焦里浮出来\"而不是\"滑进来 顺便淡一下\"。当一支片里已经有别的重手法（乱码/滚轮），标题就该 用这一卡，让位给主角。", "source": "references/shots/typography/blur-slide.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "blur-slide", "label": "blur-slide", "description": "标题逐词入场，y 0.38em→0 + blur 18→0 + opacity 0→1 三通道走同一条 ease-out 同步收敛，词间隔约 4f；副标题在标题收完前就错峰跟进", "media": {"url": "./media/blur-slide.mp4?v=1790980736774", "type": "mp4"}}], "sourceUrl": "./source/blur-slide.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "bottom-push-stack-wipe", "summary": "底边上推换章——新场景连底色整屏从底边向上推入，把旧场景物理顶出画外，连推数章各配一种饱和底色，内容钉死在各自色底坐标系里随底色走", "use": "多章节产品片的换章骨架（每章一个卖点一种底色）；需要\"翻页节奏感\"贯穿全片的段落切换", "duration": "demo 三连推 170f（~5.7s）；单次推入 26f + 章内 hold ~1.2s", "energy": "中", "intention": "wipe-transitions 是一条边界扫过、新旧页都不动；page-turn 是旧页对开门 裂开滑出。本卡是第三种物性：**新章把旧章顶出去**——两屏刚性接触、同速 同向位移，像自动售货机压栈。命门是\"连底色整屏走\"：底色+窗口卡+装饰 条焊成一块整料从底边推入，观众读到\"换了个世界\"而不是\"换了张卡\"。 重 ease-out（快进慢停）给推入一个\"哐\"的落位感；上缘 40px 接缝阴影 是两屏物理接触的证据。连推三章且底色饱和度拉满，换章本身就成了全片 的节拍器——slack 原片全片就靠这一招做骨架。", "source": "references/shots/transition/bottom-push-stack-wipe.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "bottom-push-stack-wipe", "label": "bottom-push-stack-wipe", "description": "底边上推换章——新场景连底色整屏从底边向上推入，把旧场景物理顶出画外，连推数章各配一种饱和底色，内容钉死在各自色底坐标系里随底色走", "media": {"url": "./media/bottom-push-stack-wipe.mp4?v=1790980736775", "type": "mp4"}}], "sourceUrl": "./source/bottom-push-stack-wipe.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "brace-expand", "summary": "一对紧贴的小花括号先在正中出现，随即带一次过冲向左右弹开并放大到标题级，文字 clip 宽度严格绑括号内缘、像被拉开幕布般从中间揭示，落定后字距再细微松弛", "use": "开发者/技术产品的标题字卡；章节开场；需要\"一个符号完成揭示\"的极简一拍", "duration": "约 4s（120f@30fps：光标 0–6f → 6f 小括号硬切 → 14f 弹开 → 40–64f 字距松弛 → 副标 → hold）", "energy": "中（单次过冲是唯一峰值，其余静止）", "intention": "标题揭示的手法里，本卡最省：不做遮罩条、不做逐字、不做位移——只让 一对括号往两边走，文字被\"括出来\"。它天生带代码语感（`{}` 是花括号）， 所以在技术产品语境里读作\"这就是内容本体\"。命门是 clip 宽度**必须严格 绑括号位置**：一旦文字自己淡入或自己擦入，括号就退化成装饰，幕布感全失。", "source": "references/shots/typography/brace-expand.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "brace-expand", "label": "brace-expand", "description": "一对紧贴的小花括号先在正中出现，随即带一次过冲向左右弹开并放大到标题级，文字 clip 宽度严格绑括号内缘、像被拉开幕布般从中间揭示，落定后字距再细微松弛", "media": {"url": "./media/brace-expand.mp4?v=1790980736776", "type": "mp4"}}], "sourceUrl": "./source/brace-expand.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "brand-frame-snap", "summary": "品牌色画框语法——一圈粗纯色画框先于内容长出包住全屏，录屏窗口落进框内；模式切换时整圈画框同帧硬翻色+窗内布局同帧换，一个 borderColor 干完章节导航/状态提示/品牌露出三件事", "use": "双模式/双章节产品片的全片包装层（蓝=模式A、绿=模式B 颜色编码）；真实录屏素材的品牌化包裹", "duration": "单次翻色 ~4.7s（140f）；画框本身可全片驻场", "energy": "中（翻色瞬间高，其余时间是安静的包装层）", "intention": "真实录屏直接铺满屏没有品牌存在感，加 logo 水印又廉价。本卡用一圈 粗品牌色画框把录屏\"装裱\"起来：画框**先于内容出现**（先立画框再放 画，仪式感），之后画框颜色成为全片的语义编码——demo 里钴蓝=Design、 橘红=Dev Mode（原片是蓝/绿；关键是色相对冲 + 明度差）。章节切换时整圈画框一帧内硬翻色，无渐变，颜色硬切就是\"换挡\" 声效的视觉等价物；窗内布局同帧 A→B、角标与徽标同步换字，三处同帧 共振把\"模式切换\"砸实。与 theme-switch-moves 分工：那换的是 UI 本体 肤色（有扫过边界），本卡换的是\"画框\"这个包装层（同帧无边界）， 语义是模式/章节切换不是主题切换。", "source": "references/shots/effects/brand-frame-snap.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "brand-frame-snap", "label": "brand-frame-snap", "description": "品牌色画框语法——一圈粗纯色画框先于内容长出包住全屏，录屏窗口落进框内；模式切换时整圈画框同帧硬翻色+窗内布局同帧换，一个 borderColor 干完章节导航/状态提示/品牌露出三件事", "media": {"url": "./media/brand-frame-snap.mp4?v=1790980736777", "type": "mp4"}}], "sourceUrl": "./source/brand-frame-snap.md", "category": "effects", "tags": ["effects", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "brand-ink-open", "summary": "墨线十字准星描画→字标逐字压印→打字机副标→满一秒静止再上浮消散", "use": "品牌开场；任何\"先立名号再进产品\"的片头", "duration": "约 2.8s（83f）", "energy": "低（起步位，为后续镜头留爬升空间）", "intention": "第一拍先给品牌记忆点：观众在任何产品画面出现之前，先看清并记住名字。安静、纸墨质感、有一个完整的静止时刻。", "source": "references/shots/opening/brand-ink-open.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "brand-ink-open", "label": "brand-ink-open", "description": "墨线十字准星描画→字标逐字压印→打字机副标→满一秒静止再上浮消散", "media": {"url": "./media/brand-ink-open.mp4?v=1790980736778", "type": "mp4"}}], "sourceUrl": "./source/brand-ink-open.md", "category": "opening", "tags": ["opening", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "canvas-materialize-moves", "summary": "内容\"物化上画布\"两式——panel-to-canvas 行倒卡（面板表格行沿弧线飞出、跨容器变形成画布卡片）与 diagram-cascade 级联生成树（prompt 打字后节点逐层弹出、连线先于节点生长）", "use": "AI/协作工具\"生成结果落到画布上\"的叙事段落；A 式讲\"已有内容换了个存在形态\"，B 式讲\"从一句话长出一棵结构\"", "duration": "A ~5s（150f）/ B ~6s（180f）", "energy": "中", "intention": "库内生成叙事只有\"窗口内逐字写出\"（document-typewriter-reveal 文档自己写出来） 和\"图表自己活起来\"（chart-live-moves），没有词管**内容离开容器、在 开放画布上物化成新实体**。本卡补这一块：画布是舞台，生成物是登台的 演员。A 式的命门是跨容器形态迁移——同一条内容从\"行\"变成\"卡\"，位置 /宽高/圆角/内容布局在一条 spring 上同步插值，观众读到\"是它飞过去 变的\"而不是\"删一个加一个\"；B 式的命门是级联时序——线牵出节点、层 喂出层，结构感来自先后而非同时。", "source": "references/shots/interaction/canvas-materialize-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "panel-to-canvas", "label": "panel-to-canvas 行倒卡", "description": "复选框逐个自动打勾→按钮按下→三行沿上抛弧线错峰飞出，途中行形态与卡形态交叉淡化，落位带随机倾角；面板行槽塌陷成虚线留白", "use": "批量导入/一键上板：内容从列表态迁移为空间态", "media": {"url": "./media/panel-to-canvas.mp4?v=1790980736779", "type": "mp4"}}, {"key": "diagram-cascade", "label": "diagram-cascade 级联生成树", "description": "prompt 逐字敲出（敲完描边变深确认）→根（深色）→2 子→4 孙逐层弹出，折角连线描线先行 8f，成树后整棵呼吸一拍", "use": "AI 生成结构图/脑图/ER 图：一句话长出一棵树", "media": {"url": "./media/diagram-cascade.mp4?v=1790980736780", "type": "mp4"}}], "sourceUrl": "./source/canvas-materialize-moves.md", "category": "interaction", "tags": ["interaction", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "card-flip-reveal", "summary": "功能卡 3D 翻面揭示——卡片沿 Y 轴翻 180°，正面 UI 翻到侧棱最薄处掠过一道随角度移动的受光，背面揭出大号结论数字，逐张错峰扫过整排", "use": "\"功能→成果\"的成对叙事：一排功能卡逐张翻出各自的指标/结论；元素级转场卡", "duration": "全程 150f（~5s，含 hold）；单卡 4f 预备 + 16f 翻 + ~10f 弹簧落定，三卡错峰 12f", "energy": "中高", "intention": "库内\"翻\"字辈已有 wipe-transitions 百叶窗（叶片逐条翻面，讲换页）。 本卡是**语义翻面**：一张卡的正反两面是一对因果——正面是功能界面， 背面是它带来的数字结论。翻面动作本身 就是\"所以呢？\"的回答，Apple bento 段落的标准语法。逐张错峰 10f 扫过 一排，三张卡三个数字节奏读作\"成果连报\"。", "source": "references/shots/transition/card-flip-reveal.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "card-flip-reveal", "label": "card-flip-reveal", "description": "功能卡 3D 翻面揭示——卡片沿 Y 轴翻 180°，正面 UI 翻到侧棱最薄处掠过一道随角度移动的受光，背面揭出大号结论数字，逐张错峰扫过整排", "media": {"url": "./media/card-flip-reveal.mp4?v=1790980736781", "type": "mp4"}}], "sourceUrl": "./source/card-flip-reveal.md", "category": "transition", "tags": ["transition", "data"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "card-flock-tumble", "summary": "三张 UI 页卡从侧棱薄边 3D 翻飞成阶梯站定（全程清晰、样条连续丝滑），站定后保持慢转不停，快速收束吸入中心，炸出单个湍流烟雾环扩散，巨字横贯收场", "use": "能量高潮段（功能页群→品牌口号的爆点转场）；霓虹/极光暗场调性；\"多页面能力\"收束成一句话的段落", "duration": "翻飞 ~1.5s + 慢转展示 ~0.3s + 收束 0.3s + 烟环+巨字 ~2s；全段 4.5s", "energy": "极高（全片能量顶点用）", "intention": "三张页卡像被甩出的扑克在 3D 空间翻飞列队，站定亮相后被瞬间 吸入中心，炸出一圈烟雾环，品牌巨字穿环而出——\"能力展示→能量 坍缩→口号爆发\"一气呵成。命门有三：**丝滑**（侧棱→翻飞→站定 一条 Catmull-Rom 样条导数连续，分段插值的顿挫会被读出来）、 **不许停**（站定后保持低角速度慢转到收束，静止段被裁\"不要停住， 保持旋转\"——高潮段没有静帧）、**全程清晰**（motion blur/景深糊 全删，被裁\"不要加模糊效果\"）。", "source": "references/shots/transition/card-flock-tumble.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "card-flock-tumble", "label": "card-flock-tumble", "description": "三张 UI 页卡从侧棱薄边 3D 翻飞成阶梯站定（全程清晰、样条连续丝滑），站定后保持慢转不停，快速收束吸入中心，炸出单个湍流烟雾环扩散，巨字横贯收场", "media": {"url": "./media/card-flock-tumble.mp4?v=1790980736782", "type": "mp4"}}], "sourceUrl": "./source/card-flock-tumble.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "card-stack", "summary": "一组模板卡（demo 9 张）从屏幕下方逐张 spring 弹入、越落越快叠成一摞，全员落位后整摞一次性展成扇面——每张按序号偏转 6.5°、横移 138px，最后中心卡被抽出", "use": "需要交代\"我们有一组东西\"的产品段落；卡片墙/模板库/方案列表的建立镜头，也能当 logo 前的一拍蓄势", "duration": "约 5.0s（150f@30fps）", "energy": "中高（入场是连续小爆发，展开段收成一次平滑的整体动作）", "intention": "一摞卡先聚成一个物体，再摊开成一组物体——顺序很关键：先给\"整体\"再给\"个体\"。 观众第一眼记住的是有分量的一摞（数量感），第二眼才看清每张不一样（多样性）。 展开动作留到最后一次性完成，是为了不和入场的节拍打架。", "source": "references/shots/ui-entrance/card-stack.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "card-stack", "label": "card-stack", "description": "一组模板卡（demo 9 张）从屏幕下方逐张 spring 弹入、越落越快叠成一摞，全员落位后整摞一次性展成扇面——每张按序号偏转 6.5°、横移 138px，最后中心卡被抽出", "media": {"url": "./media/card-stack.mp4?v=1790980736783", "type": "mp4"}}], "sourceUrl": "./source/card-stack.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "carousel-3d", "summary": "8 张卡排成圆环整环自转一圈（匀速底 + 每 45° 一次停靠的分步），每卡只绕 Y 公转、自身 billboard 朝外，正反两层同向贴图配 backface-visibility:hidden 保证任何时刻都正立不倒置，正前方卡被点亮、环下字幕随之换字，相机全程钉在浅俯角", "use": "作品集/模板库/集成清单的循环展示；需要无缝 loop 的背景拍或落地页 hero", "duration": "约 5.6s（168f@30fps）", "energy": "中（可无限循环的稳态运动，每 45° 一次停靠给出节拍）", "intention": "展示\"一组东西\"最省事的办法是排成一排横滑，但横滑有起点和终点。环形没有——它天然 循环，观众看多久都不会觉得\"放完了\"。这张卡真正要解决的是环形 carousel 最容易翻车 的点：卡片背面。方案是双面同向贴图，所以从环内看和从环外看是同一张正立的卡，环转一圈 不会有任何一帧出现镜像或倒置。", "source": "references/shots/ui-entrance/carousel-3d.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "carousel-3d", "label": "carousel-3d", "description": "8 张卡排成圆环整环自转一圈（匀速底 + 每 45° 一次停靠的分步），每卡只绕 Y 公转、自身 billboard 朝外，正反两层同向贴图配 backface-visibility:hidden 保证任何时刻都正立不倒置，正前方卡被点亮、环下字幕随之换字，相机全程钉在浅俯角", "media": {"url": "./media/carousel-3d.mp4?v=1790980736784", "type": "mp4"}}], "sourceUrl": "./source/carousel-3d.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "chart-live-moves", "summary": "活体图表三式——oscilloscope-stream 示波流线（曲线右端实时写入+突发尖峰）、unit-dot-swarm-regroup 点阵重组（点群三幕迁徙聚成数字）、axis-rescale-shock 轴爆表重标（新值冲出画框逼 y 轴重标）", "use": "数据叙事段落；分别讲\"实时性\"、\"每个数字是一个人\"、\"增长装不下\"", "duration": "各 165–192f（5.5–6.4s）", "energy": "中高（数据即剧情）", "intention": "图表不是插图是剧情。三式共同前提（实测判例）：**必须真图表语境** ——真轴标/真数据/真文案，灰阶占位条测不出数据叙事的表达力。 A 示波流线：曲线写入点钉在右端上下起伏，旧数据左流出画，中途一次 突发尖峰（振幅 2.2×、读数跳大变强调色）——\"实时\"不用说出口，还有事件； B 点阵重组：320 个点（每点≈40 renders）散布→聚三簇（浮 Promo/Launch film/ Explainer 真标签）→列队成柱（真轴标）→聚成点阵大数字 \"12,847\"—— 同一批点，观众能跟着某一颗看它归队； C 轴爆表：折线正常爬升，新值顶破图表天花板规线冲出 226px（强调色粗线 插进标题区、撞进右上 KPI 数字），停半拍，y 轴\"哗\"地重标（旧刻度飞出/新刻度滑入/网格 加密/旧线压扁成地平线），新值落回+弹真值标签——用\"坐标轴装不下\"演增长。", "source": "references/shots/data/chart-live-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "oscilloscope-stream", "label": "oscilloscope-stream", "description": "采样窗平移 8px/f + 余弦包络尖峰 + 刹停真静止", "use": "监控/实时类产品：\"活着\"的系统", "media": {"url": "./media/oscilloscope-stream.mp4?v=1790980736785", "type": "mp4"}}, {"key": "unit-dot-swarm-regroup", "label": "unit-dot-swarm-regroup", "description": "三幕 spring 错峰迁徙（stiffness 150、错峰 8f），终幕点阵拼数字", "use": "用户量/构成叙事：\"每个点是一个人\"", "media": {"url": "./media/unit-dot-swarm-regroup.mp4?v=1790980736786", "type": "mp4"}}, {"key": "axis-rescale-shock", "label": "axis-rescale-shock", "description": "冲出框 220px + 重标三联动（刻度换/网格密/旧线压扁）+ 震 8px", "use": "增长曲线高光：\"off the charts\" 字面化", "media": {"url": "./media/axis-rescale-shock.mp4?v=1790980736787", "type": "mp4"}}], "sourceUrl": "./source/chart-live-moves.md", "category": "data", "tags": ["data"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "chip-grid-single-select-blackout", "summary": "五个选项 chip 以 3+2 居中排布逐个淡入；选中帧先插一帧灰色按压块，紧接数帧内底色变墨黑、文字变白并做 1→1.04→1 极轻回弹，其余 chip 淡到 18% 但位置锁死；随后余项归零，黑 chip 上移收窄，下方升起结算价格", "use": "单选/套餐/档位选择的交互演示；\"选了它之后会怎样\"的因果镜头；价格/参数结算类链路", "duration": "约5.5s（165f@30fps）", "energy": "中低（唯一的爆点是那一帧灰闪，其余都在收）", "intention": "一帧灰闪 + 三帧反黑，是把真实 UI 的 `:active → :selected` 两级状态 拆开演。观众看到的是\"手指按下\"再\"系统确认\"，而不是一次渐变。其余 chip 降到 18% 而**位置绝不移动**：一旦重排，观众会以为页面刷新了， \"单选\"的语义就丢了。", "source": "references/shots/interaction/chip-grid-single-select-blackout.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "chip-grid-single-select-blackout", "label": "chip-grid-single-select-blackout", "description": "五个选项 chip 以 3+2 居中排布逐个淡入；选中帧先插一帧灰色按压块，紧接数帧内底色变墨黑、文字变白并做 1→1.04→1 极轻回弹，其余 chip 淡到 18% 但位置锁死；随后余项归零，黑 chip 上移收窄，下方升起结算价格", "media": {"url": "./media/chip-grid-single-select-blackout.mp4?v=1790980736788", "type": "mp4"}}], "sourceUrl": "./source/chip-grid-single-select-blackout.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "circle-match-iris", "summary": "圆心匹配光圈切——光圈从页面上圆形元素的圆心炸开，圈内新页的圆形图表接在同一个圆上；匹配剪辑给光圈一个语义锚点", "use": "前景有圆形元素（头像/图标/圆钮）、后景有圆形主体（donut 图/圆环进度）的接缝；转场技法卡", "duration": "5.5s / 165f（入场+定睛 40f + 蓄力 7f + 接圆开圈 37f + sweep 58f + 静止 47f）", "energy": "中高", "intention": "普通 iris 光圈（词汇表原条目）从任意点开圈，观众只读到\"换页了\"。 本卡把它和 match-cut 焊死：光圈必须从前景一个**真实圆形元素**的圆心 炸开，圈内长出的新页里有个圆形图表恰好接在同一个圆上——观众看到的 是\"头像的圆变成了图表的圆\"，圆形本身完成叙事（这个人→这个人的数据）。 这是 match-cut 在 UI 语境里的落地形态：不靠构图巧合，靠语义圆对圆。 与穿越三式同属\"后景在前景里预先在场\"，但锚点是抽象形状而非容器。", "source": "references/shots/transition/circle-match-iris.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "circle-match-iris", "label": "circle-match-iris", "description": "圆心匹配光圈切——光圈从页面上圆形元素的圆心炸开，圈内新页的圆形图表接在同一个圆上；匹配剪辑给光圈一个语义锚点", "media": {"url": "./media/circle-match-iris.mp4?v=1790980736789", "type": "mp4"}}], "sourceUrl": "./source/circle-match-iris.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "cloner-depth-echo", "summary": "克隆纵队——主卡瞬间\"复印\"出 7 个半透明分身沿斜向纵深排开成队，停一拍后全体加速吸回本体合一+弹跳", "use": "\"多副本/多租户/规模感/批量处理\"卖点；一镜讲完\"一个=很多\"", "duration": "138f（约 4.6s）", "energy": "中（陈列-收束型）", "intention": "Spline/C4D Cloner 语汇的 UI 翻译：一张主卡\"啪\"地复印出 7 个克隆体 沿 Z 轴向后等距排开（间隔 250px、透明度 100%→28% 递减、越远越只剩轮廓）， 错峰弹出成纵队；停 ~32f 让观众数得清\"有很多个\"；然后全体 ease-in 加速吸回 本体合一，合体瞬间本体弹 1.06x 收束。demo 把\"一个=很多\"落到具体卖点： 一张 video-shotcraft 渲染卡（launch-film）×8 个镜头，合体时卡底 8 个镜头位同时点亮，标题落「One prompt. / Eight shots.」。与 depth-layer-moves 视差 （不同内容分层）分工：这是**同一内容**的等距重影阵列，语义是规模 不是空间。", "source": "references/shots/ui-entrance/cloner-depth-echo.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "cloner-depth-echo", "label": "cloner-depth-echo", "description": "克隆纵队——主卡瞬间\"复印\"出 7 个半透明分身沿斜向纵深排开成队，停一拍后全体加速吸回本体合一+弹跳", "media": {"url": "./media/cloner-depth-echo.mp4?v=1790980736790", "type": "mp4"}}], "sourceUrl": "./source/cloner-depth-echo.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "collab-cursor-moves", "summary": "协作光标当演员——cast-ensemble 五光标群演氛围层（错峰飞入+正弦漂移+打字 cameo+聚拢围观）", "use": "协作/多人主题的画布场景，给画面铺\"团队在场\"体温", "duration": "A ~5.2s（156f）", "energy": "A 低中（氛围层，可垫任何时长）", "intention": "库内光标一直是\"操作工具\"（cursor-flyover 的光标 是单光标点击导览）。本卡把带身份名牌的协作光标升格成**演员**： 五枚光标错峰入场后持续漂移当氛围粒子，\"团队在场\"感全靠它，其中一枚 还能停下来打字（cameo 戏份）。SVG 光标+名牌 chip 成本极低、叙事密度 极高，是\"协作\"主题最便宜的视觉论证。", "source": "references/shots/interaction/collab-cursor-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "cast-ensemble", "label": "cast-ensemble", "description": "协作光标当演员——cast-ensemble 五光标群演氛围层（错峰飞入+正弦漂移+打字 cameo+聚拢围观）", "use": "画布/白板类产品全片氛围层；主内容之外需要\"别人也在\"的背景活性", "media": {"url": "./media/cast-ensemble.mp4?v=1790980736791", "type": "mp4"}}], "sourceUrl": "./source/collab-cursor-moves.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "countdown-arc-scatter", "summary": "纸面表盘 9 个等大数字沿大弧切向排布，整盘扫过 96° 后减速急停，\"5\" 停在弧顶随即平移落位成标题首字符，其余数字带 blur 原地散去，标题逐词模糊淡入、末词转强调色", "use": "倒计时/时长承诺类文案（\"5 min to install\"）；数据揭晓的一拍；需要\"仪表盘\"语汇的浅底短镜", "duration": "约 3.3s（100f@30fps：扫动 ~30f + 落位 20f + 标题成句 + hold 22f；最短可压到 33f 单拍）", "energy": "高（96° 大幅扫动压进 ~20 帧，纯冲击）", "intention": "\"5 分钟装完\"写成静态字卡没人信。表盘扫过的做法把这个数字放进一个 **量程**里：45、35、28、22、17、10 一路扫过去，停在 5——观众看到的是 \"从很多降到很少\"，数字自带论证。停下后 \"5\" 不消失而是**平移变成标题的 首字符**，一个元素完成从仪表到文案的身份切换，这是本卡最值钱的一手。", "source": "references/shots/typography/countdown-arc-scatter.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "countdown-arc-scatter", "label": "countdown-arc-scatter", "description": "纸面表盘 9 个等大数字沿大弧切向排布，整盘扫过 96° 后减速急停，\"5\" 停在弧顶随即平移落位成标题首字符，其余数字带 blur 原地散去，标题逐词模糊淡入、末词转强调色", "media": {"url": "./media/countdown-arc-scatter.mp4?v=1790980736792", "type": "mp4"}}], "sourceUrl": "./source/countdown-arc-scatter.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "crane-rise-reveal", "summary": "升降臂拉升揭示——开场怼在一行数据特写，相机沿 Y 轴减速升起后拉，行行涌入直到整面 dashboard 铺满全幅", "use": "\"从细节到全局\"的开场定场；与 drone-dive-landing（全局→单点俯冲）互为反向", "duration": "5.5s（165f：特写 hold 24f + 拉升 102f + 落定/余波/静止 39f）", "energy": "中高（持续单向运动，无冲击拍）", "intention": "开场定场库内已有 drone-dive-landing——从上帝视角砸进 hero 特写， \"全局→焦点\"。本卡是它的镜像：\"焦点→全局\"——先怼在一行真实数据上 让观众看清\"这是什么\"，再升降臂式拉升后退，一排排内容涌入画面， 最后整面产品铺满——\"你看到的这一行，只是这一面墙的一格\"。 适合以产品体量/内容丰富度为卖点的开场；两卡同片只用一个方向。", "source": "references/shots/opening/crane-rise-reveal.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "crane-rise-reveal", "label": "crane-rise-reveal", "description": "升降臂拉升揭示——开场怼在一行数据特写，相机沿 Y 轴减速升起后拉，行行涌入直到整面 dashboard 铺满全幅", "media": {"url": "./media/crane-rise-reveal.mp4?v=1790980736793", "type": "mp4"}}], "sourceUrl": "./source/crane-rise-reveal.md", "category": "opening", "tags": ["opening", "camera", "data"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "crash-zoom-punch", "summary": "全景一拍急推到目标特写（6f），落位二选一——过冲回弹（弹性）或撞停震屏（重量）", "use": "功能段\"点名\"镜头——把观众视线一拍按到目标卡/模块上；强调级用撞停", "duration": "约 0.5s 动作 + 前后 hold（动作 6–11f，前 hold ≥30f 建立全景、后 hold ≥45f 读特写）", "energy": "高（瞬时冲击，非持续高能）", "intention": "慢推近（spotlight-hero-card）是\"请看\"，急推是\"看这个！\"——一拍之内 从全景砸到特写，视线没有选择余地。落位质感分两款：回弹是弹性 （\"看这个\"），撞停震屏是重量（\"就是它\"），按强调级选。", "source": "references/shots/camera/crash-zoom-punch.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "crash-zoom-punch", "label": "crash-zoom-punch", "description": "全景一拍急推到目标特写（6f），落位二选一——过冲回弹（弹性）或撞停震屏（重量）", "media": {"url": "./media/crash-zoom-punch.mp4?v=1790980736794", "type": "mp4"}}], "sourceUrl": "./source/crash-zoom-punch.md", "category": "camera", "tags": ["camera", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "cursor-flyover", "summary": "整页俯瞰后，相机依次飞到四个功能区 zoom-in 特写，SVG 光标先一步到位指点、点击留下涟漪并触发界面响应，最后拉回俯瞰", "use": "单页产品的功能巡览：一镜带观众看完四个功能区，光标当\"导游手指\"", "duration": "约 8.0s（240f@30fps；俯瞰 22f · 四站各 44f（飞行 20f + 停留 24f）· 拉回 24f · hold 18f）", "energy": "中（等距巡航，节奏靠点击涟漪打点）", "intention": "替代\"四个功能四段剪辑\"的省镜方案：一个连续相机把四个角串成一条参观动线，光标是观众的注意力代理——它到哪、点哪，观众就看哪。空间连续让功能之间的位置关系也被顺带记住。", "source": "references/shots/camera/cursor-flyover.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "cursor-flyover", "label": "cursor-flyover", "description": "整页俯瞰后，相机依次飞到四个功能区 zoom-in 特写，SVG 光标先一步到位指点、点击留下涟漪并触发界面响应，最后拉回俯瞰", "media": {"url": "./media/cursor-flyover.mp4?v=1790980736795", "type": "mp4"}}], "sourceUrl": "./source/cursor-flyover.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "dataviz-landscape-open", "summary": "暗场支流线束地景开场——多条流线汇入主干、虚构 ID 标签浮在线上、相机重景深低速飞越", "use": "品牌级抽象开场（\"数据宇宙\"隐喻），接亮场产品段或字标；与 glow-flyline-moves 分工：那卡是段落内卡片之间的连线叙事，本卡是开场专用的全画幅地景", "duration": "5–8s（开场氛围段，一支片 ≤1 次；demo 180f）", "energy": "低开缓升（起步位，为后续爬升留空间）", "intention": "Linear Releases 发布片开场实证的品牌级开场品类：把产品背后的数据世界 拍成一片**暗场地景**——支流线束从画面深处汇入一条主干（\"无数工作流 汇成一个产品\"的隐喻），真实感来自三样东西：①虚构 issue/任务 ID 标签 浮在线上（demo 用 video-shotcraft 的镜头号 + 运镜名：每条支流是一个镜头，汇成一支成片）（观众认出\"这是我每天看到的那种东西\"）；②重景深——近景大虚焦 流过、中景标签清晰可读、远景渐隐，三层纵深让平面 SVG 读作空间； ③相机低速匀稳飞越——这是氛围段不是炫技段，速度感交给后面的镜头。 手搓 UI 合规依据：非复刻场景（页面上不存在此画面），按核心理念 1 修订版走质量+表达明确性门槛。", "source": "references/shots/opening/dataviz-landscape-open.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "dataviz-landscape-open", "label": "dataviz-landscape-open", "description": "暗场支流线束地景开场——多条流线汇入主干、虚构 ID 标签浮在线上、相机重景深低速飞越", "media": {"url": "./media/dataviz-landscape-open.mp4?v=1790980736796", "type": "mp4"}}], "sourceUrl": "./source/dataviz-landscape-open.md", "category": "opening", "tags": ["opening", "data", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "deck-deal-flyin", "summary": "暗色石墨桌面上的实体牌堆特写环绕开局，灯从牌堆亮到旁边的页面板，一摞卡像发牌一样硬加速甩进网格，相机追着发牌升起后仰、落在整块满板的跑道式俯瞰上定格", "use": "展示\"内容量大/源源不断汇入\"的列表页与卡片墙；建立信息密度的第一印象", "duration": "150f（约 5s：0–36 牌堆特写 + 预备，36–~101 发牌，108–150 满板 hold）", "energy": "高（节奏爬升段主力，不放开场第一镜）", "intention": "先给悬念（这一摞是什么？），再给答案（是几十个项目，它们自己飞进页面各就各位）。观众要感受到\"东西源源不断地涌进来\"，每张卡带着急迫感砸到位。", "source": "references/shots/ui-entrance/deck-deal-flyin.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "deck-deal-flyin", "label": "deck-deal-flyin", "description": "暗色石墨桌面上的实体牌堆特写环绕开局，灯从牌堆亮到旁边的页面板，一摞卡像发牌一样硬加速甩进网格，相机追着发牌升起后仰、落在整块满板的跑道式俯瞰上定格", "media": {"url": "./media/deck-deal-flyin.mp4?v=1790980736797", "type": "mp4"}}], "sourceUrl": "./source/deck-deal-flyin.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "depth-layer-moves", "summary": "分层深度运镜——多层视差滑轨：3 层速度梯度横移出纵深，滑轨落定时主角浮起", "use": "平面截图要\"有厚度\"的段落：卡组 / 列表 / 整页的横向巡览", "duration": "4–5.5s 持续（demo 165f）", "energy": "中（质感型）", "intention": "整页平移是\"看页面\"，分层深度是\"在页面的空间里\"。视差滑轨给横移 加纵深（迪士尼多平面摄影机原理，Linear 片同款质感）。", "source": "references/shots/camera/depth-layer-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "multiplane", "label": "multiplane", "description": "分层深度运镜——多层视差滑轨：3 层速度梯度横移出纵深，滑轨落定时主角浮起", "media": {"url": "./media/multiplane.mp4?v=1790980736798", "type": "mp4"}}], "sourceUrl": "./source/depth-layer-moves.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "doc-park-left-pill-deal", "summary": "文档不淡出而是向左滑出只露约 35% 宽并微缩到 0.92，右侧按旁白节奏慢速发牌三张白底描边药丸（outBack 弹入），每张落定后其下方字幕逐词加深、下一张到来前整句淡出，左侧文档全程极缓慢自动滚动保持\"正在被读\"", "use": "旁白驱动的\"分析结论逐条给出\"段落；文档理解、推荐理由、审阅意见类产品的核心说明镜头", "duration": "约 5.8s（174f@30fps）", "energy": "低（慢发牌节奏，全片无峰值；靠自动滚动维持活性）", "intention": "结论要一条一条给，观众才记得住。但如果把来源文档淡出，结论就变成了空中楼阁——观众 不知道这些话从哪来。这张卡的解法是**让来源留在画面里**：文档靠左驻留只露一截，还在 缓慢滚动（说明它正在被读），右侧的每条结论都是从这份文档里长出来的。发牌节奏刻意慢， 是为了给旁白留出说完一句的时间。", "source": "references/shots/ui-entrance/doc-park-left-pill-deal.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "doc-park-left-pill-deal", "label": "doc-park-left-pill-deal", "description": "文档不淡出而是向左滑出只露约 35% 宽并微缩到 0.92，右侧按旁白节奏慢速发牌三张白底描边药丸（outBack 弹入），每张落定后其下方字幕逐词加深、下一张到来前整句淡出，左侧文档全程极缓慢自动滚动保持\"正在被读\"", "media": {"url": "./media/doc-park-left-pill-deal.mp4?v=1790980736799", "type": "mp4"}}], "sourceUrl": "./source/doc-park-left-pill-deal.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "document-typewriter-reveal", "summary": "悬浮在暗场里的整页真排版文档窗口在光标后自己\"写\"出来、侧栏跟进、历史条目逐个落入轨道，相机从斜侧标题特写一路后撤到全窗", "use": "文档/报告/笔记类功能镜头；信息密度最高的一拍", "duration": "150f（约 5s，含 history-list-stack 尾段与标语 hold）", "energy": "低中（信息密度最高，节奏放稳让观众读字）", "intention": "观众会读清屏幕上每个字——这一镜的说服力全在\"文档是真的\"。打字机式写入把静态页面变成\"正在被写出来的文档\"，侧栏历史条目落入补上\"持续产出\"的时间纵深。", "source": "references/shots/typography/document-typewriter-reveal.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "document-typewriter-reveal", "label": "document-typewriter-reveal", "description": "悬浮在暗场里的整页真排版文档窗口在光标后自己\"写\"出来、侧栏跟进、历史条目逐个落入轨道，相机从斜侧标题特写一路后撤到全窗", "media": {"url": "./media/document-typewriter-reveal.mp4?v=1790980736800", "type": "mp4"}}], "sourceUrl": "./source/document-typewriter-reveal.md", "category": "typography", "tags": ["typography", "ui-entrance"], "addedAt": "2026-07-20T02:21:04.000Z"}, {"name": "draw-svg-trace", "summary": "描边生长圈注——一条带笔头的墨线沿元素轮廓跑一圈把它\"画\"出来，闭合瞬间闪黑交棒、内容淡入；同套路可给标题画下划线", "use": "单个卡片/图表/标题的被点名入场；元素级手法（整页级蓝图描线归 wall-reveal-moves B 式）", "duration": "132f（预告 10f + 描边 40f + 闪黑交棒 16f + 下划线 18f + hold 40f，约 4.4s）", "energy": "中", "intention": "\"画出来\"是纸墨审美里最顺手的入场隐喻：元素不是飞进来也不是淡进来， 而是被一支看不见的笔当场描出来。库内 wall-reveal-moves B 式已有整页 蓝图版（全屏线框逐段画+区域点亮），本卡是它的**元素级特写版**—— 一条线、一个主体、一次闭合，笔头可见、方向可读，适合\"接下来讲它\" 的点名时刻。第二用法是标题下划线生长：同一套路 18f 短版，给重点词 一笔手绘强调，与马克笔审美 token 天然同族。", "source": "references/shots/ui-entrance/draw-svg-trace.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "draw-svg-trace", "label": "draw-svg-trace", "description": "描边生长圈注——一条带笔头的墨线沿元素轮廓跑一圈把它\"画\"出来，闭合瞬间闪黑交棒、内容淡入；同套路可给标题画下划线", "media": {"url": "./media/draw-svg-trace.mp4?v=1790980736801", "type": "mp4"}}], "sourceUrl": "./source/draw-svg-trace.md", "category": "ui-entrance", "tags": ["ui-entrance", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "element-body-moves", "summary": "元素身体感——contact-shadow-lift 接触阴影离面抬升：卡抬起时桌上的阴影同步放大变淡，纸片离桌被阴影证明", "use": "给\"位置在变\"之外补\"身体在变\"：卡片点名给悬浮证据；配 2.5D 运镜与逐张点名", "duration": "A 150f 5s", "energy": "A 低中", "intention": "库内运动卡全在管\"位置在变\"——飞入、滑动、弹跳，元素本身始终是刚体。 这一式管**身体在变**：给悬浮一个可信的证据——卡抬起时正下方阴影同步放大变淡， 纸片离桌，staging 法则给 2.5D 运镜垫的物理台词。与 CameraMotionBlur 的区别： 快门拖影是相机的事，离面抬升是身体的事。", "source": "references/shots/ui-entrance/element-body-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "contact-shadow-lift", "label": "contact-shadow-lift", "description": "元素身体感——contact-shadow-lift 接触阴影离面抬升：卡抬起时桌上的阴影同步放大变淡，纸片离桌被阴影证明", "use": "逐张点名强调；2.5D 段落的离面铺垫", "media": {"url": "./media/contact-shadow-lift.mp4?v=1790980736802", "type": "mp4"}}], "sourceUrl": "./source/element-body-moves.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "flying-words", "summary": "22 个关键词按黄金角铺在扁椭圆截面上，沿 z 轴从远处飞到相机前擦身而过，透明度走 [0,1,0.5,0.2,0] 生命曲线，跑满 2 整圈首尾无缝", "use": "关键词云/能力清单的动态背景；片头片尾的\"信息量\"垫底层；需要纵深穿越感的转场", "duration": "约 6.0s（180f@30fps，2 个完整循环，可无缝接续）", "energy": "高（全屏持续 3D 位移，画面无一刻静止）", "intention": "关键词列举最土的做法是堆一屏静态词云。词语隧道把同一批词**摊到时间轴上**： 远处生成、由小变大、擦过镜头消失，观众永远只在读三五个词，但主观感受是 \"词很多\"。它是背景层不是主角层——相机不动、元素动，所以前景压一层标题 或 UI 完全不打架。词表整体替换成项目关键词即可，不改一行运动逻辑。", "source": "references/shots/typography/flying-words.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "flying-words", "label": "flying-words", "description": "22 个关键词按黄金角铺在扁椭圆截面上，沿 z 轴从远处飞到相机前擦身而过，透明度走 [0,1,0.5,0.2,0] 生命曲线，跑满 2 整圈首尾无缝", "media": {"url": "./media/flying-words.mp4?v=1790980736803", "type": "mp4"}}], "sourceUrl": "./source/flying-words.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "fracture", "summary": "5×5 瓦片从 3D 碎片态按中心波纹逐圈聚合成整面海报，停一拍亮字，随后全部碎片背离中心加速旋转飞出画面", "use": "开场第一镜\"从混沌到成形\"的品牌/海报揭示；倒放或只取后半可作硬转场", "duration": "约 5.2s（156f@30fps；聚合 0–2.6s · hold 1s · 飞散 1.5s）", "energy": "高（两头高能、中段静止，适合压 BGM 重音起收）", "intention": "把\"产品成形\"拍成物理事件：碎片从三维空间各自带着旋转飞回原位，观众看着一面完整画面从无序中长出来；hold 读字后再整体炸出画面，把注意力干净地交给下一镜。进出对称，一支素材可正反两用。", "source": "references/shots/opening/fracture.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "fracture", "label": "fracture", "description": "5×5 瓦片从 3D 碎片态按中心波纹逐圈聚合成整面海报，停一拍亮字，随后全部碎片背离中心加速旋转飞出画面", "media": {"url": "./media/fracture.mp4?v=1790980736804", "type": "mp4"}}], "sourceUrl": "./source/fracture.md", "category": "opening", "tags": ["opening"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "fui-hud-moves", "summary": "FUI/HUD 准星咬合——reticle-lock-on 四个 L 形角标组成的取景框从画外飞入、超调回弹后咬合锁定目标", "use": "任何\"看这里\"的目标点名（替代箭头圈红，画面不冻结）", "duration": "2–3s（demo 90f）", "energy": "中高（咬合帧是打击点）", "intention": "科幻虚构界面（Jarvis/Territory）里可中性化的母题：运动中的捕获。 四个 L 形角标从画外冲入、超调回弹、\"咔\"地咬合到目标元素四角+弹标签 ——与 freeze-annotate 分工：那卡冻结画面标注，本卡在流动中点名。", "source": "references/shots/effects/fui-hud-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "reticle-lock-on", "label": "reticle-lock-on", "description": "FUI/HUD 准星咬合——reticle-lock-on 四个 L 形角标组成的取景框从画外飞入、超调回弹后咬合锁定目标", "use": "目标点名；踩音效重拍", "media": {"url": "./media/reticle-lock-on.mp4?v=1790980736805", "type": "mp4"}}], "sourceUrl": "./source/fui-hud-moves.md", "category": "effects", "tags": ["effects", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "gauge-readout-moves", "summary": "仪表读数两式——needle-sweep-selftest 满弧扫针（点火自检指针甩满全弧再回落真值）与 tape-scroll-fixed-pointer 滚带定针（针不动刻度带滚过+冲刺刹车）", "use": "dashboard 开场仪式/性能指标揭晓；A 多表盘开机感，B 单指标大跳变", "duration": "A 140f（4.7s）/ B 150f（5s）", "energy": "中高（机械仪式型）", "intention": "把\"报数值\"做成仪表的身体动作：A 是汽车点火自检——卡片里三个并排表盘 指针先\"唰\"地甩满全弧（270°）、扫过的刻度依次点亮，再弹簧回落定格真实值， 多表错峰成波浪，落定同帧盘下数值弹出，先亮量程再报数，开场宣誓感； B 是飞机空速带语法——读数窗 + 指针钉死画面中线，贯穿全画高的刻度带整体从窗后滚过，先顶着旧上限慢爬、升级后冲刺 （峰值 ~100px/f）、末尾 spring 刹车带回摆过冲，\"世界动、针不动\"， 数值大小变成看得见的位移距离。", "source": "references/shots/data/gauge-readout-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "needle-sweep-selftest", "label": "needle-sweep-selftest", "description": "指针去程 ~12f ease-out 甩满弧，回程 ~20f 带 5-8° 过冲回摆落真值；多表错峰 3-5f；落定同帧盘下数值弹出", "use": "dashboard 开场/系统就绪仪式", "media": {"url": "./media/needle-sweep-selftest.mp4?v=1790980736806", "type": "mp4"}}, {"key": "tape-scroll-fixed-pointer", "label": "tape-scroll-fixed-pointer", "description": "长刻度带 translate：慢爬段→45px/f 冲刺 ~25f→spring 刹车过冲回摆停位；窗内读数同步刷新", "use": "单指标大跳变（性能翻倍/配额提升）", "media": {"url": "./media/tape-scroll-fixed-pointer.mp4?v=1790980736807", "type": "mp4"}}], "sourceUrl": "./source/gauge-readout-moves.md", "category": "data", "tags": ["data"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "glass-pill-dictation-typing", "summary": "一条定宽玻璃胶囊以约 1.25 倍略大弹出后缓落到位，内部自左淡到右浓铺一层强调色暖光；光标先行、随后匀速打出听写句，光（连同胶囊背后的环境光）随打字进度渐渐退去，收尾成一条中性的磨砂玻璃条", "use": "语音/AI 输入框的登场；\"跟它说话\"的交互提示镜头；高能段之间的一个安静过渡拍", "duration": "约3.3s（100f@30fps）", "energy": "低（全片最安静的一拍，只有光在退）", "intention": "用\"光随输入熄灭\"讲一件很小的事：待命时它在发光（等你说话），你一开口 它就把光让给文字。3.3s 里只做三件事——弹出、打字、光退。任何额外动作 （弹跳、色变、图标动画）都会让这一拍不再是休止符。", "source": "references/shots/interaction/glass-pill-dictation-typing.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "glass-pill-dictation-typing", "label": "glass-pill-dictation-typing", "description": "一条定宽玻璃胶囊以约 1.25 倍略大弹出后缓落到位，内部自左淡到右浓铺一层强调色暖光；光标先行、随后匀速打出听写句，光（连同胶囊背后的环境光）随打字进度渐渐退去，收尾成一条中性的磨砂玻璃条", "media": {"url": "./media/glass-pill-dictation-typing.mp4?v=1790980736808", "type": "mp4"}}], "sourceUrl": "./source/glass-pill-dictation-typing.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "glitch-cycle", "summary": "同一行等宽槽位循环轮播 4 条状态短语，每条头尾按概率关键帧 [1,0,0,0.1,0,0,1] 全乱码、中段偶发单字抖动，切换瞬间叠 RGB 分离与整行位移；末条概率收 0 保证收尾干净", "use": "加载/构建/部署过程的状态播报；技术型片头的\"系统自述\"；需要机器口吻推进时间的一段垫底", "duration": "约 5.6s（168f@30fps；demo 每条短语 38f，末条延续到片尾作收尾 hold）", "energy": "中高（持续的高频噪声脉冲，切换点是峰值）", "intention": "状态播报最笨的做法是四行字逐条淡入。轮播把它们压进**一个槽位**： 短语头尾用乱码\"熔断\"再\"凝固\"，中段几乎干净只偶尔抽一下——观众读到的 是\"系统在一步步推进\"，而不是四条独立文案。乱码浓度是这卡的语法： 浓 = 正在切换，淡 = 正在这一状态里。底部进度条把四拍串成一条时间线， 最后一条把概率收到 0，落定即结束。", "source": "references/shots/typography/glitch-cycle.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "glitch-cycle", "label": "glitch-cycle", "description": "同一行等宽槽位循环轮播 4 条状态短语，每条头尾按概率关键帧 [1,0,0,0.1,0,0,1] 全乱码、中段偶发单字抖动，切换瞬间叠 RGB 分离与整行位移；末条概率收 0 保证收尾干净", "media": {"url": "./media/glitch-cycle.mp4?v=1790980736809", "type": "mp4"}}], "sourceUrl": "./source/glitch-cycle.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "glow-flyline-moves", "summary": "暗场光斑与飞线三式——glow-orb-ambient 光斑底噪、flyline-arc 飞线连接、orb-flyline-relay 同帧共振组合", "use": "全片唯一暗场段落的氛围与数据叙事：铺底噪用 A、讲数据流向用 B、要背景给前景搭腔用 C；Linear 官网味", "duration": "A 170f（~5.7s）/ B 140f（~4.7s）/ C 165f（5.5s）", "energy": "A 低（底噪级）/ B 中 / C 中高", "intention": "这是库内第一张整卡住在**暗场**的卡。白底提亮不可见判例反过来读就是： 要玩光，先去暗场。A 是空间的呼吸——深色底三团大光斑有机漂移，从中央 磨砂玻璃卡背后游过、颜色透过玻璃染进卡面，卡缘随最近光斑靠近而泛光， 背景不再是死的；B 是数据的动词——发光弧线从 A 卡\"打\"到 B 卡， 亮点头领跑、渐隐光尾，落点描边脉冲点亮，指标关联第一次有了方向；C 是 A+B 的焊接——飞线落点帧邻近光斑同帧涨亮一拍， 氛围层与事件层**同帧共振**，互相搭腔而非各演各的（组合命门：拆开共振帧 就退化成两张卡并置）。", "source": "references/shots/effects/glow-flyline-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "glow-orb-ambient", "label": "glow-orb-ambient", "description": "三团 500-700px radial 光斑 + blur(100px)，双正弦漂移；卡缘辉光按光斑距离 [180,720]px→[1,0] 加权取 max 驱动", "use": "暗场段落铺底；卡呼吸感", "media": {"url": "./media/glow-orb-ambient.mp4?v=1790980736810", "type": "mp4"}}, {"key": "flyline-arc", "label": "flyline-arc", "description": "手写 bezier 100 段采样，22f out-cubic 生长；光头条件挂载领跑，段 opacity 按离头距离渐隐；落点描边脉冲，可接力", "use": "数据流向/指标关联；dashboard 叙事", "media": {"url": "./media/flyline-arc.mp4?v=1790980736811", "type": "mp4"}}, {"key": "orb-flyline-relay", "label": "orb-flyline-relay", "description": "A+B 焊接：光斑 surge 与卡脉冲共用落点帧，涨亮 1+1.6×surge、5f 起升 15f 消散", "use": "暗场高光段；三卡接力收束", "media": {"url": "./media/orb-flyline-relay.mp4?v=1790980736812", "type": "mp4"}}], "sourceUrl": "./source/glow-flyline-moves.md", "category": "effects", "tags": ["effects", "data"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "gradient-transition", "summary": "背景在 linear、radial、conic 三类 CSS 渐变间平滑过渡——角度、色标、中心、半径逐参数插值，段间交叉淡化换类型", "use": "氛围底/章节底色的连续变奏；给静态排版段落提供\"活着\"的背景层", "duration": "约 6.7s（200f@30fps；linear 0–2.3s · radial 1.9–4.4s · conic 3.9–6.7s）", "energy": "低（纯背景运动，为前景内容让路）", "intention": "渐变不是静态贴图而是可动画的参数集：同类型渐变内部任何参数都能插值出丝滑变化，跨类型则用短交叉淡化衔接。作背景层用，给\"没有主体运动\"的段落一层持续的低速能量。", "source": "references/shots/transition/gradient-transition.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "gradient-transition", "label": "gradient-transition", "description": "背景在 linear、radial、conic 三类 CSS 渐变间平滑过渡——角度、色标、中心、半径逐参数插值，段间交叉淡化换类型", "media": {"url": "./media/gradient-transition.mp4?v=1790980736813", "type": "mp4"}}], "sourceUrl": "./source/gradient-transition.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "gradient-word-sweep", "summary": "黑底标语里关键词被渐变彩光从左到右快速扫过\"充能\"——波前字符辉光最强向后衰减，填满后字符间勾连细紫红闪电、整词稳态泛光呼吸", "use": "标语里给单个动词/卖点词充能（Supercharged/faster/AI…）；能量高潮段的文字戏；黑场品牌片的口号帧", "duration": "扫充 ~15–20f（要快）+ 稳态闪电呼吸 1–2s；全段 2.5–3.5s", "energy": "高（一词爆点，前后都该让位）", "intention": "整句白字里只有关键词被\"通电\"：渐变彩光从左到右快速扫过字符， 像能量注入——扫过的瞬间最亮（波前尾迹），随后衰减到稳态； 填满后字符之间跳起勾连的细闪电，词保持泛光呼吸。三个命门： **快**（扫充 15–20f，慢了读作进度条）、**波前最亮**（刚点亮的 字符效果最强，没有这个梯度就是静态渐变裁切）、**辉光克制** （AE 式多层泛光但别糊成一团，闪电细而稀疏才是点缀）。", "source": "references/shots/typography/gradient-word-sweep.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "gradient-word-sweep", "label": "gradient-word-sweep", "description": "黑底标语里关键词被渐变彩光从左到右快速扫过\"充能\"——波前字符辉光最强向后衰减，填满后字符间勾连细紫红闪电、整词稳态泛光呼吸", "media": {"url": "./media/gradient-word-sweep.mp4?v=1790980736814", "type": "mp4"}}], "sourceUrl": "./source/gradient-word-sweep.md", "category": "typography", "tags": ["typography", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "grain-dissolve", "summary": "整行字爆裂成沸腾颗粒噪点并浮现斜纹选区框，噪点云急速凝聚成更大号发光短字标，位移衰减归零定格", "use": "收尾\"XX. Now Live\"式上线宣告；长句信息压缩成品牌短标的能量聚合拍", "duration": "约 2.0s（60f@30fps；砂化 0.26–0.56s · 凝聚 1.2–1.42s · 凝固回落收尾）", "energy": "中高（短促、一次性的能量脉冲，天然的 outro 卡点）", "intention": "把\"一句话浓缩成一个词\"拍成物理事件：句子先失稳沸腾成颗粒（信息解体），选区框暗示\"正在选中提取\"，然后所有颗粒能量向中心坍缩成更大更亮的短字标——观众读到的是\"这一切归结为它\"。", "source": "references/shots/outro/grain-dissolve.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "grain-dissolve", "label": "grain-dissolve", "description": "整行字爆裂成沸腾颗粒噪点并浮现斜纹选区框，噪点云急速凝聚成更大号发光短字标，位移衰减归零定格", "media": {"url": "./media/grain-dissolve.mp4?v=1790980736815", "type": "mp4"}}], "sourceUrl": "./source/grain-dissolve.md", "category": "outro", "tags": ["outro"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "graze-face-tour", "summary": "大倾角贴面游走特写——镜头贴着 UI 表面低飞掠过（侧栏树/顶栏/列表当地形），页面文字初始悬浮在界面上空带同形软影，随镜头行进先后加速贴落回界面", "use": "功能区巡礼（把 UI 当地景飞掠）；配合暗场+霓虹缘光做产品\"内部世界\"段落；界面内容逐区登场", "duration": "单段 4–5s；可多段接力延长", "energy": "中高（运镜持续推进+元素连续落位，信息密度高）", "intention": "把 UI 拍成地形：大倾角特写让侧栏树、导航、列表行变成掠过的地貌， 浅景深强化\"贴面\"。戏眼是**文字空中贴落**：文字/组件不是原地淡入， 而是悬浮在界面上空（3D z 轴抬高），在空中时往界面投同形软影， 随镜头行进先后加速贴落、影子随高度收敛消失——观众看见界面在 镜头经过时\"完成自己\"。影子是可感命门：没有影子，悬浮读作 普通位移入场；有影子，空间关系瞬间成立。", "source": "references/shots/camera/graze-face-tour.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "graze-face-tour", "label": "graze-face-tour", "description": "大倾角贴面游走特写——镜头贴着 UI 表面低飞掠过（侧栏树/顶栏/列表当地形），页面文字初始悬浮在界面上空带同形软影，随镜头行进先后加速贴落回界面", "media": {"url": "./media/graze-face-tour.mp4?v=1790980736816", "type": "mp4"}}], "sourceUrl": "./source/graze-face-tour.md", "category": "camera", "tags": ["camera", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "hashtag-to-pill-materialize", "summary": "话题词打字实体化——居中打出 \"#word\"（红实心光标恒亮），1 帧硬切变成宽大胶囊标签，hold 后缩小左移落到页面标签位，再 1 帧硬切揭示成品页；\"两次硬切一次滑动\"的节奏骨架", "use": "标签/分类/关键词功能的演示段（笔记 app 打 tag、话题聚合）；\"输入 → 变成 UI 实体 → 归位到成品\"的三段式叙事", "duration": "120f（4s）——打字 ~40f + 硬切胶囊 hold ~18f + 缩移 ~14f + 硬切揭示后静置 ~1.2s（原片 18–21.5s）", "energy": "中（干脆利落，靠硬切给劲，不靠弹跳）", "intention": "文字变实体的常规做法是渐变/morph/展开，原片帧级拆解证明 Bear 反着 来：**实体化是 1 帧硬切**——上一帧还是文字+光标，下一帧就是完整 胶囊，无展开无 cross-fade 无回弹。硬切给的是\"啪、成了\"的确定感， 任何渐变都会把\"实体\"软化成\"特效\"。全段骨架是**两次硬切夹一次 滑动**：硬切实体化 → 平滑缩移归位 → 硬切揭示成品页。唯一的连续 运动（缩移）被两记硬切框住，才显得又快又稳。这个节奏骨架是命门， 三段挪动任何一段的性质（把硬切改渐变、把滑动改硬切）整卡就塌。", "source": "references/shots/interaction/hashtag-to-pill-materialize.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "hashtag-to-pill-materialize", "label": "hashtag-to-pill-materialize", "description": "话题词打字实体化——居中打出 \"#word\"（红实心光标恒亮），1 帧硬切变成宽大胶囊标签，hold 后缩小左移落到页面标签位，再 1 帧硬切揭示成品页；\"两次硬切一次滑动\"的节奏骨架", "media": {"url": "./media/hashtag-to-pill-materialize.mp4?v=1790980736817", "type": "mp4"}}], "sourceUrl": "./source/hashtag-to-pill-materialize.md", "category": "interaction", "tags": ["interaction", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "icon-field-colorize", "summary": "灰阶小图标点阵错峰浮现铺满全屏，停一拍后多道品牌色横带波纹极快向下扫翻全场——\"功能全景先摆满，品牌一瞬间点亮\"的开场/收束卡", "use": "开场铺陈产品能力面（图标=功能宇宙）再一举打上品牌色；功能集合页、生态/集成规模展示、片头 logo 前垫场", "duration": "浮现 ~45f 错峰 + 静置 ~10f + 翻色 12–45f + 终态静置；全段 3–6s（demo 170f：翻色走 30f 档 + 标题落版 + 终态 hold 1s）", "energy": "中（浮现是铺垫，翻色瞬间是唯一爆点）", "intention": "先用灰阶把\"多\"摆足——上百个小图标错峰浮进来铺满画面，灰阶保证 读作背景纹理不抢戏；停一拍让观众意识到\"摆满了\"，然后品牌色以 横带波纹形式极快扫过全场，灰世界一瞬间被点亮。命门在**翻色不是 同帧硬翻**：原片实测是 ~0.5s 内多道色波依次向下快扫（蓝先覆盖全场， 橙/绿/红依次覆盖更低行带），终态呈四色横带分层——波纹感让\"点亮\" 有方向和速度，硬翻只读作换了张图。", "source": "references/shots/opening/icon-field-colorize.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "icon-field-colorize", "label": "icon-field-colorize", "description": "灰阶小图标点阵错峰浮现铺满全屏，停一拍后多道品牌色横带波纹极快向下扫翻全场——\"功能全景先摆满，品牌一瞬间点亮\"的开场/收束卡", "media": {"url": "./media/icon-field-colorize.mp4?v=1790980736818", "type": "mp4"}}], "sourceUrl": "./source/icon-field-colorize.md", "category": "opening", "tags": ["opening", "ui-entrance", "outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "icon-performance-moves", "summary": "图标表演——attention-bounce 求关注弹跳（图标连跳递增+落地压扁+镜头被吸引）", "use": "半屏级 icon 特写段落；新功能引出", "duration": "156f（5.2s）", "energy": "蓄势引入", "intention": "库内图标动画品类首批入库：icon 是镜头怼着拍的表演者，不是 UI 角落的 微交互。attention-bounce 是 macOS Dock 语汇——Dock 里的 video-shotcraft app 图标原地连跳 4 次一次比一次高（0.35→1.2 倍 icon 高），每次落地压扁 （末跳宽 1.2x 高 0.8x）+涟漪溅点，邻居图标逐渐失焦、跳最高那下镜头向它 轻推 8%（被吸引），落定后弹开「New in Shotcraft」功能面板——把\"用户注意力\" 剪进叙事。", "source": "references/shots/effects/icon-performance-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "attention-bounce", "label": "attention-bounce", "description": "图标表演——attention-bounce 求关注弹跳（图标连跳递增+落地压扁+镜头被吸引）", "use": "新功能引出：\"看我\"→镜头看它→它开面板", "media": {"url": "./media/attention-bounce.mp4?v=1790980736819", "type": "mp4"}}], "sourceUrl": "./source/icon-performance-moves.md", "category": "effects", "tags": ["effects", "interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "impact-feedback", "summary": "命中反馈两式——hit-counter 连招计数（顿帧+伤害数字+combo 跳字）、anime-impact 动漫打击帧（负片+集中线+色散）", "use": "元素落位/撞击的\"命中一瞬\"——给砸入、撞停加游戏级手感；按强度阶梯选式", "duration": "n/a（元素级技法，寄生在落位动作上；各式占用帧数见参数表）", "energy": "高（瞬时冲击）", "intention": "元素砸到位却没有\"砸到了\"的一瞬，落位读作 PPT 飞入。游戏 juice （Vlambeer screenshake 理论）与动漫演出 impact frames 给了同一答案： 命中的那几帧把时间咬住，冲量才传到观众手上。两式是一条强度阶梯： B 用局部顿帧叠伤害数字和 combo 跳字，把功能清单剪成一套连招， 叙事感最强；C 是最重的一拳——撞停 3 帧翻负片炸集中线，强调级最高、 最风格化。", "source": "references/shots/effects/impact-feedback.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "hit-counter", "label": "hit-counter 连招计数", "description": "三卡接连砸入，每命中 = 顿帧 2f + 伤害数字上浮 + ×N 计数跳字逐次加码", "use": "功能点连打段--\"功能很多\"用连招讲；游戏化语言浓", "media": {"url": "./media/hit-counter.mp4?v=1790980736820", "type": "mp4"}}, {"key": "anime-impact", "label": "anime-impact 打击帧", "description": "crash-zoom 撞停的 3f 整幅负片反色 + 放射集中线 + 红青色散，第 4f 全撤", "use": "全片唯一高潮的那一拳；强调级封顶", "media": {"url": "./media/anime-impact.mp4?v=1790980736821", "type": "mp4"}}], "sourceUrl": "./source/impact-feedback.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "integration-hub-map", "summary": "旧页面一次性快翻 180°（侧棱瞬间亮闪）落成新中枢页，五个集成 app 图标同帧弹现、随即五条彩虹光管同帧齐连，光管内输送脉冲持续流动——\"翻开新一页，生态一齐接入\"", "use": "集成/生态能力段（一个产品连一切）；版本翻新叙事（旧页翻成新页）；暗场霓虹调性的功能高潮", "duration": "前摇 ~0.5s + 快翻 ~1.2s + 图标齐现 → 光管齐连两拍 ~0.7s + 输送呼吸 ≥1.5s；全段 4.5–5s", "energy": "中高（翻面是爆点，输送段是余韵）", "intention": "翻面是\"换时代\"：旧文档页整个翻转 180° 得到新中枢页——必须是 完整翻面不是转个角度（判例），翻的动作**快翻+尾段减速**、一口气 完成无分段停顿（\"匀速\"判例：用户说的匀速=无停顿，不是字面 linear；90° 侧棱停顿版被裁）。侧棱时刻只\"闪一下\"（1–3f 脉冲， 长光晕平台被裁）。接入是**两拍制**：五图标同帧弹现（第一拍）→ 五管同帧起画齐连（第二拍）——齐，才读作\"生态一次到位\"；错峰 逐个连读作逐个谈判（两轮被裁）。连通后光管内亮脉冲沿图标→中枢 方向持续循环，\"输送感\"是终态的生命。", "source": "references/shots/ui-entrance/integration-hub-map.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "integration-hub-map", "label": "integration-hub-map", "description": "旧页面一次性快翻 180°（侧棱瞬间亮闪）落成新中枢页，五个集成 app 图标同帧弹现、随即五条彩虹光管同帧齐连，光管内输送脉冲持续流动——\"翻开新一页，生态一齐接入\"", "media": {"url": "./media/integration-hub-map.mp4?v=1790980736822", "type": "mp4"}}], "sourceUrl": "./source/integration-hub-map.md", "category": "ui-entrance", "tags": ["ui-entrance", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "lead-word-zoom-assemble", "summary": "首词以 2.3 倍字号占据画面中央、hold 期间继续推近 6%，随后一条曲线同时完成「缩回终字号」与「整行左滑归位」，后续词各自从槽位右侧 0.5em 被推进来；支点横向钉首词中心、纵向钉基线（挂载时实测），整行上移的同一时窗副行浮出，停一拍后整幕 crash-zoom 推近失焦交棒", "use": "品牌名/产品名的 Introducing 字卡；发布会式开场第二镜；一句话主张需要\"先让一个词占满画面、再把整句补齐\"的场合", "duration": "约 2.8s（84f@30fps；组句 f36 完成、上移与副行 f32–46、静止 26f、末 12f crash）", "energy": "中高（起手就是满画面的大字，但全程只有一次运动，没有二次冲击）", "intention": "字卡最容易犯的错是\"整句一起淡入\"——观众同时收到 5 个词，一个都没记住。这张卡把 阅读顺序做成**物理顺序**：先只给一个词，而且大到占满画面、还在继续朝观众推近，观众 被迫先读它；然后这个词退回自己在句子里的尺寸和位置，整句围绕它长出来。落定时观众 已经读过两遍主词。 真正的手感命门不是缩放曲线，而是**支点**。首词从\"画面正中\"走到\"行内第三个字符的 位置\"，如果支点取行盒中心，缩放和左滑会各自把字往两边拽，末尾几帧基线抖得肉眼可见。 把 `transform-origin` 横向钉在首词中心、纵向钉在基线，这两点全程不动，整行就只是 \"收小\"，没有任何漂移。", "source": "references/shots/typography/lead-word-zoom-assemble.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "lead-word-zoom-assemble", "label": "lead-word-zoom-assemble", "description": "首词以 2.3 倍字号占据画面中央、hold 期间继续推近 6%，随后一条曲线同时完成「缩回终字号」与「整行左滑归位」，后续词各自从槽位右侧 0.5em 被推进来；支点横向钉首词中心、纵向钉基线（挂载时实测），整行上移的同一时窗副行浮出，停一拍后整幕 crash-zoom 推近失焦交棒", "media": {"url": "./media/lead-word-zoom-assemble.mp4?v=1790980736823", "type": "mp4"}}], "sourceUrl": "./source/lead-word-zoom-assemble.md", "category": "typography", "tags": ["typography", "opening"], "addedAt": "2026-09-01T15:59:12.000Z"}, {"name": "letterspace-materialize", "summary": "大字距字标全字符并行连续描画结晶——所有字母同帧起笔、笔画像手写一样连续生长、同帧齐收成词；氛围底景上的品牌字标显影", "use": "片尾/片头品牌字标登场（大字距细骨架字标；demo 为 video-shotcraft 全小写）；章节题字；needs 静谧/高级感的收束帧", "duration": "静置 ~15f + 描画 ~50f + 终态静置 ≥30f；全段 3–4s", "energy": "低（静谧仪式感，一次呼吸完成）", "intention": "字标不是淡入也不是打字机，而是\"结晶\"：全部字母的笔画同时 开始连续生长，像一只看不见的手同时写所有字母，同一瞬间齐收 成词。两个命门：**连续**（笔画必须是连续画出的过程，不许遮罩 分段——先半截再另半截会被读穿；任何中间帧都该像\"写到一半\"）； **同步**（所有字母同帧起笔、同帧完成——逐字错峰是打字机语义， 这里是整词一体的仪式感）。", "source": "references/shots/opening/letterspace-materialize.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "letterspace-materialize", "label": "letterspace-materialize", "description": "大字距字标全字符并行连续描画结晶——所有字母同帧起笔、笔画像手写一样连续生长、同帧齐收成词；氛围底景上的品牌字标显影", "media": {"url": "./media/letterspace-materialize.mp4?v=1790980736824", "type": "mp4"}}], "sourceUrl": "./source/letterspace-materialize.md", "category": "opening", "tags": ["opening", "typography", "outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "light-play-moves", "summary": "光效两式——spotlight-sweep 聚光扫字、sheen 单点扫光", "use": "把光当另一种笔触（扫/擦）：暗场标题揭示（A）、主角卡加冕（B）", "duration": "A 170f ~5.7s / B 150f ~5s", "energy": "A 中 / B 低", "intention": "库内\"光\"一直只有 spotlight-hero-card 一个点射手法；这两式把光做成 体系，两种笔触两种职责：A 是**扫**——暗场里几乎不可见的标题被锥形 光摆动扫亮，光到哪哪亮，与 spotlight-hero-card 的区别是那个打卡片、 这个扫文字；B 是**擦**——深墨主角卡上一道 45° 高光带缓扫一次，被 圆角裁住，无声的加冕。 全部深底或深主角——**白底上提亮不可见**（判例）是这整张卡的地基。", "source": "references/shots/effects/light-play-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "spotlight-sweep", "label": "spotlight-sweep", "description": "双层同文本：暗版 0.07 常驻，亮版 radial mask 随光斑走，锥形光摆两个来回后全亮定格", "use": "暗场大标题揭示开场", "media": {"url": "./media/spotlight-sweep.mp4?v=1790980736825", "type": "mp4"}}, {"key": "sheen-sweep", "label": "sheen-sweep", "description": "深墨卡上 45° 高光带 translateX 扫一次，overflow hidden 圆角裁剪", "use": "主角卡静止段的一次加冕", "media": {"url": "./media/sheen-sweep.mp4?v=1790980736826", "type": "mp4"}}], "sourceUrl": "./source/light-play-moves.md", "category": "effects", "tags": ["effects", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "line-carry-transition", "summary": "线条接力横移转场——场景 A 的进度条延伸出画，镜头跟线横移，线在移动中拐角围出场景 B 的卡框，全程无剪切", "use": "两个有图形亲缘的场景之间（进度条→卡框、下划线→图表轴）；一支片子的招牌转场位，Catch Me If You Can 片头的图形接力", "duration": "~6.3s / 190f（进度条走满 36f + 冲出 10f + 横移 56f + 收框 24f + 框内海报 30f + 静止 24f）", "energy": "中", "intention": "转场库三大族（穿越/藏切/体块）都在回答\"场景怎么换\"；本卡的回答是 **根本不换——一条线牵着你走过去**。进度条走满后末端延伸成长线冲出 卡缘，镜头跟着线横移 1920px 进入新世界，线在移动中拐直角围出 B 场景 的卡框，框闭合、内容淡入，从头到尾观众的眼睛没离开过这条线。图形 连续性本身就是转场。与 match-cut 的区别：那是切点两侧形状对位—— 终究还是切；这是连续绘制——**没有切**。线的身份要有叙事逻辑（进度条 \"走完了\"所以延伸出去），无来由的线只是装饰。", "source": "references/shots/transition/line-carry-transition.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "line-carry-transition", "label": "line-carry-transition", "description": "线条接力横移转场——场景 A 的进度条延伸出画，镜头跟线横移，线在移动中拐角围出场景 B 的卡框，全程无剪切", "media": {"url": "./media/line-carry-transition.mp4?v=1790980736827", "type": "mp4"}}], "sourceUrl": "./source/line-carry-transition.md", "category": "transition", "tags": ["transition", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "list-reveal", "summary": "垂直菜单 6 项按 10f 的间隔依次 scale 找位、软 back 轻微过冲落定，同时整个列表容器全程匀速上移——逐项入场与整体漂移是两层不相干的运动", "use": "导航/侧边栏/设置面板的入场；任何\"界面自己长出来\"的 UI 段落，也适合做旁白铺垫时的低能量底", "duration": "约 4s（120f@30fps）", "energy": "低（稳定节拍，无峰值；靠漂移维持画面不死）", "intention": "列表逐项淡入是最容易做得死板的一类动效：每项动完就停，画面在两项之间是完全静止的。 这张卡的解法是给容器加一层与逐项入场无关的慢速漂移——局部在\"找位\"，整体在\"呼吸\"。 观众读得清每一项，同时画面从头到尾没有一帧是钉死的。", "source": "references/shots/ui-entrance/list-reveal.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "list-reveal", "label": "list-reveal", "description": "垂直菜单 6 项按 10f 的间隔依次 scale 找位、软 back 轻微过冲落定，同时整个列表容器全程匀速上移——逐项入场与整体漂移是两层不相干的运动", "media": {"url": "./media/list-reveal.mp4?v=1790980736828", "type": "mp4"}}], "sourceUrl": "./source/list-reveal.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "list-stack-press", "summary": "列表卡从画面底部逐张飞上摞起，每张落地压弹整摞、计数器同步跳一格", "use": "feed/雷达/收件箱类\"每天有新东西\"的镜头；强调持续积累的资产列表", "duration": "约 3s（18–88f）", "energy": "中", "intention": "\"堆叠有重量\"：每张新卡落上来，已落定的整摞被压下再弹回——观众从物理反馈里读出\"这是实打实攒下来的东西\"。计数器同步跳格把数量感钉死。", "source": "references/shots/ui-entrance/list-stack-press.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "list-stack-press", "label": "list-stack-press", "description": "列表卡从画面底部逐张飞上摞起，每张落地压弹整摞、计数器同步跳一格", "media": {"url": "./media/list-stack-press.mp4?v=1790980736829", "type": "mp4"}}], "sourceUrl": "./source/list-stack-press.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "logo-shrink-wordmark-lockup", "summary": "霓虹切口大环快速收束成中央实心小白 O、过冲刹车时换成 video-shotcraft 标志，图标左移让位，字标字母逐个滑入完成 lockup，强调色标语收尾", "use": "片尾品牌定妆：从满屏图形能量收束到\"图标+字标+标语\"的标准 lockup", "duration": "约 4.4s（132f@30fps；收束 0.1–1.2s · 让位 1.5–2.1s · 字母 2–2.7s · 标语 3.2–3.7s）", "energy": "中（收束段有冲击力，整体是沉稳的落定节奏）", "intention": "片尾的\"盖章\"动作：满屏的霓虹大环携能量坍缩成一枚小图标，愈合缺口、转为纯白（从演出态到标准态），然后按品牌 lockup 的规范一步步落位——图标让位、字标进场、标语押尾。观众看到的是品牌从动态里\"站定\"。", "source": "references/shots/outro/logo-shrink-wordmark-lockup.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "logo-shrink-wordmark-lockup", "label": "logo-shrink-wordmark-lockup", "description": "霓虹切口大环快速收束成中央实心小白 O、过冲刹车时换成 video-shotcraft 标志，图标左移让位，字标字母逐个滑入完成 lockup，强调色标语收尾", "media": {"url": "./media/logo-shrink-wordmark-lockup.mp4?v=1790980736830", "type": "mp4"}}], "sourceUrl": "./source/logo-shrink-wordmark-lockup.md", "category": "outro", "tags": ["outro"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "magician-card-flourish", "summary": "午夜蓝暗场上蓝色星芒闪现 0.3s（X 形针状光束旋转 90°+中心辉光放射小光芒），卡片从闪光点弹射而出——极速自旋弧线飞向镜头、自旋随靠近衰减、瞬间硬定格（卡高 86% 画高）、光脉冲 + sheen 扫光，右侧文案随后逐行揭示", "use": "单张卡片/海报/封面的魔术性登场（片头主视觉、产品卡揭晓）；纯黑暗场；需要\"变出来\"仪式感的爆点", "duration": "156f（闪光 0.3s + 飞行 1.6s + 定格/扫光/文案揭示 + hold 3.3s；全段 5.2s）", "energy": "高（一次性爆点，定格后即静）", "intention": "魔术师甩牌：一道蓝色星芒闪过，卡片仿佛从光里被变出来——从画面 中心极远处（视觉上一个小点）弹射而出，沿弧线极速自旋飞向镜头， 到达中心瞬间硬定格成近满幅展示。三个魔术感命门：**闪光先行** （光是\"变\"的仪式，0.3s 短促干脆）、**弹射节奏**（起飞慢速蓄力→ 急加速踢出→弧线段减速抵达，slow-in→burst→decelerating arc）、 **定格即静**（无减速尾巴无回弹，13 整圈自旋保证定格恰为正面）。", "source": "references/shots/opening/magician-card-flourish.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "magician-card-flourish", "label": "magician-card-flourish", "description": "午夜蓝暗场上蓝色星芒闪现 0.3s（X 形针状光束旋转 90°+中心辉光放射小光芒），卡片从闪光点弹射而出——极速自旋弧线飞向镜头、自旋随靠近衰减、瞬间硬定格（卡高 86% 画高）、光脉冲 + sheen 扫光，右侧文案随后逐行揭示", "media": {"url": "./media/magician-card-flourish.mp4?v=1790980736831", "type": "mp4"}}], "sourceUrl": "./source/magician-card-flourish.md", "category": "opening", "tags": ["opening", "ui-entrance", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "marker-underline-title", "summary": "大标题落定后，关键词下方马克笔下划线从左到右快速描画——变宽笔形、毛糙边缘、微上斜跟随斜体字势，贴着字底", "use": "标题里强调单个关键词（new/free/AI…）；手写感/人味的品牌调性；正文标注式强调", "duration": "标题落定 +4~8f 后起笔，划线 8–12f，总 1–1.5s", "energy": "低（一笔点睛，不抢标题的戏）", "intention": "打印体标题里突然出现一笔手绘马克笔，用材质反差把一个词从 排版里拎出来——像人拿笔在海报上圈重点。命门有三：**快** （8–12f 一笔呵成，慢了读作加载条）、**近**（贴着字底，离远了 读作分隔线不是强调）、**跟字势**（斜体词的划线必须左低右高 微上斜——斜向画反是最容易犯且一眼假的错，判例见已知坑）。", "source": "references/shots/typography/marker-underline-title.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "marker-underline-title", "label": "marker-underline-title", "description": "大标题落定后，关键词下方马克笔下划线从左到右快速描画——变宽笔形、毛糙边缘、微上斜跟随斜体字势，贴着字底", "media": {"url": "./media/marker-underline-title.mp4?v=1790980736832", "type": "mp4"}}], "sourceUrl": "./source/marker-underline-title.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "mosaic-reframe", "summary": "12 张瓦片在规则网格、feature mosaic、对角瀑布串三种排版间连续变形，位置宽高各自插值、逐片微错峰，段间留 hold", "use": "\"同一批内容多种看法\"的陈列转场：作品集/模板库/相册产品的布局能力展示", "duration": "约 7.1s（214f@30fps；浮现 0–22f · hold A · A→B 56–92f · hold B · B→C 132–176f · hold C 至 214f）", "energy": "中（连续流动的重排，无爆点，气质从容）", "intention": "让观众看见\"布局本身在思考\"：同样 12 张内容，从整齐档案态（网格）变成有主次的策展态（feature mosaic），再变成有态度的动态态（对角瀑布）。## 动效核心 - 三套布局按 1920×1080 原生像素硬编码为坐标表（内容区 x 96–1824、y 212–984）：A=4×3 规则网格（间距 24）； B=6×4 单元格 mosaic（首片占 3×2 大位，间距 16）；C=竖幅相纸 300×372 沿 (850,214)→(1724,930) 对角摊开， `rot = −15° + i·3°` 递增旋转 - 每片对中心 x/y、w/h、rot **独立插值**，不走 transform 整体缩放——宽高真实变化，圆角阴影不变形； 位置先到：w/h 晚 2f、旋转晚 4f 收敛，B→C 的旋转带一次轻过冲（bezier 0.45,0,0.3,1.22） - 换位曲线 bezier(0.75,0,0.15,1)（慢起 → 急走 → 长尾软落），A→B 每片 26f、B→C 每片 30f； 途中按段进度 sin 包络抬起（放大 3.5% + 阴影变大变虚），落位贴回 - 因果驱动：右上角分段控件 Grid / Mosaic / Cascade 的强调色胶囊先滑到下一档（snappy 12f，途中横向拉长）， 瓦片晚 4f 才开始重排（父先动、子跟随） - 错峰：A→B 按序号先密后疏扫过（10f 跨度）；B→C 像发牌一样等间隔依次摊开（14f 跨度）， B→C 起叠放次序切换为\"后发的压上面\"（B 态无重叠，切换不可见） - 三态三种语气：B 态主图压衬线大字图注（Featured shot / Golden Hour / Shot 01 · Crash zoom · 4.5 s 逐词升起）； C 态瓦片长出 14px 相纸白边，左下留白处升起衬线大标题 + 副行，尾帧是完整海报 （demo 是 video-shotcraft 的 12 镜分镜板：页眉标志 + 字标 + Storyboard，收尾「Every shot, in sequence.」+ 品牌 tagline） - 开场：12 张照片沿对角线错峰升起（16f snappy），全程相机极缓推近 1→1.025", "source": "references/shots/transition/mosaic-reframe.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "mosaic-reframe", "label": "mosaic-reframe", "description": "12 张瓦片在规则网格、feature mosaic、对角瀑布串三种排版间连续变形，位置宽高各自插值、逐片微错峰，段间留 hold", "media": {"url": "./media/mosaic-reframe.mp4?v=1790980736833", "type": "mp4"}}], "sourceUrl": "./source/mosaic-reframe.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "neon-frame-forerun", "summary": "强透视直角霓虹框自左缘两头奔画先行成型，页面在框内由暗转亮，同时框内组件/文字从 3D 上空带同形软影错峰贴落、随页面点亮同步完成贴合，背景霓虹群（demo 为同形框纵深回声隧道）终段熄灭让位", "use": "暗场品牌片里给 UI 面板做\"登场仪式\"（框先到、内容后落）；功能区首次亮相；霓虹/赛博调性的段落开场", "duration": "框奔画 ~0.7s + 点亮&贴落 ~2.7s + 背景熄灭收束 ~1s；全段 4–4.7s（demo 140f）", "energy": "中高（三层动作叠进，但都服务同一次登场）", "intention": "先立框后填肉：霓虹线框像跑道灯一样两头奔画圈出位置，宣告 \"这里要出现东西\"；页面在框内由暗转亮的同时，组件从空中带影 贴落——观众看见界面被\"安放\"进框里。三层动作（框奔画/页面点亮/ 组件贴落）必须**同步咬合**：贴落进程与点亮进程同步推进、稍滞后 收尾，框光最终并入面板辉光。背景霓虹管群终段熄灭，把亮度让给 主角完成收束。", "source": "references/shots/ui-entrance/neon-frame-forerun.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "neon-frame-forerun", "label": "neon-frame-forerun", "description": "强透视直角霓虹框自左缘两头奔画先行成型，页面在框内由暗转亮，同时框内组件/文字从 3D 上空带同形软影错峰贴落、随页面点亮同步完成贴合，背景霓虹群（demo 为同形框纵深回声隧道）终段熄灭让位", "media": {"url": "./media/neon-frame-forerun.mp4?v=1790980736834", "type": "mp4"}}], "sourceUrl": "./source/neon-frame-forerun.md", "category": "ui-entrance", "tags": ["ui-entrance", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "neon-frame-orbit-drop", "summary": "霓虹框先行描框后，镜头绕页面左→右弧线旋转，页面全部组件/文字**同帧**从空中往下贴合（同形软影同步收敛）——整体登场式的框内安放", "use": "单页 UI 的一次性隆重登场（与巡礼/逐区亮相相对）；暗场霓虹调性段落的主视觉揭幕；neon-frame-forerun 的姊妹镜", "duration": "描框 ~0.5s + 旋转&同时贴落 ~2.5s + 落定 ~1s；全段 ~4.7s（140f，旋转到 128f 收住后留落定）", "energy": "中高（一次性的大动作，落定即静）", "intention": "neon-frame-forerun 的孪生变体：同样框先行、内容后落，但镜头 不是固定的——从页面左侧视角连续弧线旋转到右侧视角，旋转进行 的同时全部组件从空中贴落。命门是**同时贴合**：所有组件和文字 同帧起落、同帧贴合、软影同步消失——这是\"整体登场\"的语法 （判例：错峰版被裁\"应该是所有组件和文字同时从空中往下贴合\"）。 错峰贴落属于巡礼镜（graze-face-tour），一页一次性亮相 必须齐落，节奏语义不能混用。", "source": "references/shots/ui-entrance/neon-frame-orbit-drop.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "neon-frame-orbit-drop", "label": "neon-frame-orbit-drop", "description": "霓虹框先行描框后，镜头绕页面左→右弧线旋转，页面全部组件/文字**同帧**从空中往下贴合（同形软影同步收敛）——整体登场式的框内安放", "media": {"url": "./media/neon-frame-orbit-drop.mp4?v=1790980736835", "type": "mp4"}}], "sourceUrl": "./source/neon-frame-orbit-drop.md", "category": "ui-entrance", "tags": ["ui-entrance", "effects", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "neon-triple-marquee", "summary": "三行对向霓虹跑马灯 recap——三连词空心霓虹灯管巨字上中下排满一面斜拍的砖墙，奇偶行反向匀速无限横滚，三行按 1/3 相位轮流点亮，结尾逐行断电", "use": "片尾主题词复读机段落；三连词口号的\"余韵\"拍法；音乐段无旁白铺陈", "duration": "4–5s（demo 150f：18f 逐行点火上电 + 循环体 + 18f 逐行断电 + 8f 熄灯 hold）", "energy": "中高（持续流动 + 逐行脉冲，无瞬时冲击）", "intention": "一行 marquee 只是网页装饰；三行叠起来、奇偶反向、再让亮度按相位轮流 走，就成了\"主题词在观众眼前列队巡游\"。命门是**明暗轮唱**：任一时刻 只有一行是霓虹主角，其余压暗成细描边背景——三行全亮是灯牌事故， 轮流亮才是 recap。反向对滚制造\"包围感\"：上下行向右、中行向左， 视线被夹在中间，词从两侧源源不断流过，读作\"这三个词说不完\"。", "source": "references/shots/outro/neon-triple-marquee.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "neon-triple-marquee", "label": "neon-triple-marquee", "description": "三行对向霓虹跑马灯 recap——三连词空心霓虹灯管巨字上中下排满一面斜拍的砖墙，奇偶行反向匀速无限横滚，三行按 1/3 相位轮流点亮，结尾逐行断电", "media": {"url": "./media/neon-triple-marquee.mp4?v=1790980736836", "type": "mp4"}}], "sourceUrl": "./source/neon-triple-marquee.md", "category": "outro", "tags": ["outro", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "orbit-ring-title-open", "summary": "石墨暗场上八张 16:9 暗色内容卡按 45° 均布在 720×380 椭圆上匀速公转（卡身永不倾斜，纵深只由 sin θ 给出 ±12% 缩放、z 序与远处压暗失焦），环撑开期间卡内容冻结首帧、f24 之后八张一起开播；居中两级标题逐字解糊下沉落定，关键词到位那一刻荧光马克块自左横扫铺满、扫过处字反白为墨，mono 副行随后浮出；可选末段整行失焦淡出、环继续转着交棒下一镜", "use": "开场第一镜 = 「这个产品有一整套东西」；素材库/模板库/功能矩阵/案例集的门面拍；需要用真实运动的产品画面托住一句主张，而不是把截图摆成静态九宫格", "duration": "150f（5s@30fps；马克块 f64 落定后 2.9s 稳态巡回 + 极缓推近；开 HANDOFF_EXIT 时 f118 起退场交棒）", "energy": "中（唯一的持续运动是匀速公转，全片只有马克块横扫一次冲击）", "intention": "开场想说\"我们有一整套东西\"，最常见的做法是把截图排成网格——但网格是静止的，观众 读到的是\"一堆图片\"，不是\"一套会动的产品\"。这张卡把陈列改成**环形巡回**：八张卡沿 椭圆匀速公转，永远有卡在进画、有卡在出画，画面自带\"还有更多\"的暗示，而标题稳稳 钉在正中间不受影响。 关键的取舍是**卡内容要真的在播**。静态截图上环，观众只会认出\"轮播图\"；卡里跑着真 动效，同一个环立刻变成\"产品在工作\"。但八张卡同时开播会八个动效抢戏，谁也读不进去 ——所以入场期把卡内容**冻结在首帧**，等环撑开、标题起手之后再统一开播。观众的注意 力顺序因此是：先认出这是一圈产品画面 → 读标题 → 才注意到卡里都在动。", "source": "references/shots/opening/orbit-ring-title-open.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "orbit-ring-title-open", "label": "orbit-ring-title-open", "description": "石墨暗场上八张 16:9 暗色内容卡按 45° 均布在 720×380 椭圆上匀速公转（卡身永不倾斜，纵深只由 sin θ 给出 ±12% 缩放、z 序与远处压暗失焦），环撑开期间卡内容冻结首帧、f24 之后八张一起开播；居中两级标题逐字解糊下沉落定，关键词到位那一刻荧光马克块自左横扫铺满、扫过处字反白为墨，mono 副行随后浮出；可选末段整行失焦淡出、环继续转着交棒下一镜", "media": {"url": "./media/orbit-ring-title-open.mp4?v=1790980736837", "type": "mp4"}}], "sourceUrl": "./source/orbit-ring-title-open.md", "category": "opening", "tags": ["opening", "ui-entrance"], "addedAt": "2026-09-01T15:59:12.000Z"}, {"name": "outline-word-fill", "summary": "空心词（细暖灰描边、500 字重）从 3.2 倍急缓收缩落位，虚线大圆随后从 2.8 倍收到字周围并缓慢自转，左右水平虚线从画框边缘内伸；描边先微微增亮，实心白热字在一帧内硬切点亮，一闪辉光即定格", "use": "单词式利益点/口号的重锤一拍；节奏卡点上的\"钉子\"镜；深底品牌片的强调帧", "duration": "约 3.0s（90f@30fps，短促单拍 + 36f 落定）", "energy": "高（3.2 倍收缩 + 瞬时点亮，短时高冲击）", "intention": "一个词要打成钉子，靠的不是慢慢淡入而是**两次落定**：先是巨大空心字 急速收缩到位（这是尺寸的落定），再是描边在一帧内变实心白（这是质感的 落定）。中间那 1.5s 的虚线圆收缩与水平虚线内伸是\"瞄准\"过程——技术 制图语汇，让点亮那一下读作\"确认\"。填充**必须是瞬时**的：慢扫填充会把 钉子变成缓慢的美化动画。", "source": "references/shots/typography/outline-word-fill.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "outline-word-fill", "label": "outline-word-fill", "description": "空心词（细暖灰描边、500 字重）从 3.2 倍急缓收缩落位，虚线大圆随后从 2.8 倍收到字周围并缓慢自转，左右水平虚线从画框边缘内伸；描边先微微增亮，实心白热字在一帧内硬切点亮，一闪辉光即定格", "media": {"url": "./media/outline-word-fill.mp4?v=1790980736838", "type": "mp4"}}], "sourceUrl": "./source/outline-word-fill.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "outro-group-photo-launch", "summary": "全片元素从四面八方飞来围住字标合影，crane 落机位+舞台光+金尘做成发布会收场", "use": "outro/品牌收尾；多功能产品的\"全家福\"式终镜", "duration": "约 4.8s（145f）", "energy": "峰值（全片最高点）", "intention": "把看过的每个功能各抽一个代表元素叫回来合影，字标压轴登场——观众离场前最后记住的是\"这些东西属于同一个产品\"。规格必须是发布会级：能量推到全片最高。", "source": "references/shots/outro/outro-group-photo-launch.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "outro-group-photo-launch", "label": "outro-group-photo-launch", "description": "全片元素从四面八方飞来围住字标合影，crane 落机位+舞台光+金尘做成发布会收场", "media": {"url": "./media/outro-group-photo-launch.mp4?v=1790980736839", "type": "mp4"}}], "sourceUrl": "./source/outro-group-photo-launch.md", "category": "outro", "tags": ["outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "overhead-camera-moves", "summary": "俯拍揭示两式——tilt-reveal 俯仰抬正揭示、overhead-tabletop-drop 桌面卡阵横滑骤降扎入", "use": "用\"俯仰角\"讲故事的开场/转场：单页 establishing 用 A，多页巡视择一扎入用 B", "duration": "A 120f（4s）/ B 140f（4.7s）", "energy": "A 中 / B 中高", "intention": "库内俯拍视角一直空缺——crane-rise 是\"平移+缩放\"的升起（俯仰角 不动），space-camera C 式 drone-dive 是俯冲降落一镜到底；这两式让 **俯仰角本身讲故事**：A 是揭示——整页 rotateX 平躺、开场只见远端上缘 一条发光的透视窄带（像天际线上的第一道光），机位\"抬头\"回正，内容一排排 涌入视野，像掀开桌上的图纸；B 是选择——三张页面卡平躺成桌面卡阵，相机俯拍横向滑过依次 掠过（韦斯·安德森 tabletop），滑到目标页猛地俯冲扎入、抬正成满屏， \"巡视一圈，就选这张\"。选型：单页开场用 A，多页转场/开场用 B。", "source": "references/shots/camera/overhead-camera-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "tilt-reveal", "label": "tilt-reveal", "description": "perspective 容器内整页 rotateX -80° 平躺，~43f 抬正，rotateX/scale/translateY 共用 out-cubic，末端轻过冲", "use": "开场 establishing；单主体", "media": {"url": "./media/tilt-reveal.mp4?v=1790980736840", "type": "mp4"}}, {"key": "overhead-tabletop-drop", "label": "overhead-tabletop-drop", "description": "卡阵平躺 rotateX 62°，pan 段只动 translateX 横滑掠过，drop 段角度/缩放/位移三通道同跑扎入落版", "use": "多页巡视后择一；转场/开场两用", "media": {"url": "./media/overhead-tabletop-drop.mp4?v=1790980736841", "type": "mp4"}}], "sourceUrl": "./source/overhead-camera-moves.md", "category": "camera", "tags": ["camera", "opening", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "page-turn-transitions", "summary": "整页体块转场——barn-door-split 对开门裂幕（旧页裂两半滑出、新页迎上）", "use": "章节级换页：新旧交替的两个大段落之间的\"翻篇\"仪式；与 shot-transitions 系（镜头交棒）分工——那是\"航拍机移过去\"，这是\"页面自己是实体\"", "duration": "单式 150f（前态建立 30–40f + 转场 24–40f + 跟随与收尾 ≥70f），约 5.0s", "energy": "中高", "intention": "shot-transitions 三式和 transition-travel/hidden-cut 都把页面当\"场景\" ——相机在场景间移动。本卡把页面当**实体**：它有厚度、有重量、会 裂开。体块隐喻的仪式感更强，适合章节级大换页（功能 A 讲完→功能 B） 而非镜头级小交棒。对开门是\"旧的让位\"——旧页从正中撕开滑走、新页 从底下迎上来，暗示取代关系，专管新旧交替。", "source": "references/shots/transition/page-turn-transitions.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "barn-door-split", "label": "barn-door-split", "description": "整页体块转场——barn-door-split 对开门裂幕（旧页裂两半滑出、新页迎上）", "use": "新旧交替：改版前后、方案 A→方案 B", "media": {"url": "./media/barn-door-split.mp4?v=1790980736842", "type": "mp4"}}], "sourceUrl": "./source/page-turn-transitions.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "page-waterfall-wall", "summary": "页面瀑布墙——真实页面截图切成 3–4 列在 3D 后仰墙面上差速反向无限滚动，视差 + 镜头缓推做\"内容多到流不完\"的一览", "use": "\"多页面/多功能/多模板\"体量感段落；montage 中段铺陈或 intro 后的产品广度镜头", "duration": "4–6s（无限循环体，时长由段落需要裁）", "energy": "中（流动陈列型）", "intention": "流动式一览：让观众在几秒内\"看到很多页面流过\"，读感是体量而非细节。 与 outro-group-photo-launch 分工：那是**聚拢式**一览（元素飞来围住 字标定格合影，语义\"属于同一产品\"），本卡是**流动式**一览（内容持续 流过不定格，语义\"还有很多没给你看完\"）。 与 wall-reveal-moves 分工：那是整墙**入场动作**，本卡是墙的**持续状态**， 可用那卡入场后交棒本卡续流。", "source": "references/shots/ui-entrance/page-waterfall-wall.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "page-waterfall-wall", "label": "page-waterfall-wall", "description": "页面瀑布墙——真实页面截图切成 3–4 列在 3D 后仰墙面上差速反向无限滚动，视差 + 镜头缓推做\"内容多到流不完\"的一览", "media": {"url": "./media/page-waterfall-wall.mp4?v=1790980736843", "type": "mp4"}}], "sourceUrl": "./source/page-waterfall-wall.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "panel-grid-moves", "summary": "分格节奏——comic-panel-split 漫画斜格劈出同一主体的三个机位，咔咔咔三格定格后末格斜边吃屏成海报", "use": "把\"格子\"当节奏器：同主体多机位定格并列，逐格踩拍劈出；吃拍点", "duration": "156f ≈5.2s（全屏侧拍 20f + 三刀分格定格 + 吃屏 + 海报 hold）", "energy": "中高", "intention": "与 wall-reveal-moves 的区别是本卡的定位锚：那是\"整墙怎么入场\" （一次性揭示），这是\"格子怎么当节奏器\"——分格发生在节拍上，格变即鼓点。 A 是并：画面被三刀斜缝咔咔劈开，同一产品三种机位同时定格， 停一拍后末格斜边扫过吃掉全屏——Scott Pilgrim 的分屏语言。 适合单品多视角（demo：一支刻着 video-shotcraft 的定焦镜头，三格旁白框按 「Shot 01 / 02 / 03」编号，吃屏后落成「Craft the shot.」海报）。", "source": "references/shots/rhythm/panel-grid-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "comic-panel-split", "label": "comic-panel-split", "description": "分格节奏——comic-panel-split 漫画斜格劈出同一主体的三个机位，咔咔咔三格定格后末格斜边吃屏成海报", "use": "同一主体多视角并列；漫画感段落", "media": {"url": "./media/comic-panel-split.mp4?v=1790980736844", "type": "mp4"}}], "sourceUrl": "./source/panel-grid-moves.md", "category": "rhythm", "tags": ["rhythm", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "paper-title-card", "summary": "一句话逐词压印上纸、一个词标强调色斜体、短划线收束", "use": "章节转场/价值主张字卡；重要功能出场前的引导卡；全片呼吸位", "duration": "1.7–1.8s（50–55f）", "energy": "低（呼吸位，隔开两段高能镜头）", "intention": "在两段产品画面之间给观众一句话的喘息：说清\"接下来看什么、它值什么\"。letterpress 压印质感让字卡与纸墨风格的产品画面同属一个世界。", "source": "references/shots/typography/paper-title-card.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "paper-title-card", "label": "paper-title-card", "description": "一句话逐词压印上纸、一个词标强调色斜体、短划线收束", "media": {"url": "./media/paper-title-card.mp4?v=1790980736845", "type": "mp4"}}], "sourceUrl": "./source/paper-title-card.md", "category": "typography", "tags": ["typography", "transition", "rhythm"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "picker-carousel-feature-cycle", "summary": "移动端风竖向选择器——焦点药丸不动、内容穿过它，每项带明显 outQuint 减速吸附后完全静止，按到中心距离分层控制透明度/字号/灰度，落定时药丸做 scaleY 极轻呼吸", "use": "逐个念出功能名/场景名的列表镜头；\"选一个\"的交互演示；移动端产品的 picker 类控件展示", "duration": "约3.6s（108f@30fps）", "energy": "中（每一次吸附都是一个节拍点，5 拍匀速推进）", "intention": "把\"选择\"这件事的物理感做出来：焦点框是固定的，是内容在滚动并被吸住。 每项停下后必须**真的静止几帧**——连续滚动读作 loading 动画，停顿才读作 \"这一项被选中了\"。距离衰减（透明度 + 字号 + 灰度三通道同时衰减）是让 观众视线始终锁在中间那一行的唯一手段。", "source": "references/shots/interaction/picker-carousel-feature-cycle.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "picker-carousel-feature-cycle", "label": "picker-carousel-feature-cycle", "description": "移动端风竖向选择器——焦点药丸不动、内容穿过它，每项带明显 outQuint 减速吸附后完全静止，按到中心距离分层控制透明度/字号/灰度，落定时药丸做 scaleY 极轻呼吸", "media": {"url": "./media/picker-carousel-feature-cycle.mp4?v=1790980736846", "type": "mp4"}}], "sourceUrl": "./source/picker-carousel-feature-cycle.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "pill-chip-slot-cycle-handled", "summary": "白底句式 \"Your `chip` Handled\" 里深色胶囊内词竖向滚轮轮换，胶囊宽度按预量文本宽插值平滑伸缩、两侧文字被自然挤开收拢，胶囊上下露出 13% 透明度的灰色幽灵项", "use": "\"我们替你搞定 ___\" 这类句式卖点；SaaS 功能列举的一句话收口；浅底品牌片主视觉一拍", "duration": "约 5.0s（150f@30fps：静置 → 3 次切换（0.25/0.47/0.69）→ 尾部静置）", "energy": "中（三拍稳定节拍，宽度伸缩是唯一的连续运动）", "intention": "词槽轮换有两派：让句子躲开变化（宽度固定的滚轮），或者让句子**接受** 变化（胶囊撑宽、两侧文字被挤开）。这卡是后者，代价是必须把宽度算准， 回报是句子读起来活的——\"Your\" 和 \"Handled\" 被推着走，观众感到胶囊里 的词有分量。上下露出的灰色幽灵项是第二个记号：它明示\"这是个可以滚的 列表\"，让观众预期还有下一个词。", "source": "references/shots/typography/pill-chip-slot-cycle-handled.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "pill-chip-slot-cycle-handled", "label": "pill-chip-slot-cycle-handled", "description": "白底句式 \"Your `chip` Handled\" 里深色胶囊内词竖向滚轮轮换，胶囊宽度按预量文本宽插值平滑伸缩、两侧文字被自然挤开收拢，胶囊上下露出 13% 透明度的灰色幽灵项", "media": {"url": "./media/pill-chip-slot-cycle-handled.mp4?v=1790980736847", "type": "mp4"}}], "sourceUrl": "./source/pill-chip-slot-cycle-handled.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "pill-slot-cycle", "summary": "句中词槽轮换——固定句干钉死不动，句尾 pill 徽章每 ~0.7s 老虎机滚一格（旧的上飞加速淡出、新的从下带模糊滑入），连换 N 个功能词后落成完整句子收束", "use": "\"功能列举\"类文案的最优雅解法（比逐条列表快、比字符级滚动有语义）；一句话卖点 + 多个动词短语的段落", "duration": "入场 12f + 每拍 21f × 词数 + 收束 14f + hold；6 词约 6.7s（demo 200f，含 48f 完整句 hold）", "energy": "中（稳定节拍器，无峰值）", "intention": "罗列六个功能，列表要六行、逐条淡入要六拍还占满屏。词槽轮换把它们 塞进**一句话的一个槽位**里：句干 \"One skill to ___\"（demo 讲 video-shotcraft：Storyboard it → Capture the page → Move the camera → Cut on the beat → Design the sound → Render the film）是承诺，槽里 滚过的每个 pill 是证据，最后 pill 飞走、\"do it all.\" 落位——证据 列举完毕，结论盖章。结构自带三幕：承诺→列举→收束。命门是句干 **纹丝不动**：观众的眼睛全程钉在槽位上，句干一晃列举感就散。", "source": "references/shots/typography/pill-slot-cycle.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "pill-slot-cycle", "label": "pill-slot-cycle", "description": "句中词槽轮换——固定句干钉死不动，句尾 pill 徽章每 ~0.7s 老虎机滚一格（旧的上飞加速淡出、新的从下带模糊滑入），连换 N 个功能词后落成完整句子收束", "media": {"url": "./media/pill-slot-cycle.mp4?v=1790980736848", "type": "mp4"}}], "sourceUrl": "./source/pill-slot-cycle.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "print-texture-transitions", "summary": "印刷质感转场——ink-bleed-reveal 墨渗揭示（须状渗边洇开吃掉旧景）", "use": "换景接缝的纸墨审美款；与交棒三式/穿越式并列的第三族——\"介质显影\"型转场", "duration": "4–4.5s（洇开段 55–80f + 静止收尾 ≥30f）", "energy": "中（渐进显形，无冲击拍）", "intention": "转场语言已有交棒（shot-transitions 三式）和穿越（transition-travel） ，都是空间/光学隐喻。本式开第三族：**介质隐喻**——新画面不是\"到来\" 而是\"印染\"出来的，直接调用库内纸墨审美的物理想象：像一滴墨落在 宣纸上洇开吃掉旧景，有机、书写感。天然亲和 paper/ink 调性的片子， 是 light-leak-burn（强调色漏光）之外的另一个\"介质系\"接缝选择。", "source": "references/shots/transition/print-texture-transitions.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "ink-bleed-reveal", "label": "ink-bleed-reveal 墨渗揭示", "description": "印刷质感转场——ink-bleed-reveal 墨渗揭示（须状渗边洇开吃掉旧景）", "use": "旧景→新景替换；书写感、叙事调性", "media": {"url": "./media/ink-bleed-reveal.mp4?v=1790980736849", "type": "mp4"}}], "sourceUrl": "./source/print-texture-transitions.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "product-card-progressive-assemble", "summary": "详情卡像被逐字段抓取般自建——一枚\"填充光标\"领先跳格，图→标题→分类 pill 依次 pop→原价出现后被划线降级、强调色新价 spring 跳出→正文逐行揭示且高亮块由左向右刷过→色卡点亮→按钮填满，整卡全程极慢 scale 前推", "use": "商品/条目详情页的能力展示；\"结构化抽取\"\"自动填充\"\"数据自己长出来\"类叙事的主镜头", "duration": "约 5.7s（172f@30fps）", "energy": "中（连续小事件密集排布，无单点爆发；靠前推保持推进感）", "intention": "一张详情卡直接淡入，观众只看到\"有一张卡\"。逐字段落位则把卡变成一份**正在被填写的 表单**：每个字段各自到位，观众的注意力被牵着走一遍卡的信息结构——图在哪、标题在哪、 价格在哪、正文重点在哪。价格划线降级是全片唯一的语义事件（不是\"出现\"而是\"改变\"）， 所以它被安排在中段最显眼的位置。", "source": "references/shots/ui-entrance/product-card-progressive-assemble.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "product-card-progressive-assemble", "label": "product-card-progressive-assemble", "description": "详情卡像被逐字段抓取般自建——一枚\"填充光标\"领先跳格，图→标题→分类 pill 依次 pop→原价出现后被划线降级、强调色新价 spring 跳出→正文逐行揭示且高亮块由左向右刷过→色卡点亮→按钮填满，整卡全程极慢 scale 前推", "media": {"url": "./media/product-card-progressive-assemble.mp4?v=1790980736850", "type": "mp4"}}], "sourceUrl": "./source/product-card-progressive-assemble.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "quad-split-parallel-scenes", "summary": "画面硬切 2×2 四宫格，四个象限并行跑各自的微场景（打字、急推、逐词、交互链），关键节拍错开 3–6 帧制造信息轰炸", "use": "节奏段\"功能很多、同时发生\"的蒙太奇拍；预告片中段的密度峰值", "duration": "90f（3s@30fps：0–62f 并行轰炸 + 28f 终态 hold，全程无转场）", "energy": "高（四线并行 + 错拍冲击，标准的 BGM 副歌位）", "intention": "用并行密度替代顺序展示：四件事同时在眼前发生，观众来不及逐一细读，但每 3–6 帧就有一个象限\"动一下\"——扫视节奏被牢牢钉住。这是手法卡：格内内容全部可替换，错拍编排才是配方。", "source": "references/shots/rhythm/quad-split-parallel-scenes.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "quad-split-parallel-scenes", "label": "quad-split-parallel-scenes", "description": "画面硬切 2×2 四宫格，四个象限并行跑各自的微场景（打字、急推、逐词、交互链），关键节拍错开 3–6 帧制造信息轰炸", "media": {"url": "./media/quad-split-parallel-scenes.mp4?v=1790980736851", "type": "mp4"}}], "sourceUrl": "./source/quad-split-parallel-scenes.md", "category": "rhythm", "tags": ["rhythm"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "radial-ripple-phone-chips", "summary": "暖沙底四层同心圆错相呼吸如水波，中央手机 mockup 屏内 feed 自动缓滚，两侧白色 chip 先后 spring pop 入场并悬浮", "use": "移动端产品的\"这就是它\"定格镜头；功能点分列两侧的介绍段；片头/片尾的产品全景", "duration": "约5.6s（168f@30fps）", "energy": "低（安静、有呼吸感，靠同心圆的持续起伏撑住不冷场）", "intention": "用最少的动作把手机放在画面正中并让它\"活着\"：同心圆负责氛围呼吸， 屏内自动滚屏负责证明\"里面有内容在跑\"，两侧 chip 负责点出功能名。 三层动作各自极慢，叠起来才不会显得静止——这是产品定格镜头的标准配法。", "source": "references/shots/effects/radial-ripple-phone-chips.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "radial-ripple-phone-chips", "label": "radial-ripple-phone-chips", "description": "暖沙底四层同心圆错相呼吸如水波，中央手机 mockup 屏内 feed 自动缓滚，两侧白色 chip 先后 spring pop 入场并悬浮", "media": {"url": "./media/radial-ripple-phone-chips.mp4?v=1790980736852", "type": "mp4"}}], "sourceUrl": "./source/radial-ripple-phone-chips.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "radial-wave", "summary": "17×9 圆点阵列按到波源的欧氏距离错峰点亮，每点 scale 过冲到 1.5 再落回常亮，第一道波扫完后第二道亮蓝脉冲从外圈反向收拢回中心", "use": "产品/品牌开场的\"系统上电\"一拍；也用作数据网格、节点地图、覆盖范围类叙事的建立镜头", "duration": "约 3.8s（114f@30fps）", "energy": "中高（起手爆发一次，波前过后转为常亮低能量底子）", "intention": "把\"很多点同时存在\"这件静态事实，改写成\"能量从一个源头扩散到全体\"的动态事实。观众 看到的不是一张点阵图，而是一次通电：中心先亮，亮度像水波推过去，走完之后整张阵列 留在常亮态——为下一拍要放的内容铺好底。第二道反向波是回执，告诉观众这个系统会回应。", "source": "references/shots/ui-entrance/radial-wave.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "radial-wave", "label": "radial-wave", "description": "17×9 圆点阵列按到波源的欧氏距离错峰点亮，每点 scale 过冲到 1.5 再落回常亮，第一道波扫完后第二道亮蓝脉冲从外圈反向收拢回中心", "media": {"url": "./media/radial-wave.mp4?v=1790980736853", "type": "mp4"}}], "sourceUrl": "./source/radial-wave.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "research-card-stack-scroll", "summary": "深色论文卡每 12 帧一张沿右下轴线飞入中心叠压，落位带 1 帧压缩，只有最上一张全清晰渲染标题+作者+摘要，下方卡按堆积深度递增模糊变暗只露标题条，背景横向 grid 同步下移做速度参照", "use": "\"读了大量资料/处理了海量文档\"的量级交代；研究类、检索类、批处理类产品的能力镜头", "duration": "约 4.8s（144f@30fps）", "energy": "中高（匀速高频，无爆发但持续压迫）", "intention": "要说的是\"数量\"，但一次给 13 张卡会读成一堵墙。改成流水线：卡一张一张进，每张都被 读过（最上一张永远是全文渲染的那张），读完就沉进堆里变模糊。观众感受到的是持续不断 的吞吐量，而不是一个静态的堆。背景 grid 同速下移是速度参照——没有它，堆积会读作 \"卡在原地缩小\"。", "source": "references/shots/ui-entrance/research-card-stack-scroll.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "research-card-stack-scroll", "label": "research-card-stack-scroll", "description": "深色论文卡每 12 帧一张沿右下轴线飞入中心叠压，落位带 1 帧压缩，只有最上一张全清晰渲染标题+作者+摘要，下方卡按堆积深度递增模糊变暗只露标题条，背景横向 grid 同步下移做速度参照", "media": {"url": "./media/research-card-stack-scroll.mp4?v=1790980736854", "type": "mp4"}}], "sourceUrl": "./source/research-card-stack-scroll.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "rhythm-interrupt-moves", "summary": "打断节奏——jump-cut-punch-in 三级跳切推近：同构图三次无补间硬跳放大，逐级逼近目标", "use": "用\"打断连续性\"本身当节奏器：顿挫推近（A）；与 beat-cut-moves（切点排布）互补", "duration": "A 135f ≈4.5s", "energy": "A 中", "intention": "库内节奏卡管的都是\"怎么切、切多密\"；本卡管**怎么断**——观众预期 连续，你偏打断，打断方式即表达：A 是空间断——同构图三次无补间跳大 （1x→1.6x→2.6x），戈达尔跳切的顿挫，比连续推近更有\"看这里、再近点、 就是它\"的指令感。适合强制聚焦指标。", "source": "references/shots/rhythm/rhythm-interrupt-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "jump-cut-punch-in", "label": "jump-cut-punch-in", "description": "打断节奏——jump-cut-punch-in 三级跳切推近：同构图三次无补间硬跳放大，逐级逼近目标", "use": "逐级逼近核心指标；纪录片式盯住", "media": {"url": "./media/jump-cut-punch-in.mp4?v=1790980736855", "type": "mp4"}}], "sourceUrl": "./source/rhythm-interrupt-moves.md", "category": "rhythm", "tags": ["rhythm"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "riso-print-hits", "summary": "套印错位冲击帧——riso-misregistration-hit 单发：标题撞停瞬间裂成双色 riso 印版，抖两下\"啪\"地套准", "use": "标题/卡片的命中强调，纸墨审美版的\"故障闪\"；全片 1–2 次的单发高潮", "duration": "4s（120f，单发）", "energy": "高", "intention": "RGB 色散故障闪（impact-feedback C 式的一部分）是荧光屏语言，与纸墨 调性相克。这张卡给出印刷版平替：元素裂成两份单色 riso 印版（demo：荧光粉 × 蓝； multiply 油墨感而非 screen 荧光感，两版套准时叠成深色墨）， 像 risograph 没对准版，抖几下 \"啪\"地套准——同样的冲击力，介质想象完全换成纸上油墨。单发： 撞停瞬间裂版、震荡衰减、硬切套准，给一次命中盖章。demo 是一张 video-shotcraft 的 双色 riso 宣传海报（「CRAFT IT / LOUD.」+ 三栏卖点，圆章中心是单色版镜刻标志）。", "source": "references/shots/effects/riso-print-hits.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "misregistration-hit", "label": "misregistration-hit 单发", "description": "套印错位冲击帧——riso-misregistration-hit 单发：标题撞停瞬间裂成双色 riso 印版，抖两下\"啪\"地套准", "use": "全片 1-2 次的命中盖章；标题/大字的到位一瞬", "media": {"url": "./media/misregistration-hit.mp4?v=1790980736856", "type": "mp4"}}], "sourceUrl": "./source/riso-print-hits.md", "category": "effects", "tags": ["effects", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "row-embed", "summary": "内容行像卡片一样从空中降下、rotateX 收平、嵌入瞬间底边亮一道强调色的缝", "use": "\"结构化数据长进页面\"的详情页/列表镜头；行级内容的批量入场", "duration": "约 2s（12–68f）", "energy": "中", "intention": "详情页的行不是\"显示出来\"而是\"长进去\"——每一行从空中降下并严丝合缝嵌入页面布局，嵌入瞬间的强调色缝是\"咔哒\"扣上的视觉拟音。", "source": "references/shots/ui-entrance/row-embed.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "row-embed", "label": "row-embed", "description": "内容行像卡片一样从空中降下、rotateX 收平、嵌入瞬间底边亮一道强调色的缝", "media": {"url": "./media/row-embed.mp4?v=1790980736857", "type": "mp4"}}], "sourceUrl": "./source/row-embed.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "sakuga-timing-shift", "summary": "一拍三转一拍一——元素先以每 3 帧一步的手翻书顿挫移动，高潮瞬间切成逐帧丝滑冲刺，帧率量化的突变本身就是看点", "use": "单元素的强调性位移（卡片入场、指标冲线）；需要\"手工感→高潮爆发\"反差的段落", "duration": "150f（5s）", "energy": "中高", "intention": "库内时间轴操纵已有 speed-ramp-freeze 的定格解冻与 hit-counter 的局部顿帧。 本卡是另一种——**改的不是速度是帧率本身**： 顿挫段驱动帧 q=floor(f/3)*3，元素每 3 帧才动一步（10fps 手翻书）， 切换帧起改用原始 f 逐帧驱动，丝滑冲刺。一拍三的钝与一拍一的滑 同屏对切，日式作画的拍数演出（shooting on 3s / on 1s）。顿挫段 不是低级感是手工感，切换点即高潮标记。", "source": "references/shots/rhythm/sakuga-timing-shift.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "sakuga-timing-shift", "label": "sakuga-timing-shift", "description": "一拍三转一拍一——元素先以每 3 帧一步的手翻书顿挫移动，高潮瞬间切成逐帧丝滑冲刺，帧率量化的突变本身就是看点", "media": {"url": "./media/sakuga-timing-shift.mp4?v=1790980736858", "type": "mp4"}}], "sourceUrl": "./source/sakuga-timing-shift.md", "category": "rhythm", "tags": ["rhythm", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "scan-bracket-sweep", "summary": "文档弹到中央，四角落下 L 形取景括号，一条扫描光带拖着渐变尾迹在文档上往复扫 5 趟——文档全程静止，只有光在读它", "use": "\"正在解析/校验这份内容\"的过程镜头；文档类产品的能力演示；上传→分析链路的中段", "duration": "约5.0s（150f@30fps）", "energy": "中低（机械、克制，节奏全在往复扫掠的呼吸上）", "intention": "让观众看懂\"这份东西正在被机器逐行读过\"。取景括号先把目标框住（宣布检查 对象），扫描光带再往复走完全篇（宣布检查过程）。命门是**文档本身完全静止**： 一旦文档也在动，观众就分不清是\"被检查\"还是\"在加载\"。", "source": "references/shots/effects/scan-bracket-sweep.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "scan-bracket-sweep", "label": "scan-bracket-sweep", "description": "文档弹到中央，四角落下 L 形取景括号，一条扫描光带拖着渐变尾迹在文档上往复扫 5 趟——文档全程静止，只有光在读它", "media": {"url": "./media/scan-bracket-sweep.mp4?v=1790980736859", "type": "mp4"}}], "sourceUrl": "./source/scan-bracket-sweep.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "scanline-annotate-focus", "summary": "一条扫描线自上而下匀速掠过已存在的页面，越过哪块区块的下缘，哪块就被四角取景框从外扩处弹簧收拢对准（一次过冲），随后贴出一枚逐字打出的机器标签，顶部状态行同步计数 00/06→06/06", "use": "\"AI 正在读你的页面/品牌\"的分析镜头；设计系统/品牌规范的拆解介绍；产品能力的自我说明段", "duration": "约5s（150f@30fps）", "energy": "中（机械冷静，节奏由扫描线匀速推动，标注是节拍点）", "intention": "把\"分析\"这件抽象事做成可见的因果链：扫描线走到哪，那块就被框住、被 命名。观众读的是\"机器的视线\"，所以扫描线必须匀速、标注必须严格滞后于 扫描线过境——**先扫到再弹框**，顺序一旦错乱就变成了预先编排的动画。", "source": "references/shots/effects/scanline-annotate-focus.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "scanline-annotate-focus", "label": "scanline-annotate-focus", "description": "一条扫描线自上而下匀速掠过已存在的页面，越过哪块区块的下缘，哪块就被四角取景框从外扩处弹簧收拢对准（一次过冲），随后贴出一枚逐字打出的机器标签，顶部状态行同步计数 00/06→06/06", "media": {"url": "./media/scanline-annotate-focus.mp4?v=1790980736860", "type": "mp4"}}], "sourceUrl": "./source/scanline-annotate-focus.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "scanline-assemble-flyin", "summary": "页面开场是一张只有网格与虚线槽位的蓝图画板，一条亮扫描线自上而下掠过；扫到每个槽位，该处组件就从画外飞入过冲贴合，带方向性残影模糊与落位咬合角标——扫完整页恰好装配完成", "use": "\"页面自己生成\"的开场；AI 建站/自动排版类产品的核心演示；从空白到成品的能力叙事", "duration": "约5.2s（156f@30fps）", "energy": "中高（扫描线是稳的，但每次组件飞入都是一个爆点，密度递进）", "intention": "让\"页面被生成\"这件事有一个可信的施工顺序：扫描线是施工进度条， 组件从画外飞进来贴合是施工动作。关键是**扫完那一刻恰好装完最后一块** ——扫描线提前收工或组件拖尾都会让\"扫描驱动装配\"的因果关系散掉。", "source": "references/shots/effects/scanline-assemble-flyin.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "scanline-assemble-flyin", "label": "scanline-assemble-flyin", "description": "页面开场是一张只有网格与虚线槽位的蓝图画板，一条亮扫描线自上而下掠过；扫到每个槽位，该处组件就从画外飞入过冲贴合，带方向性残影模糊与落位咬合角标——扫完整页恰好装配完成", "media": {"url": "./media/scanline-assemble-flyin.mp4?v=1790980736861", "type": "mp4"}}], "sourceUrl": "./source/scanline-assemble-flyin.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "scroll-brake-moves", "summary": "长卷急刹两式——changelog-scroll-brake 基本款（高速长卷指数减速精准停位+目标抬升）与 brake-reticle-lock 组合款（急刹帧同帧准星咬合）", "use": "changelog/发布史/长列表段落：\"一直在发货，今天这条最大\"；要给停点更强打击感用 B", "duration": "A 4–5s / B 5s", "energy": "高开中收（速度对比型）", "intention": "Linear changelog 视频语法：一整年的更新日志作为长卷高速掠过 （糊成色带），指数减速精准急刹停在本次发布那条上，该条抬升离面 高亮、其余退暗——密度感讲\"一直在发货\"，急停讲\"今天这条最大\"。 B 是组合变异：急刹帧**同帧**四个 L 角标从画外飞入咬合锁定停点 条目——急刹的\"哐\"与咬合的\"咔\"叠在同一帧共振（组合命门： 角标起跳帧=列表首停帧，错开退化成两招并置）。", "source": "references/shots/data/scroll-brake-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "changelog-scroll-brake", "label": "changelog-scroll-brake", "description": "translateY 扫 ~2400px（out exp 指数减速 ~50f），blur 由帧间位移差分驱动（0-6px 自动清零）；停点行 scale 1.03 抬升+阴影+3px 描边，其余 opacity 退 0.38", "use": "changelog 段落基本款", "media": {"url": "./media/changelog-scroll-brake.mp4?v=1790980736862", "type": "mp4"}}, {"key": "brake-reticle-lock", "label": "brake-reticle-lock", "description": "滚动三段：sin-in 加速→cubic-out 猛减速冲过头 +30px→回弹落定；blur=v×0.12 封顶 24px；角标从 ±620/±320 画外 Easing.back(2.4) 飞入咬合，高亮 6f 内完成、标签 back(2.6) 弹出", "use": "停点需要更强打击感的高光段", "media": {"url": "./media/brake-reticle-lock.mp4?v=1790980736863", "type": "mp4"}}], "sourceUrl": "./source/scroll-brake-moves.md", "category": "data", "tags": ["data", "rhythm"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "segmented-thumb-hero", "summary": "分段控件 thumb 位移当主角特写——超大胶囊 segmented control 弹簧浮入，描边箭头光标画外滑入按下，白 thumb 8f ease-out 滑到另一段，到位瞬间新图标 spring 弹出、旧图标收起", "use": "\"模式切换/二选一\"功能的宣告镜头（demo 的 video-shotcraft Prompt→Film、Chat→Agent 式）；一个 UI 微交互撑一整镜的特写拍法", "duration": "~3.5s（demo 110f：浮入 18f + 光标 24f + 点击 + 滑动 8f + 图标弹出 + hold）", "energy": "中（微交互特写，精致不轰）", "intention": "产品切到新模式，通常拍法是整个界面换掉。本卡反着来：把 segmented control 放大到 1080px 宽拍特写，**thumb 那 8 帧位移本身就是叙事**—— \"我们从 A 走到了 B\"。没有任何页面上下文，控件即舞台。因果链完整： 光标滑入（有人来了）→ 按下+涟漪（做了决定）→ thumb 滑动（世界响应） → 新图标弹出（新身份确立）。四拍缺一不可，缺了光标就是 UI 自己在动， 缺了图标弹出就是切换没有奖励。", "source": "references/shots/interaction/segmented-thumb-hero.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "segmented-thumb-hero", "label": "segmented-thumb-hero", "description": "分段控件 thumb 位移当主角特写——超大胶囊 segmented control 弹簧浮入，描边箭头光标画外滑入按下，白 thumb 8f ease-out 滑到另一段，到位瞬间新图标 spring 弹出、旧图标收起", "media": {"url": "./media/segmented-thumb-hero.mp4?v=1790980736864", "type": "mp4"}}], "sourceUrl": "./source/segmented-thumb-hero.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "shot-transitions", "summary": "镜头交棒三式——推进流白、whip-pan 甩镜（急刹款）、mask-wipe 穿窗（纵深款），按能量落差与接缝语义选型", "use": "任何两镜衔接处（技法卡，分镜阶段排完镜头后逐个接缝选一式）", "duration": "n/a（技法卡；各式占用帧数见参数表，从相邻镜头预算里划）", "energy": "n/a（技法卡，不占能量位）", "intention": "库内各镜头卡只管自己的入场和收尾，镜与镜\"怎么接\"一直没有词汇—— 接缝裸切会把逐镜头攒出的电影感一次漏光。公认优秀的发布片 （Linear Releases/Agent，2026-07-11 抽帧逆向）全程没有一次裸切： 换景要么靠深度旅行、要么靠焦点接力、要么靠黑场字卡蓄力。本卡收三式： 白闪盖切、甩镜借糊帧换景、穿窗点进详情世界。", "source": "references/shots/transition/shot-transitions.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "flash-cut", "label": "推进流白 flash-cut", "description": "前镜相机推进，切点跨骑一层白闪盖住换页", "use": "交互穿透、能量相近的页面→页面（库内已有，收编）", "media": {"url": "./media/flash-cut.mp4?v=1784437314733", "type": "mp4"}}, {"key": "whip-pan", "label": "whip-pan 甩镜", "description": "机位一拍横甩到下一场景，中段运动模糊糊到不可辨，借糊帧换景", "use": "快节奏功能段连打（高能量→高能量的轻快款，比 B 式省帧提速）", "media": {"url": "./media/whip-pan.mp4?v=1790980736865", "type": "mp4"}}, {"key": "mask-wipe", "label": "mask-wipe 穿窗", "description": "页面内真实元素（卡片）放大成全屏窗口，新场景从窗内长出接管", "use": "语义化接缝：功能总览→该功能详情（\"点开这张卡进入它的世界\"）", "media": {"url": "./media/mask-wipe.mp4?v=1790980736866", "type": "mp4"}}], "sourceUrl": "./source/shot-transitions.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "slam-entrance-moves", "summary": "高能砸入三式——kanada-perspective-snap 金田透视急停、score-slam 比分砸落、impact-burst-kit 落点冲击套件（波及邻卡）", "use": "主角卡/KPI 卡的重拳入场；impact-feedback 管落位后的反馈，本卡管入场本身就是冲击", "duration": "单式动作段 6–22f + 冲击余波 ~16f + hold ≥45f（demo：A 120f / B 135f / C 140f）", "energy": "高", "intention": "库内入场词汇的力度上限一直是 deck-deal-flyin 的\"发牌\"——快但不重。 本卡补\"砸\"这一档，三种口味：A 是方向感——卡片带鱼眼级夸张透视贴着 镜头甩进来，\"啪\"地弹平，动漫金田流的潇洒；B 是重量感——KPI 卡从 镜头前 2.6 倍大小砸落，圆环+尘点+震屏三件套同帧起爆，体育比分弹窗 的分量；C 是传导感——B 的三件套之上，冲击波前沿扫过左右邻卡时把 它们可见地推开再弹回，\"这一下震到了邻居\"，一件事说清力量大小。 选型按叙事需要：告诉观众\"它来了\"用 A，\"它很重\"用 B，\"它震动了 全场\"用 C。", "source": "references/shots/effects/slam-entrance-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "kanada-perspective-snap", "label": "kanada-perspective-snap", "description": "perspective 300→1500px + rotate3d 58°→0 + scale 1.7→1 甩入 18f，末 4f 过冲 +5° 弹平，长斜影收正", "use": "单卡潇洒亮相；调性偏动漫/轻快", "media": {"url": "./media/kanada-perspective-snap.mp4?v=1790980736867", "type": "mp4"}}, {"key": "score-slam", "label": "score-slam", "description": "卡从 scale 2.5/rotate 5° 六帧 Easing.in(quad) 砸落，落点帧圆环扩散+尘点飞散+震屏同帧", "use": "KPI/比分类重磅数字登场", "media": {"url": "./media/score-slam.mp4?v=1790980736868", "type": "mp4"}}, {"key": "impact-burst-kit", "label": "impact-burst-kit", "description": "B 三件套 + 冲击波前沿按半径-距离精算扫过邻卡帧，邻卡外推 30px + rotate ±3° 阻尼弹回", "use": "页面上已有邻居时的\"全场震动\"", "media": {"url": "./media/impact-burst-kit.mp4?v=1790980736869", "type": "mp4"}}], "sourceUrl": "./source/slam-entrance-moves.md", "category": "effects", "tags": ["effects", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "space-camera-moves", "summary": "3D 空间化运镜两式——exploded-view 爆炸分解（构件沿 Z 炸开再合体）、drone-dive-landing 无人机俯冲降落", "use": "把平面页面当 3D 实体拍的高光段落；两式都是\"大动作\"，一支片合计 ≤2 次", "duration": "A 170f（5.7s，炸开-悬停-合体-收尾标题全程）；C 105f（3.5s，俯冲 69f + 落定 hold 36f）单向俯冲", "energy": "高", "intention": "depth-layer 卡是给平移加纵深——层在动、页面还是页面。这两式更进一步： 整页被当成一个 3D 实体，相机（或世界）绕着它做实拍级机动。两式叙事 语义各占一格：A 说\"看看它由什么组成\"（拆解展示，Apple 发布片语言）； C 说\"从全局俯瞰砸到主角\"（上帝视角一头扎进 hero 特写，全景→焦点）。", "source": "references/shots/camera/space-camera-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "exploded-view", "label": "exploded-view", "description": "整页 3D 倾斜后构件沿 Z 轴错峰炸开悬停，一拍后逆序合体震屏收口", "use": "架构/组成展示：\"这个产品里有什么\"；模块总览段", "media": {"url": "./media/exploded-view.mp4?v=1790980736870", "type": "mp4"}}, {"key": "drone-dive-landing", "label": "drone-dive-landing", "description": "近垂直俯角悬停 → 猛扎俯冲 → 气垫减速停在 hero 卡特写", "use": "开场定场→入题；全局地图砸进单点的章节启动", "media": {"url": "./media/drone-dive-landing.mp4?v=1790980736871", "type": "mp4"}}], "sourceUrl": "./source/space-camera-moves.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "speed-ramp-freeze", "summary": "帧号非线性 remap 的节奏手法——定格标注（流动→定格圈注→解冻）", "use": "卡片流/长横移中把一个重点\"停下给人看\"；教学解说、评审语境", "duration": "定格标注全程 158f（≈5.3s，定格段 67f ≥45f）", "energy": "中高（速度反差本身即energy beat）", "intention": "匀速流读作 PPT（R2），全程快流观众抓不住重点（R3）。定格标注在一条 运动里干脆停下来——马克笔圈出重点再走。技术根是帧号 remap（斜率即速率）， 语义是\"停课划重点\"。", "source": "references/shots/rhythm/speed-ramp-freeze.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "freeze-annotate", "label": "freeze-annotate", "description": "帧号非线性 remap 的节奏手法——定格标注（流动→定格圈注→解冻）", "media": {"url": "./media/freeze-annotate.mp4?v=1790980736872", "type": "mp4"}}], "sourceUrl": "./source/speed-ramp-freeze.md", "category": "rhythm", "tags": ["rhythm"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "spotlight-hero-card", "summary": "关灯的剧场里一束钨丝聚光（带体积光柱）扫过页面锁定一张卡，斜侧推进后卡片弹起悬浮、香槟色光束沿轮廓两圈、连同 3D 注记一起贴回原位", "use": "\"单一主角\"式产品开场；把一个核心对象（卡片/条目/模块）立成全片主角", "duration": "172f（约 5.7s；锁定 f34 → 触地 f142 → 30f 真静止 hold）", "energy": "中（质感最高的一镜，节奏慢而稳）", "intention": "开场只讲一件事：这一张卡就是产品的原子单位。聚光灯替观众做视线引导，弹起悬浮给它体积和重量，轮廓光束是\"扫描/检视\"的隐喻，最后贴回原位表示它属于这个页面。", "source": "references/shots/opening/spotlight-hero-card.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "spotlight-hero-card", "label": "spotlight-hero-card", "description": "关灯的剧场里一束钨丝聚光（带体积光柱）扫过页面锁定一张卡，斜侧推进后卡片弹起悬浮、香槟色光束沿轮廓两圈、连同 3D 注记一起贴回原位", "media": {"url": "./media/spotlight-hero-card.mp4?v=1790980736873", "type": "mp4"}}], "sourceUrl": "./source/spotlight-hero-card.md", "category": "opening", "tags": ["opening", "effects", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "spotlight-sweep-moves", "summary": "暗场聚光显影三式——A 醒睡扫过（光到即亮光走即暗）、B 贴边泛光横摇（紫光贴 UI 边缘渗入+聚光匀速右移）、C 角落匀速显影（径向聚光从角落匀速扩张点亮全屏）；黑场里\"光即叙事\"的 UI 展示", "use": "暗色调品牌片里逐个介绍 UI 面板/功能区；黑场开场把界面\"点亮\"登场；段落间光转场", "duration": "单式 3.5–4.5s；A/B 可串联成巡礼段", "energy": "中低（克制、神秘感，爆点在\"亮起\"瞬间）", "intention": "黑场里观众只能看见光给看的东西——聚光既是照明也是运镜和剪辑： 光到哪里哪里登场，光走即谢幕。三式共用\"贴边紫色辉光光线\"这个 身份元素（光线贴着 UI 边框/logo/顶边走，辉光要亮要糊，是光在 \"抚摸\"界面而不是描边动画）。命门是**匀速**：聚光的移动/扩张 严格 linear——缓动会让光有\"意图\"，匀速才读作探照灯的机械扫掠 （C 式判例：linear 但半径终值过大＝前 1/4 就饱和，观感照样不匀速）。", "source": "references/shots/effects/spotlight-sweep-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "glow-wake-sleep-panel", "label": "glow-wake-sleep-panel", "description": "醒睡扫过：radial 显影罩跟随光头从左向右匀速移动，贴顶边紫色光线三层辉光同行，经过 logo 描光、到右缘点亮竖直残光，尾段面板沉回黑暗", "use": "暗色调品牌片里介绍单个 UI 面板——有醒有睡的登场与谢幕", "media": {"url": "./media/glow-wake-sleep-panel.mp4?v=1790980736874", "type": "mp4"}}, {"key": "slide-spotlight-pan", "label": "slide-spotlight-pan", "description": "贴边泛光横摇：光线先绕左上角竖缘、转角后沿顶边横走，紫光晕染渗入 UI 顶部内侧；聚光头匀速右移显影 + 面板匀速左滑＝相机右摇感", "use": "横向巡礼宽面板/多列看板，逐段点亮功能区", "media": {"url": "./media/slide-spotlight-pan.mp4?v=1790980736875", "type": "mp4"}}, {"key": "corner-spotlight-reveal", "label": "corner-spotlight-reveal", "description": "角落匀速显影：左上角径向聚光半径严格 linear 扩张，照到显影照不到沉黑，最终全屏亮起——光即转场", "use": "黑场开场点亮界面登场；段落间光转场", "media": {"url": "./media/corner-spotlight-reveal.mp4?v=1790980736876", "type": "mp4"}}], "sourceUrl": "./source/spotlight-sweep-moves.md", "category": "effects", "tags": ["effects", "ui-entrance", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "steep-tilt-glide", "summary": "固定镜头下直立页面以 60° 强透视侧立（右近左远），页面自身沿其 3D 横面方向滑移掠过镜头（物动镜不动），滑移带速度重影、文字组件悬空贴落、由暗揭亮", "use": "长页面/多区块 UI 的炫技巡览（内容依次滑过固定机位）；暗场霓虹调性；与贴面运镜卡互补的\"侧掠\"机位", "duration": "4s（120f）单镜；页面越宽越可拉长", "energy": "中高（透视炫技+持续运动，但节奏是匀的）", "intention": "把页面立成一堵斜墙：镜头钉死不动，60° 强透视让右缘贴脸、左缘 消失在灭点，页面自己沿自身平面横向滑移——内容像列车车厢一样 依次掠过。命门是**物动镜不动**：perspective/origin/rotY 全程常数， 唯一动的量是页面局部 translateX——镜头一动语义就变成运镜炫技， 这里的戏是\"页面在自我展示\"。角度经三轮收敛为精确 60° （-45°\"不对\"→-53°\"再大一点\"→-60°选中）。", "source": "references/shots/camera/steep-tilt-glide.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "steep-tilt-glide", "label": "steep-tilt-glide", "description": "固定镜头下直立页面以 60° 强透视侧立（右近左远），页面自身沿其 3D 横面方向滑移掠过镜头（物动镜不动），滑移带速度重影、文字组件悬空贴落、由暗揭亮", "media": {"url": "./media/steep-tilt-glide.mp4?v=1790980736877", "type": "mp4"}}], "sourceUrl": "./source/steep-tilt-glide.md", "category": "camera", "tags": ["camera", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "stroke-segment-build", "summary": "断笔成字——标题拆成十几段互不相连的笔画乱序逐段点亮，前 70% 不可读，末段落位瞬间语义\"啪\"地成立", "use": "开场吊悬念的产品名/大数字揭晓；一支片 ≤1 次；与 type-assembly/draw-svg-trace 分工：那些是\"看着字被组装/描画\"，本卡是\"意义延迟揭晓\"", "duration": "165f（5.5s；揭晓 f105 后 hold 2s）", "energy": "低起中收（悬念型，落位帧是能量点）", "intention": "《异形》片头判例：标题不是被画出来的，是\"显影\"出来的——拆成离散 笔画段乱序点亮，观众前 70% 时间只看到神秘碎段，最后几段落位的瞬间 突然读出是什么字。\"认出的那一刻\"就是钩子，钩子的强度取决于 不可读期撑多久、钥匙段压多晚。", "source": "references/shots/opening/stroke-segment-build.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "stroke-segment-build", "label": "stroke-segment-build", "description": "断笔成字——标题拆成十几段互不相连的笔画乱序逐段点亮，前 70% 不可读，末段落位瞬间语义\"啪\"地成立", "media": {"url": "./media/stroke-segment-build.mp4?v=1790980736878", "type": "mp4"}}], "sourceUrl": "./source/stroke-segment-build.md", "category": "opening", "tags": ["opening", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "tear-streak-transitions", "summary": "撕裂转场——glitch-displace 噪声撕裂（16 横条错位抖动中硬切），数字故障语义的条带级撕裂", "use": "高能换页：数字故障/断裂语义；页面完整性不破、能量拉满的条带级撕裂", "duration": "前态 ≥40f + 撕裂 16–24f + 收尾 ≥40f，约 4.5s（135f）", "energy": "高", "intention": "本卡管**条带级撕裂**——页面被切成横条高速运动，但每条内容完整。 这是反复裁决划出的品味分界：碎块系转场三连否（doom-melt 竖条坠落、 pixel-dissolve 方块翻黑、facade-block 砖块翻飞全部淘汰），条带系过关。碎块读作\"页面被破坏\"，条带读作\"页面在高速 运动\"——完整性不破、能量却拉满。横向撕：条带左右错位抖动 + 双色剪影重影（RGB split 的克制版：同一页内容的两份单色剪影，只用画面强调色两色，±12px 错开）。 适用系统故障/瞬间跳变语义——demo 用它做\"发布控制台从 Rolling out 99% 跳到 is live\"的状态跳变。", "source": "references/shots/transition/tear-streak-transitions.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "glitch-displace", "label": "glitch-displace", "description": "撕裂转场——glitch-displace 噪声撕裂（16 横条错位抖动中硬切），数字故障语义的条带级撕裂", "use": "故障/断裂语义；高潮前的暴力换页", "media": {"url": "./media/glitch-displace.mp4?v=1790980736879", "type": "mp4"}}], "sourceUrl": "./source/tear-streak-transitions.md", "category": "transition", "tags": ["transition", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "tension-camera-moves", "summary": "情绪运镜两式——bullet-time 冻结环绕、pull-back 拉远孤立，相机替观众\"感受\"而非\"看\"", "use": "情绪节点（震撼/收束）的运镜语言；与 space-camera-moves 的\"炫技大动作\"互补——这两式动作小、情绪重", "duration": "单式 5–6s（150–170f）；全片合计 ≤2 式（各 ≤1 次）", "energy": "A 高 / B 低收", "intention": "space-camera-moves 三式是\"把页面当 3D 实体拍\"的高光炫技；这两式相反—— 动作本身克制，全部劲道在情绪语义上：A 说\"这一刻值得停下时间看\" （运动中的元素被冻住、相机绕行审视）；B 说\"最后只剩这一件事\" （后拉中周围逐层熄灭，孤悬一点收束全片）。两式各占一个情绪格， 是分镜阶段\"这一段观众该感到什么\"的直接词汇。", "source": "references/shots/camera/tension-camera-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "bullet-time-freeze-orbit", "label": "bullet-time-freeze-orbit 冻结环绕", "description": "图表生长到一半全冻住，相机绕悬停的 UI 平面 rotateY 扫 55° 再回，时间恢复接着长完", "use": "核心数据/图表的加冕时刻；\"值得停表看\"的一格", "media": {"url": "./media/bullet-time-freeze-orbit.mp4?v=1790980736880", "type": "mp4"}}, {"key": "pull-back-isolation", "label": "pull-back-isolation 拉远孤立", "description": "从发光主卡特写后拉，兄弟卡按距离错峰熄灭、背景沉黑，孤卡悬在暗场中央", "use": "结尾收束；\"全片只为这一个数字\"的谢幕", "media": {"url": "./media/pull-back-isolation.mp4?v=1790980736881", "type": "mp4"}}], "sourceUrl": "./source/tension-camera-moves.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "terminal-3d", "summary": "三个终端窗散布 3D 空间，相机窗间飞行、途中正弦拉远，每到一窗打字机敲命令、结果逐行滑出——命令执行的空间叙事流", "use": "开发者产品的 CLI/工作流演示：把\"三步命令\"拍成三站空间旅程", "duration": "约 8.2s（246f@30fps；三站各约 2–3s 停留 + 两段 30f 飞行）", "energy": "中（飞行给动感、打字给节奏，整体是沉稳的技术叙事；收在 ● READY 一记亮点）", "intention": "终端输出天生是\"平面滚动\"的反电影语言，这张卡把它空间化：每条命令占据空间中一个实体窗口，相机像穿过机房一样逐窗拜访。飞行途中的拉远让观众瞥见\"还有更多窗口\"——工作流的全貌感。", "source": "references/shots/camera/terminal-3d.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "terminal-3d", "label": "terminal-3d", "description": "三个终端窗散布 3D 空间，相机窗间飞行、途中正弦拉远，每到一窗打字机敲命令、结果逐行滑出——命令执行的空间叙事流", "media": {"url": "./media/terminal-3d.mp4?v=1790980736882", "type": "mp4"}}], "sourceUrl": "./source/terminal-3d.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "text-as-mask", "summary": "文字视频遮罩——瓷白舞台上切出超粗大标题字，字内部透出缓慢平移的暗色实时产品面板，结尾吸一口气后字形指数冲入放大 46 倍溢出、内部画面接管全屏", "use": "品牌词/口号与产品画面二合一的开场或章节卡；字是门、产品在门里", "duration": "165f（入场 18f + 字内漂移 78f + 吸气 8f + 冲入接管 24f + 落定/hold 37f）", "energy": "中高（漂移段沉稳，接管段一次爆发）", "intention": "标题和产品画面抢屏幕是老问题——先字后画慢，画上压字挤。这一式让 两者同体：字形就是遮罩，产品只透过笔画显形，观众同时读到词和画面 质感；结尾字形胀开溢出画幅，产品自然接管全屏——\"从品牌词走进产品\" 一条镜头说完，兼任章节转场（与 transition-travel A 字腔穿越同族： 那边是镜头钻进字腔，这边是字形自己胀开，前者相机动、后者门动）。", "source": "references/shots/opening/text-as-mask.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "text-as-mask", "label": "text-as-mask", "description": "文字视频遮罩——瓷白舞台上切出超粗大标题字，字内部透出缓慢平移的暗色实时产品面板，结尾吸一口气后字形指数冲入放大 46 倍溢出、内部画面接管全屏", "media": {"url": "./media/text-as-mask.mp4?v=1790980736883", "type": "mp4"}}], "sourceUrl": "./source/text-as-mask.md", "category": "opening", "tags": ["opening", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "text-column-converge", "summary": "双词对峙合拢——左\"NEW\"右特性词钉死在等屏边距两侧硬切轮换、全程零收缩，换到最后一词才唯一一次 ease-in-out 滑到居中咬合成短语，下方小字近乎硬切浮现；收尾揭晓型文字卡", "use": "特性清单收束到产品名/口号的段落（\"NEW × 一串特性 → NEW <产品名>\"式）；发布会式 recap、版本号揭晓", "duration": "轮换 7–16f/词 × 8–9 词 + 合拢 ~36f + 小字后静置；全段约 5–6s", "energy": "中低（机器节奏、小字规格清单气质，不是砸字）", "intention": "两词分踞左右像目录页对峙，观众以为只是轮换字幕；直到最后一词 停稳才发现左右其实是同一句话的两半——唯一一次连续合拢把整段 轮换追认为\"悬念铺垫\"。命门是**钉死**：轮换期两词位置一像素不动、 左右屏边距完全相等（原片实测 412 vs 413@1280），任何渐进收缩都会 提前剧透合拢、把揭晓稀释成进度条。合拢只许发生一次，且必须在 最后一词之后——这是收尾揭晓，不是持续动效。", "source": "references/shots/typography/text-column-converge.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "text-column-converge", "label": "text-column-converge", "description": "双词对峙合拢——左\"NEW\"右特性词钉死在等屏边距两侧硬切轮换、全程零收缩，换到最后一词才唯一一次 ease-in-out 滑到居中咬合成短语，下方小字近乎硬切浮现；收尾揭晓型文字卡", "media": {"url": "./media/text-column-converge.mp4?v=1790980736884", "type": "mp4"}}], "sourceUrl": "./source/text-column-converge.md", "category": "typography", "tags": ["typography", "outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "theme-switch-moves", "summary": "主题切换两式——theme-sweep 斜向扫场（边界扫过处就地换肤）与 palette-ripple 组合款（⌘K 面板收缩成点、涟漪从点荡开换肤）", "use": "深色模式/主题功能的叙事段落；同一 UI \"在你眼前变色\"而非切到新场景", "duration": "A 140f（4.7s）/ B 156f（5.2s）", "energy": "A 中 / B 中高（组合款有完整因果链）", "intention": "深浅模式切换的两种拍法。A（Notion/Figma/Linear 惯用）：15° 斜向 边界带亮线扫过全画面（demo 从开关所在的右侧扫向左侧），边界经过处浅色**就地**变深色，同布局 双主题共存一瞬——观众看到的是\"同一个 UI 换肤\"，不是转场。 B（组合变异）：⌘K 面板输入 \"dark\" 回车，面板收缩成一个亮点， 深色涟漪**从该点**荡开扫过全 UI——\"命令引发换肤\"的因果链完整可读。 组合命门：涟漪圆心必须是面板收缩点、起始帧必须是收缩完成帧。", "source": "references/shots/interaction/theme-switch-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "theme-sweep-toggle", "label": "theme-sweep-toggle", "description": "深色版 clip-path polygon 15° 斜边扫场（out poly3 先快后缓 ~38f），边界 4px 白亮线+18px 辉光，扫完 2f 淡出；深版 scale 1→0.995→1 坐实", "use": "主题功能直接展示", "media": {"url": "./media/theme-sweep-toggle.mp4?v=1790980736885", "type": "mp4"}}, {"key": "palette-theme-ripple", "label": "palette-theme-ripple", "description": "面板 back(1.9) 弹落→逐字输入→回车面板 ease-in 收缩到 0 + 白色高光核钉住位置→圆形 clip 半径 12→1250px cubic-out 荡开，边缘 5px 白环双向辉光", "use": "命令面板+主题联动的高光段", "media": {"url": "./media/palette-theme-ripple.mp4?v=1790980736886", "type": "mp4"}}], "sourceUrl": "./source/theme-switch-moves.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "timeline-travel", "summary": "时间轴横移——镜头沿水平刻度轴加速掠过版本刻度，每过一格卡片弹立短停，末刻度急停推近", "use": "changelog/里程碑/发展史段落（\"我们一直在发货\"的另一种拍法）；与 scroll-brake-moves 分工：那卡是纵向列表急刹，本卡是横向时间旅行", "duration": "4–5s", "energy": "中高（加速→急刹的节奏型镜头）", "intention": "把产品的版本史拍成一次沿时间轴的旅行（《反恐王国》片头判例）： 镜头缓起→冲刺→急刹三段变速横移，v1.0/v2.0/v3.0 刻度依次掠过， 每过一格对应卡片从刻度线上 spring 弹立——历史在窗外闪过， 急停在\"今天\"并推近。速度本身讲\"发展快\"，急停讲\"现在最重要\"。", "source": "references/shots/data/timeline-travel.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "timeline-travel", "label": "timeline-travel", "description": "时间轴横移——镜头沿水平刻度轴加速掠过版本刻度，每过一格卡片弹立短停，末刻度急停推近", "media": {"url": "./media/timeline-travel.mp4?v=1790980736887", "type": "mp4"}}], "sourceUrl": "./source/timeline-travel.md", "category": "data", "tags": ["data", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "title-demote-to-label", "summary": "大标题降格为节标签两式——A 大标题居中显影站稳一拍后连续缩小 0.3x 平移到左上角落成小节标签、内容区在其下生长；B 同套路但登场时带文本选中态高亮块扫入再撤掉", "use": "章节开场（标题先当主角再让位给内容）；教程/功能演示片的小节交接；B 式给\"文字/编辑\"类产品加身份暗示", "duration": "A ~3.7s（112f）/ B ~4.5s（134f）；demo 两式串播 246f", "energy": "低中（版式变换型，氛围镜头）", "intention": "章节标题的常规命运是\"出现→消失→内容登场\"，标题和内容互不认识。 本卡让标题**降格而不退场**：居中大字站稳一拍宣告主题，然后一次连续 补间缩到 0.3x 飞到左上角，落成这一节的栏目标签——它还在屏幕上， 只是从主角变成了门牌。观众获得免费的空间记忆：刚才那个大词就是 现在左上角那个小词，本节讲的就是它。内容骨架在降格进行中就开始 生长，交接零空档。", "source": "references/shots/typography/title-demote-to-label.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "title-demote-to-label", "label": "title-demote-to-label", "description": "大标题降格为节标签两式——A 大标题居中显影站稳一拍后连续缩小 0.3x 平移到左上角落成小节标签、内容区在其下生长；B 同套路但登场时带文本选中态高亮块扫入再撤掉", "media": {"url": "./media/title-demote-to-label.mp4?v=1790980736888", "type": "mp4"}}], "sourceUrl": "./source/title-demote-to-label.md", "category": "typography", "tags": ["typography", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "trailer-grammar-moves", "summary": "预告片语法一式——trailer-bumper 前置速剪钩子：三镜 9f 速剪 + 黑场静默一拍，再开场标题", "use": "预告片的开场钩子（cold open）：正片前先塞三个最抓眼的镜头，再静默一拍正式开场", "duration": "A ~4.7s（140f）", "energy": "A 高", "intention": "库内节奏卡各管一段：beat-cut 管切点排布、rhythm-interrupt 管打断。 本卡管**预告片的结构性时刻**——不是某个 镜头怎么动，是整片的关节怎么接：A 是开场钩——正片前 0.9 秒塞 三个最抓眼镜头速剪 + 黑场静默一拍再开场，预告片的\"预告\"。", "source": "references/shots/rhythm/trailer-grammar-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "trailer-bumper", "label": "trailer-bumper", "description": "预告片语法一式——trailer-bumper 前置速剪钩子：三镜 9f 速剪 + 黑场静默一拍，再开场标题", "use": "正片开场前的钩子；cold open", "media": {"url": "./media/trailer-bumper.mp4?v=1790980736889", "type": "mp4"}}], "sourceUrl": "./source/trailer-grammar-moves.md", "category": "rhythm", "tags": ["rhythm", "opening", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "transition-hidden-cut", "summary": "藏切点转场三式——前景遮挡隐形切、对撞开屏、暖色漏光，硬切藏进遮挡/撞击/光峰的 1-3 帧里，观众看不见剪刀", "use": "两镜衔接处需要\"无痕换景\"或\"仪式感开屏\"时（技法卡，与 shot-transitions 三式同层选型）", "duration": "n/a（技法卡；各式占用帧数见参数表，从相邻镜头预算里划）", "energy": "n/a（技法卡，不占能量位）", "intention": "与 shot-transitions A 式 flash-cut 同族：flash-cut 用一层白闪盖住硬切， 这三式换了三种\"障眼物\"——扫过的前景卡片（A）、对撞的撞击帧（B）、 爬到顶峰的漏光（C）。共同原理是魔术误导：观众的眼睛被大动作/强光 吸走的那 1-3 帧里完成硬切，回过神来景已经换了，全程\"看不见剪刀\"。 flash-cut 是最素的一款；要方向感选 A，要仪式感选 B，要温度选 C。", "source": "references/shots/transition/transition-hidden-cut.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "invisible-cut", "label": "invisible-cut 前景遮挡隐形切", "description": "一张超画幅卡片带重运动模糊贴脸横扫，糊满全屏的遮挡帧内背景 A→B 硬切，卡片飞出观众以为还是同一镜", "use": "想让换景完全无痕的页面→页面；伪\"一条 take\"的主力款", "media": {"url": "./media/invisible-cut.mp4?v=1790980736890", "type": "mp4"}}, {"key": "versus-slam", "label": "versus-slam 对撞开屏", "description": "左右两半屏带斜切边从画外加速对冲撞合，撞击帧白闪+震屏+VS 盖章，切点就是撞击本身", "use": "对比/对阵语义的开屏或章节头（新旧方案、双产品、before/after）", "media": {"url": "./media/versus-slam.mp4?v=1790980736891", "type": "mp4"}}, {"key": "light-leak-burn", "label": "light-leak-burn 琥珀漏光", "description": "三团琥珀柔光沿对角线斜扫，光峰帧吞掉旧页约七成时硬切新页，光退散时新页已就位", "use": "想要暖调/胶片味的章节过渡；比白闪柔、有方向、有温度", "media": {"url": "./media/light-leak-burn.mp4?v=1790980736892", "type": "mp4"}}], "sourceUrl": "./source/transition-hidden-cut.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "transition-travel", "summary": "穿越式转场——字腔穿越：巨型章节标题的字形就是一扇窗，镜头钻进字形笔画完成换景", "use": "前后两镜存在\"元素/容器\"级空间关系的接缝（技法卡，与 shot-transitions 三式互补选用）", "duration": "n/a（技法卡；demo 150f，主推动作段 52f，前后 hold 另计，帧数从相邻镜头预算里划）", "energy": "n/a（技法卡，不占能量位）", "intention": "shot-transitions 三式是\"交棒\"型——前镜收尾、后镜入场，接缝靠白闪/糊帧/ 窗口盖住换页瞬间。本卡是\"穿越\"型——后景在前景画面里 以真实元素存在（字形洞），镜头一条连续空间运动钻进去， 观众从头到尾跟着同一个物体，没有交棒瞬间。选型口径：后景能在前景里\"预先 在场\"→穿越；两景只是先后关系、无空间嵌套→交棒。字腔穿越的语义是 \"标题即是门\"（章节字卡与转场二合一）。", "source": "references/shots/transition/transition-travel.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "letterform-zoom", "label": "字腔穿越 letterform-zoom", "description": "穿越式转场——字腔穿越：巨型章节标题的字形就是一扇窗，镜头钻进字形笔画完成换景", "use": "章节标题→正文；替代 D 式黑场字卡的高能量款", "media": {"url": "./media/letterform-zoom.mp4?v=1790980736893", "type": "mp4"}}], "sourceUrl": "./source/transition-travel.md", "category": "transition", "tags": ["transition", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "type-and-filter", "summary": "真实 UI 上打字搜索、网格自己收敛成一张卡、点击穿透进详情页", "use": "功能演示的\"操作叙事\"段；搜索/筛选/进入详情的任何交互链路", "duration": "约 2.5s（118–190f）", "energy": "中（发牌高能段之后的从容一拍）", "intention": "让观众\"跟着做一遍\"：看清输入了什么、页面怎么响应、点了哪里。这是全片唯一模拟真人操作的镜头，节奏必须像人手，不能像脚本。", "source": "references/shots/interaction/type-and-filter.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "type-and-filter", "label": "type-and-filter", "description": "真实 UI 上打字搜索、网格自己收敛成一张卡、点击穿透进详情页", "media": {"url": "./media/type-and-filter.mp4?v=1790980736894", "type": "mp4"}}], "sourceUrl": "./source/type-and-filter.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "type-assembly-moves", "summary": "文字集结三式——split-text-stagger 逐字裂升、letterform-drift-assembly 漂移合拢、text-on-path 沿线流入", "use": "大标题/标语的入场；与 type-entrance-moves、document-typewriter-reveal 同属标题入场大品类，全片 ≤2 种", "duration": "单式 4–5.5s（动作段 A ~56f / B ~104f / C ~110f；demo 全长含 hold：A 130f / B 150f / C 160f，各自导出 `*_DURATION`）", "energy": "A 中 / B 中高 / C 中", "intention": "标题入场已有\"原位变形系\"（字符坠落/打字机——字在原地换形态）。本卡补\"集结系\"：字符从别处**汇聚成**标题，运动轨迹 本身有戏。A 琴键式——每字从看不见的裁切线下滑升，理性利落，通用度 最高；B 片头式——字符四散带模糊漂入、逐个锁定加深，Stranger Things 的仪式感，适合品牌名亮相；C 语义式——字符沿一条上升曲线鱼贯流入 再摆正，曲线可以正好描着图表增长线走，文字与数据同框叙事。", "source": "references/shots/typography/type-assembly-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "split-text-stagger", "label": "split-text-stagger 裂升", "description": "每字 overflow 盒内 translateY(115%→0) 带 10% 过冲，delay i×2f，基线同步生长", "use": "通用默认；利落理性", "media": {"url": "./media/split-text-stagger.mp4?v=1790980736895", "type": "mp4"}}, {"key": "drift-assembly", "label": "drift-assembly 漂移合拢", "description": "字符 seed 方向 ±300px + blur 8px 漂入错峰归位，锁定帧加深脉冲，合体后整词呼吸 1.04", "use": "品牌名/片头级亮相", "media": {"url": "./media/drift-assembly.mp4?v=1790980736896", "type": "mp4"}}, {"key": "text-on-path", "label": "text-on-path 沿线流入", "description": "字符沿贝塞尔曲线鱼贯滑入（切线角旋转），到达后 12f 摆正水平", "use": "曲线有语义时（增长线/流程线）", "media": {"url": "./media/text-on-path.mp4?v=1790980736897", "type": "mp4"}}], "sourceUrl": "./source/type-assembly-moves.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "type-entrance-moves", "summary": "标题文字入场一式——letter-drop-physics 字符坠落（重力砸落、弹跳、歪斜站定，最后一拍集体立正归位）", "use": "大标题/章节字卡的入场；与 type-assembly-moves（集结系）、document-typewriter-reveal（打字机）同品类互斥选用", "duration": "单式 5s（含 hold 与静止收尾；动作段 ~116f，demo 150f）", "energy": "中高（物理趣味）", "intention": "标题入场库内已有打字机（沉稳文档感）和集结系（字从别处汇聚），本卡补 物理喜剧感——字符从天而降、砸地弹跳、歪歪扭扭站定，最后一拍 集体立正归位，适合轻松调性的开场破冰（demo 让品牌名「Shotcraft」砸落站定， 副标题「Every shot lands on the beat.」随归位一拍浮出）。标题入场同片 ≤2 种（P4）。", "source": "references/shots/typography/type-entrance-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "letter-drop-physics", "label": "letter-drop-physics 字符坠落", "description": "标题文字入场一式——letter-drop-physics 字符坠落（重力砸落、弹跳、歪斜站定，最后一拍集体立正归位）", "use": "轻松调性开场；\"活物感\"的标题破冰", "media": {"url": "./media/letter-drop-physics.mp4?v=1790980736898", "type": "mp4"}}], "sourceUrl": "./source/type-entrance-moves.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "type-rhythm-sync", "summary": "文字随声同步两式——font-weight-pump 字重脉冲（笔画随鼓点变粗弹回）与 karaoke-fill-sync 卡拉OK填色（词随旁白逐个点亮）", "use": "标题/标语与音轨强绑定的段落；A 绑节拍（鼓点），B 绑语音（旁白逐词）", "duration": "A FontWeightPump 165f / B KaraokeFillSync 150f；A 128 BPM 每拍 14f、衰减窗 9–13f，B 每词按语速 18–33f", "energy": "A 高（蹦迪感）/ B 中（跟读引导）", "intention": "文字动效库内此前全是\"入场怎么进\"，没有词管\"在场的字怎么跟着声音活\"。 这两式补上：A 让标题变成节奏器官——笔画随低音鼓抽动变粗又弹回， 文字在蹦迪，适合高能段落的视觉低音炮；B 让标语变成跟读字幕—— 旁白读到哪个词哪个词从左到右填色点亮，视线被牵着走，适合口播/ 标语强调段。共同点是**字不动、属性动**：无位移、无入退场， 纯粹是字重/颜色在声音的拍点上呼吸。", "source": "references/shots/typography/type-rhythm-sync.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "font-weight-pump", "label": "font-weight-pump 字重脉冲", "description": "命中帧笔画瞬间变粗（stroke+字重跳变），~10f 衰减弹回；重音拍额外撑宽 8%", "use": "音乐驱动的高能段；标题当低音炮", "media": {"url": "./media/font-weight-pump.mp4?v=1790980736899", "type": "mp4"}}, {"key": "karaoke-fill-sync", "label": "karaoke-fill-sync 填色随读", "description": "每词深色从左到右填亮，进度跟语速，读完保持；活跃词下带读指下划线", "use": "旁白/口播强调段；多词标语的视线引导", "media": {"url": "./media/karaoke-fill-sync.mp4?v=1790980736900", "type": "mp4"}}], "sourceUrl": "./source/type-rhythm-sync.md", "category": "typography", "tags": ["typography", "rhythm"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "typewriter-moves", "summary": "打字机 error-retype——误删重打的\"改口\"三幕剧：打出平庸词 → 犹豫 → 退格删掉 → 更快打出卖点词", "use": "slogan/卖点字卡、否定式文案；文字自带时间性的入场", "duration": "~5.3s（160f）", "energy": "中低", "intention": "打字是唯一自带时间性的文字入场——字符一个个到来本身就是节奏， 不需要额外动效。A 式把打字当**独白**：逐字打出平庸词 （demo 眉题 Introducing video-shotcraft 下的 \"just a slideshow\"）→ 停顿犹豫 → 退格删掉 → 更快打出卖点词（\"your cinematic crew\"），犹豫-否定-宣言的 三幕剧，戏全在三档速度差里。", "source": "references/shots/typography/typewriter-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "error-retype", "label": "error-retype", "description": "打字机 error-retype——误删重打的\"改口\"三幕剧：打出平庸词 → 犹豫 → 退格删掉 → 更快打出卖点词", "use": "slogan 字卡的\"改口\"戏；否定式文案", "media": {"url": "./media/error-retype.mp4?v=1790980736901", "type": "mp4"}}], "sourceUrl": "./source/typewriter-moves.md", "category": "typography", "tags": ["typography", "opening"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "ui-strip-away-outro", "summary": "减法式收尾——点击 Publish 后整个编辑器 UI 从外围到中心层层错峰蒸发，黑场上只剩那颗按钮滑到屏心放大，按钮再淡出交棒字标定版", "use": "\"发布/完成\"语义的 outro；想讲\"一键之后一切复杂性消失\"的产品收尾", "duration": "~4.8s（144f：光标就位 34f → 蒸发 ~40f → 按钮独占 → 字标接棒 → 字标 hold ≥1s）", "energy": "中（前段安静操作，中段持续退场，无瞬时冲击）", "intention": "库内收尾全是\"加法\"：outro-group-photo-launch 元素飞来合影，logo sting 是定住再彩蛋。本卡是唯一的\"减法\"路线——点击引爆全 UI 退场， 黑场只留语义焦点（那颗被点的按钮），把\"发布 = 复杂性归零\"翻译成 动效叙事。命门有二：**蒸发要有秩序**——从外围到中心每 4f 一层、 每层带方向性位移（各自往画外散），乱序或同帧齐灭读作断电故障； **按钮是唯一幸存者且必须迁移**——蒸发期间从工具条角落滑到屏心 放大 1.5 倍、白晕随黑场增强，完成从\"UI 控件\"到\"仪式主角\"的升格， 最后淡出把黑场交给字标。", "source": "references/shots/outro/ui-strip-away-outro.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "ui-strip-away-outro", "label": "ui-strip-away-outro", "description": "减法式收尾——点击 Publish 后整个编辑器 UI 从外围到中心层层错峰蒸发，黑场上只剩那颗按钮滑到屏心放大，按钮再淡出交棒字标定版", "media": {"url": "./media/ui-strip-away-outro.mp4?v=1790980736902", "type": "mp4"}}], "sourceUrl": "./source/ui-strip-away-outro.md", "category": "outro", "tags": ["outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "ui-to-brand-morph", "summary": "UI 变品牌两式——icon-flip-bloom 图标 Y 轴翻扁成竖线、从竖线撑开成品牌标志（琥珀斜切随后划入）+ wordmark 逐字落定，与 input-morph-assemble 输入框收缩成取景框竖笔、三块图元落进构造槽位拼成完整标志", "use": "品牌收尾/outro 前最后一拍；\"你每天用的那个 UI 就是这个品牌\"的视觉论证", "duration": "A ~4.3s（130f）/ B ~5.6s（168f）", "energy": "中高（收尾点睛，一次完整变形讲完）", "intention": "品牌收尾库里已有两条路：brand-ink-open 是开场描画压印、 outro-group-photo-launch 是元素围拢合影（聚而不变）。本卡补第三条： **产品 UI 元素自己变形成品牌符号**——A 式是图标翻一个身变成 logo （同位实体交换），B 式是全片反复出现的输入框在最后一次发送后集结成 品牌标志（多元素落位拼装）。观众看到的不是\"logo 出现了\"，而是 \"刚才用的东西原来就是它\"，因果链本身就是品牌论证。", "source": "references/shots/outro/ui-to-brand-morph.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "icon-flip-bloom", "label": "icon-flip-bloom", "description": "图标 anticipation 晃两下→Y 轴 scaleX 压扁成竖线（双层拖影+blur）→最薄处实体交换、spring 展开成 video-shotcraft「镜刻」标志、琥珀斜切第二拍划入→标志左移让位、字标逐字落定", "use": "单图标产品；图标与 logo 形态差异大、需要\"翻过去变身\"的魔术感", "media": {"url": "./media/icon-flip-bloom.mp4?v=1790980736903", "type": "mp4"}}, {"key": "input-morph-assemble", "label": "input-morph-assemble", "description": "光标点发送→文字飞走→输入框 x/y/w/h/r 五量 spring 插值成标志的竖框→上下横条与琥珀斜切从虚线构造框里依次落位拼成「镜刻」标志→左移让位、字标逐字落定", "use": "输入框/卡片等矩形 UI 是全片主角的片子；logo 可拆解为几何图元组合", "media": {"url": "./media/input-morph-assemble.mp4?v=1790980736904", "type": "mp4"}}], "sourceUrl": "./source/ui-to-brand-morph.md", "category": "outro", "tags": ["outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "value-stagger-gradient", "summary": "16 根柱入场时 delay 是时间错峰，同时高度/色相/位移/模糊四个属性各自铺成从首到末的数值梯度；第二拍把错峰原点换成中心，脉冲幅度以中心为最大重新铺开", "use": "技法演示与参数化能力的展示镜头；也可直接当数据/频谱/均衡器类界面的入场", "duration": "约 5.0s（150f@30fps）", "energy": "中高（第一拍是连续铺开，第二拍中心脉冲是明确的一次峰值）", "intention": "stagger 通常只被用来错开时间。这张卡要说的是它还能错开**值**——同一个索引既决定 \"什么时候动\"，也决定\"动到多少\"。两拍是一组对照实验：第一拍原点在首位（梯度从左到 右单调铺开），第二拍原点换到中心（梯度以中轴对称铺开）。观众看到的不是两个动画， 而是同一个配方换了一个参数。屏幕上的代码字幕同步换成对应的 stagger 调用，明说这件事。", "source": "references/shots/ui-entrance/value-stagger-gradient.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "value-stagger-gradient", "label": "value-stagger-gradient", "description": "16 根柱入场时 delay 是时间错峰，同时高度/色相/位移/模糊四个属性各自铺成从首到末的数值梯度；第二拍把错峰原点换成中心，脉冲幅度以中心为最大重新铺开", "media": {"url": "./media/value-stagger-gradient.mp4?v=1790980736905", "type": "mp4"}}], "sourceUrl": "./source/value-stagger-gradient.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "vertical-word-roll-blur-cycle", "summary": "句尾词换成竖向滚轮，3 次换词各 0.55s（outQuint 七成 + outBack 三成，前快后极慢带微过冲），相邻行按距离上垂直 blur 与灰度，中心词落定瞬间从灰染成强调色", "use": "\"Crafted for ___\" / \"Built for ___\" 这类句干 + 受众/对象列举的一句话卖点；浅底品牌片的干净一拍", "duration": "约 5.0s（150f@30fps：静置 → 3 次换词 → 尾部整组淡出）", "energy": "中（稳定三拍，无峰值）", "intention": "句尾换词的最优解是滚轮而不是淡入淡出：滚轮自带**方向**（往上翻页）， 观众知道\"还有下一个\"。这卡的两个身份记号是相邻行的**垂直 blur** （滚轮景深，模拟机械转筒的失焦）和落定时的**染色**（灰→强调色， \"这个才是答案\"）。句干（demo `Crafted for`）全程纹丝不动——眼睛钉在滚轮上， 句干一晃列举感就散。", "source": "references/shots/typography/vertical-word-roll-blur-cycle.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "vertical-word-roll-blur-cycle", "label": "vertical-word-roll-blur-cycle", "description": "句尾词换成竖向滚轮，3 次换词各 0.55s（outQuint 七成 + outBack 三成，前快后极慢带微过冲），相邻行按距离上垂直 blur 与灰度，中心词落定瞬间从灰染成强调色", "media": {"url": "./media/vertical-word-roll-blur-cycle.mp4?v=1790980736906", "type": "mp4"}}], "sourceUrl": "./source/vertical-word-roll-blur-cycle.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "voice-waveform-live", "summary": "录音胶囊实时声纹——64 根细竖条随\"说话\"起伏，说话时中部高耸、停顿缩成点线，波形从右往左滚动；说→停→说→提交塌缩的完整表演", "use": "语音输入/AI 助手\"正在听你说\"的功能镜头；无 UI 内容可展示但需要持续活性撑画面的段落", "duration": "172f（~5.7s：入场 14f + 说 1.4s + 停 0.8s + 说 1.4s + 提交塌缩 / 收进气泡 0.8s + hold 0.7s）", "energy": "中（功能性活性，不是炫技）", "intention": "本卡是**功能性**声纹：\"正在听你说\"的实时回执。命门在因果： 波形跟\"用户说话\"跳、是产品功能本身，不是跟 BGM 跳的装饰包装。 说话时波形高耸、停顿时缩成一排点线、历史向左滚出——观众从波形的起伏读出\"它真的在听\"，一段 6s+ 的画面全靠这份 活性撑住，不需要任何别的内容。与 gauge-readout-moves 分工：仪表是 \"报一个数值\"的机械仪式，本卡是\"持续监听\"的生命体征，没有终值。", "source": "references/shots/interaction/voice-waveform-live.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "voice-waveform-live", "label": "voice-waveform-live", "description": "录音胶囊实时声纹——64 根细竖条随\"说话\"起伏，说话时中部高耸、停顿缩成点线，波形从右往左滚动；说→停→说→提交塌缩的完整表演", "media": {"url": "./media/voice-waveform-live.mp4?v=1790980736907", "type": "mp4"}}], "sourceUrl": "./source/voice-waveform-live.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "wall-reveal-moves", "summary": "整墙批量入场两式——bento 逐格点亮、蓝图描线成形，全部原位显形不位移，与 deck-deal-flyin 的飞入位移型互补成品类矩阵", "use": "功能墙/卡片墙/整页界面的整体亮相；内容已在原位、要\"显形\"而非\"涌入\"的段落", "duration": "单式约 5s（A 150f / B 150f @30fps，含建立 hold 与静止收尾）", "energy": "中", "intention": "\"一墙内容怎么出场\"库内此前只有 deck-deal-flyin 一个答案——高能量、位移型、 \"东西涌进来\"。但不是每面墙都该涌：品牌段要庄重、 \"从设计到实物\"要讲工序。这两式共同点是**非位移批量入场**——元素原地显形， 版式从第一帧就成立，观众看的是\"状态变化的波前扫过一面墙\"而不是\"物体飞行\"。 选型先问一句：这面墙该\"涌进来\"还是\"亮起来\"？前者去 deck-deal-flyin，后者进本卡。", "source": "references/shots/ui-entrance/wall-reveal-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "bento-light-up", "label": "bento-light-up 逐格点亮", "description": "暗场 3×2 bento 墙压暗待命，琥珀流光逐格描边一圈、内容随即提亮上浮，全亮后镜头缓推收住", "use": "内容庄重/暗场品牌段；节奏沉稳的功能总览", "media": {"url": "./media/bento-light-up.mp4?v=1790980736908", "type": "mp4"}}, {"key": "wireframe-draw-on", "label": "wireframe-draw-on 蓝图描线成形", "description": "界面先以 SVG 细线蓝图分组描画，再一条琥珀发光竖线左→右扫过，扫过处线框实体化成真实界面", "use": "\"从设计到实物/从想法到产品\"叙事；产品首次整体亮相", "media": {"url": "./media/wireframe-draw-on.mp4?v=1790980736909", "type": "mp4"}}], "sourceUrl": "./source/wall-reveal-moves.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "white-flash-logo-simplify-cut", "summary": "液态金属质感的彩色词标静置流光，蓄力后从字心炸出一记白闪过曝，曝光回落时同一位置已是扁平版字标——一次闪白完成质感降维", "use": "品牌段落收束（华丽演绎→干净定妆）；情绪从炫技切换到正式宣告的转场拍", "duration": "约 4s（120f@30fps；演出 0–34f · 蓄力 34–46f · 冲白 44–54f · 曝光回落 54–76f · 锁定 72–96f · hold 至 120f）", "energy": "中高（一次脉冲式重音，前后都是静场）", "intention": "先给足华丽（虹彩液态金属在字面上流动、一次斜向高光扫过），再用一次白闪把它\"净化\"成扁平单色字标——观众读到的是\"演出结束，这就是它的正式形象\"。降维是修辞：从感性质感切到理性识别。两版同字号同位置，读作\"同一个字标被净化了\"，不是换了张图。", "source": "references/shots/transition/white-flash-logo-simplify-cut.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "white-flash-logo-simplify-cut", "label": "white-flash-logo-simplify-cut", "description": "液态金属质感的彩色词标静置流光，蓄力后从字心炸出一记白闪过曝，曝光回落时同一位置已是扁平版字标——一次闪白完成质感降维", "media": {"url": "./media/white-flash-logo-simplify-cut.mp4?v=1790980736910", "type": "mp4"}}], "sourceUrl": "./source/white-flash-logo-simplify-cut.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "wipe-transitions", "summary": "几何擦除转场——blinds-slice 百叶窗切条（12 根 3D 叶片错峰翻面成波，波扫过后整页由 A 换成 B）", "use": "新旧页都不动、一条几何边界扫过完成交接的通用转场；不依赖构图里有合适元素，哪儿都能用", "duration": "前态 ≥20f + 擦除 ~56f + 收尾 ≥40f，约 4.4s（132f）", "energy": "中", "intention": "转场库已有三族：穿越系（钻进去）、藏切系（遮住切）、体块系（页面是 实体）。本卡是第四族**几何擦除系**——新旧页都不动，一条几何边界扫过 完成交接，擦除的形状即语义：条扫是\"百叶窗逐叶翻面换页\"。与 shot-transitions C 式穿窗（元素遮罩擦除）的区别：C 用页面内真实元素当遮罩 （依赖构图），本卡是纯几何形——通用性即定位。适合横向推进、翻页语义。", "source": "references/shots/transition/wipe-transitions.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "blinds-slice", "label": "blinds-slice", "description": "几何擦除转场——blinds-slice 百叶窗切条（12 根 3D 叶片错峰翻面成波，波扫过后整页由 A 换成 B）", "use": "翻页/推进语义；横向阅读动线页面", "media": {"url": "./media/blinds-slice.mp4?v=1790980736911", "type": "mp4"}}], "sourceUrl": "./source/wipe-transitions.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "word-relay-filmstrip", "summary": "左列黑白相间等高页面卡步进滚动（焦点卡全亮、邻卡离焦压暗）、右侧衬线大词原位接力（名词恒定+动词轮换）——切词瞬间才滚动一格，词块垂直中心与当前页面卡中点精确对齐", "use": "\"一个主体 × 多种能力\"的枚举段（Shotcraft frames/builds/ships…）；作品集/案例流展示；产品多场景巡礼", "duration": "每词期 ~1.5–2s × 3–4 词；demo 180f（6s）", "energy": "中低（编辑部气质，节奏靠切词的\"咔哒\"感）", "intention": "左边是证据（页面截图胶片），右边是论点（大词）：动词换一次， 胶片就步进一格给出新证据——文字与画面互为注脚。命门是**步进制**： 左列平时完全静止，只在切词瞬间滚动一格（滚动=换证据的机械动作）， 持续滚动会让左列沦为背景装饰、切词失去\"咔哒\"感。第二命门是 **对齐**：大词块垂直中心必须与当前页面卡中点精确对齐（像素级）， 歪了整个版式的\"编辑部严谨感\"就塌了。", "source": "references/shots/typography/word-relay-filmstrip.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "word-relay-filmstrip", "label": "word-relay-filmstrip", "description": "左列黑白相间等高页面卡步进滚动（焦点卡全亮、邻卡离焦压暗）、右侧衬线大词原位接力（名词恒定+动词轮换）——切词瞬间才滚动一格，词块垂直中心与当前页面卡中点精确对齐", "media": {"url": "./media/word-relay-filmstrip.mp4?v=1790980736912", "type": "mp4"}}], "sourceUrl": "./source/word-relay-filmstrip.md", "category": "typography", "tags": ["typography", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "word-relay-geometry", "summary": "三个利益词各带一套专属几何接力——虚线大圆减速自转 + 彗星弧飞跑 → 三实线圆 trim 依次生长后收拢咬紧 → 镀铬金属 sheen 扫过后一拍收成纯白；旧词缩到 0.86 淡出，新词描边→填充揭示", "use": "三点式利益陈述（更快/更好/更强）；品牌价值观段落；需要\"一词一世界\"的中段推进", "duration": "约 6.0s（180f@30fps：三段各 ≈60f，段间重叠 6f）", "energy": "中高（三拍推进 + 全程几何运动 + 背景粒子，无静止帧）", "intention": "三点式利益陈述最容易做成三张字卡硬切。接力的做法是给每个词配一套 **只属于它的几何**：虚线圆是\"在转\"（快）、三圆相扣并收拢是\"互相咬合\"（紧 / 好）、 金属扫光是\"材质硬\"（强）——几何本身就在替形容词做论证。第三个词 留了升格待遇（sheen 扫光 + 收白），因为它是结论。背景微尘、共用舞台光与底部 三段进度条把三拍缝成一个连续空间，不然还是三张卡。", "source": "references/shots/typography/word-relay-geometry.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "word-relay-geometry", "label": "word-relay-geometry", "description": "三个利益词各带一套专属几何接力——虚线大圆减速自转 + 彗星弧飞跑 → 三实线圆 trim 依次生长后收拢咬紧 → 镀铬金属 sheen 扫过后一拍收成纯白；旧词缩到 0.86 淡出，新词描边→填充揭示", "media": {"url": "./media/word-relay-geometry.mp4?v=1790980736913", "type": "mp4"}}], "sourceUrl": "./source/word-relay-geometry.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}], "staticExport": true, "categories": {"opening": {"zh": "开场与品牌", "en": "Opening & Brand"}, "typography": {"zh": "文字与字卡", "en": "Typography & Title Cards"}, "ui-entrance": {"zh": "界面登场与陈列", "en": "UI Entrance & Showcase"}, "camera": {"zh": "运镜与空间", "en": "Camera & Space"}, "data": {"zh": "数据与指标", "en": "Data & Metrics"}, "interaction": {"zh": "交互与功能演示", "en": "Interaction & Feature Demo"}, "transition": {"zh": "转场", "en": "Transitions"}, "rhythm": {"zh": "节奏与蒙太奇", "en": "Rhythm & Montage"}, "effects": {"zh": "光效与强调", "en": "Light & Emphasis"}, "outro": {"zh": "收尾", "en": "Outro"}}}
+{"generatedAt": "2026-07-19T05:01:54.882Z", "revision": "bdd94be16d60fa8f", "stats": {"cardCount": 124, "styleCount": 150, "previewCount": 150, "mediaCount": 150, "newest": "2026-10-02T21:01:48.000Z"}, "cards": [{"name": "assemble-then-type-flyin", "summary": "空的暗底网格上，无文字的组件骨架先从四面八方飞入贴合；随后各处文字逐字从 3D 空间旋转着飞来落位，先大标题后小标注，全部落位后页面成形", "use": "页面/海报\"自己长出来\"的开场；排版类产品的能力展示；从骨架到成稿的两段式叙事", "duration": "约5.6s（168f@30fps）", "energy": "中高（骨架段稀疏、文字段密集，能量单调上升到收尾）", "intention": "把\"页面生成\"拆成两个语义清楚的阶段：先立骨架（框、卡片、分隔线、 色块，全部无字），再填文字。文字用逐字 3D 旋转落位，是因为骨架段 只有平面位移——两段的运动维度必须不同，否则观众读不出\"这是第二步\"。", "source": "references/shots/effects/assemble-then-type-flyin.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "assemble-then-type-flyin", "label": "assemble-then-type-flyin", "description": "空的暗底网格上，无文字的组件骨架先从四面八方飞入贴合；随后各处文字逐字从 3D 空间旋转着飞来落位，先大标题后小标注，全部落位后页面成形", "media": {"url": "./media/assemble-then-type-flyin.mp4?v=1790980736765", "type": "mp4"}}], "sourceUrl": "./source/assemble-then-type-flyin.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "aurora-bloom-bg-flip", "summary": "浅灰底从底部升起紫橙柔焦 blob，随后整个底色在约 0.36s 内压暗到近黑、blob 压成余晖；文案同步 blur-out 换句 blur-in，换句间留空档不 cross-fade", "use": "叙事转折点（\"多年以来…→一切都变了\"）；品牌片从铺垫拉到重音的那一拍；深浅色系之间的段落切换", "duration": "约5.2s（156f@30fps）", "energy": "由低到高（前 2/3 是酝酿，压暗那一瞬是全片重音）", "intention": "把\"底色反转\"当成重音符号用：前 56% 让极光慢慢升起、观众适应浅底， 然后用不到 0.4s 把整个画面压到近黑——这一下比任何缩放/闪白都更像 \"翻页\"。文案的换句必须卡在反转之后，且中间留空档，让观众先接住画面 变化再读新句。", "source": "references/shots/effects/aurora-bloom-bg-flip.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "aurora-bloom-bg-flip", "label": "aurora-bloom-bg-flip", "description": "浅灰底从底部升起紫橙柔焦 blob，随后整个底色在约 0.36s 内压暗到近黑、blob 压成余晖；文案同步 blur-out 换句 blur-in，换句间留空档不 cross-fade", "media": {"url": "./media/aurora-bloom-bg-flip.mp4?v=1790980736766", "type": "mp4"}}], "sourceUrl": "./source/aurora-bloom-bg-flip.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "autolayout-gap-dial", "summary": "间距拨盘驱动布局——一排链接块带框选描边+缝隙间距标注，徽章数字逐格跳动、块被参数实时推开再弹簧回弹归位；\"参数驱动布局\"的可视化", "use": "设计工具/低代码产品的\"改一个数、界面跟着动\"卖点镜头；\"用设计工具语义做包装\"的品类语言", "duration": "~5s（150f：框选入场 + 预备回收 10f + 拉松 34f + 屏息 hold 20f + 弹簧回弹 + 落定 hold）", "energy": "中（工具理性型，爽点在数字与位移的锁定同步）", "intention": "\"参数改了、UI 变了\"是设计工具的核心承诺，但通常拍成\"点面板→切 结果\"的前后对比，因果被剪掉了。本卡把因果拍成连续镜头：间距徽章 数字逐格跳，链接块**同帧**被推开，测量线实时拉长——数字就是缰绳， 布局就是马。框选描边+8 手柄+间距标注全是设计工具的母语，观众一眼 认出\"这是在工具里调参数\"。回程故意用欠阻尼弹簧过冲（缩到比起点 更紧再回稳），把\"归位\"做成一次有弹性的收尾。与 type-and-filter 分工：那是\"输入内容→列表收敛\"的检索因果，本卡是\"拨数值→几何 重排\"的参数因果。", "source": "references/shots/interaction/autolayout-gap-dial.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "autolayout-gap-dial", "label": "autolayout-gap-dial", "description": "间距拨盘驱动布局——一排链接块带框选描边+缝隙间距标注，徽章数字逐格跳动、块被参数实时推开再弹簧回弹归位；\"参数驱动布局\"的可视化", "media": {"url": "./media/autolayout-gap-dial.mp4?v=1790980736767", "type": "mp4"}}], "sourceUrl": "./source/autolayout-gap-dial.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "avatar-bracket-carousel", "summary": "\"Your ___ agent\" 填空排版，四角对焦框钉在句中不动，头像队列在框内垂直 spring 轮换三次，入框放大清晰、出框按距离缩小淡化模糊，角色标签同步更换，切换瞬间对焦框呼吸 7%", "use": "\"一个位置，多种角色\"的能力枚举；团队/身份/预设/人格类产品的核心一句话镜头", "duration": "约 5.2s（156f@30fps）", "energy": "中（三次等距切换构成稳定节拍器，对焦框脉冲是唯一装饰性动作）", "intention": "\"我们的 agent 能当导演、剪辑、动画师、音效师\"列成四行就是一张清单。塞进一句话的一个槽位里， 它变成一个承诺加四次证明：句子不动，只有槽里的人在换。四角对焦框是这个手法的关键 ——它不参与轮换，但它把观众的眼睛钉死在那 92×92 的方框里，所以四次更换才读作 \"同一个位置\"而不是\"四张头像飘过\"。", "source": "references/shots/ui-entrance/avatar-bracket-carousel.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "avatar-bracket-carousel", "label": "avatar-bracket-carousel", "description": "\"Your ___ agent\" 填空排版，四角对焦框钉在句中不动，头像队列在框内垂直 spring 轮换三次，入框放大清晰、出框按距离缩小淡化模糊，角色标签同步更换，切换瞬间对焦框呼吸 7%", "media": {"url": "./media/avatar-bracket-carousel.mp4?v=1790980736768", "type": "mp4"}}], "sourceUrl": "./source/avatar-bracket-carousel.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "basic-3d-scene", "summary": "impress.js 式空间演示：卡片以不同位置/旋转/缩放散布 3D 空间，相机取各步姿态之逆依次飞行对齐，末步拉到 OVERVIEW 总览", "use": "概念/路线图/三步法的空间化讲述；替代平面 slides 的\"每一步都换个空间视角\"", "duration": "约 7.5s（225f@30fps；四站，三段飞行 28/32/32f，每站停留 ≥30f）", "energy": "中（每次转场有空间惊喜，停留段安静读卡）", "intention": "把\"翻页\"变成\"在想法的空间里旅行\"：每张卡不仅有位置还有姿态（第二站世界左转 38°、第三站整个画框侧躺 90°），相机对齐它时观众的世界也跟着转——空间变化本身成为\"进入新章节\"的仪式感。", "source": "references/shots/camera/basic-3d-scene.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "basic-3d-scene", "label": "basic-3d-scene", "description": "impress.js 式空间演示：卡片以不同位置/旋转/缩放散布 3D 空间，相机取各步姿态之逆依次飞行对齐，末步拉到 OVERVIEW 总览", "media": {"url": "./media/basic-3d-scene.mp4?v=1790980736769", "type": "mp4"}}], "sourceUrl": "./source/basic-3d-scene.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "beat-cut-moves", "summary": "硬切当节拍乐器——连闪定格：三次白闪各硬切同一画面的一个裁切（全景→卡片→特写），快门余韵沉降后停在特写收束", "use": "高光段落把\"切\"本身打成鼓点；颁奖连拍式的仪式感、关键信息的加冕", "duration": "全程 140f ≈4.7s（活素材 30f + 三闪 + hold 70f）", "energy": "高", "intention": "库内节奏词汇一直只管\"一条运动内\"的速率（speed-ramp-freeze 是同一条 take 里定格再解冻）和\"落定后停多久\"（R 系呼吸判例），没有词管**多镜之间切点 怎么排**。本卡补这一块：硬切不做任何过渡，切点间隔本身就是乐谱—— 三次白闪、间隔渐紧（22f→18f），读作快门连拍（A）。与 R 系不 冲突：R 管落定后的停，本卡管切点排布，切串结束必须接足量 hold 把 呼吸还回去。注意这是刻意的例外——节奏偏好判例是单向\"放慢\"，硬切 串切得越狠，切完的 hold 要比平常更长。", "source": "references/shots/rhythm/beat-cut-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "paparazzi-flash", "label": "paparazzi-flash 连闪定格", "description": "硬切当节拍乐器——连闪定格：三次白闪各硬切同一画面的一个裁切（全景→卡片→特写），快门余韵沉降后停在特写收束", "use": "高光时刻仪式感：颁奖连拍、关键数字的加冕", "media": {"url": "./media/paparazzi-flash.mp4?v=1790980736770", "type": "mp4"}}], "sourceUrl": "./source/beat-cut-moves.md", "category": "rhythm", "tags": ["rhythm", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "beat-step-list-theme-cycle", "summary": "三通道节拍器——深色场形容词列表逐拍上移一行，视口中央固定胶囊\"接住\"下一个词并换色，整场底色同拍跟换；行、色、场三通道锁死同一拍点", "use": "\"同一产品多种气质/多主题展示\"段落（modern/playful/expressive 式形容词连打）；全片节奏最密的一段；音乐段对拍", "duration": "铺垫 30f + 每拍 18f × 拍数 + 收尾 hold；4 拍约 4.7s（demo 140f）", "energy": "高（0.6s 一拍三通道齐跳，密度型高能）", "intention": "换一次主题色是功能演示；0.6 秒换一次、连换三次、每次\"选中行+胶囊色 +全场底色\"三件事同帧齐跳——就成了节拍器。用最便宜的变量切换做出 全片最高的节奏密度。命门有二：一是**三通道必须锁同一拍点**，任何 一通道慢半拍，\"齐跳\"退化成三个各自为政的动画；二是**跳与滑的分界** ——跳变只占拍头 6f，其余 12f 完全静置，拍点要\"跳\"不要\"滑\"， 匀速滚动的列表就只是列表。", "source": "references/shots/rhythm/beat-step-list-theme-cycle.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "beat-step-list-theme-cycle", "label": "beat-step-list-theme-cycle", "description": "三通道节拍器——深色场形容词列表逐拍上移一行，视口中央固定胶囊\"接住\"下一个词并换色，整场底色同拍跟换；行、色、场三通道锁死同一拍点", "media": {"url": "./media/beat-step-list-theme-cycle.mp4?v=1790980736771", "type": "mp4"}}], "sourceUrl": "./source/beat-step-list-theme-cycle.md", "category": "rhythm", "tags": ["rhythm", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "before-after-slider-scrub", "summary": "前后对比拉杆——\"处理前/后\"两版叠放，分割杆先猛甩后慢扫，杆过处新版\"显影\"揭出", "use": "AI 增强/优化/重构类功能的效果对比段落（\"用前 vs 用后\"一镜讲清）", "duration": "4–5s", "energy": "中（快甩是打击点，慢扫是阅读期）", "intention": "AI 图像产品发布片的标准对比语法：同一画面\"处理前\"（低对比灰蒙） 与\"处理后\"（清晰版）叠放，带圆手柄的竖分割杆先从左端猛甩到 70% （overshoot 回弹）、停一拍，再以约 1/5 的速度慢扫回来让观众看清 差异——**快甩慢扫的速度对比就是节奏**：快甩宣告\"变了\"， 慢扫证明\"变在哪\"。", "source": "references/shots/data/before-after-slider-scrub.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "before-after-slider-scrub", "label": "before-after-slider-scrub", "description": "前后对比拉杆——\"处理前/后\"两版叠放，分割杆先猛甩后慢扫，杆过处新版\"显影\"揭出", "media": {"url": "./media/before-after-slider-scrub.mp4?v=1790980736772", "type": "mp4"}}], "sourceUrl": "./source/before-after-slider-scrub.md", "category": "data", "tags": ["data", "interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "bezier-source-converge-merge", "summary": "左侧四个来源节点各有一条细贝塞尔曲线连向右侧同一汇聚点，曲线先错峰由左向右 draw-on，节点沿自己的曲线滑向汇聚点并三段式加速缩小到消失，强调色数据包全程沿路径滑行，吞并完成后曲线从左端反向擦除只留品牌标志（demo：白瓷圆片托 video-shotcraft 镜刻标志）", "use": "\"多源整合/统一接入/数据汇聚\"的核心机制镜头；集成、聚合、单一入口类产品的说明段落", "duration": "约 5.6s（168f@30fps）", "energy": "中（长镜慢速推进，靠数据包滑行维持活性；吞并瞬间是唯一小高点）", "intention": "\"我们把四个来源统一了\"是一句抽象话。这个动效把它变成可看的物理过程：先建立四条独立 的通路（draw-on 是\"连上了\"），再让四个来源真的顺着通路走进同一个点并被吸进去（缩小 到 0 是\"被吞并\"），最后擦掉通路只留品牌标志（\"现在只有一个\"）。三段叙事各自有明确的 起止，观众不需要旁白就能读出因果。", "source": "references/shots/ui-entrance/bezier-source-converge-merge.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "bezier-source-converge-merge", "label": "bezier-source-converge-merge", "description": "左侧四个来源节点各有一条细贝塞尔曲线连向右侧同一汇聚点，曲线先错峰由左向右 draw-on，节点沿自己的曲线滑向汇聚点并三段式加速缩小到消失，强调色数据包全程沿路径滑行，吞并完成后曲线从左端反向擦除只留品牌标志（demo：白瓷圆片托 video-shotcraft 镜刻标志）", "media": {"url": "./media/bezier-source-converge-merge.mp4?v=1790980736773", "type": "mp4"}}], "sourceUrl": "./source/bezier-source-converge-merge.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "blur-slide", "summary": "标题逐词入场，y 0.38em→0 + blur 18→0 + opacity 0→1 三通道走同一条 ease-out 同步收敛，词间隔约 4f；副标题在标题收完前就错峰跟进", "use": "几乎所有标题/副标题成对出现的场合；产品页首屏文案、章节小标题；需要\"专业但不抢戏\"的默认文字 reveal", "duration": "约 4.0s（120f@30fps）", "energy": "低（一次性收敛，无峰值无循环）", "intention": "这是文字 reveal 的**默认解**——没有奇观、没有机械感，只是把词一个个 柔和地放到位。它的专业感全来自一件事：y、blur、opacity 三个通道共用 同一个进度 `p`、同一条缓动，所以词是\"从虚焦里浮出来\"而不是\"滑进来 顺便淡一下\"。当一支片里已经有别的重手法（乱码/滚轮），标题就该 用这一卡，让位给主角。", "source": "references/shots/typography/blur-slide.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "blur-slide", "label": "blur-slide", "description": "标题逐词入场，y 0.38em→0 + blur 18→0 + opacity 0→1 三通道走同一条 ease-out 同步收敛，词间隔约 4f；副标题在标题收完前就错峰跟进", "media": {"url": "./media/blur-slide.mp4?v=1790980736774", "type": "mp4"}}], "sourceUrl": "./source/blur-slide.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "bottom-push-stack-wipe", "summary": "底边上推换章——新场景连底色整屏从底边向上推入，把旧场景物理顶出画外，连推数章各配一种饱和底色，内容钉死在各自色底坐标系里随底色走", "use": "多章节产品片的换章骨架（每章一个卖点一种底色）；需要\"翻页节奏感\"贯穿全片的段落切换", "duration": "demo 三连推 170f（~5.7s）；单次推入 26f + 章内 hold ~1.2s", "energy": "中", "intention": "wipe-transitions 是一条边界扫过、新旧页都不动；page-turn 是旧页对开门 裂开滑出。本卡是第三种物性：**新章把旧章顶出去**——两屏刚性接触、同速 同向位移，像自动售货机压栈。命门是\"连底色整屏走\"：底色+窗口卡+装饰 条焊成一块整料从底边推入，观众读到\"换了个世界\"而不是\"换了张卡\"。 重 ease-out（快进慢停）给推入一个\"哐\"的落位感；上缘 40px 接缝阴影 是两屏物理接触的证据。连推三章且底色饱和度拉满，换章本身就成了全片 的节拍器——slack 原片全片就靠这一招做骨架。", "source": "references/shots/transition/bottom-push-stack-wipe.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "bottom-push-stack-wipe", "label": "bottom-push-stack-wipe", "description": "底边上推换章——新场景连底色整屏从底边向上推入，把旧场景物理顶出画外，连推数章各配一种饱和底色，内容钉死在各自色底坐标系里随底色走", "media": {"url": "./media/bottom-push-stack-wipe.mp4?v=1790980736775", "type": "mp4"}}], "sourceUrl": "./source/bottom-push-stack-wipe.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "brace-expand", "summary": "一对紧贴的小花括号先在正中出现，随即带一次过冲向左右弹开并放大到标题级，文字 clip 宽度严格绑括号内缘、像被拉开幕布般从中间揭示，落定后字距再细微松弛", "use": "开发者/技术产品的标题字卡；章节开场；需要\"一个符号完成揭示\"的极简一拍", "duration": "约 4s（120f@30fps：光标 0–6f → 6f 小括号硬切 → 14f 弹开 → 40–64f 字距松弛 → 副标 → hold）", "energy": "中（单次过冲是唯一峰值，其余静止）", "intention": "标题揭示的手法里，本卡最省：不做遮罩条、不做逐字、不做位移——只让 一对括号往两边走，文字被\"括出来\"。它天生带代码语感（`{}` 是花括号）， 所以在技术产品语境里读作\"这就是内容本体\"。命门是 clip 宽度**必须严格 绑括号位置**：一旦文字自己淡入或自己擦入，括号就退化成装饰，幕布感全失。", "source": "references/shots/typography/brace-expand.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "brace-expand", "label": "brace-expand", "description": "一对紧贴的小花括号先在正中出现，随即带一次过冲向左右弹开并放大到标题级，文字 clip 宽度严格绑括号内缘、像被拉开幕布般从中间揭示，落定后字距再细微松弛", "media": {"url": "./media/brace-expand.mp4?v=1790980736776", "type": "mp4"}}], "sourceUrl": "./source/brace-expand.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "brand-frame-snap", "summary": "品牌色画框语法——一圈粗纯色画框先于内容长出包住全屏，录屏窗口落进框内；模式切换时整圈画框同帧硬翻色+窗内布局同帧换，一个 borderColor 干完章节导航/状态提示/品牌露出三件事", "use": "双模式/双章节产品片的全片包装层（蓝=模式A、绿=模式B 颜色编码）；真实录屏素材的品牌化包裹", "duration": "单次翻色 ~4.7s（140f）；画框本身可全片驻场", "energy": "中（翻色瞬间高，其余时间是安静的包装层）", "intention": "真实录屏直接铺满屏没有品牌存在感，加 logo 水印又廉价。本卡用一圈 粗品牌色画框把录屏\"装裱\"起来：画框**先于内容出现**（先立画框再放 画，仪式感），之后画框颜色成为全片的语义编码——demo 里钴蓝=Design、 橘红=Dev Mode（原片是蓝/绿；关键是色相对冲 + 明度差）。章节切换时整圈画框一帧内硬翻色，无渐变，颜色硬切就是\"换挡\" 声效的视觉等价物；窗内布局同帧 A→B、角标与徽标同步换字，三处同帧 共振把\"模式切换\"砸实。与 theme-switch-moves 分工：那换的是 UI 本体 肤色（有扫过边界），本卡换的是\"画框\"这个包装层（同帧无边界）， 语义是模式/章节切换不是主题切换。", "source": "references/shots/effects/brand-frame-snap.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "brand-frame-snap", "label": "brand-frame-snap", "description": "品牌色画框语法——一圈粗纯色画框先于内容长出包住全屏，录屏窗口落进框内；模式切换时整圈画框同帧硬翻色+窗内布局同帧换，一个 borderColor 干完章节导航/状态提示/品牌露出三件事", "media": {"url": "./media/brand-frame-snap.mp4?v=1790980736777", "type": "mp4"}}], "sourceUrl": "./source/brand-frame-snap.md", "category": "effects", "tags": ["effects", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "brand-ink-open", "summary": "墨线十字准星描画→字标逐字压印→打字机副标→满一秒静止再上浮消散", "use": "品牌开场；任何\"先立名号再进产品\"的片头", "duration": "约 2.8s（83f）", "energy": "低（起步位，为后续镜头留爬升空间）", "intention": "第一拍先给品牌记忆点：观众在任何产品画面出现之前，先看清并记住名字。安静、纸墨质感、有一个完整的静止时刻。", "source": "references/shots/opening/brand-ink-open.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "brand-ink-open", "label": "brand-ink-open", "description": "墨线十字准星描画→字标逐字压印→打字机副标→满一秒静止再上浮消散", "media": {"url": "./media/brand-ink-open.mp4?v=1790980736778", "type": "mp4"}}], "sourceUrl": "./source/brand-ink-open.md", "category": "opening", "tags": ["opening", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "canvas-materialize-moves", "summary": "内容\"物化上画布\"两式——panel-to-canvas 行倒卡（面板表格行沿弧线飞出、跨容器变形成画布卡片）与 diagram-cascade 级联生成树（prompt 打字后节点逐层弹出、连线先于节点生长）", "use": "AI/协作工具\"生成结果落到画布上\"的叙事段落；A 式讲\"已有内容换了个存在形态\"，B 式讲\"从一句话长出一棵结构\"", "duration": "A ~5s（150f）/ B ~6s（180f）", "energy": "中", "intention": "库内生成叙事只有\"窗口内逐字写出\"（document-typewriter-reveal 文档自己写出来） 和\"图表自己活起来\"（chart-live-moves），没有词管**内容离开容器、在 开放画布上物化成新实体**。本卡补这一块：画布是舞台，生成物是登台的 演员。A 式的命门是跨容器形态迁移——同一条内容从\"行\"变成\"卡\"，位置 /宽高/圆角/内容布局在一条 spring 上同步插值，观众读到\"是它飞过去 变的\"而不是\"删一个加一个\"；B 式的命门是级联时序——线牵出节点、层 喂出层，结构感来自先后而非同时。", "source": "references/shots/interaction/canvas-materialize-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "panel-to-canvas", "label": "panel-to-canvas 行倒卡", "description": "复选框逐个自动打勾→按钮按下→三行沿上抛弧线错峰飞出，途中行形态与卡形态交叉淡化，落位带随机倾角；面板行槽塌陷成虚线留白", "use": "批量导入/一键上板：内容从列表态迁移为空间态", "media": {"url": "./media/panel-to-canvas.mp4?v=1790980736779", "type": "mp4"}}, {"key": "diagram-cascade", "label": "diagram-cascade 级联生成树", "description": "prompt 逐字敲出（敲完描边变深确认）→根（深色）→2 子→4 孙逐层弹出，折角连线描线先行 8f，成树后整棵呼吸一拍", "use": "AI 生成结构图/脑图/ER 图：一句话长出一棵树", "media": {"url": "./media/diagram-cascade.mp4?v=1790980736780", "type": "mp4"}}], "sourceUrl": "./source/canvas-materialize-moves.md", "category": "interaction", "tags": ["interaction", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "card-flip-reveal", "summary": "功能卡 3D 翻面揭示——卡片沿 Y 轴翻 180°，正面 UI 翻到侧棱最薄处掠过一道随角度移动的受光，背面揭出大号结论数字，逐张错峰扫过整排", "use": "\"功能→成果\"的成对叙事：一排功能卡逐张翻出各自的指标/结论；元素级转场卡", "duration": "全程 150f（~5s，含 hold）；单卡 4f 预备 + 16f 翻 + ~10f 弹簧落定，三卡错峰 12f", "energy": "中高", "intention": "库内\"翻\"字辈已有 wipe-transitions 百叶窗（叶片逐条翻面，讲换页）。 本卡是**语义翻面**：一张卡的正反两面是一对因果——正面是功能界面， 背面是它带来的数字结论。翻面动作本身 就是\"所以呢？\"的回答，Apple bento 段落的标准语法。逐张错峰 10f 扫过 一排，三张卡三个数字节奏读作\"成果连报\"。", "source": "references/shots/transition/card-flip-reveal.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "card-flip-reveal", "label": "card-flip-reveal", "description": "功能卡 3D 翻面揭示——卡片沿 Y 轴翻 180°，正面 UI 翻到侧棱最薄处掠过一道随角度移动的受光，背面揭出大号结论数字，逐张错峰扫过整排", "media": {"url": "./media/card-flip-reveal.mp4?v=1790980736781", "type": "mp4"}}], "sourceUrl": "./source/card-flip-reveal.md", "category": "transition", "tags": ["transition", "data"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "card-flock-tumble", "summary": "三张 UI 页卡从侧棱薄边 3D 翻飞成阶梯站定（全程清晰、样条连续丝滑），站定后保持慢转不停，快速收束吸入中心，炸出单个湍流烟雾环扩散，巨字横贯收场", "use": "能量高潮段（功能页群→品牌口号的爆点转场）；霓虹/极光暗场调性；\"多页面能力\"收束成一句话的段落", "duration": "翻飞 ~1.5s + 慢转展示 ~0.3s + 收束 0.3s + 烟环+巨字 ~2s；全段 4.5s", "energy": "极高（全片能量顶点用）", "intention": "三张页卡像被甩出的扑克在 3D 空间翻飞列队，站定亮相后被瞬间 吸入中心，炸出一圈烟雾环，品牌巨字穿环而出——\"能力展示→能量 坍缩→口号爆发\"一气呵成。命门有三：**丝滑**（侧棱→翻飞→站定 一条 Catmull-Rom 样条导数连续，分段插值的顿挫会被读出来）、 **不许停**（站定后保持低角速度慢转到收束，静止段被裁\"不要停住， 保持旋转\"——高潮段没有静帧）、**全程清晰**（motion blur/景深糊 全删，被裁\"不要加模糊效果\"）。", "source": "references/shots/transition/card-flock-tumble.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "card-flock-tumble", "label": "card-flock-tumble", "description": "三张 UI 页卡从侧棱薄边 3D 翻飞成阶梯站定（全程清晰、样条连续丝滑），站定后保持慢转不停，快速收束吸入中心，炸出单个湍流烟雾环扩散，巨字横贯收场", "media": {"url": "./media/card-flock-tumble.mp4?v=1790980736782", "type": "mp4"}}], "sourceUrl": "./source/card-flock-tumble.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "card-stack", "summary": "一组模板卡（demo 9 张）从屏幕下方逐张 spring 弹入、越落越快叠成一摞，全员落位后整摞一次性展成扇面——每张按序号偏转 6.5°、横移 138px，最后中心卡被抽出", "use": "需要交代\"我们有一组东西\"的产品段落；卡片墙/模板库/方案列表的建立镜头，也能当 logo 前的一拍蓄势", "duration": "约 5.0s（150f@30fps）", "energy": "中高（入场是连续小爆发，展开段收成一次平滑的整体动作）", "intention": "一摞卡先聚成一个物体，再摊开成一组物体——顺序很关键：先给\"整体\"再给\"个体\"。 观众第一眼记住的是有分量的一摞（数量感），第二眼才看清每张不一样（多样性）。 展开动作留到最后一次性完成，是为了不和入场的节拍打架。", "source": "references/shots/ui-entrance/card-stack.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "card-stack", "label": "card-stack", "description": "一组模板卡（demo 9 张）从屏幕下方逐张 spring 弹入、越落越快叠成一摞，全员落位后整摞一次性展成扇面——每张按序号偏转 6.5°、横移 138px，最后中心卡被抽出", "media": {"url": "./media/card-stack.mp4?v=1790980736783", "type": "mp4"}}], "sourceUrl": "./source/card-stack.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "carousel-3d", "summary": "8 张卡排成圆环整环自转一圈（匀速底 + 每 45° 一次停靠的分步），每卡只绕 Y 公转、自身 billboard 朝外，正反两层同向贴图配 backface-visibility:hidden 保证任何时刻都正立不倒置，正前方卡被点亮、环下字幕随之换字，相机全程钉在浅俯角", "use": "作品集/模板库/集成清单的循环展示；需要无缝 loop 的背景拍或落地页 hero", "duration": "约 5.6s（168f@30fps）", "energy": "中（可无限循环的稳态运动，每 45° 一次停靠给出节拍）", "intention": "展示\"一组东西\"最省事的办法是排成一排横滑，但横滑有起点和终点。环形没有——它天然 循环，观众看多久都不会觉得\"放完了\"。这张卡真正要解决的是环形 carousel 最容易翻车 的点：卡片背面。方案是双面同向贴图，所以从环内看和从环外看是同一张正立的卡，环转一圈 不会有任何一帧出现镜像或倒置。", "source": "references/shots/ui-entrance/carousel-3d.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "carousel-3d", "label": "carousel-3d", "description": "8 张卡排成圆环整环自转一圈（匀速底 + 每 45° 一次停靠的分步），每卡只绕 Y 公转、自身 billboard 朝外，正反两层同向贴图配 backface-visibility:hidden 保证任何时刻都正立不倒置，正前方卡被点亮、环下字幕随之换字，相机全程钉在浅俯角", "media": {"url": "./media/carousel-3d.mp4?v=1790980736784", "type": "mp4"}}], "sourceUrl": "./source/carousel-3d.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "chart-live-moves", "summary": "活体图表三式——oscilloscope-stream 示波流线（曲线右端实时写入+突发尖峰）、unit-dot-swarm-regroup 点阵重组（点群三幕迁徙聚成数字）、axis-rescale-shock 轴爆表重标（新值冲出画框逼 y 轴重标）", "use": "数据叙事段落；分别讲\"实时性\"、\"每个数字是一个人\"、\"增长装不下\"", "duration": "各 165–192f（5.5–6.4s）", "energy": "中高（数据即剧情）", "intention": "图表不是插图是剧情。三式共同前提（实测判例）：**必须真图表语境** ——真轴标/真数据/真文案，灰阶占位条测不出数据叙事的表达力。 A 示波流线：曲线写入点钉在右端上下起伏，旧数据左流出画，中途一次 突发尖峰（振幅 2.2×、读数跳大变强调色）——\"实时\"不用说出口，还有事件； B 点阵重组：320 个点（每点≈40 renders）散布→聚三簇（浮 Promo/Launch film/ Explainer 真标签）→列队成柱（真轴标）→聚成点阵大数字 \"12,847\"—— 同一批点，观众能跟着某一颗看它归队； C 轴爆表：折线正常爬升，新值顶破图表天花板规线冲出 226px（强调色粗线 插进标题区、撞进右上 KPI 数字），停半拍，y 轴\"哗\"地重标（旧刻度飞出/新刻度滑入/网格 加密/旧线压扁成地平线），新值落回+弹真值标签——用\"坐标轴装不下\"演增长。", "source": "references/shots/data/chart-live-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "oscilloscope-stream", "label": "oscilloscope-stream", "description": "采样窗平移 8px/f + 余弦包络尖峰 + 刹停真静止", "use": "监控/实时类产品：\"活着\"的系统", "media": {"url": "./media/oscilloscope-stream.mp4?v=1790980736785", "type": "mp4"}}, {"key": "unit-dot-swarm-regroup", "label": "unit-dot-swarm-regroup", "description": "三幕 spring 错峰迁徙（stiffness 150、错峰 8f），终幕点阵拼数字", "use": "用户量/构成叙事：\"每个点是一个人\"", "media": {"url": "./media/unit-dot-swarm-regroup.mp4?v=1790980736786", "type": "mp4"}}, {"key": "axis-rescale-shock", "label": "axis-rescale-shock", "description": "冲出框 220px + 重标三联动（刻度换/网格密/旧线压扁）+ 震 8px", "use": "增长曲线高光：\"off the charts\" 字面化", "media": {"url": "./media/axis-rescale-shock.mp4?v=1790980736787", "type": "mp4"}}], "sourceUrl": "./source/chart-live-moves.md", "category": "data", "tags": ["data"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "chip-grid-single-select-blackout", "summary": "五个选项 chip 以 3+2 居中排布逐个淡入；选中帧先插一帧灰色按压块，紧接数帧内底色变墨黑、文字变白并做 1→1.04→1 极轻回弹，其余 chip 淡到 18% 但位置锁死；随后余项归零，黑 chip 上移收窄，下方升起结算价格", "use": "单选/套餐/档位选择的交互演示；\"选了它之后会怎样\"的因果镜头；价格/参数结算类链路", "duration": "约5.5s（165f@30fps）", "energy": "中低（唯一的爆点是那一帧灰闪，其余都在收）", "intention": "一帧灰闪 + 三帧反黑，是把真实 UI 的 `:active → :selected` 两级状态 拆开演。观众看到的是\"手指按下\"再\"系统确认\"，而不是一次渐变。其余 chip 降到 18% 而**位置绝不移动**：一旦重排，观众会以为页面刷新了， \"单选\"的语义就丢了。", "source": "references/shots/interaction/chip-grid-single-select-blackout.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "chip-grid-single-select-blackout", "label": "chip-grid-single-select-blackout", "description": "五个选项 chip 以 3+2 居中排布逐个淡入；选中帧先插一帧灰色按压块，紧接数帧内底色变墨黑、文字变白并做 1→1.04→1 极轻回弹，其余 chip 淡到 18% 但位置锁死；随后余项归零，黑 chip 上移收窄，下方升起结算价格", "media": {"url": "./media/chip-grid-single-select-blackout.mp4?v=1790980736788", "type": "mp4"}}], "sourceUrl": "./source/chip-grid-single-select-blackout.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "circle-match-iris", "summary": "圆心匹配光圈切——光圈从页面上圆形元素的圆心炸开，圈内新页的圆形图表接在同一个圆上；匹配剪辑给光圈一个语义锚点", "use": "前景有圆形元素（头像/图标/圆钮）、后景有圆形主体（donut 图/圆环进度）的接缝；转场技法卡", "duration": "5.5s / 165f（入场+定睛 40f + 蓄力 7f + 接圆开圈 37f + sweep 58f + 静止 47f）", "energy": "中高", "intention": "普通 iris 光圈（词汇表原条目）从任意点开圈，观众只读到\"换页了\"。 本卡把它和 match-cut 焊死：光圈必须从前景一个**真实圆形元素**的圆心 炸开，圈内长出的新页里有个圆形图表恰好接在同一个圆上——观众看到的 是\"头像的圆变成了图表的圆\"，圆形本身完成叙事（这个人→这个人的数据）。 这是 match-cut 在 UI 语境里的落地形态：不靠构图巧合，靠语义圆对圆。 与穿越三式同属\"后景在前景里预先在场\"，但锚点是抽象形状而非容器。", "source": "references/shots/transition/circle-match-iris.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "circle-match-iris", "label": "circle-match-iris", "description": "圆心匹配光圈切——光圈从页面上圆形元素的圆心炸开，圈内新页的圆形图表接在同一个圆上；匹配剪辑给光圈一个语义锚点", "media": {"url": "./media/circle-match-iris.mp4?v=1790980736789", "type": "mp4"}}], "sourceUrl": "./source/circle-match-iris.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "cloner-depth-echo", "summary": "克隆纵队——主卡瞬间\"复印\"出 7 个半透明分身沿斜向纵深排开成队，停一拍后全体加速吸回本体合一+弹跳", "use": "\"多副本/多租户/规模感/批量处理\"卖点；一镜讲完\"一个=很多\"", "duration": "138f（约 4.6s）", "energy": "中（陈列-收束型）", "intention": "Spline/C4D Cloner 语汇的 UI 翻译：一张主卡\"啪\"地复印出 7 个克隆体 沿 Z 轴向后等距排开（间隔 250px、透明度 100%→28% 递减、越远越只剩轮廓）， 错峰弹出成纵队；停 ~32f 让观众数得清\"有很多个\"；然后全体 ease-in 加速吸回 本体合一，合体瞬间本体弹 1.06x 收束。demo 把\"一个=很多\"落到具体卖点： 一张 video-shotcraft 渲染卡（launch-film）×8 个镜头，合体时卡底 8 个镜头位同时点亮，标题落「One prompt. / Eight shots.」。与 depth-layer-moves 视差 （不同内容分层）分工：这是**同一内容**的等距重影阵列，语义是规模 不是空间。", "source": "references/shots/ui-entrance/cloner-depth-echo.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "cloner-depth-echo", "label": "cloner-depth-echo", "description": "克隆纵队——主卡瞬间\"复印\"出 7 个半透明分身沿斜向纵深排开成队，停一拍后全体加速吸回本体合一+弹跳", "media": {"url": "./media/cloner-depth-echo.mp4?v=1790980736790", "type": "mp4"}}], "sourceUrl": "./source/cloner-depth-echo.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "collab-cursor-moves", "summary": "协作光标当演员——cast-ensemble 五光标群演氛围层（错峰飞入+正弦漂移+打字 cameo+聚拢围观）", "use": "协作/多人主题的画布场景，给画面铺\"团队在场\"体温", "duration": "A ~5.2s（156f）", "energy": "A 低中（氛围层，可垫任何时长）", "intention": "库内光标一直是\"操作工具\"（cursor-flyover 的光标 是单光标点击导览）。本卡把带身份名牌的协作光标升格成**演员**： 五枚光标错峰入场后持续漂移当氛围粒子，\"团队在场\"感全靠它，其中一枚 还能停下来打字（cameo 戏份）。SVG 光标+名牌 chip 成本极低、叙事密度 极高，是\"协作\"主题最便宜的视觉论证。", "source": "references/shots/interaction/collab-cursor-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "cast-ensemble", "label": "cast-ensemble", "description": "协作光标当演员——cast-ensemble 五光标群演氛围层（错峰飞入+正弦漂移+打字 cameo+聚拢围观）", "use": "画布/白板类产品全片氛围层；主内容之外需要\"别人也在\"的背景活性", "media": {"url": "./media/cast-ensemble.mp4?v=1790980736791", "type": "mp4"}}], "sourceUrl": "./source/collab-cursor-moves.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "countdown-arc-scatter", "summary": "纸面表盘 9 个等大数字沿大弧切向排布，整盘扫过 96° 后减速急停，\"5\" 停在弧顶随即平移落位成标题首字符，其余数字带 blur 原地散去，标题逐词模糊淡入、末词转强调色", "use": "倒计时/时长承诺类文案（\"5 min to install\"）；数据揭晓的一拍；需要\"仪表盘\"语汇的浅底短镜", "duration": "约 3.3s（100f@30fps：扫动 ~30f + 落位 20f + 标题成句 + hold 22f；最短可压到 33f 单拍）", "energy": "高（96° 大幅扫动压进 ~20 帧，纯冲击）", "intention": "\"5 分钟装完\"写成静态字卡没人信。表盘扫过的做法把这个数字放进一个 **量程**里：45、35、28、22、17、10 一路扫过去，停在 5——观众看到的是 \"从很多降到很少\"，数字自带论证。停下后 \"5\" 不消失而是**平移变成标题的 首字符**，一个元素完成从仪表到文案的身份切换，这是本卡最值钱的一手。", "source": "references/shots/typography/countdown-arc-scatter.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "countdown-arc-scatter", "label": "countdown-arc-scatter", "description": "纸面表盘 9 个等大数字沿大弧切向排布，整盘扫过 96° 后减速急停，\"5\" 停在弧顶随即平移落位成标题首字符，其余数字带 blur 原地散去，标题逐词模糊淡入、末词转强调色", "media": {"url": "./media/countdown-arc-scatter.mp4?v=1790980736792", "type": "mp4"}}], "sourceUrl": "./source/countdown-arc-scatter.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "crane-rise-reveal", "summary": "升降臂拉升揭示——开场怼在一行数据特写，相机沿 Y 轴减速升起后拉，行行涌入直到整面 dashboard 铺满全幅", "use": "\"从细节到全局\"的开场定场；与 drone-dive-landing（全局→单点俯冲）互为反向", "duration": "5.5s（165f：特写 hold 24f + 拉升 102f + 落定/余波/静止 39f）", "energy": "中高（持续单向运动，无冲击拍）", "intention": "开场定场库内已有 drone-dive-landing——从上帝视角砸进 hero 特写， \"全局→焦点\"。本卡是它的镜像：\"焦点→全局\"——先怼在一行真实数据上 让观众看清\"这是什么\"，再升降臂式拉升后退，一排排内容涌入画面， 最后整面产品铺满——\"你看到的这一行，只是这一面墙的一格\"。 适合以产品体量/内容丰富度为卖点的开场；两卡同片只用一个方向。", "source": "references/shots/opening/crane-rise-reveal.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "crane-rise-reveal", "label": "crane-rise-reveal", "description": "升降臂拉升揭示——开场怼在一行数据特写，相机沿 Y 轴减速升起后拉，行行涌入直到整面 dashboard 铺满全幅", "media": {"url": "./media/crane-rise-reveal.mp4?v=1790980736793", "type": "mp4"}}], "sourceUrl": "./source/crane-rise-reveal.md", "category": "opening", "tags": ["opening", "camera", "data"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "crash-zoom-punch", "summary": "全景一拍急推到目标特写（6f），落位二选一——过冲回弹（弹性）或撞停震屏（重量）", "use": "功能段\"点名\"镜头——把观众视线一拍按到目标卡/模块上；强调级用撞停", "duration": "约 0.5s 动作 + 前后 hold（动作 6–11f，前 hold ≥30f 建立全景、后 hold ≥45f 读特写）", "energy": "高（瞬时冲击，非持续高能）", "intention": "慢推近（spotlight-hero-card）是\"请看\"，急推是\"看这个！\"——一拍之内 从全景砸到特写，视线没有选择余地。落位质感分两款：回弹是弹性 （\"看这个\"），撞停震屏是重量（\"就是它\"），按强调级选。", "source": "references/shots/camera/crash-zoom-punch.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "crash-zoom-punch", "label": "crash-zoom-punch", "description": "全景一拍急推到目标特写（6f），落位二选一——过冲回弹（弹性）或撞停震屏（重量）", "media": {"url": "./media/crash-zoom-punch.mp4?v=1790980736794", "type": "mp4"}}], "sourceUrl": "./source/crash-zoom-punch.md", "category": "camera", "tags": ["camera", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "cursor-flyover", "summary": "整页俯瞰后，相机依次飞到四个功能区 zoom-in 特写，SVG 光标先一步到位指点、点击留下涟漪并触发界面响应，最后拉回俯瞰", "use": "单页产品的功能巡览：一镜带观众看完四个功能区，光标当\"导游手指\"", "duration": "约 8.0s（240f@30fps；俯瞰 22f · 四站各 44f（飞行 20f + 停留 24f）· 拉回 24f · hold 18f）", "energy": "中（等距巡航，节奏靠点击涟漪打点）", "intention": "替代\"四个功能四段剪辑\"的省镜方案：一个连续相机把四个角串成一条参观动线，光标是观众的注意力代理——它到哪、点哪，观众就看哪。空间连续让功能之间的位置关系也被顺带记住。", "source": "references/shots/camera/cursor-flyover.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "cursor-flyover", "label": "cursor-flyover", "description": "整页俯瞰后，相机依次飞到四个功能区 zoom-in 特写，SVG 光标先一步到位指点、点击留下涟漪并触发界面响应，最后拉回俯瞰", "media": {"url": "./media/cursor-flyover.mp4?v=1790980736795", "type": "mp4"}}], "sourceUrl": "./source/cursor-flyover.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "dataviz-landscape-open", "summary": "暗场支流线束地景开场——多条流线汇入主干、虚构 ID 标签浮在线上、相机重景深低速飞越", "use": "品牌级抽象开场（\"数据宇宙\"隐喻），接亮场产品段或字标；与 glow-flyline-moves 分工：那卡是段落内卡片之间的连线叙事，本卡是开场专用的全画幅地景", "duration": "5–8s（开场氛围段，一支片 ≤1 次；demo 180f）", "energy": "低开缓升（起步位，为后续爬升留空间）", "intention": "Linear Releases 发布片开场实证的品牌级开场品类：把产品背后的数据世界 拍成一片**暗场地景**——支流线束从画面深处汇入一条主干（\"无数工作流 汇成一个产品\"的隐喻），真实感来自三样东西：①虚构 issue/任务 ID 标签 浮在线上（demo 用 video-shotcraft 的镜头号 + 运镜名：每条支流是一个镜头，汇成一支成片）（观众认出\"这是我每天看到的那种东西\"）；②重景深——近景大虚焦 流过、中景标签清晰可读、远景渐隐，三层纵深让平面 SVG 读作空间； ③相机低速匀稳飞越——这是氛围段不是炫技段，速度感交给后面的镜头。 手搓 UI 合规依据：非复刻场景（页面上不存在此画面），按核心理念 1 修订版走质量+表达明确性门槛。", "source": "references/shots/opening/dataviz-landscape-open.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "dataviz-landscape-open", "label": "dataviz-landscape-open", "description": "暗场支流线束地景开场——多条流线汇入主干、虚构 ID 标签浮在线上、相机重景深低速飞越", "media": {"url": "./media/dataviz-landscape-open.mp4?v=1790980736796", "type": "mp4"}}], "sourceUrl": "./source/dataviz-landscape-open.md", "category": "opening", "tags": ["opening", "data", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "deck-deal-flyin", "summary": "暗色石墨桌面上的实体牌堆特写环绕开局，灯从牌堆亮到旁边的页面板，一摞卡像发牌一样硬加速甩进网格，相机追着发牌升起后仰、落在整块满板的跑道式俯瞰上定格", "use": "展示\"内容量大/源源不断汇入\"的列表页与卡片墙；建立信息密度的第一印象", "duration": "150f（约 5s：0–36 牌堆特写 + 预备，36–~101 发牌，108–150 满板 hold）", "energy": "高（节奏爬升段主力，不放开场第一镜）", "intention": "先给悬念（这一摞是什么？），再给答案（是几十个项目，它们自己飞进页面各就各位）。观众要感受到\"东西源源不断地涌进来\"，每张卡带着急迫感砸到位。", "source": "references/shots/ui-entrance/deck-deal-flyin.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "deck-deal-flyin", "label": "deck-deal-flyin", "description": "暗色石墨桌面上的实体牌堆特写环绕开局，灯从牌堆亮到旁边的页面板，一摞卡像发牌一样硬加速甩进网格，相机追着发牌升起后仰、落在整块满板的跑道式俯瞰上定格", "media": {"url": "./media/deck-deal-flyin.mp4?v=1790980736797", "type": "mp4"}}], "sourceUrl": "./source/deck-deal-flyin.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "depth-layer-moves", "summary": "分层深度运镜——多层视差滑轨：3 层速度梯度横移出纵深，滑轨落定时主角浮起", "use": "平面截图要\"有厚度\"的段落：卡组 / 列表 / 整页的横向巡览", "duration": "4–5.5s 持续（demo 165f）", "energy": "中（质感型）", "intention": "整页平移是\"看页面\"，分层深度是\"在页面的空间里\"。视差滑轨给横移 加纵深（迪士尼多平面摄影机原理，Linear 片同款质感）。", "source": "references/shots/camera/depth-layer-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "multiplane", "label": "multiplane", "description": "分层深度运镜——多层视差滑轨：3 层速度梯度横移出纵深，滑轨落定时主角浮起", "media": {"url": "./media/multiplane.mp4?v=1790980736798", "type": "mp4"}}], "sourceUrl": "./source/depth-layer-moves.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "doc-park-left-pill-deal", "summary": "文档不淡出而是向左滑出只露约 35% 宽并微缩到 0.92，右侧按旁白节奏慢速发牌三张白底描边药丸（outBack 弹入），每张落定后其下方字幕逐词加深、下一张到来前整句淡出，左侧文档全程极缓慢自动滚动保持\"正在被读\"", "use": "旁白驱动的\"分析结论逐条给出\"段落；文档理解、推荐理由、审阅意见类产品的核心说明镜头", "duration": "约 5.8s（174f@30fps）", "energy": "低（慢发牌节奏，全片无峰值；靠自动滚动维持活性）", "intention": "结论要一条一条给，观众才记得住。但如果把来源文档淡出，结论就变成了空中楼阁——观众 不知道这些话从哪来。这张卡的解法是**让来源留在画面里**：文档靠左驻留只露一截，还在 缓慢滚动（说明它正在被读），右侧的每条结论都是从这份文档里长出来的。发牌节奏刻意慢， 是为了给旁白留出说完一句的时间。", "source": "references/shots/ui-entrance/doc-park-left-pill-deal.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "doc-park-left-pill-deal", "label": "doc-park-left-pill-deal", "description": "文档不淡出而是向左滑出只露约 35% 宽并微缩到 0.92，右侧按旁白节奏慢速发牌三张白底描边药丸（outBack 弹入），每张落定后其下方字幕逐词加深、下一张到来前整句淡出，左侧文档全程极缓慢自动滚动保持\"正在被读\"", "media": {"url": "./media/doc-park-left-pill-deal.mp4?v=1790980736799", "type": "mp4"}}], "sourceUrl": "./source/doc-park-left-pill-deal.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "document-typewriter-reveal", "summary": "悬浮在暗场里的整页真排版文档窗口在光标后自己\"写\"出来、侧栏跟进、历史条目逐个落入轨道，相机从斜侧标题特写一路后撤到全窗", "use": "文档/报告/笔记类功能镜头；信息密度最高的一拍", "duration": "150f（约 5s，含 history-list-stack 尾段与标语 hold）", "energy": "低中（信息密度最高，节奏放稳让观众读字）", "intention": "观众会读清屏幕上每个字——这一镜的说服力全在\"文档是真的\"。打字机式写入把静态页面变成\"正在被写出来的文档\"，侧栏历史条目落入补上\"持续产出\"的时间纵深。", "source": "references/shots/typography/document-typewriter-reveal.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "document-typewriter-reveal", "label": "document-typewriter-reveal", "description": "悬浮在暗场里的整页真排版文档窗口在光标后自己\"写\"出来、侧栏跟进、历史条目逐个落入轨道，相机从斜侧标题特写一路后撤到全窗", "media": {"url": "./media/document-typewriter-reveal.mp4?v=1790980736800", "type": "mp4"}}], "sourceUrl": "./source/document-typewriter-reveal.md", "category": "typography", "tags": ["typography", "ui-entrance"], "addedAt": "2026-07-20T02:21:04.000Z"}, {"name": "draw-svg-trace", "summary": "描边生长圈注——一条带笔头的墨线沿元素轮廓跑一圈把它\"画\"出来，闭合瞬间闪黑交棒、内容淡入；同套路可给标题画下划线", "use": "单个卡片/图表/标题的被点名入场；元素级手法（整页级蓝图描线归 wall-reveal-moves B 式）", "duration": "132f（预告 10f + 描边 40f + 闪黑交棒 16f + 下划线 18f + hold 40f，约 4.4s）", "energy": "中", "intention": "\"画出来\"是纸墨审美里最顺手的入场隐喻：元素不是飞进来也不是淡进来， 而是被一支看不见的笔当场描出来。库内 wall-reveal-moves B 式已有整页 蓝图版（全屏线框逐段画+区域点亮），本卡是它的**元素级特写版**—— 一条线、一个主体、一次闭合，笔头可见、方向可读，适合\"接下来讲它\" 的点名时刻。第二用法是标题下划线生长：同一套路 18f 短版，给重点词 一笔手绘强调，与马克笔审美 token 天然同族。", "source": "references/shots/ui-entrance/draw-svg-trace.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "draw-svg-trace", "label": "draw-svg-trace", "description": "描边生长圈注——一条带笔头的墨线沿元素轮廓跑一圈把它\"画\"出来，闭合瞬间闪黑交棒、内容淡入；同套路可给标题画下划线", "media": {"url": "./media/draw-svg-trace.mp4?v=1790980736801", "type": "mp4"}}], "sourceUrl": "./source/draw-svg-trace.md", "category": "ui-entrance", "tags": ["ui-entrance", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "element-body-moves", "summary": "元素身体感——contact-shadow-lift 接触阴影离面抬升：卡抬起时桌上的阴影同步放大变淡，纸片离桌被阴影证明", "use": "给\"位置在变\"之外补\"身体在变\"：卡片点名给悬浮证据；配 2.5D 运镜与逐张点名", "duration": "A 150f 5s", "energy": "A 低中", "intention": "库内运动卡全在管\"位置在变\"——飞入、滑动、弹跳，元素本身始终是刚体。 这一式管**身体在变**：给悬浮一个可信的证据——卡抬起时正下方阴影同步放大变淡， 纸片离桌，staging 法则给 2.5D 运镜垫的物理台词。与 CameraMotionBlur 的区别： 快门拖影是相机的事，离面抬升是身体的事。", "source": "references/shots/ui-entrance/element-body-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "contact-shadow-lift", "label": "contact-shadow-lift", "description": "元素身体感——contact-shadow-lift 接触阴影离面抬升：卡抬起时桌上的阴影同步放大变淡，纸片离桌被阴影证明", "use": "逐张点名强调；2.5D 段落的离面铺垫", "media": {"url": "./media/contact-shadow-lift.mp4?v=1790980736802", "type": "mp4"}}], "sourceUrl": "./source/element-body-moves.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "flying-words", "summary": "22 个关键词按黄金角铺在扁椭圆截面上，沿 z 轴从远处飞到相机前擦身而过，透明度走 [0,1,0.5,0.2,0] 生命曲线，跑满 2 整圈首尾无缝", "use": "关键词云/能力清单的动态背景；片头片尾的\"信息量\"垫底层；需要纵深穿越感的转场", "duration": "约 6.0s（180f@30fps，2 个完整循环，可无缝接续）", "energy": "高（全屏持续 3D 位移，画面无一刻静止）", "intention": "关键词列举最土的做法是堆一屏静态词云。词语隧道把同一批词**摊到时间轴上**： 远处生成、由小变大、擦过镜头消失，观众永远只在读三五个词，但主观感受是 \"词很多\"。它是背景层不是主角层——相机不动、元素动，所以前景压一层标题 或 UI 完全不打架。词表整体替换成项目关键词即可，不改一行运动逻辑。", "source": "references/shots/typography/flying-words.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "flying-words", "label": "flying-words", "description": "22 个关键词按黄金角铺在扁椭圆截面上，沿 z 轴从远处飞到相机前擦身而过，透明度走 [0,1,0.5,0.2,0] 生命曲线，跑满 2 整圈首尾无缝", "media": {"url": "./media/flying-words.mp4?v=1790980736803", "type": "mp4"}}], "sourceUrl": "./source/flying-words.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "fracture", "summary": "5×5 瓦片从 3D 碎片态按中心波纹逐圈聚合成整面海报，停一拍亮字，随后全部碎片背离中心加速旋转飞出画面", "use": "开场第一镜\"从混沌到成形\"的品牌/海报揭示；倒放或只取后半可作硬转场", "duration": "约 5.2s（156f@30fps；聚合 0–2.6s · hold 1s · 飞散 1.5s）", "energy": "高（两头高能、中段静止，适合压 BGM 重音起收）", "intention": "把\"产品成形\"拍成物理事件：碎片从三维空间各自带着旋转飞回原位，观众看着一面完整画面从无序中长出来；hold 读字后再整体炸出画面，把注意力干净地交给下一镜。进出对称，一支素材可正反两用。", "source": "references/shots/opening/fracture.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "fracture", "label": "fracture", "description": "5×5 瓦片从 3D 碎片态按中心波纹逐圈聚合成整面海报，停一拍亮字，随后全部碎片背离中心加速旋转飞出画面", "media": {"url": "./media/fracture.mp4?v=1790980736804", "type": "mp4"}}], "sourceUrl": "./source/fracture.md", "category": "opening", "tags": ["opening"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "fui-hud-moves", "summary": "FUI/HUD 准星咬合——reticle-lock-on 四个 L 形角标组成的取景框从画外飞入、超调回弹后咬合锁定目标", "use": "任何\"看这里\"的目标点名（替代箭头圈红，画面不冻结）", "duration": "2–3s（demo 90f）", "energy": "中高（咬合帧是打击点）", "intention": "科幻虚构界面（Jarvis/Territory）里可中性化的母题：运动中的捕获。 四个 L 形角标从画外冲入、超调回弹、\"咔\"地咬合到目标元素四角+弹标签 ——与 freeze-annotate 分工：那卡冻结画面标注，本卡在流动中点名。", "source": "references/shots/effects/fui-hud-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "reticle-lock-on", "label": "reticle-lock-on", "description": "FUI/HUD 准星咬合——reticle-lock-on 四个 L 形角标组成的取景框从画外飞入、超调回弹后咬合锁定目标", "use": "目标点名；踩音效重拍", "media": {"url": "./media/reticle-lock-on.mp4?v=1790980736805", "type": "mp4"}}], "sourceUrl": "./source/fui-hud-moves.md", "category": "effects", "tags": ["effects", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "gauge-readout-moves", "summary": "仪表读数两式——needle-sweep-selftest 满弧扫针（点火自检指针甩满全弧再回落真值）与 tape-scroll-fixed-pointer 滚带定针（针不动刻度带滚过+冲刺刹车）", "use": "dashboard 开场仪式/性能指标揭晓；A 多表盘开机感，B 单指标大跳变", "duration": "A 140f（4.7s）/ B 150f（5s）", "energy": "中高（机械仪式型）", "intention": "把\"报数值\"做成仪表的身体动作：A 是汽车点火自检——卡片里三个并排表盘 指针先\"唰\"地甩满全弧（270°）、扫过的刻度依次点亮，再弹簧回落定格真实值， 多表错峰成波浪，落定同帧盘下数值弹出，先亮量程再报数，开场宣誓感； B 是飞机空速带语法——读数窗 + 指针钉死画面中线，贯穿全画高的刻度带整体从窗后滚过，先顶着旧上限慢爬、升级后冲刺 （峰值 ~100px/f）、末尾 spring 刹车带回摆过冲，\"世界动、针不动\"， 数值大小变成看得见的位移距离。", "source": "references/shots/data/gauge-readout-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "needle-sweep-selftest", "label": "needle-sweep-selftest", "description": "指针去程 ~12f ease-out 甩满弧，回程 ~20f 带 5-8° 过冲回摆落真值；多表错峰 3-5f；落定同帧盘下数值弹出", "use": "dashboard 开场/系统就绪仪式", "media": {"url": "./media/needle-sweep-selftest.mp4?v=1790980736806", "type": "mp4"}}, {"key": "tape-scroll-fixed-pointer", "label": "tape-scroll-fixed-pointer", "description": "长刻度带 translate：慢爬段→45px/f 冲刺 ~25f→spring 刹车过冲回摆停位；窗内读数同步刷新", "use": "单指标大跳变（性能翻倍/配额提升）", "media": {"url": "./media/tape-scroll-fixed-pointer.mp4?v=1790980736807", "type": "mp4"}}], "sourceUrl": "./source/gauge-readout-moves.md", "category": "data", "tags": ["data"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "glass-pill-dictation-typing", "summary": "一条定宽玻璃胶囊以约 1.25 倍略大弹出后缓落到位，内部自左淡到右浓铺一层强调色暖光；光标先行、随后匀速打出听写句，光（连同胶囊背后的环境光）随打字进度渐渐退去，收尾成一条中性的磨砂玻璃条", "use": "语音/AI 输入框的登场；\"跟它说话\"的交互提示镜头；高能段之间的一个安静过渡拍", "duration": "约3.3s（100f@30fps）", "energy": "低（全片最安静的一拍，只有光在退）", "intention": "用\"光随输入熄灭\"讲一件很小的事：待命时它在发光（等你说话），你一开口 它就把光让给文字。3.3s 里只做三件事——弹出、打字、光退。任何额外动作 （弹跳、色变、图标动画）都会让这一拍不再是休止符。", "source": "references/shots/interaction/glass-pill-dictation-typing.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "glass-pill-dictation-typing", "label": "glass-pill-dictation-typing", "description": "一条定宽玻璃胶囊以约 1.25 倍略大弹出后缓落到位，内部自左淡到右浓铺一层强调色暖光；光标先行、随后匀速打出听写句，光（连同胶囊背后的环境光）随打字进度渐渐退去，收尾成一条中性的磨砂玻璃条", "media": {"url": "./media/glass-pill-dictation-typing.mp4?v=1790980736808", "type": "mp4"}}], "sourceUrl": "./source/glass-pill-dictation-typing.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "glitch-cycle", "summary": "同一行等宽槽位循环轮播 4 条状态短语，每条头尾按概率关键帧 [1,0,0,0.1,0,0,1] 全乱码、中段偶发单字抖动，切换瞬间叠 RGB 分离与整行位移；末条概率收 0 保证收尾干净", "use": "加载/构建/部署过程的状态播报；技术型片头的\"系统自述\"；需要机器口吻推进时间的一段垫底", "duration": "约 5.6s（168f@30fps；demo 每条短语 38f，末条延续到片尾作收尾 hold）", "energy": "中高（持续的高频噪声脉冲，切换点是峰值）", "intention": "状态播报最笨的做法是四行字逐条淡入。轮播把它们压进**一个槽位**： 短语头尾用乱码\"熔断\"再\"凝固\"，中段几乎干净只偶尔抽一下——观众读到的 是\"系统在一步步推进\"，而不是四条独立文案。乱码浓度是这卡的语法： 浓 = 正在切换，淡 = 正在这一状态里。底部进度条把四拍串成一条时间线， 最后一条把概率收到 0，落定即结束。", "source": "references/shots/typography/glitch-cycle.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "glitch-cycle", "label": "glitch-cycle", "description": "同一行等宽槽位循环轮播 4 条状态短语，每条头尾按概率关键帧 [1,0,0,0.1,0,0,1] 全乱码、中段偶发单字抖动，切换瞬间叠 RGB 分离与整行位移；末条概率收 0 保证收尾干净", "media": {"url": "./media/glitch-cycle.mp4?v=1790980736809", "type": "mp4"}}], "sourceUrl": "./source/glitch-cycle.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "glow-flyline-moves", "summary": "暗场光斑与飞线三式——glow-orb-ambient 光斑底噪、flyline-arc 飞线连接、orb-flyline-relay 同帧共振组合", "use": "全片唯一暗场段落的氛围与数据叙事：铺底噪用 A、讲数据流向用 B、要背景给前景搭腔用 C；Linear 官网味", "duration": "A 170f（~5.7s）/ B 140f（~4.7s）/ C 165f（5.5s）", "energy": "A 低（底噪级）/ B 中 / C 中高", "intention": "这是库内第一张整卡住在**暗场**的卡。白底提亮不可见判例反过来读就是： 要玩光，先去暗场。A 是空间的呼吸——深色底三团大光斑有机漂移，从中央 磨砂玻璃卡背后游过、颜色透过玻璃染进卡面，卡缘随最近光斑靠近而泛光， 背景不再是死的；B 是数据的动词——发光弧线从 A 卡\"打\"到 B 卡， 亮点头领跑、渐隐光尾，落点描边脉冲点亮，指标关联第一次有了方向；C 是 A+B 的焊接——飞线落点帧邻近光斑同帧涨亮一拍， 氛围层与事件层**同帧共振**，互相搭腔而非各演各的（组合命门：拆开共振帧 就退化成两张卡并置）。", "source": "references/shots/effects/glow-flyline-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "glow-orb-ambient", "label": "glow-orb-ambient", "description": "三团 500-700px radial 光斑 + blur(100px)，双正弦漂移；卡缘辉光按光斑距离 [180,720]px→[1,0] 加权取 max 驱动", "use": "暗场段落铺底；卡呼吸感", "media": {"url": "./media/glow-orb-ambient.mp4?v=1790980736810", "type": "mp4"}}, {"key": "flyline-arc", "label": "flyline-arc", "description": "手写 bezier 100 段采样，22f out-cubic 生长；光头条件挂载领跑，段 opacity 按离头距离渐隐；落点描边脉冲，可接力", "use": "数据流向/指标关联；dashboard 叙事", "media": {"url": "./media/flyline-arc.mp4?v=1790980736811", "type": "mp4"}}, {"key": "orb-flyline-relay", "label": "orb-flyline-relay", "description": "A+B 焊接：光斑 surge 与卡脉冲共用落点帧，涨亮 1+1.6×surge、5f 起升 15f 消散", "use": "暗场高光段；三卡接力收束", "media": {"url": "./media/orb-flyline-relay.mp4?v=1790980736812", "type": "mp4"}}], "sourceUrl": "./source/glow-flyline-moves.md", "category": "effects", "tags": ["effects", "data"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "gradient-transition", "summary": "背景在 linear、radial、conic 三类 CSS 渐变间平滑过渡——角度、色标、中心、半径逐参数插值，段间交叉淡化换类型", "use": "氛围底/章节底色的连续变奏；给静态排版段落提供\"活着\"的背景层", "duration": "约 6.7s（200f@30fps；linear 0–2.3s · radial 1.9–4.4s · conic 3.9–6.7s）", "energy": "低（纯背景运动，为前景内容让路）", "intention": "渐变不是静态贴图而是可动画的参数集：同类型渐变内部任何参数都能插值出丝滑变化，跨类型则用短交叉淡化衔接。作背景层用，给\"没有主体运动\"的段落一层持续的低速能量。", "source": "references/shots/transition/gradient-transition.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "gradient-transition", "label": "gradient-transition", "description": "背景在 linear、radial、conic 三类 CSS 渐变间平滑过渡——角度、色标、中心、半径逐参数插值，段间交叉淡化换类型", "media": {"url": "./media/gradient-transition.mp4?v=1790980736813", "type": "mp4"}}], "sourceUrl": "./source/gradient-transition.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "gradient-word-sweep", "summary": "黑底标语里关键词被渐变彩光从左到右快速扫过\"充能\"——波前字符辉光最强向后衰减，填满后字符间勾连细紫红闪电、整词稳态泛光呼吸", "use": "标语里给单个动词/卖点词充能（Supercharged/faster/AI…）；能量高潮段的文字戏；黑场品牌片的口号帧", "duration": "扫充 ~15–20f（要快）+ 稳态闪电呼吸 1–2s；全段 2.5–3.5s", "energy": "高（一词爆点，前后都该让位）", "intention": "整句白字里只有关键词被\"通电\"：渐变彩光从左到右快速扫过字符， 像能量注入——扫过的瞬间最亮（波前尾迹），随后衰减到稳态； 填满后字符之间跳起勾连的细闪电，词保持泛光呼吸。三个命门： **快**（扫充 15–20f，慢了读作进度条）、**波前最亮**（刚点亮的 字符效果最强，没有这个梯度就是静态渐变裁切）、**辉光克制** （AE 式多层泛光但别糊成一团，闪电细而稀疏才是点缀）。", "source": "references/shots/typography/gradient-word-sweep.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "gradient-word-sweep", "label": "gradient-word-sweep", "description": "黑底标语里关键词被渐变彩光从左到右快速扫过\"充能\"——波前字符辉光最强向后衰减，填满后字符间勾连细紫红闪电、整词稳态泛光呼吸", "media": {"url": "./media/gradient-word-sweep.mp4?v=1790980736814", "type": "mp4"}}], "sourceUrl": "./source/gradient-word-sweep.md", "category": "typography", "tags": ["typography", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "grain-dissolve", "summary": "整行字爆裂成沸腾颗粒噪点并浮现斜纹选区框，噪点云急速凝聚成更大号发光短字标，位移衰减归零定格", "use": "收尾\"XX. Now Live\"式上线宣告；长句信息压缩成品牌短标的能量聚合拍", "duration": "约 2.0s（60f@30fps；砂化 0.26–0.56s · 凝聚 1.2–1.42s · 凝固回落收尾）", "energy": "中高（短促、一次性的能量脉冲，天然的 outro 卡点）", "intention": "把\"一句话浓缩成一个词\"拍成物理事件：句子先失稳沸腾成颗粒（信息解体），选区框暗示\"正在选中提取\"，然后所有颗粒能量向中心坍缩成更大更亮的短字标——观众读到的是\"这一切归结为它\"。", "source": "references/shots/outro/grain-dissolve.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "grain-dissolve", "label": "grain-dissolve", "description": "整行字爆裂成沸腾颗粒噪点并浮现斜纹选区框，噪点云急速凝聚成更大号发光短字标，位移衰减归零定格", "media": {"url": "./media/grain-dissolve.mp4?v=1790980736815", "type": "mp4"}}], "sourceUrl": "./source/grain-dissolve.md", "category": "outro", "tags": ["outro"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "graze-face-tour", "summary": "大倾角贴面游走特写——镜头贴着 UI 表面低飞掠过（侧栏树/顶栏/列表当地形），页面文字初始悬浮在界面上空带同形软影，随镜头行进先后加速贴落回界面", "use": "功能区巡礼（把 UI 当地景飞掠）；配合暗场+霓虹缘光做产品\"内部世界\"段落；界面内容逐区登场", "duration": "单段 4–5s；可多段接力延长", "energy": "中高（运镜持续推进+元素连续落位，信息密度高）", "intention": "把 UI 拍成地形：大倾角特写让侧栏树、导航、列表行变成掠过的地貌， 浅景深强化\"贴面\"。戏眼是**文字空中贴落**：文字/组件不是原地淡入， 而是悬浮在界面上空（3D z 轴抬高），在空中时往界面投同形软影， 随镜头行进先后加速贴落、影子随高度收敛消失——观众看见界面在 镜头经过时\"完成自己\"。影子是可感命门：没有影子，悬浮读作 普通位移入场；有影子，空间关系瞬间成立。", "source": "references/shots/camera/graze-face-tour.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "graze-face-tour", "label": "graze-face-tour", "description": "大倾角贴面游走特写——镜头贴着 UI 表面低飞掠过（侧栏树/顶栏/列表当地形），页面文字初始悬浮在界面上空带同形软影，随镜头行进先后加速贴落回界面", "media": {"url": "./media/graze-face-tour.mp4?v=1790980736816", "type": "mp4"}}], "sourceUrl": "./source/graze-face-tour.md", "category": "camera", "tags": ["camera", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "hashtag-to-pill-materialize", "summary": "话题词打字实体化——居中打出 \"#word\"（红实心光标恒亮），1 帧硬切变成宽大胶囊标签，hold 后缩小左移落到页面标签位，再 1 帧硬切揭示成品页；\"两次硬切一次滑动\"的节奏骨架", "use": "标签/分类/关键词功能的演示段（笔记 app 打 tag、话题聚合）；\"输入 → 变成 UI 实体 → 归位到成品\"的三段式叙事", "duration": "120f（4s）——打字 ~40f + 硬切胶囊 hold ~18f + 缩移 ~14f + 硬切揭示后静置 ~1.2s（原片 18–21.5s）", "energy": "中（干脆利落，靠硬切给劲，不靠弹跳）", "intention": "文字变实体的常规做法是渐变/morph/展开，原片帧级拆解证明 Bear 反着 来：**实体化是 1 帧硬切**——上一帧还是文字+光标，下一帧就是完整 胶囊，无展开无 cross-fade 无回弹。硬切给的是\"啪、成了\"的确定感， 任何渐变都会把\"实体\"软化成\"特效\"。全段骨架是**两次硬切夹一次 滑动**：硬切实体化 → 平滑缩移归位 → 硬切揭示成品页。唯一的连续 运动（缩移）被两记硬切框住，才显得又快又稳。这个节奏骨架是命门， 三段挪动任何一段的性质（把硬切改渐变、把滑动改硬切）整卡就塌。", "source": "references/shots/interaction/hashtag-to-pill-materialize.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "hashtag-to-pill-materialize", "label": "hashtag-to-pill-materialize", "description": "话题词打字实体化——居中打出 \"#word\"（红实心光标恒亮），1 帧硬切变成宽大胶囊标签，hold 后缩小左移落到页面标签位，再 1 帧硬切揭示成品页；\"两次硬切一次滑动\"的节奏骨架", "media": {"url": "./media/hashtag-to-pill-materialize.mp4?v=1790980736817", "type": "mp4"}}], "sourceUrl": "./source/hashtag-to-pill-materialize.md", "category": "interaction", "tags": ["interaction", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "icon-field-colorize", "summary": "灰阶小图标点阵错峰浮现铺满全屏，停一拍后多道品牌色横带波纹极快向下扫翻全场——\"功能全景先摆满，品牌一瞬间点亮\"的开场/收束卡", "use": "开场铺陈产品能力面（图标=功能宇宙）再一举打上品牌色；功能集合页、生态/集成规模展示、片头 logo 前垫场", "duration": "浮现 ~45f 错峰 + 静置 ~10f + 翻色 12–45f + 终态静置；全段 3–6s（demo 170f：翻色走 30f 档 + 标题落版 + 终态 hold 1s）", "energy": "中（浮现是铺垫，翻色瞬间是唯一爆点）", "intention": "先用灰阶把\"多\"摆足——上百个小图标错峰浮进来铺满画面，灰阶保证 读作背景纹理不抢戏；停一拍让观众意识到\"摆满了\"，然后品牌色以 横带波纹形式极快扫过全场，灰世界一瞬间被点亮。命门在**翻色不是 同帧硬翻**：原片实测是 ~0.5s 内多道色波依次向下快扫（蓝先覆盖全场， 橙/绿/红依次覆盖更低行带），终态呈四色横带分层——波纹感让\"点亮\" 有方向和速度，硬翻只读作换了张图。", "source": "references/shots/opening/icon-field-colorize.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "icon-field-colorize", "label": "icon-field-colorize", "description": "灰阶小图标点阵错峰浮现铺满全屏，停一拍后多道品牌色横带波纹极快向下扫翻全场——\"功能全景先摆满，品牌一瞬间点亮\"的开场/收束卡", "media": {"url": "./media/icon-field-colorize.mp4?v=1790980736818", "type": "mp4"}}], "sourceUrl": "./source/icon-field-colorize.md", "category": "opening", "tags": ["opening", "ui-entrance", "outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "icon-performance-moves", "summary": "图标表演——attention-bounce 求关注弹跳（图标连跳递增+落地压扁+镜头被吸引）", "use": "半屏级 icon 特写段落；新功能引出", "duration": "156f（5.2s）", "energy": "蓄势引入", "intention": "库内图标动画品类首批入库：icon 是镜头怼着拍的表演者，不是 UI 角落的 微交互。attention-bounce 是 macOS Dock 语汇——Dock 里的 video-shotcraft app 图标原地连跳 4 次一次比一次高（0.35→1.2 倍 icon 高），每次落地压扁 （末跳宽 1.2x 高 0.8x）+涟漪溅点，邻居图标逐渐失焦、跳最高那下镜头向它 轻推 8%（被吸引），落定后弹开「New in Shotcraft」功能面板——把\"用户注意力\" 剪进叙事。", "source": "references/shots/effects/icon-performance-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "attention-bounce", "label": "attention-bounce", "description": "图标表演——attention-bounce 求关注弹跳（图标连跳递增+落地压扁+镜头被吸引）", "use": "新功能引出：\"看我\"→镜头看它→它开面板", "media": {"url": "./media/attention-bounce.mp4?v=1790980736819", "type": "mp4"}}], "sourceUrl": "./source/icon-performance-moves.md", "category": "effects", "tags": ["effects", "interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "impact-feedback", "summary": "命中反馈两式——hit-counter 连招计数（顿帧+伤害数字+combo 跳字）、anime-impact 动漫打击帧（负片+集中线+色散）", "use": "元素落位/撞击的\"命中一瞬\"——给砸入、撞停加游戏级手感；按强度阶梯选式", "duration": "n/a（元素级技法，寄生在落位动作上；各式占用帧数见参数表）", "energy": "高（瞬时冲击）", "intention": "元素砸到位却没有\"砸到了\"的一瞬，落位读作 PPT 飞入。游戏 juice （Vlambeer screenshake 理论）与动漫演出 impact frames 给了同一答案： 命中的那几帧把时间咬住，冲量才传到观众手上。两式是一条强度阶梯： B 用局部顿帧叠伤害数字和 combo 跳字，把功能清单剪成一套连招， 叙事感最强；C 是最重的一拳——撞停 3 帧翻负片炸集中线，强调级最高、 最风格化。", "source": "references/shots/effects/impact-feedback.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "hit-counter", "label": "hit-counter 连招计数", "description": "三卡接连砸入，每命中 = 顿帧 2f + 伤害数字上浮 + ×N 计数跳字逐次加码", "use": "功能点连打段--\"功能很多\"用连招讲；游戏化语言浓", "media": {"url": "./media/hit-counter.mp4?v=1790980736820", "type": "mp4"}}, {"key": "anime-impact", "label": "anime-impact 打击帧", "description": "crash-zoom 撞停的 3f 整幅负片反色 + 放射集中线 + 红青色散，第 4f 全撤", "use": "全片唯一高潮的那一拳；强调级封顶", "media": {"url": "./media/anime-impact.mp4?v=1790980736821", "type": "mp4"}}], "sourceUrl": "./source/impact-feedback.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "integration-hub-map", "summary": "旧页面一次性快翻 180°（侧棱瞬间亮闪）落成新中枢页，五个集成 app 图标同帧弹现、随即五条彩虹光管同帧齐连，光管内输送脉冲持续流动——\"翻开新一页，生态一齐接入\"", "use": "集成/生态能力段（一个产品连一切）；版本翻新叙事（旧页翻成新页）；暗场霓虹调性的功能高潮", "duration": "前摇 ~0.5s + 快翻 ~1.2s + 图标齐现 → 光管齐连两拍 ~0.7s + 输送呼吸 ≥1.5s；全段 4.5–5s", "energy": "中高（翻面是爆点，输送段是余韵）", "intention": "翻面是\"换时代\"：旧文档页整个翻转 180° 得到新中枢页——必须是 完整翻面不是转个角度（判例），翻的动作**快翻+尾段减速**、一口气 完成无分段停顿（\"匀速\"判例：用户说的匀速=无停顿，不是字面 linear；90° 侧棱停顿版被裁）。侧棱时刻只\"闪一下\"（1–3f 脉冲， 长光晕平台被裁）。接入是**两拍制**：五图标同帧弹现（第一拍）→ 五管同帧起画齐连（第二拍）——齐，才读作\"生态一次到位\"；错峰 逐个连读作逐个谈判（两轮被裁）。连通后光管内亮脉冲沿图标→中枢 方向持续循环，\"输送感\"是终态的生命。", "source": "references/shots/ui-entrance/integration-hub-map.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "integration-hub-map", "label": "integration-hub-map", "description": "旧页面一次性快翻 180°（侧棱瞬间亮闪）落成新中枢页，五个集成 app 图标同帧弹现、随即五条彩虹光管同帧齐连，光管内输送脉冲持续流动——\"翻开新一页，生态一齐接入\"", "media": {"url": "./media/integration-hub-map.mp4?v=1790980736822", "type": "mp4"}}], "sourceUrl": "./source/integration-hub-map.md", "category": "ui-entrance", "tags": ["ui-entrance", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "lead-word-zoom-assemble", "summary": "首词以 2.3 倍字号占据画面中央、hold 期间继续推近 6%，随后一条曲线同时完成「缩回终字号」与「整行左滑归位」，后续词各自从槽位右侧 0.5em 被推进来；支点横向钉首词中心、纵向钉基线（挂载时实测），整行上移的同一时窗副行浮出，停一拍后整幕 crash-zoom 推近失焦交棒", "use": "品牌名/产品名的 Introducing 字卡；发布会式开场第二镜；一句话主张需要\"先让一个词占满画面、再把整句补齐\"的场合", "duration": "约 2.8s（84f@30fps；组句 f36 完成、上移与副行 f32–46、静止 26f、末 12f crash）", "energy": "中高（起手就是满画面的大字，但全程只有一次运动，没有二次冲击）", "intention": "字卡最容易犯的错是\"整句一起淡入\"——观众同时收到 5 个词，一个都没记住。这张卡把 阅读顺序做成**物理顺序**：先只给一个词，而且大到占满画面、还在继续朝观众推近，观众 被迫先读它；然后这个词退回自己在句子里的尺寸和位置，整句围绕它长出来。落定时观众 已经读过两遍主词。 真正的手感命门不是缩放曲线，而是**支点**。首词从\"画面正中\"走到\"行内第三个字符的 位置\"，如果支点取行盒中心，缩放和左滑会各自把字往两边拽，末尾几帧基线抖得肉眼可见。 把 `transform-origin` 横向钉在首词中心、纵向钉在基线，这两点全程不动，整行就只是 \"收小\"，没有任何漂移。", "source": "references/shots/typography/lead-word-zoom-assemble.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "lead-word-zoom-assemble", "label": "lead-word-zoom-assemble", "description": "首词以 2.3 倍字号占据画面中央、hold 期间继续推近 6%，随后一条曲线同时完成「缩回终字号」与「整行左滑归位」，后续词各自从槽位右侧 0.5em 被推进来；支点横向钉首词中心、纵向钉基线（挂载时实测），整行上移的同一时窗副行浮出，停一拍后整幕 crash-zoom 推近失焦交棒", "media": {"url": "./media/lead-word-zoom-assemble.mp4?v=1790980736823", "type": "mp4"}}], "sourceUrl": "./source/lead-word-zoom-assemble.md", "category": "typography", "tags": ["typography", "opening"], "addedAt": "2026-09-01T15:59:12.000Z"}, {"name": "letterspace-materialize", "summary": "大字距字标全字符并行连续描画结晶——所有字母同帧起笔、笔画像手写一样连续生长、同帧齐收成词；氛围底景上的品牌字标显影", "use": "片尾/片头品牌字标登场（大字距细骨架字标；demo 为 video-shotcraft 全小写）；章节题字；needs 静谧/高级感的收束帧", "duration": "静置 ~15f + 描画 ~50f + 终态静置 ≥30f；全段 3–4s", "energy": "低（静谧仪式感，一次呼吸完成）", "intention": "字标不是淡入也不是打字机，而是\"结晶\"：全部字母的笔画同时 开始连续生长，像一只看不见的手同时写所有字母，同一瞬间齐收 成词。两个命门：**连续**（笔画必须是连续画出的过程，不许遮罩 分段——先半截再另半截会被读穿；任何中间帧都该像\"写到一半\"）； **同步**（所有字母同帧起笔、同帧完成——逐字错峰是打字机语义， 这里是整词一体的仪式感）。", "source": "references/shots/opening/letterspace-materialize.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "letterspace-materialize", "label": "letterspace-materialize", "description": "大字距字标全字符并行连续描画结晶——所有字母同帧起笔、笔画像手写一样连续生长、同帧齐收成词；氛围底景上的品牌字标显影", "media": {"url": "./media/letterspace-materialize.mp4?v=1790980736824", "type": "mp4"}}], "sourceUrl": "./source/letterspace-materialize.md", "category": "opening", "tags": ["opening", "typography", "outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "light-play-moves", "summary": "光效两式——spotlight-sweep 聚光扫字、sheen 单点扫光", "use": "把光当另一种笔触（扫/擦）：暗场标题揭示（A）、主角卡加冕（B）", "duration": "A 170f ~5.7s / B 150f ~5s", "energy": "A 中 / B 低", "intention": "库内\"光\"一直只有 spotlight-hero-card 一个点射手法；这两式把光做成 体系，两种笔触两种职责：A 是**扫**——暗场里几乎不可见的标题被锥形 光摆动扫亮，光到哪哪亮，与 spotlight-hero-card 的区别是那个打卡片、 这个扫文字；B 是**擦**——深墨主角卡上一道 45° 高光带缓扫一次，被 圆角裁住，无声的加冕。 全部深底或深主角——**白底上提亮不可见**（判例）是这整张卡的地基。", "source": "references/shots/effects/light-play-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "spotlight-sweep", "label": "spotlight-sweep", "description": "双层同文本：暗版 0.07 常驻，亮版 radial mask 随光斑走，锥形光摆两个来回后全亮定格", "use": "暗场大标题揭示开场", "media": {"url": "./media/spotlight-sweep.mp4?v=1790980736825", "type": "mp4"}}, {"key": "sheen-sweep", "label": "sheen-sweep", "description": "深墨卡上 45° 高光带 translateX 扫一次，overflow hidden 圆角裁剪", "use": "主角卡静止段的一次加冕", "media": {"url": "./media/sheen-sweep.mp4?v=1790980736826", "type": "mp4"}}], "sourceUrl": "./source/light-play-moves.md", "category": "effects", "tags": ["effects", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "line-carry-transition", "summary": "线条接力横移转场——场景 A 的进度条延伸出画，镜头跟线横移，线在移动中拐角围出场景 B 的卡框，全程无剪切", "use": "两个有图形亲缘的场景之间（进度条→卡框、下划线→图表轴）；一支片子的招牌转场位，Catch Me If You Can 片头的图形接力", "duration": "~6.3s / 190f（进度条走满 36f + 冲出 10f + 横移 56f + 收框 24f + 框内海报 30f + 静止 24f）", "energy": "中", "intention": "转场库三大族（穿越/藏切/体块）都在回答\"场景怎么换\"；本卡的回答是 **根本不换——一条线牵着你走过去**。进度条走满后末端延伸成长线冲出 卡缘，镜头跟着线横移 1920px 进入新世界，线在移动中拐直角围出 B 场景 的卡框，框闭合、内容淡入，从头到尾观众的眼睛没离开过这条线。图形 连续性本身就是转场。与 match-cut 的区别：那是切点两侧形状对位—— 终究还是切；这是连续绘制——**没有切**。线的身份要有叙事逻辑（进度条 \"走完了\"所以延伸出去），无来由的线只是装饰。", "source": "references/shots/transition/line-carry-transition.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "line-carry-transition", "label": "line-carry-transition", "description": "线条接力横移转场——场景 A 的进度条延伸出画，镜头跟线横移，线在移动中拐角围出场景 B 的卡框，全程无剪切", "media": {"url": "./media/line-carry-transition.mp4?v=1790980736827", "type": "mp4"}}], "sourceUrl": "./source/line-carry-transition.md", "category": "transition", "tags": ["transition", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "list-reveal", "summary": "垂直菜单 6 项按 10f 的间隔依次 scale 找位、软 back 轻微过冲落定，同时整个列表容器全程匀速上移——逐项入场与整体漂移是两层不相干的运动", "use": "导航/侧边栏/设置面板的入场；任何\"界面自己长出来\"的 UI 段落，也适合做旁白铺垫时的低能量底", "duration": "约 4s（120f@30fps）", "energy": "低（稳定节拍，无峰值；靠漂移维持画面不死）", "intention": "列表逐项淡入是最容易做得死板的一类动效：每项动完就停，画面在两项之间是完全静止的。 这张卡的解法是给容器加一层与逐项入场无关的慢速漂移——局部在\"找位\"，整体在\"呼吸\"。 观众读得清每一项，同时画面从头到尾没有一帧是钉死的。", "source": "references/shots/ui-entrance/list-reveal.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "list-reveal", "label": "list-reveal", "description": "垂直菜单 6 项按 10f 的间隔依次 scale 找位、软 back 轻微过冲落定，同时整个列表容器全程匀速上移——逐项入场与整体漂移是两层不相干的运动", "media": {"url": "./media/list-reveal.mp4?v=1790980736828", "type": "mp4"}}], "sourceUrl": "./source/list-reveal.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "list-stack-press", "summary": "列表卡从画面底部逐张飞上摞起，每张落地压弹整摞、计数器同步跳一格", "use": "feed/雷达/收件箱类\"每天有新东西\"的镜头；强调持续积累的资产列表", "duration": "约 3s（18–88f）", "energy": "中", "intention": "\"堆叠有重量\"：每张新卡落上来，已落定的整摞被压下再弹回——观众从物理反馈里读出\"这是实打实攒下来的东西\"。计数器同步跳格把数量感钉死。", "source": "references/shots/ui-entrance/list-stack-press.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "list-stack-press", "label": "list-stack-press", "description": "列表卡从画面底部逐张飞上摞起，每张落地压弹整摞、计数器同步跳一格", "media": {"url": "./media/list-stack-press.mp4?v=1790980736829", "type": "mp4"}}], "sourceUrl": "./source/list-stack-press.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "logo-shrink-wordmark-lockup", "summary": "霓虹切口大环快速收束成中央实心小白 O、过冲刹车时换成 video-shotcraft 标志，图标左移让位，字标字母逐个滑入完成 lockup，强调色标语收尾", "use": "片尾品牌定妆：从满屏图形能量收束到\"图标+字标+标语\"的标准 lockup", "duration": "约 4.4s（132f@30fps；收束 0.1–1.2s · 让位 1.5–2.1s · 字母 2–2.7s · 标语 3.2–3.7s）", "energy": "中（收束段有冲击力，整体是沉稳的落定节奏）", "intention": "片尾的\"盖章\"动作：满屏的霓虹大环携能量坍缩成一枚小图标，愈合缺口、转为纯白（从演出态到标准态），然后按品牌 lockup 的规范一步步落位——图标让位、字标进场、标语押尾。观众看到的是品牌从动态里\"站定\"。", "source": "references/shots/outro/logo-shrink-wordmark-lockup.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "logo-shrink-wordmark-lockup", "label": "logo-shrink-wordmark-lockup", "description": "霓虹切口大环快速收束成中央实心小白 O、过冲刹车时换成 video-shotcraft 标志，图标左移让位，字标字母逐个滑入完成 lockup，强调色标语收尾", "media": {"url": "./media/logo-shrink-wordmark-lockup.mp4?v=1790980736830", "type": "mp4"}}], "sourceUrl": "./source/logo-shrink-wordmark-lockup.md", "category": "outro", "tags": ["outro"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "magician-card-flourish", "summary": "午夜蓝暗场上蓝色星芒闪现 0.3s（X 形针状光束旋转 90°+中心辉光放射小光芒），卡片从闪光点弹射而出——极速自旋弧线飞向镜头、自旋随靠近衰减、瞬间硬定格（卡高 86% 画高）、光脉冲 + sheen 扫光，右侧文案随后逐行揭示", "use": "单张卡片/海报/封面的魔术性登场（片头主视觉、产品卡揭晓）；纯黑暗场；需要\"变出来\"仪式感的爆点", "duration": "156f（闪光 0.3s + 飞行 1.6s + 定格/扫光/文案揭示 + hold 3.3s；全段 5.2s）", "energy": "高（一次性爆点，定格后即静）", "intention": "魔术师甩牌：一道蓝色星芒闪过，卡片仿佛从光里被变出来——从画面 中心极远处（视觉上一个小点）弹射而出，沿弧线极速自旋飞向镜头， 到达中心瞬间硬定格成近满幅展示。三个魔术感命门：**闪光先行** （光是\"变\"的仪式，0.3s 短促干脆）、**弹射节奏**（起飞慢速蓄力→ 急加速踢出→弧线段减速抵达，slow-in→burst→decelerating arc）、 **定格即静**（无减速尾巴无回弹，13 整圈自旋保证定格恰为正面）。", "source": "references/shots/opening/magician-card-flourish.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "magician-card-flourish", "label": "magician-card-flourish", "description": "午夜蓝暗场上蓝色星芒闪现 0.3s（X 形针状光束旋转 90°+中心辉光放射小光芒），卡片从闪光点弹射而出——极速自旋弧线飞向镜头、自旋随靠近衰减、瞬间硬定格（卡高 86% 画高）、光脉冲 + sheen 扫光，右侧文案随后逐行揭示", "media": {"url": "./media/magician-card-flourish.mp4?v=1790980736831", "type": "mp4"}}], "sourceUrl": "./source/magician-card-flourish.md", "category": "opening", "tags": ["opening", "ui-entrance", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "marker-underline-title", "summary": "大标题落定后，关键词下方马克笔下划线从左到右快速描画——变宽笔形、毛糙边缘、微上斜跟随斜体字势，贴着字底", "use": "标题里强调单个关键词（new/free/AI…）；手写感/人味的品牌调性；正文标注式强调", "duration": "标题落定 +4~8f 后起笔，划线 8–12f，总 1–1.5s", "energy": "低（一笔点睛，不抢标题的戏）", "intention": "打印体标题里突然出现一笔手绘马克笔，用材质反差把一个词从 排版里拎出来——像人拿笔在海报上圈重点。命门有三：**快** （8–12f 一笔呵成，慢了读作加载条）、**近**（贴着字底，离远了 读作分隔线不是强调）、**跟字势**（斜体词的划线必须左低右高 微上斜——斜向画反是最容易犯且一眼假的错，判例见已知坑）。", "source": "references/shots/typography/marker-underline-title.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "marker-underline-title", "label": "marker-underline-title", "description": "大标题落定后，关键词下方马克笔下划线从左到右快速描画——变宽笔形、毛糙边缘、微上斜跟随斜体字势，贴着字底", "media": {"url": "./media/marker-underline-title.mp4?v=1790980736832", "type": "mp4"}}], "sourceUrl": "./source/marker-underline-title.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "mosaic-reframe", "summary": "12 张瓦片在规则网格、feature mosaic、对角瀑布串三种排版间连续变形，位置宽高各自插值、逐片微错峰，段间留 hold", "use": "\"同一批内容多种看法\"的陈列转场：作品集/模板库/相册产品的布局能力展示", "duration": "约 7.1s（214f@30fps；浮现 0–22f · hold A · A→B 56–92f · hold B · B→C 132–176f · hold C 至 214f）", "energy": "中（连续流动的重排，无爆点，气质从容）", "intention": "让观众看见\"布局本身在思考\"：同样 12 张内容，从整齐档案态（网格）变成有主次的策展态（feature mosaic），再变成有态度的动态态（对角瀑布）。## 动效核心 - 三套布局按 1920×1080 原生像素硬编码为坐标表（内容区 x 96–1824、y 212–984）：A=4×3 规则网格（间距 24）； B=6×4 单元格 mosaic（首片占 3×2 大位，间距 16）；C=竖幅相纸 300×372 沿 (850,214)→(1724,930) 对角摊开， `rot = −15° + i·3°` 递增旋转 - 每片对中心 x/y、w/h、rot **独立插值**，不走 transform 整体缩放——宽高真实变化，圆角阴影不变形； 位置先到：w/h 晚 2f、旋转晚 4f 收敛，B→C 的旋转带一次轻过冲（bezier 0.45,0,0.3,1.22） - 换位曲线 bezier(0.75,0,0.15,1)（慢起 → 急走 → 长尾软落），A→B 每片 26f、B→C 每片 30f； 途中按段进度 sin 包络抬起（放大 3.5% + 阴影变大变虚），落位贴回 - 因果驱动：右上角分段控件 Grid / Mosaic / Cascade 的强调色胶囊先滑到下一档（snappy 12f，途中横向拉长）， 瓦片晚 4f 才开始重排（父先动、子跟随） - 错峰：A→B 按序号先密后疏扫过（10f 跨度）；B→C 像发牌一样等间隔依次摊开（14f 跨度）， B→C 起叠放次序切换为\"后发的压上面\"（B 态无重叠，切换不可见） - 三态三种语气：B 态主图压衬线大字图注（Featured shot / Golden Hour / Shot 01 · Crash zoom · 4.5 s 逐词升起）； C 态瓦片长出 14px 相纸白边，左下留白处升起衬线大标题 + 副行，尾帧是完整海报 （demo 是 video-shotcraft 的 12 镜分镜板：页眉标志 + 字标 + Storyboard，收尾「Every shot, in sequence.」+ 品牌 tagline） - 开场：12 张照片沿对角线错峰升起（16f snappy），全程相机极缓推近 1→1.025", "source": "references/shots/transition/mosaic-reframe.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "mosaic-reframe", "label": "mosaic-reframe", "description": "12 张瓦片在规则网格、feature mosaic、对角瀑布串三种排版间连续变形，位置宽高各自插值、逐片微错峰，段间留 hold", "media": {"url": "./media/mosaic-reframe.mp4?v=1790980736833", "type": "mp4"}}], "sourceUrl": "./source/mosaic-reframe.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "neon-frame-forerun", "summary": "强透视直角霓虹框自左缘两头奔画先行成型，页面在框内由暗转亮，同时框内组件/文字从 3D 上空带同形软影错峰贴落、随页面点亮同步完成贴合，背景霓虹群（demo 为同形框纵深回声隧道）终段熄灭让位", "use": "暗场品牌片里给 UI 面板做\"登场仪式\"（框先到、内容后落）；功能区首次亮相；霓虹/赛博调性的段落开场", "duration": "框奔画 ~0.7s + 点亮&贴落 ~2.7s + 背景熄灭收束 ~1s；全段 4–4.7s（demo 140f）", "energy": "中高（三层动作叠进，但都服务同一次登场）", "intention": "先立框后填肉：霓虹线框像跑道灯一样两头奔画圈出位置，宣告 \"这里要出现东西\"；页面在框内由暗转亮的同时，组件从空中带影 贴落——观众看见界面被\"安放\"进框里。三层动作（框奔画/页面点亮/ 组件贴落）必须**同步咬合**：贴落进程与点亮进程同步推进、稍滞后 收尾，框光最终并入面板辉光。背景霓虹管群终段熄灭，把亮度让给 主角完成收束。", "source": "references/shots/ui-entrance/neon-frame-forerun.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "neon-frame-forerun", "label": "neon-frame-forerun", "description": "强透视直角霓虹框自左缘两头奔画先行成型，页面在框内由暗转亮，同时框内组件/文字从 3D 上空带同形软影错峰贴落、随页面点亮同步完成贴合，背景霓虹群（demo 为同形框纵深回声隧道）终段熄灭让位", "media": {"url": "./media/neon-frame-forerun.mp4?v=1790980736834", "type": "mp4"}}], "sourceUrl": "./source/neon-frame-forerun.md", "category": "ui-entrance", "tags": ["ui-entrance", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "neon-frame-orbit-drop", "summary": "霓虹框先行描框后，镜头绕页面左→右弧线旋转，页面全部组件/文字**同帧**从空中往下贴合（同形软影同步收敛）——整体登场式的框内安放", "use": "单页 UI 的一次性隆重登场（与巡礼/逐区亮相相对）；暗场霓虹调性段落的主视觉揭幕；neon-frame-forerun 的姊妹镜", "duration": "描框 ~0.5s + 旋转&同时贴落 ~2.5s + 落定 ~1s；全段 ~4.7s（140f，旋转到 128f 收住后留落定）", "energy": "中高（一次性的大动作，落定即静）", "intention": "neon-frame-forerun 的孪生变体：同样框先行、内容后落，但镜头 不是固定的——从页面左侧视角连续弧线旋转到右侧视角，旋转进行 的同时全部组件从空中贴落。命门是**同时贴合**：所有组件和文字 同帧起落、同帧贴合、软影同步消失——这是\"整体登场\"的语法 （判例：错峰版被裁\"应该是所有组件和文字同时从空中往下贴合\"）。 错峰贴落属于巡礼镜（graze-face-tour），一页一次性亮相 必须齐落，节奏语义不能混用。", "source": "references/shots/ui-entrance/neon-frame-orbit-drop.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "neon-frame-orbit-drop", "label": "neon-frame-orbit-drop", "description": "霓虹框先行描框后，镜头绕页面左→右弧线旋转，页面全部组件/文字**同帧**从空中往下贴合（同形软影同步收敛）——整体登场式的框内安放", "media": {"url": "./media/neon-frame-orbit-drop.mp4?v=1790980736835", "type": "mp4"}}], "sourceUrl": "./source/neon-frame-orbit-drop.md", "category": "ui-entrance", "tags": ["ui-entrance", "effects", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "neon-triple-marquee", "summary": "三行对向霓虹跑马灯 recap——三连词空心霓虹灯管巨字上中下排满一面斜拍的砖墙，奇偶行反向匀速无限横滚，三行按 1/3 相位轮流点亮，结尾逐行断电", "use": "片尾主题词复读机段落；三连词口号的\"余韵\"拍法；音乐段无旁白铺陈", "duration": "4–5s（demo 150f：18f 逐行点火上电 + 循环体 + 18f 逐行断电 + 8f 熄灯 hold）", "energy": "中高（持续流动 + 逐行脉冲，无瞬时冲击）", "intention": "一行 marquee 只是网页装饰；三行叠起来、奇偶反向、再让亮度按相位轮流 走，就成了\"主题词在观众眼前列队巡游\"。命门是**明暗轮唱**：任一时刻 只有一行是霓虹主角，其余压暗成细描边背景——三行全亮是灯牌事故， 轮流亮才是 recap。反向对滚制造\"包围感\"：上下行向右、中行向左， 视线被夹在中间，词从两侧源源不断流过，读作\"这三个词说不完\"。", "source": "references/shots/outro/neon-triple-marquee.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "neon-triple-marquee", "label": "neon-triple-marquee", "description": "三行对向霓虹跑马灯 recap——三连词空心霓虹灯管巨字上中下排满一面斜拍的砖墙，奇偶行反向匀速无限横滚，三行按 1/3 相位轮流点亮，结尾逐行断电", "media": {"url": "./media/neon-triple-marquee.mp4?v=1790980736836", "type": "mp4"}}], "sourceUrl": "./source/neon-triple-marquee.md", "category": "outro", "tags": ["outro", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "orbit-ring-title-open", "summary": "石墨暗场上八张 16:9 暗色内容卡按 45° 均布在 720×380 椭圆上匀速公转（卡身永不倾斜，纵深只由 sin θ 给出 ±12% 缩放、z 序与远处压暗失焦），环撑开期间卡内容冻结首帧、f24 之后八张一起开播；居中两级标题逐字解糊下沉落定，关键词到位那一刻荧光马克块自左横扫铺满、扫过处字反白为墨，mono 副行随后浮出；可选末段整行失焦淡出、环继续转着交棒下一镜", "use": "开场第一镜 = 「这个产品有一整套东西」；素材库/模板库/功能矩阵/案例集的门面拍；需要用真实运动的产品画面托住一句主张，而不是把截图摆成静态九宫格", "duration": "150f（5s@30fps；马克块 f64 落定后 2.9s 稳态巡回 + 极缓推近；开 HANDOFF_EXIT 时 f118 起退场交棒）", "energy": "中（唯一的持续运动是匀速公转，全片只有马克块横扫一次冲击）", "intention": "开场想说\"我们有一整套东西\"，最常见的做法是把截图排成网格——但网格是静止的，观众 读到的是\"一堆图片\"，不是\"一套会动的产品\"。这张卡把陈列改成**环形巡回**：八张卡沿 椭圆匀速公转，永远有卡在进画、有卡在出画，画面自带\"还有更多\"的暗示，而标题稳稳 钉在正中间不受影响。 关键的取舍是**卡内容要真的在播**。静态截图上环，观众只会认出\"轮播图\"；卡里跑着真 动效，同一个环立刻变成\"产品在工作\"。但八张卡同时开播会八个动效抢戏，谁也读不进去 ——所以入场期把卡内容**冻结在首帧**，等环撑开、标题起手之后再统一开播。观众的注意 力顺序因此是：先认出这是一圈产品画面 → 读标题 → 才注意到卡里都在动。", "source": "references/shots/opening/orbit-ring-title-open.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "orbit-ring-title-open", "label": "orbit-ring-title-open", "description": "石墨暗场上八张 16:9 暗色内容卡按 45° 均布在 720×380 椭圆上匀速公转（卡身永不倾斜，纵深只由 sin θ 给出 ±12% 缩放、z 序与远处压暗失焦），环撑开期间卡内容冻结首帧、f24 之后八张一起开播；居中两级标题逐字解糊下沉落定，关键词到位那一刻荧光马克块自左横扫铺满、扫过处字反白为墨，mono 副行随后浮出；可选末段整行失焦淡出、环继续转着交棒下一镜", "media": {"url": "./media/orbit-ring-title-open.mp4?v=1790980736837", "type": "mp4"}}], "sourceUrl": "./source/orbit-ring-title-open.md", "category": "opening", "tags": ["opening", "ui-entrance"], "addedAt": "2026-09-01T15:59:12.000Z"}, {"name": "outline-word-fill", "summary": "空心词（细暖灰描边、500 字重）从 3.2 倍急缓收缩落位，虚线大圆随后从 2.8 倍收到字周围并缓慢自转，左右水平虚线从画框边缘内伸；描边先微微增亮，实心白热字在一帧内硬切点亮，一闪辉光即定格", "use": "单词式利益点/口号的重锤一拍；节奏卡点上的\"钉子\"镜；深底品牌片的强调帧", "duration": "约 3.0s（90f@30fps，短促单拍 + 36f 落定）", "energy": "高（3.2 倍收缩 + 瞬时点亮，短时高冲击）", "intention": "一个词要打成钉子，靠的不是慢慢淡入而是**两次落定**：先是巨大空心字 急速收缩到位（这是尺寸的落定），再是描边在一帧内变实心白（这是质感的 落定）。中间那 1.5s 的虚线圆收缩与水平虚线内伸是\"瞄准\"过程——技术 制图语汇，让点亮那一下读作\"确认\"。填充**必须是瞬时**的：慢扫填充会把 钉子变成缓慢的美化动画。", "source": "references/shots/typography/outline-word-fill.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "outline-word-fill", "label": "outline-word-fill", "description": "空心词（细暖灰描边、500 字重）从 3.2 倍急缓收缩落位，虚线大圆随后从 2.8 倍收到字周围并缓慢自转，左右水平虚线从画框边缘内伸；描边先微微增亮，实心白热字在一帧内硬切点亮，一闪辉光即定格", "media": {"url": "./media/outline-word-fill.mp4?v=1790980736838", "type": "mp4"}}], "sourceUrl": "./source/outline-word-fill.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "outro-group-photo-launch", "summary": "全片元素从四面八方飞来围住字标合影，crane 落机位+舞台光+金尘做成发布会收场", "use": "outro/品牌收尾；多功能产品的\"全家福\"式终镜", "duration": "约 4.8s（145f）", "energy": "峰值（全片最高点）", "intention": "把看过的每个功能各抽一个代表元素叫回来合影，字标压轴登场——观众离场前最后记住的是\"这些东西属于同一个产品\"。规格必须是发布会级：能量推到全片最高。", "source": "references/shots/outro/outro-group-photo-launch.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "outro-group-photo-launch", "label": "outro-group-photo-launch", "description": "全片元素从四面八方飞来围住字标合影，crane 落机位+舞台光+金尘做成发布会收场", "media": {"url": "./media/outro-group-photo-launch.mp4?v=1790980736839", "type": "mp4"}}], "sourceUrl": "./source/outro-group-photo-launch.md", "category": "outro", "tags": ["outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "overhead-camera-moves", "summary": "俯拍揭示两式——tilt-reveal 俯仰抬正揭示、overhead-tabletop-drop 桌面卡阵横滑骤降扎入", "use": "用\"俯仰角\"讲故事的开场/转场：单页 establishing 用 A，多页巡视择一扎入用 B", "duration": "A 120f（4s）/ B 140f（4.7s）", "energy": "A 中 / B 中高", "intention": "库内俯拍视角一直空缺——crane-rise 是\"平移+缩放\"的升起（俯仰角 不动），space-camera C 式 drone-dive 是俯冲降落一镜到底；这两式让 **俯仰角本身讲故事**：A 是揭示——整页 rotateX 平躺、开场只见远端上缘 一条发光的透视窄带（像天际线上的第一道光），机位\"抬头\"回正，内容一排排 涌入视野，像掀开桌上的图纸；B 是选择——三张页面卡平躺成桌面卡阵，相机俯拍横向滑过依次 掠过（韦斯·安德森 tabletop），滑到目标页猛地俯冲扎入、抬正成满屏， \"巡视一圈，就选这张\"。选型：单页开场用 A，多页转场/开场用 B。", "source": "references/shots/camera/overhead-camera-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "tilt-reveal", "label": "tilt-reveal", "description": "perspective 容器内整页 rotateX -80° 平躺，~43f 抬正，rotateX/scale/translateY 共用 out-cubic，末端轻过冲", "use": "开场 establishing；单主体", "media": {"url": "./media/tilt-reveal.mp4?v=1790980736840", "type": "mp4"}}, {"key": "overhead-tabletop-drop", "label": "overhead-tabletop-drop", "description": "卡阵平躺 rotateX 62°，pan 段只动 translateX 横滑掠过，drop 段角度/缩放/位移三通道同跑扎入落版", "use": "多页巡视后择一；转场/开场两用", "media": {"url": "./media/overhead-tabletop-drop.mp4?v=1790980736841", "type": "mp4"}}], "sourceUrl": "./source/overhead-camera-moves.md", "category": "camera", "tags": ["camera", "opening", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "page-turn-transitions", "summary": "整页体块转场——barn-door-split 对开门裂幕（旧页裂两半滑出、新页迎上）", "use": "章节级换页：新旧交替的两个大段落之间的\"翻篇\"仪式；与 shot-transitions 系（镜头交棒）分工——那是\"航拍机移过去\"，这是\"页面自己是实体\"", "duration": "单式 150f（前态建立 30–40f + 转场 24–40f + 跟随与收尾 ≥70f），约 5.0s", "energy": "中高", "intention": "shot-transitions 三式和 transition-travel/hidden-cut 都把页面当\"场景\" ——相机在场景间移动。本卡把页面当**实体**：它有厚度、有重量、会 裂开。体块隐喻的仪式感更强，适合章节级大换页（功能 A 讲完→功能 B） 而非镜头级小交棒。对开门是\"旧的让位\"——旧页从正中撕开滑走、新页 从底下迎上来，暗示取代关系，专管新旧交替。", "source": "references/shots/transition/page-turn-transitions.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "barn-door-split", "label": "barn-door-split", "description": "整页体块转场——barn-door-split 对开门裂幕（旧页裂两半滑出、新页迎上）", "use": "新旧交替：改版前后、方案 A→方案 B", "media": {"url": "./media/barn-door-split.mp4?v=1790980736842", "type": "mp4"}}], "sourceUrl": "./source/page-turn-transitions.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "page-waterfall-wall", "summary": "页面瀑布墙——真实页面截图切成 3–4 列在 3D 后仰墙面上差速反向无限滚动，视差 + 镜头缓推做\"内容多到流不完\"的一览", "use": "\"多页面/多功能/多模板\"体量感段落；montage 中段铺陈或 intro 后的产品广度镜头", "duration": "4–6s（无限循环体，时长由段落需要裁）", "energy": "中（流动陈列型）", "intention": "流动式一览：让观众在几秒内\"看到很多页面流过\"，读感是体量而非细节。 与 outro-group-photo-launch 分工：那是**聚拢式**一览（元素飞来围住 字标定格合影，语义\"属于同一产品\"），本卡是**流动式**一览（内容持续 流过不定格，语义\"还有很多没给你看完\"）。 与 wall-reveal-moves 分工：那是整墙**入场动作**，本卡是墙的**持续状态**， 可用那卡入场后交棒本卡续流。", "source": "references/shots/ui-entrance/page-waterfall-wall.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "page-waterfall-wall", "label": "page-waterfall-wall", "description": "页面瀑布墙——真实页面截图切成 3–4 列在 3D 后仰墙面上差速反向无限滚动，视差 + 镜头缓推做\"内容多到流不完\"的一览", "media": {"url": "./media/page-waterfall-wall.mp4?v=1790980736843", "type": "mp4"}}], "sourceUrl": "./source/page-waterfall-wall.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "panel-grid-moves", "summary": "分格节奏——comic-panel-split 漫画斜格劈出同一主体的三个机位，咔咔咔三格定格后末格斜边吃屏成海报", "use": "把\"格子\"当节奏器：同主体多机位定格并列，逐格踩拍劈出；吃拍点", "duration": "156f ≈5.2s（全屏侧拍 20f + 三刀分格定格 + 吃屏 + 海报 hold）", "energy": "中高", "intention": "与 wall-reveal-moves 的区别是本卡的定位锚：那是\"整墙怎么入场\" （一次性揭示），这是\"格子怎么当节奏器\"——分格发生在节拍上，格变即鼓点。 A 是并：画面被三刀斜缝咔咔劈开，同一产品三种机位同时定格， 停一拍后末格斜边扫过吃掉全屏——Scott Pilgrim 的分屏语言。 适合单品多视角（demo：一支刻着 video-shotcraft 的定焦镜头，三格旁白框按 「Shot 01 / 02 / 03」编号，吃屏后落成「Craft the shot.」海报）。", "source": "references/shots/rhythm/panel-grid-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "comic-panel-split", "label": "comic-panel-split", "description": "分格节奏——comic-panel-split 漫画斜格劈出同一主体的三个机位，咔咔咔三格定格后末格斜边吃屏成海报", "use": "同一主体多视角并列；漫画感段落", "media": {"url": "./media/comic-panel-split.mp4?v=1790980736844", "type": "mp4"}}], "sourceUrl": "./source/panel-grid-moves.md", "category": "rhythm", "tags": ["rhythm", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "paper-title-card", "summary": "一句话逐词压印上纸、一个词标强调色斜体、短划线收束", "use": "章节转场/价值主张字卡；重要功能出场前的引导卡；全片呼吸位", "duration": "1.7–1.8s（50–55f）", "energy": "低（呼吸位，隔开两段高能镜头）", "intention": "在两段产品画面之间给观众一句话的喘息：说清\"接下来看什么、它值什么\"。letterpress 压印质感让字卡与纸墨风格的产品画面同属一个世界。", "source": "references/shots/typography/paper-title-card.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "paper-title-card", "label": "paper-title-card", "description": "一句话逐词压印上纸、一个词标强调色斜体、短划线收束", "media": {"url": "./media/paper-title-card.mp4?v=1790980736845", "type": "mp4"}}], "sourceUrl": "./source/paper-title-card.md", "category": "typography", "tags": ["typography", "transition", "rhythm"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "picker-carousel-feature-cycle", "summary": "移动端风竖向选择器——焦点药丸不动、内容穿过它，每项带明显 outQuint 减速吸附后完全静止，按到中心距离分层控制透明度/字号/灰度，落定时药丸做 scaleY 极轻呼吸", "use": "逐个念出功能名/场景名的列表镜头；\"选一个\"的交互演示；移动端产品的 picker 类控件展示", "duration": "约3.6s（108f@30fps）", "energy": "中（每一次吸附都是一个节拍点，5 拍匀速推进）", "intention": "把\"选择\"这件事的物理感做出来：焦点框是固定的，是内容在滚动并被吸住。 每项停下后必须**真的静止几帧**——连续滚动读作 loading 动画，停顿才读作 \"这一项被选中了\"。距离衰减（透明度 + 字号 + 灰度三通道同时衰减）是让 观众视线始终锁在中间那一行的唯一手段。", "source": "references/shots/interaction/picker-carousel-feature-cycle.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "picker-carousel-feature-cycle", "label": "picker-carousel-feature-cycle", "description": "移动端风竖向选择器——焦点药丸不动、内容穿过它，每项带明显 outQuint 减速吸附后完全静止，按到中心距离分层控制透明度/字号/灰度，落定时药丸做 scaleY 极轻呼吸", "media": {"url": "./media/picker-carousel-feature-cycle.mp4?v=1790980736846", "type": "mp4"}}], "sourceUrl": "./source/picker-carousel-feature-cycle.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "pill-chip-slot-cycle-handled", "summary": "白底句式 \"Your `chip` Handled\" 里深色胶囊内词竖向滚轮轮换，胶囊宽度按预量文本宽插值平滑伸缩、两侧文字被自然挤开收拢，胶囊上下露出 13% 透明度的灰色幽灵项", "use": "\"我们替你搞定 ___\" 这类句式卖点；SaaS 功能列举的一句话收口；浅底品牌片主视觉一拍", "duration": "约 5.0s（150f@30fps：静置 → 3 次切换（0.25/0.47/0.69）→ 尾部静置）", "energy": "中（三拍稳定节拍，宽度伸缩是唯一的连续运动）", "intention": "词槽轮换有两派：让句子躲开变化（宽度固定的滚轮），或者让句子**接受** 变化（胶囊撑宽、两侧文字被挤开）。这卡是后者，代价是必须把宽度算准， 回报是句子读起来活的——\"Your\" 和 \"Handled\" 被推着走，观众感到胶囊里 的词有分量。上下露出的灰色幽灵项是第二个记号：它明示\"这是个可以滚的 列表\"，让观众预期还有下一个词。", "source": "references/shots/typography/pill-chip-slot-cycle-handled.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "pill-chip-slot-cycle-handled", "label": "pill-chip-slot-cycle-handled", "description": "白底句式 \"Your `chip` Handled\" 里深色胶囊内词竖向滚轮轮换，胶囊宽度按预量文本宽插值平滑伸缩、两侧文字被自然挤开收拢，胶囊上下露出 13% 透明度的灰色幽灵项", "media": {"url": "./media/pill-chip-slot-cycle-handled.mp4?v=1790980736847", "type": "mp4"}}], "sourceUrl": "./source/pill-chip-slot-cycle-handled.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "pill-slot-cycle", "summary": "句中词槽轮换——固定句干钉死不动，句尾 pill 徽章每 ~0.7s 老虎机滚一格（旧的上飞加速淡出、新的从下带模糊滑入），连换 N 个功能词后落成完整句子收束", "use": "\"功能列举\"类文案的最优雅解法（比逐条列表快、比字符级滚动有语义）；一句话卖点 + 多个动词短语的段落", "duration": "入场 12f + 每拍 21f × 词数 + 收束 14f + hold；6 词约 6.7s（demo 200f，含 48f 完整句 hold）", "energy": "中（稳定节拍器，无峰值）", "intention": "罗列六个功能，列表要六行、逐条淡入要六拍还占满屏。词槽轮换把它们 塞进**一句话的一个槽位**里：句干 \"One skill to ___\"（demo 讲 video-shotcraft：Storyboard it → Capture the page → Move the camera → Cut on the beat → Design the sound → Render the film）是承诺，槽里 滚过的每个 pill 是证据，最后 pill 飞走、\"do it all.\" 落位——证据 列举完毕，结论盖章。结构自带三幕：承诺→列举→收束。命门是句干 **纹丝不动**：观众的眼睛全程钉在槽位上，句干一晃列举感就散。", "source": "references/shots/typography/pill-slot-cycle.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "pill-slot-cycle", "label": "pill-slot-cycle", "description": "句中词槽轮换——固定句干钉死不动，句尾 pill 徽章每 ~0.7s 老虎机滚一格（旧的上飞加速淡出、新的从下带模糊滑入），连换 N 个功能词后落成完整句子收束", "media": {"url": "./media/pill-slot-cycle.mp4?v=1790980736848", "type": "mp4"}}], "sourceUrl": "./source/pill-slot-cycle.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "print-texture-transitions", "summary": "印刷质感转场——ink-bleed-reveal 墨渗揭示（须状渗边洇开吃掉旧景）", "use": "换景接缝的纸墨审美款；与交棒三式/穿越式并列的第三族——\"介质显影\"型转场", "duration": "4–4.5s（洇开段 55–80f + 静止收尾 ≥30f）", "energy": "中（渐进显形，无冲击拍）", "intention": "转场语言已有交棒（shot-transitions 三式）和穿越（transition-travel） ，都是空间/光学隐喻。本式开第三族：**介质隐喻**——新画面不是\"到来\" 而是\"印染\"出来的，直接调用库内纸墨审美的物理想象：像一滴墨落在 宣纸上洇开吃掉旧景，有机、书写感。天然亲和 paper/ink 调性的片子， 是 light-leak-burn（强调色漏光）之外的另一个\"介质系\"接缝选择。", "source": "references/shots/transition/print-texture-transitions.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "ink-bleed-reveal", "label": "ink-bleed-reveal 墨渗揭示", "description": "印刷质感转场——ink-bleed-reveal 墨渗揭示（须状渗边洇开吃掉旧景）", "use": "旧景→新景替换；书写感、叙事调性", "media": {"url": "./media/ink-bleed-reveal.mp4?v=1790980736849", "type": "mp4"}}], "sourceUrl": "./source/print-texture-transitions.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "product-card-progressive-assemble", "summary": "详情卡像被逐字段抓取般自建——一枚\"填充光标\"领先跳格，图→标题→分类 pill 依次 pop→原价出现后被划线降级、强调色新价 spring 跳出→正文逐行揭示且高亮块由左向右刷过→色卡点亮→按钮填满，整卡全程极慢 scale 前推", "use": "商品/条目详情页的能力展示；\"结构化抽取\"\"自动填充\"\"数据自己长出来\"类叙事的主镜头", "duration": "约 5.7s（172f@30fps）", "energy": "中（连续小事件密集排布，无单点爆发；靠前推保持推进感）", "intention": "一张详情卡直接淡入，观众只看到\"有一张卡\"。逐字段落位则把卡变成一份**正在被填写的 表单**：每个字段各自到位，观众的注意力被牵着走一遍卡的信息结构——图在哪、标题在哪、 价格在哪、正文重点在哪。价格划线降级是全片唯一的语义事件（不是\"出现\"而是\"改变\"）， 所以它被安排在中段最显眼的位置。", "source": "references/shots/ui-entrance/product-card-progressive-assemble.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "product-card-progressive-assemble", "label": "product-card-progressive-assemble", "description": "详情卡像被逐字段抓取般自建——一枚\"填充光标\"领先跳格，图→标题→分类 pill 依次 pop→原价出现后被划线降级、强调色新价 spring 跳出→正文逐行揭示且高亮块由左向右刷过→色卡点亮→按钮填满，整卡全程极慢 scale 前推", "media": {"url": "./media/product-card-progressive-assemble.mp4?v=1790980736850", "type": "mp4"}}], "sourceUrl": "./source/product-card-progressive-assemble.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "quad-split-parallel-scenes", "summary": "画面硬切 2×2 四宫格，四个象限并行跑各自的微场景（打字、急推、逐词、交互链），关键节拍错开 3–6 帧制造信息轰炸", "use": "节奏段\"功能很多、同时发生\"的蒙太奇拍；预告片中段的密度峰值", "duration": "90f（3s@30fps：0–62f 并行轰炸 + 28f 终态 hold，全程无转场）", "energy": "高（四线并行 + 错拍冲击，标准的 BGM 副歌位）", "intention": "用并行密度替代顺序展示：四件事同时在眼前发生，观众来不及逐一细读，但每 3–6 帧就有一个象限\"动一下\"——扫视节奏被牢牢钉住。这是手法卡：格内内容全部可替换，错拍编排才是配方。", "source": "references/shots/rhythm/quad-split-parallel-scenes.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "quad-split-parallel-scenes", "label": "quad-split-parallel-scenes", "description": "画面硬切 2×2 四宫格，四个象限并行跑各自的微场景（打字、急推、逐词、交互链），关键节拍错开 3–6 帧制造信息轰炸", "media": {"url": "./media/quad-split-parallel-scenes.mp4?v=1790980736851", "type": "mp4"}}], "sourceUrl": "./source/quad-split-parallel-scenes.md", "category": "rhythm", "tags": ["rhythm"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "radial-ripple-phone-chips", "summary": "暖沙底四层同心圆错相呼吸如水波，中央手机 mockup 屏内 feed 自动缓滚，两侧白色 chip 先后 spring pop 入场并悬浮", "use": "移动端产品的\"这就是它\"定格镜头；功能点分列两侧的介绍段；片头/片尾的产品全景", "duration": "约5.6s（168f@30fps）", "energy": "低（安静、有呼吸感，靠同心圆的持续起伏撑住不冷场）", "intention": "用最少的动作把手机放在画面正中并让它\"活着\"：同心圆负责氛围呼吸， 屏内自动滚屏负责证明\"里面有内容在跑\"，两侧 chip 负责点出功能名。 三层动作各自极慢，叠起来才不会显得静止——这是产品定格镜头的标准配法。", "source": "references/shots/effects/radial-ripple-phone-chips.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "radial-ripple-phone-chips", "label": "radial-ripple-phone-chips", "description": "暖沙底四层同心圆错相呼吸如水波，中央手机 mockup 屏内 feed 自动缓滚，两侧白色 chip 先后 spring pop 入场并悬浮", "media": {"url": "./media/radial-ripple-phone-chips.mp4?v=1790980736852", "type": "mp4"}}], "sourceUrl": "./source/radial-ripple-phone-chips.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "radial-wave", "summary": "17×9 圆点阵列按到波源的欧氏距离错峰点亮，每点 scale 过冲到 1.5 再落回常亮，第一道波扫完后第二道亮蓝脉冲从外圈反向收拢回中心", "use": "产品/品牌开场的\"系统上电\"一拍；也用作数据网格、节点地图、覆盖范围类叙事的建立镜头", "duration": "约 3.8s（114f@30fps）", "energy": "中高（起手爆发一次，波前过后转为常亮低能量底子）", "intention": "把\"很多点同时存在\"这件静态事实，改写成\"能量从一个源头扩散到全体\"的动态事实。观众 看到的不是一张点阵图，而是一次通电：中心先亮，亮度像水波推过去，走完之后整张阵列 留在常亮态——为下一拍要放的内容铺好底。第二道反向波是回执，告诉观众这个系统会回应。", "source": "references/shots/ui-entrance/radial-wave.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "radial-wave", "label": "radial-wave", "description": "17×9 圆点阵列按到波源的欧氏距离错峰点亮，每点 scale 过冲到 1.5 再落回常亮，第一道波扫完后第二道亮蓝脉冲从外圈反向收拢回中心", "media": {"url": "./media/radial-wave.mp4?v=1790980736853", "type": "mp4"}}], "sourceUrl": "./source/radial-wave.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "research-card-stack-scroll", "summary": "深色论文卡每 12 帧一张沿右下轴线飞入中心叠压，落位带 1 帧压缩，只有最上一张全清晰渲染标题+作者+摘要，下方卡按堆积深度递增模糊变暗只露标题条，背景横向 grid 同步下移做速度参照", "use": "\"读了大量资料/处理了海量文档\"的量级交代；研究类、检索类、批处理类产品的能力镜头", "duration": "约 4.8s（144f@30fps）", "energy": "中高（匀速高频，无爆发但持续压迫）", "intention": "要说的是\"数量\"，但一次给 13 张卡会读成一堵墙。改成流水线：卡一张一张进，每张都被 读过（最上一张永远是全文渲染的那张），读完就沉进堆里变模糊。观众感受到的是持续不断 的吞吐量，而不是一个静态的堆。背景 grid 同速下移是速度参照——没有它，堆积会读作 \"卡在原地缩小\"。", "source": "references/shots/ui-entrance/research-card-stack-scroll.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "research-card-stack-scroll", "label": "research-card-stack-scroll", "description": "深色论文卡每 12 帧一张沿右下轴线飞入中心叠压，落位带 1 帧压缩，只有最上一张全清晰渲染标题+作者+摘要，下方卡按堆积深度递增模糊变暗只露标题条，背景横向 grid 同步下移做速度参照", "media": {"url": "./media/research-card-stack-scroll.mp4?v=1790980736854", "type": "mp4"}}], "sourceUrl": "./source/research-card-stack-scroll.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "rhythm-interrupt-moves", "summary": "打断节奏——jump-cut-punch-in 三级跳切推近：同构图三次无补间硬跳放大，逐级逼近目标", "use": "用\"打断连续性\"本身当节奏器：顿挫推近（A）；与 beat-cut-moves（切点排布）互补", "duration": "A 135f ≈4.5s", "energy": "A 中", "intention": "库内节奏卡管的都是\"怎么切、切多密\"；本卡管**怎么断**——观众预期 连续，你偏打断，打断方式即表达：A 是空间断——同构图三次无补间跳大 （1x→1.6x→2.6x），戈达尔跳切的顿挫，比连续推近更有\"看这里、再近点、 就是它\"的指令感。适合强制聚焦指标。", "source": "references/shots/rhythm/rhythm-interrupt-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "jump-cut-punch-in", "label": "jump-cut-punch-in", "description": "打断节奏——jump-cut-punch-in 三级跳切推近：同构图三次无补间硬跳放大，逐级逼近目标", "use": "逐级逼近核心指标；纪录片式盯住", "media": {"url": "./media/jump-cut-punch-in.mp4?v=1790980736855", "type": "mp4"}}], "sourceUrl": "./source/rhythm-interrupt-moves.md", "category": "rhythm", "tags": ["rhythm"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "riso-print-hits", "summary": "套印错位冲击帧——riso-misregistration-hit 单发：标题撞停瞬间裂成双色 riso 印版，抖两下\"啪\"地套准", "use": "标题/卡片的命中强调，纸墨审美版的\"故障闪\"；全片 1–2 次的单发高潮", "duration": "4s（120f，单发）", "energy": "高", "intention": "RGB 色散故障闪（impact-feedback C 式的一部分）是荧光屏语言，与纸墨 调性相克。这张卡给出印刷版平替：元素裂成两份单色 riso 印版（demo：荧光粉 × 蓝； multiply 油墨感而非 screen 荧光感，两版套准时叠成深色墨）， 像 risograph 没对准版，抖几下 \"啪\"地套准——同样的冲击力，介质想象完全换成纸上油墨。单发： 撞停瞬间裂版、震荡衰减、硬切套准，给一次命中盖章。demo 是一张 video-shotcraft 的 双色 riso 宣传海报（「CRAFT IT / LOUD.」+ 三栏卖点，圆章中心是单色版镜刻标志）。", "source": "references/shots/effects/riso-print-hits.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "misregistration-hit", "label": "misregistration-hit 单发", "description": "套印错位冲击帧——riso-misregistration-hit 单发：标题撞停瞬间裂成双色 riso 印版，抖两下\"啪\"地套准", "use": "全片 1-2 次的命中盖章；标题/大字的到位一瞬", "media": {"url": "./media/misregistration-hit.mp4?v=1790980736856", "type": "mp4"}}], "sourceUrl": "./source/riso-print-hits.md", "category": "effects", "tags": ["effects", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "row-embed", "summary": "内容行像卡片一样从空中降下、rotateX 收平、嵌入瞬间底边亮一道强调色的缝", "use": "\"结构化数据长进页面\"的详情页/列表镜头；行级内容的批量入场", "duration": "约 2s（12–68f）", "energy": "中", "intention": "详情页的行不是\"显示出来\"而是\"长进去\"——每一行从空中降下并严丝合缝嵌入页面布局，嵌入瞬间的强调色缝是\"咔哒\"扣上的视觉拟音。", "source": "references/shots/ui-entrance/row-embed.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "row-embed", "label": "row-embed", "description": "内容行像卡片一样从空中降下、rotateX 收平、嵌入瞬间底边亮一道强调色的缝", "media": {"url": "./media/row-embed.mp4?v=1790980736857", "type": "mp4"}}], "sourceUrl": "./source/row-embed.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "sakuga-timing-shift", "summary": "一拍三转一拍一——元素先以每 3 帧一步的手翻书顿挫移动，高潮瞬间切成逐帧丝滑冲刺，帧率量化的突变本身就是看点", "use": "单元素的强调性位移（卡片入场、指标冲线）；需要\"手工感→高潮爆发\"反差的段落", "duration": "150f（5s）", "energy": "中高", "intention": "库内时间轴操纵已有 speed-ramp-freeze 的定格解冻与 hit-counter 的局部顿帧。 本卡是另一种——**改的不是速度是帧率本身**： 顿挫段驱动帧 q=floor(f/3)*3，元素每 3 帧才动一步（10fps 手翻书）， 切换帧起改用原始 f 逐帧驱动，丝滑冲刺。一拍三的钝与一拍一的滑 同屏对切，日式作画的拍数演出（shooting on 3s / on 1s）。顿挫段 不是低级感是手工感，切换点即高潮标记。", "source": "references/shots/rhythm/sakuga-timing-shift.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "sakuga-timing-shift", "label": "sakuga-timing-shift", "description": "一拍三转一拍一——元素先以每 3 帧一步的手翻书顿挫移动，高潮瞬间切成逐帧丝滑冲刺，帧率量化的突变本身就是看点", "media": {"url": "./media/sakuga-timing-shift.mp4?v=1790980736858", "type": "mp4"}}], "sourceUrl": "./source/sakuga-timing-shift.md", "category": "rhythm", "tags": ["rhythm", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "scan-bracket-sweep", "summary": "文档弹到中央，四角落下 L 形取景括号，一条扫描光带拖着渐变尾迹在文档上往复扫 5 趟——文档全程静止，只有光在读它", "use": "\"正在解析/校验这份内容\"的过程镜头；文档类产品的能力演示；上传→分析链路的中段", "duration": "约5.0s（150f@30fps）", "energy": "中低（机械、克制，节奏全在往复扫掠的呼吸上）", "intention": "让观众看懂\"这份东西正在被机器逐行读过\"。取景括号先把目标框住（宣布检查 对象），扫描光带再往复走完全篇（宣布检查过程）。命门是**文档本身完全静止**： 一旦文档也在动，观众就分不清是\"被检查\"还是\"在加载\"。", "source": "references/shots/effects/scan-bracket-sweep.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "scan-bracket-sweep", "label": "scan-bracket-sweep", "description": "文档弹到中央，四角落下 L 形取景括号，一条扫描光带拖着渐变尾迹在文档上往复扫 5 趟——文档全程静止，只有光在读它", "media": {"url": "./media/scan-bracket-sweep.mp4?v=1790980736859", "type": "mp4"}}], "sourceUrl": "./source/scan-bracket-sweep.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "scanline-annotate-focus", "summary": "一条扫描线自上而下匀速掠过已存在的页面，越过哪块区块的下缘，哪块就被四角取景框从外扩处弹簧收拢对准（一次过冲），随后贴出一枚逐字打出的机器标签，顶部状态行同步计数 00/06→06/06", "use": "\"AI 正在读你的页面/品牌\"的分析镜头；设计系统/品牌规范的拆解介绍；产品能力的自我说明段", "duration": "约5s（150f@30fps）", "energy": "中（机械冷静，节奏由扫描线匀速推动，标注是节拍点）", "intention": "把\"分析\"这件抽象事做成可见的因果链：扫描线走到哪，那块就被框住、被 命名。观众读的是\"机器的视线\"，所以扫描线必须匀速、标注必须严格滞后于 扫描线过境——**先扫到再弹框**，顺序一旦错乱就变成了预先编排的动画。", "source": "references/shots/effects/scanline-annotate-focus.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "scanline-annotate-focus", "label": "scanline-annotate-focus", "description": "一条扫描线自上而下匀速掠过已存在的页面，越过哪块区块的下缘，哪块就被四角取景框从外扩处弹簧收拢对准（一次过冲），随后贴出一枚逐字打出的机器标签，顶部状态行同步计数 00/06→06/06", "media": {"url": "./media/scanline-annotate-focus.mp4?v=1790980736860", "type": "mp4"}}], "sourceUrl": "./source/scanline-annotate-focus.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "scanline-assemble-flyin", "summary": "页面开场是一张只有网格与虚线槽位的蓝图画板，一条亮扫描线自上而下掠过；扫到每个槽位，该处组件就从画外飞入过冲贴合，带方向性残影模糊与落位咬合角标——扫完整页恰好装配完成", "use": "\"页面自己生成\"的开场；AI 建站/自动排版类产品的核心演示；从空白到成品的能力叙事", "duration": "约5.2s（156f@30fps）", "energy": "中高（扫描线是稳的，但每次组件飞入都是一个爆点，密度递进）", "intention": "让\"页面被生成\"这件事有一个可信的施工顺序：扫描线是施工进度条， 组件从画外飞进来贴合是施工动作。关键是**扫完那一刻恰好装完最后一块** ——扫描线提前收工或组件拖尾都会让\"扫描驱动装配\"的因果关系散掉。", "source": "references/shots/effects/scanline-assemble-flyin.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "scanline-assemble-flyin", "label": "scanline-assemble-flyin", "description": "页面开场是一张只有网格与虚线槽位的蓝图画板，一条亮扫描线自上而下掠过；扫到每个槽位，该处组件就从画外飞入过冲贴合，带方向性残影模糊与落位咬合角标——扫完整页恰好装配完成", "media": {"url": "./media/scanline-assemble-flyin.mp4?v=1790980736861", "type": "mp4"}}], "sourceUrl": "./source/scanline-assemble-flyin.md", "category": "effects", "tags": ["effects"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "scroll-brake-moves", "summary": "长卷急刹两式——changelog-scroll-brake 基本款（高速长卷指数减速精准停位+目标抬升）与 brake-reticle-lock 组合款（急刹帧同帧准星咬合）", "use": "changelog/发布史/长列表段落：\"一直在发货，今天这条最大\"；要给停点更强打击感用 B", "duration": "A 4–5s / B 5s", "energy": "高开中收（速度对比型）", "intention": "Linear changelog 视频语法：一整年的更新日志作为长卷高速掠过 （糊成色带），指数减速精准急刹停在本次发布那条上，该条抬升离面 高亮、其余退暗——密度感讲\"一直在发货\"，急停讲\"今天这条最大\"。 B 是组合变异：急刹帧**同帧**四个 L 角标从画外飞入咬合锁定停点 条目——急刹的\"哐\"与咬合的\"咔\"叠在同一帧共振（组合命门： 角标起跳帧=列表首停帧，错开退化成两招并置）。", "source": "references/shots/data/scroll-brake-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "changelog-scroll-brake", "label": "changelog-scroll-brake", "description": "translateY 扫 ~2400px（out exp 指数减速 ~50f），blur 由帧间位移差分驱动（0-6px 自动清零）；停点行 scale 1.03 抬升+阴影+3px 描边，其余 opacity 退 0.38", "use": "changelog 段落基本款", "media": {"url": "./media/changelog-scroll-brake.mp4?v=1790980736862", "type": "mp4"}}, {"key": "brake-reticle-lock", "label": "brake-reticle-lock", "description": "滚动三段：sin-in 加速→cubic-out 猛减速冲过头 +30px→回弹落定；blur=v×0.12 封顶 24px；角标从 ±620/±320 画外 Easing.back(2.4) 飞入咬合，高亮 6f 内完成、标签 back(2.6) 弹出", "use": "停点需要更强打击感的高光段", "media": {"url": "./media/brake-reticle-lock.mp4?v=1790980736863", "type": "mp4"}}], "sourceUrl": "./source/scroll-brake-moves.md", "category": "data", "tags": ["data", "rhythm"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "segmented-thumb-hero", "summary": "分段控件 thumb 位移当主角特写——超大胶囊 segmented control 弹簧浮入，描边箭头光标画外滑入按下，白 thumb 8f ease-out 滑到另一段，到位瞬间新图标 spring 弹出、旧图标收起", "use": "\"模式切换/二选一\"功能的宣告镜头（demo 的 video-shotcraft Prompt→Film、Chat→Agent 式）；一个 UI 微交互撑一整镜的特写拍法", "duration": "~3.5s（demo 110f：浮入 18f + 光标 24f + 点击 + 滑动 8f + 图标弹出 + hold）", "energy": "中（微交互特写，精致不轰）", "intention": "产品切到新模式，通常拍法是整个界面换掉。本卡反着来：把 segmented control 放大到 1080px 宽拍特写，**thumb 那 8 帧位移本身就是叙事**—— \"我们从 A 走到了 B\"。没有任何页面上下文，控件即舞台。因果链完整： 光标滑入（有人来了）→ 按下+涟漪（做了决定）→ thumb 滑动（世界响应） → 新图标弹出（新身份确立）。四拍缺一不可，缺了光标就是 UI 自己在动， 缺了图标弹出就是切换没有奖励。", "source": "references/shots/interaction/segmented-thumb-hero.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "segmented-thumb-hero", "label": "segmented-thumb-hero", "description": "分段控件 thumb 位移当主角特写——超大胶囊 segmented control 弹簧浮入，描边箭头光标画外滑入按下，白 thumb 8f ease-out 滑到另一段，到位瞬间新图标 spring 弹出、旧图标收起", "media": {"url": "./media/segmented-thumb-hero.mp4?v=1790980736864", "type": "mp4"}}], "sourceUrl": "./source/segmented-thumb-hero.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "shot-transitions", "summary": "镜头交棒三式——推进流白、whip-pan 甩镜（急刹款）、mask-wipe 穿窗（纵深款），按能量落差与接缝语义选型", "use": "任何两镜衔接处（技法卡，分镜阶段排完镜头后逐个接缝选一式）", "duration": "n/a（技法卡；各式占用帧数见参数表，从相邻镜头预算里划）", "energy": "n/a（技法卡，不占能量位）", "intention": "库内各镜头卡只管自己的入场和收尾，镜与镜\"怎么接\"一直没有词汇—— 接缝裸切会把逐镜头攒出的电影感一次漏光。公认优秀的发布片 （Linear Releases/Agent，2026-07-11 抽帧逆向）全程没有一次裸切： 换景要么靠深度旅行、要么靠焦点接力、要么靠黑场字卡蓄力。本卡收三式： 白闪盖切、甩镜借糊帧换景、穿窗点进详情世界。", "source": "references/shots/transition/shot-transitions.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "flash-cut", "label": "推进流白 flash-cut", "description": "前镜相机推进，切点跨骑一层白闪盖住换页", "use": "交互穿透、能量相近的页面→页面（库内已有，收编）", "media": {"url": "./media/flash-cut.mp4?v=1784437314733", "type": "mp4"}}, {"key": "whip-pan", "label": "whip-pan 甩镜", "description": "机位一拍横甩到下一场景，中段运动模糊糊到不可辨，借糊帧换景", "use": "快节奏功能段连打（高能量→高能量的轻快款，比 B 式省帧提速）", "media": {"url": "./media/whip-pan.mp4?v=1790980736865", "type": "mp4"}}, {"key": "mask-wipe", "label": "mask-wipe 穿窗", "description": "页面内真实元素（卡片）放大成全屏窗口，新场景从窗内长出接管", "use": "语义化接缝：功能总览→该功能详情（\"点开这张卡进入它的世界\"）", "media": {"url": "./media/mask-wipe.mp4?v=1790980736866", "type": "mp4"}}], "sourceUrl": "./source/shot-transitions.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "slam-entrance-moves", "summary": "高能砸入三式——kanada-perspective-snap 金田透视急停、score-slam 比分砸落、impact-burst-kit 落点冲击套件（波及邻卡）", "use": "主角卡/KPI 卡的重拳入场；impact-feedback 管落位后的反馈，本卡管入场本身就是冲击", "duration": "单式动作段 6–22f + 冲击余波 ~16f + hold ≥45f（demo：A 120f / B 135f / C 140f）", "energy": "高", "intention": "库内入场词汇的力度上限一直是 deck-deal-flyin 的\"发牌\"——快但不重。 本卡补\"砸\"这一档，三种口味：A 是方向感——卡片带鱼眼级夸张透视贴着 镜头甩进来，\"啪\"地弹平，动漫金田流的潇洒；B 是重量感——KPI 卡从 镜头前 2.6 倍大小砸落，圆环+尘点+震屏三件套同帧起爆，体育比分弹窗 的分量；C 是传导感——B 的三件套之上，冲击波前沿扫过左右邻卡时把 它们可见地推开再弹回，\"这一下震到了邻居\"，一件事说清力量大小。 选型按叙事需要：告诉观众\"它来了\"用 A，\"它很重\"用 B，\"它震动了 全场\"用 C。", "source": "references/shots/effects/slam-entrance-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "kanada-perspective-snap", "label": "kanada-perspective-snap", "description": "perspective 300→1500px + rotate3d 58°→0 + scale 1.7→1 甩入 18f，末 4f 过冲 +5° 弹平，长斜影收正", "use": "单卡潇洒亮相；调性偏动漫/轻快", "media": {"url": "./media/kanada-perspective-snap.mp4?v=1790980736867", "type": "mp4"}}, {"key": "score-slam", "label": "score-slam", "description": "卡从 scale 2.5/rotate 5° 六帧 Easing.in(quad) 砸落，落点帧圆环扩散+尘点飞散+震屏同帧", "use": "KPI/比分类重磅数字登场", "media": {"url": "./media/score-slam.mp4?v=1790980736868", "type": "mp4"}}, {"key": "impact-burst-kit", "label": "impact-burst-kit", "description": "B 三件套 + 冲击波前沿按半径-距离精算扫过邻卡帧，邻卡外推 30px + rotate ±3° 阻尼弹回", "use": "页面上已有邻居时的\"全场震动\"", "media": {"url": "./media/impact-burst-kit.mp4?v=1790980736869", "type": "mp4"}}], "sourceUrl": "./source/slam-entrance-moves.md", "category": "effects", "tags": ["effects", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "space-camera-moves", "summary": "3D 空间化运镜两式——exploded-view 爆炸分解（构件沿 Z 炸开再合体）、drone-dive-landing 无人机俯冲降落", "use": "把平面页面当 3D 实体拍的高光段落；两式都是\"大动作\"，一支片合计 ≤2 次", "duration": "A 170f（5.7s，炸开-悬停-合体-收尾标题全程）；C 105f（3.5s，俯冲 69f + 落定 hold 36f）单向俯冲", "energy": "高", "intention": "depth-layer 卡是给平移加纵深——层在动、页面还是页面。这两式更进一步： 整页被当成一个 3D 实体，相机（或世界）绕着它做实拍级机动。两式叙事 语义各占一格：A 说\"看看它由什么组成\"（拆解展示，Apple 发布片语言）； C 说\"从全局俯瞰砸到主角\"（上帝视角一头扎进 hero 特写，全景→焦点）。", "source": "references/shots/camera/space-camera-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "exploded-view", "label": "exploded-view", "description": "整页 3D 倾斜后构件沿 Z 轴错峰炸开悬停，一拍后逆序合体震屏收口", "use": "架构/组成展示：\"这个产品里有什么\"；模块总览段", "media": {"url": "./media/exploded-view.mp4?v=1790980736870", "type": "mp4"}}, {"key": "drone-dive-landing", "label": "drone-dive-landing", "description": "近垂直俯角悬停 → 猛扎俯冲 → 气垫减速停在 hero 卡特写", "use": "开场定场→入题；全局地图砸进单点的章节启动", "media": {"url": "./media/drone-dive-landing.mp4?v=1790980736871", "type": "mp4"}}], "sourceUrl": "./source/space-camera-moves.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "speed-ramp-freeze", "summary": "帧号非线性 remap 的节奏手法——定格标注（流动→定格圈注→解冻）", "use": "卡片流/长横移中把一个重点\"停下给人看\"；教学解说、评审语境", "duration": "定格标注全程 158f（≈5.3s，定格段 67f ≥45f）", "energy": "中高（速度反差本身即energy beat）", "intention": "匀速流读作 PPT（R2），全程快流观众抓不住重点（R3）。定格标注在一条 运动里干脆停下来——马克笔圈出重点再走。技术根是帧号 remap（斜率即速率）， 语义是\"停课划重点\"。", "source": "references/shots/rhythm/speed-ramp-freeze.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "freeze-annotate", "label": "freeze-annotate", "description": "帧号非线性 remap 的节奏手法——定格标注（流动→定格圈注→解冻）", "media": {"url": "./media/freeze-annotate.mp4?v=1790980736872", "type": "mp4"}}], "sourceUrl": "./source/speed-ramp-freeze.md", "category": "rhythm", "tags": ["rhythm"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "spotlight-hero-card", "summary": "关灯的剧场里一束钨丝聚光（带体积光柱）扫过页面锁定一张卡，斜侧推进后卡片弹起悬浮、香槟色光束沿轮廓两圈、连同 3D 注记一起贴回原位", "use": "\"单一主角\"式产品开场；把一个核心对象（卡片/条目/模块）立成全片主角", "duration": "172f（约 5.7s；锁定 f34 → 触地 f142 → 30f 真静止 hold）", "energy": "中（质感最高的一镜，节奏慢而稳）", "intention": "开场只讲一件事：这一张卡就是产品的原子单位。聚光灯替观众做视线引导，弹起悬浮给它体积和重量，轮廓光束是\"扫描/检视\"的隐喻，最后贴回原位表示它属于这个页面。", "source": "references/shots/opening/spotlight-hero-card.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "spotlight-hero-card", "label": "spotlight-hero-card", "description": "关灯的剧场里一束钨丝聚光（带体积光柱）扫过页面锁定一张卡，斜侧推进后卡片弹起悬浮、香槟色光束沿轮廓两圈、连同 3D 注记一起贴回原位", "media": {"url": "./media/spotlight-hero-card.mp4?v=1790980736873", "type": "mp4"}}], "sourceUrl": "./source/spotlight-hero-card.md", "category": "opening", "tags": ["opening", "effects", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "spotlight-sweep-moves", "summary": "暗场聚光显影三式——A 醒睡扫过（光到即亮光走即暗）、B 贴边泛光横摇（紫光贴 UI 边缘渗入+聚光匀速右移）、C 角落匀速显影（径向聚光从角落匀速扩张点亮全屏）；黑场里\"光即叙事\"的 UI 展示", "use": "暗色调品牌片里逐个介绍 UI 面板/功能区；黑场开场把界面\"点亮\"登场；段落间光转场", "duration": "单式 3.5–4.5s；A/B 可串联成巡礼段", "energy": "中低（克制、神秘感，爆点在\"亮起\"瞬间）", "intention": "黑场里观众只能看见光给看的东西——聚光既是照明也是运镜和剪辑： 光到哪里哪里登场，光走即谢幕。三式共用\"贴边紫色辉光光线\"这个 身份元素（光线贴着 UI 边框/logo/顶边走，辉光要亮要糊，是光在 \"抚摸\"界面而不是描边动画）。命门是**匀速**：聚光的移动/扩张 严格 linear——缓动会让光有\"意图\"，匀速才读作探照灯的机械扫掠 （C 式判例：linear 但半径终值过大＝前 1/4 就饱和，观感照样不匀速）。", "source": "references/shots/effects/spotlight-sweep-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "glow-wake-sleep-panel", "label": "glow-wake-sleep-panel", "description": "醒睡扫过：radial 显影罩跟随光头从左向右匀速移动，贴顶边紫色光线三层辉光同行，经过 logo 描光、到右缘点亮竖直残光，尾段面板沉回黑暗", "use": "暗色调品牌片里介绍单个 UI 面板——有醒有睡的登场与谢幕", "media": {"url": "./media/glow-wake-sleep-panel.mp4?v=1790980736874", "type": "mp4"}}, {"key": "slide-spotlight-pan", "label": "slide-spotlight-pan", "description": "贴边泛光横摇：光线先绕左上角竖缘、转角后沿顶边横走，紫光晕染渗入 UI 顶部内侧；聚光头匀速右移显影 + 面板匀速左滑＝相机右摇感", "use": "横向巡礼宽面板/多列看板，逐段点亮功能区", "media": {"url": "./media/slide-spotlight-pan.mp4?v=1790980736875", "type": "mp4"}}, {"key": "corner-spotlight-reveal", "label": "corner-spotlight-reveal", "description": "角落匀速显影：左上角径向聚光半径严格 linear 扩张，照到显影照不到沉黑，最终全屏亮起——光即转场", "use": "黑场开场点亮界面登场；段落间光转场", "media": {"url": "./media/corner-spotlight-reveal.mp4?v=1790980736876", "type": "mp4"}}], "sourceUrl": "./source/spotlight-sweep-moves.md", "category": "effects", "tags": ["effects", "ui-entrance", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "steep-tilt-glide", "summary": "固定镜头下直立页面以 60° 强透视侧立（右近左远），页面自身沿其 3D 横面方向滑移掠过镜头（物动镜不动），滑移带速度重影、文字组件悬空贴落、由暗揭亮", "use": "长页面/多区块 UI 的炫技巡览（内容依次滑过固定机位）；暗场霓虹调性；与贴面运镜卡互补的\"侧掠\"机位", "duration": "4s（120f）单镜；页面越宽越可拉长", "energy": "中高（透视炫技+持续运动，但节奏是匀的）", "intention": "把页面立成一堵斜墙：镜头钉死不动，60° 强透视让右缘贴脸、左缘 消失在灭点，页面自己沿自身平面横向滑移——内容像列车车厢一样 依次掠过。命门是**物动镜不动**：perspective/origin/rotY 全程常数， 唯一动的量是页面局部 translateX——镜头一动语义就变成运镜炫技， 这里的戏是\"页面在自我展示\"。角度经三轮收敛为精确 60° （-45°\"不对\"→-53°\"再大一点\"→-60°选中）。", "source": "references/shots/camera/steep-tilt-glide.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "steep-tilt-glide", "label": "steep-tilt-glide", "description": "固定镜头下直立页面以 60° 强透视侧立（右近左远），页面自身沿其 3D 横面方向滑移掠过镜头（物动镜不动），滑移带速度重影、文字组件悬空贴落、由暗揭亮", "media": {"url": "./media/steep-tilt-glide.mp4?v=1790980736877", "type": "mp4"}}], "sourceUrl": "./source/steep-tilt-glide.md", "category": "camera", "tags": ["camera", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "stroke-segment-build", "summary": "断笔成字——标题拆成十几段互不相连的笔画乱序逐段点亮，前 70% 不可读，末段落位瞬间语义\"啪\"地成立", "use": "开场吊悬念的产品名/大数字揭晓；一支片 ≤1 次；与 type-assembly/draw-svg-trace 分工：那些是\"看着字被组装/描画\"，本卡是\"意义延迟揭晓\"", "duration": "165f（5.5s；揭晓 f105 后 hold 2s）", "energy": "低起中收（悬念型，落位帧是能量点）", "intention": "《异形》片头判例：标题不是被画出来的，是\"显影\"出来的——拆成离散 笔画段乱序点亮，观众前 70% 时间只看到神秘碎段，最后几段落位的瞬间 突然读出是什么字。\"认出的那一刻\"就是钩子，钩子的强度取决于 不可读期撑多久、钥匙段压多晚。", "source": "references/shots/opening/stroke-segment-build.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "stroke-segment-build", "label": "stroke-segment-build", "description": "断笔成字——标题拆成十几段互不相连的笔画乱序逐段点亮，前 70% 不可读，末段落位瞬间语义\"啪\"地成立", "media": {"url": "./media/stroke-segment-build.mp4?v=1790980736878", "type": "mp4"}}], "sourceUrl": "./source/stroke-segment-build.md", "category": "opening", "tags": ["opening", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "tear-streak-transitions", "summary": "撕裂转场——glitch-displace 噪声撕裂（16 横条错位抖动中硬切），数字故障语义的条带级撕裂", "use": "高能换页：数字故障/断裂语义；页面完整性不破、能量拉满的条带级撕裂", "duration": "前态 ≥40f + 撕裂 16–24f + 收尾 ≥40f，约 4.5s（135f）", "energy": "高", "intention": "本卡管**条带级撕裂**——页面被切成横条高速运动，但每条内容完整。 这是反复裁决划出的品味分界：碎块系转场三连否（doom-melt 竖条坠落、 pixel-dissolve 方块翻黑、facade-block 砖块翻飞全部淘汰），条带系过关。碎块读作\"页面被破坏\"，条带读作\"页面在高速 运动\"——完整性不破、能量却拉满。横向撕：条带左右错位抖动 + 双色剪影重影（RGB split 的克制版：同一页内容的两份单色剪影，只用画面强调色两色，±12px 错开）。 适用系统故障/瞬间跳变语义——demo 用它做\"发布控制台从 Rolling out 99% 跳到 is live\"的状态跳变。", "source": "references/shots/transition/tear-streak-transitions.md", "updatedAt": "2026-10-02T14:33:18.000Z", "styles": [{"key": "glitch-displace", "label": "glitch-displace", "description": "撕裂转场——glitch-displace 噪声撕裂（16 横条错位抖动中硬切），数字故障语义的条带级撕裂", "use": "故障/断裂语义；高潮前的暴力换页", "media": {"url": "./media/glitch-displace.mp4?v=1790980736879", "type": "mp4"}}], "sourceUrl": "./source/tear-streak-transitions.md", "category": "transition", "tags": ["transition", "effects"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "tension-camera-moves", "summary": "情绪运镜两式——bullet-time 冻结环绕、pull-back 拉远孤立，相机替观众\"感受\"而非\"看\"", "use": "情绪节点（震撼/收束）的运镜语言；与 space-camera-moves 的\"炫技大动作\"互补——这两式动作小、情绪重", "duration": "单式 5–6s（150–170f）；全片合计 ≤2 式（各 ≤1 次）", "energy": "A 高 / B 低收", "intention": "space-camera-moves 三式是\"把页面当 3D 实体拍\"的高光炫技；这两式相反—— 动作本身克制，全部劲道在情绪语义上：A 说\"这一刻值得停下时间看\" （运动中的元素被冻住、相机绕行审视）；B 说\"最后只剩这一件事\" （后拉中周围逐层熄灭，孤悬一点收束全片）。两式各占一个情绪格， 是分镜阶段\"这一段观众该感到什么\"的直接词汇。", "source": "references/shots/camera/tension-camera-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "bullet-time-freeze-orbit", "label": "bullet-time-freeze-orbit 冻结环绕", "description": "图表生长到一半全冻住，相机绕悬停的 UI 平面 rotateY 扫 55° 再回，时间恢复接着长完", "use": "核心数据/图表的加冕时刻；\"值得停表看\"的一格", "media": {"url": "./media/bullet-time-freeze-orbit.mp4?v=1790980736880", "type": "mp4"}}, {"key": "pull-back-isolation", "label": "pull-back-isolation 拉远孤立", "description": "从发光主卡特写后拉，兄弟卡按距离错峰熄灭、背景沉黑，孤卡悬在暗场中央", "use": "结尾收束；\"全片只为这一个数字\"的谢幕", "media": {"url": "./media/pull-back-isolation.mp4?v=1790980736881", "type": "mp4"}}], "sourceUrl": "./source/tension-camera-moves.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "terminal-3d", "summary": "三个终端窗散布 3D 空间，相机窗间飞行、途中正弦拉远，每到一窗打字机敲命令、结果逐行滑出——命令执行的空间叙事流", "use": "开发者产品的 CLI/工作流演示：把\"三步命令\"拍成三站空间旅程", "duration": "约 8.2s（246f@30fps；三站各约 2–3s 停留 + 两段 30f 飞行）", "energy": "中（飞行给动感、打字给节奏，整体是沉稳的技术叙事；收在 ● READY 一记亮点）", "intention": "终端输出天生是\"平面滚动\"的反电影语言，这张卡把它空间化：每条命令占据空间中一个实体窗口，相机像穿过机房一样逐窗拜访。飞行途中的拉远让观众瞥见\"还有更多窗口\"——工作流的全貌感。", "source": "references/shots/camera/terminal-3d.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "terminal-3d", "label": "terminal-3d", "description": "三个终端窗散布 3D 空间，相机窗间飞行、途中正弦拉远，每到一窗打字机敲命令、结果逐行滑出——命令执行的空间叙事流", "media": {"url": "./media/terminal-3d.mp4?v=1790980736882", "type": "mp4"}}], "sourceUrl": "./source/terminal-3d.md", "category": "camera", "tags": ["camera"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "text-as-mask", "summary": "文字视频遮罩——瓷白舞台上切出超粗大标题字，字内部透出缓慢平移的暗色实时产品面板，结尾吸一口气后字形指数冲入放大 46 倍溢出、内部画面接管全屏", "use": "品牌词/口号与产品画面二合一的开场或章节卡；字是门、产品在门里", "duration": "165f（入场 18f + 字内漂移 78f + 吸气 8f + 冲入接管 24f + 落定/hold 37f）", "energy": "中高（漂移段沉稳，接管段一次爆发）", "intention": "标题和产品画面抢屏幕是老问题——先字后画慢，画上压字挤。这一式让 两者同体：字形就是遮罩，产品只透过笔画显形，观众同时读到词和画面 质感；结尾字形胀开溢出画幅，产品自然接管全屏——\"从品牌词走进产品\" 一条镜头说完，兼任章节转场（与 transition-travel A 字腔穿越同族： 那边是镜头钻进字腔，这边是字形自己胀开，前者相机动、后者门动）。", "source": "references/shots/opening/text-as-mask.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "text-as-mask", "label": "text-as-mask", "description": "文字视频遮罩——瓷白舞台上切出超粗大标题字，字内部透出缓慢平移的暗色实时产品面板，结尾吸一口气后字形指数冲入放大 46 倍溢出、内部画面接管全屏", "media": {"url": "./media/text-as-mask.mp4?v=1790980736883", "type": "mp4"}}], "sourceUrl": "./source/text-as-mask.md", "category": "opening", "tags": ["opening", "typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "text-column-converge", "summary": "双词对峙合拢——左\"NEW\"右特性词钉死在等屏边距两侧硬切轮换、全程零收缩，换到最后一词才唯一一次 ease-in-out 滑到居中咬合成短语，下方小字近乎硬切浮现；收尾揭晓型文字卡", "use": "特性清单收束到产品名/口号的段落（\"NEW × 一串特性 → NEW <产品名>\"式）；发布会式 recap、版本号揭晓", "duration": "轮换 7–16f/词 × 8–9 词 + 合拢 ~36f + 小字后静置；全段约 5–6s", "energy": "中低（机器节奏、小字规格清单气质，不是砸字）", "intention": "两词分踞左右像目录页对峙，观众以为只是轮换字幕；直到最后一词 停稳才发现左右其实是同一句话的两半——唯一一次连续合拢把整段 轮换追认为\"悬念铺垫\"。命门是**钉死**：轮换期两词位置一像素不动、 左右屏边距完全相等（原片实测 412 vs 413@1280），任何渐进收缩都会 提前剧透合拢、把揭晓稀释成进度条。合拢只许发生一次，且必须在 最后一词之后——这是收尾揭晓，不是持续动效。", "source": "references/shots/typography/text-column-converge.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "text-column-converge", "label": "text-column-converge", "description": "双词对峙合拢——左\"NEW\"右特性词钉死在等屏边距两侧硬切轮换、全程零收缩，换到最后一词才唯一一次 ease-in-out 滑到居中咬合成短语，下方小字近乎硬切浮现；收尾揭晓型文字卡", "media": {"url": "./media/text-column-converge.mp4?v=1790980736884", "type": "mp4"}}], "sourceUrl": "./source/text-column-converge.md", "category": "typography", "tags": ["typography", "outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "theme-switch-moves", "summary": "主题切换两式——theme-sweep 斜向扫场（边界扫过处就地换肤）与 palette-ripple 组合款（⌘K 面板收缩成点、涟漪从点荡开换肤）", "use": "深色模式/主题功能的叙事段落；同一 UI \"在你眼前变色\"而非切到新场景", "duration": "A 140f（4.7s）/ B 156f（5.2s）", "energy": "A 中 / B 中高（组合款有完整因果链）", "intention": "深浅模式切换的两种拍法。A（Notion/Figma/Linear 惯用）：15° 斜向 边界带亮线扫过全画面（demo 从开关所在的右侧扫向左侧），边界经过处浅色**就地**变深色，同布局 双主题共存一瞬——观众看到的是\"同一个 UI 换肤\"，不是转场。 B（组合变异）：⌘K 面板输入 \"dark\" 回车，面板收缩成一个亮点， 深色涟漪**从该点**荡开扫过全 UI——\"命令引发换肤\"的因果链完整可读。 组合命门：涟漪圆心必须是面板收缩点、起始帧必须是收缩完成帧。", "source": "references/shots/interaction/theme-switch-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "theme-sweep-toggle", "label": "theme-sweep-toggle", "description": "深色版 clip-path polygon 15° 斜边扫场（out poly3 先快后缓 ~38f），边界 4px 白亮线+18px 辉光，扫完 2f 淡出；深版 scale 1→0.995→1 坐实", "use": "主题功能直接展示", "media": {"url": "./media/theme-sweep-toggle.mp4?v=1790980736885", "type": "mp4"}}, {"key": "palette-theme-ripple", "label": "palette-theme-ripple", "description": "面板 back(1.9) 弹落→逐字输入→回车面板 ease-in 收缩到 0 + 白色高光核钉住位置→圆形 clip 半径 12→1250px cubic-out 荡开，边缘 5px 白环双向辉光", "use": "命令面板+主题联动的高光段", "media": {"url": "./media/palette-theme-ripple.mp4?v=1790980736886", "type": "mp4"}}], "sourceUrl": "./source/theme-switch-moves.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "timeline-travel", "summary": "时间轴横移——镜头沿水平刻度轴加速掠过版本刻度，每过一格卡片弹立短停，末刻度急停推近", "use": "changelog/里程碑/发展史段落（\"我们一直在发货\"的另一种拍法）；与 scroll-brake-moves 分工：那卡是纵向列表急刹，本卡是横向时间旅行", "duration": "4–5s", "energy": "中高（加速→急刹的节奏型镜头）", "intention": "把产品的版本史拍成一次沿时间轴的旅行（《反恐王国》片头判例）： 镜头缓起→冲刺→急刹三段变速横移，v1.0/v2.0/v3.0 刻度依次掠过， 每过一格对应卡片从刻度线上 spring 弹立——历史在窗外闪过， 急停在\"今天\"并推近。速度本身讲\"发展快\"，急停讲\"现在最重要\"。", "source": "references/shots/data/timeline-travel.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "timeline-travel", "label": "timeline-travel", "description": "时间轴横移——镜头沿水平刻度轴加速掠过版本刻度，每过一格卡片弹立短停，末刻度急停推近", "media": {"url": "./media/timeline-travel.mp4?v=1790980736887", "type": "mp4"}}], "sourceUrl": "./source/timeline-travel.md", "category": "data", "tags": ["data", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "title-demote-to-label", "summary": "大标题降格为节标签两式——A 大标题居中显影站稳一拍后连续缩小 0.3x 平移到左上角落成小节标签、内容区在其下生长；B 同套路但登场时带文本选中态高亮块扫入再撤掉", "use": "章节开场（标题先当主角再让位给内容）；教程/功能演示片的小节交接；B 式给\"文字/编辑\"类产品加身份暗示", "duration": "A ~3.7s（112f）/ B ~4.5s（134f）；demo 两式串播 246f", "energy": "低中（版式变换型，氛围镜头）", "intention": "章节标题的常规命运是\"出现→消失→内容登场\"，标题和内容互不认识。 本卡让标题**降格而不退场**：居中大字站稳一拍宣告主题，然后一次连续 补间缩到 0.3x 飞到左上角，落成这一节的栏目标签——它还在屏幕上， 只是从主角变成了门牌。观众获得免费的空间记忆：刚才那个大词就是 现在左上角那个小词，本节讲的就是它。内容骨架在降格进行中就开始 生长，交接零空档。", "source": "references/shots/typography/title-demote-to-label.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "title-demote-to-label", "label": "title-demote-to-label", "description": "大标题降格为节标签两式——A 大标题居中显影站稳一拍后连续缩小 0.3x 平移到左上角落成小节标签、内容区在其下生长；B 同套路但登场时带文本选中态高亮块扫入再撤掉", "media": {"url": "./media/title-demote-to-label.mp4?v=1790980736888", "type": "mp4"}}], "sourceUrl": "./source/title-demote-to-label.md", "category": "typography", "tags": ["typography", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "trailer-grammar-moves", "summary": "预告片语法一式——trailer-bumper 前置速剪钩子：三镜 9f 速剪 + 黑场静默一拍，再开场标题", "use": "预告片的开场钩子（cold open）：正片前先塞三个最抓眼的镜头，再静默一拍正式开场", "duration": "A ~4.7s（140f）", "energy": "A 高", "intention": "库内节奏卡各管一段：beat-cut 管切点排布、rhythm-interrupt 管打断。 本卡管**预告片的结构性时刻**——不是某个 镜头怎么动，是整片的关节怎么接：A 是开场钩——正片前 0.9 秒塞 三个最抓眼镜头速剪 + 黑场静默一拍再开场，预告片的\"预告\"。", "source": "references/shots/rhythm/trailer-grammar-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "trailer-bumper", "label": "trailer-bumper", "description": "预告片语法一式——trailer-bumper 前置速剪钩子：三镜 9f 速剪 + 黑场静默一拍，再开场标题", "use": "正片开场前的钩子；cold open", "media": {"url": "./media/trailer-bumper.mp4?v=1790980736889", "type": "mp4"}}], "sourceUrl": "./source/trailer-grammar-moves.md", "category": "rhythm", "tags": ["rhythm", "opening", "transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "transition-hidden-cut", "summary": "藏切点转场三式——前景遮挡隐形切、对撞开屏、暖色漏光，硬切藏进遮挡/撞击/光峰的 1-3 帧里，观众看不见剪刀", "use": "两镜衔接处需要\"无痕换景\"或\"仪式感开屏\"时（技法卡，与 shot-transitions 三式同层选型）", "duration": "n/a（技法卡；各式占用帧数见参数表，从相邻镜头预算里划）", "energy": "n/a（技法卡，不占能量位）", "intention": "与 shot-transitions A 式 flash-cut 同族：flash-cut 用一层白闪盖住硬切， 这三式换了三种\"障眼物\"——扫过的前景卡片（A）、对撞的撞击帧（B）、 爬到顶峰的漏光（C）。共同原理是魔术误导：观众的眼睛被大动作/强光 吸走的那 1-3 帧里完成硬切，回过神来景已经换了，全程\"看不见剪刀\"。 flash-cut 是最素的一款；要方向感选 A，要仪式感选 B，要温度选 C。", "source": "references/shots/transition/transition-hidden-cut.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "invisible-cut", "label": "invisible-cut 前景遮挡隐形切", "description": "一张超画幅卡片带重运动模糊贴脸横扫，糊满全屏的遮挡帧内背景 A→B 硬切，卡片飞出观众以为还是同一镜", "use": "想让换景完全无痕的页面→页面；伪\"一条 take\"的主力款", "media": {"url": "./media/invisible-cut.mp4?v=1790980736890", "type": "mp4"}}, {"key": "versus-slam", "label": "versus-slam 对撞开屏", "description": "左右两半屏带斜切边从画外加速对冲撞合，撞击帧白闪+震屏+VS 盖章，切点就是撞击本身", "use": "对比/对阵语义的开屏或章节头（新旧方案、双产品、before/after）", "media": {"url": "./media/versus-slam.mp4?v=1790980736891", "type": "mp4"}}, {"key": "light-leak-burn", "label": "light-leak-burn 琥珀漏光", "description": "三团琥珀柔光沿对角线斜扫，光峰帧吞掉旧页约七成时硬切新页，光退散时新页已就位", "use": "想要暖调/胶片味的章节过渡；比白闪柔、有方向、有温度", "media": {"url": "./media/light-leak-burn.mp4?v=1790980736892", "type": "mp4"}}], "sourceUrl": "./source/transition-hidden-cut.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "transition-travel", "summary": "穿越式转场——字腔穿越：巨型章节标题的字形就是一扇窗，镜头钻进字形笔画完成换景", "use": "前后两镜存在\"元素/容器\"级空间关系的接缝（技法卡，与 shot-transitions 三式互补选用）", "duration": "n/a（技法卡；demo 150f，主推动作段 52f，前后 hold 另计，帧数从相邻镜头预算里划）", "energy": "n/a（技法卡，不占能量位）", "intention": "shot-transitions 三式是\"交棒\"型——前镜收尾、后镜入场，接缝靠白闪/糊帧/ 窗口盖住换页瞬间。本卡是\"穿越\"型——后景在前景画面里 以真实元素存在（字形洞），镜头一条连续空间运动钻进去， 观众从头到尾跟着同一个物体，没有交棒瞬间。选型口径：后景能在前景里\"预先 在场\"→穿越；两景只是先后关系、无空间嵌套→交棒。字腔穿越的语义是 \"标题即是门\"（章节字卡与转场二合一）。", "source": "references/shots/transition/transition-travel.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "letterform-zoom", "label": "字腔穿越 letterform-zoom", "description": "穿越式转场——字腔穿越：巨型章节标题的字形就是一扇窗，镜头钻进字形笔画完成换景", "use": "章节标题→正文；替代 D 式黑场字卡的高能量款", "media": {"url": "./media/letterform-zoom.mp4?v=1790980736893", "type": "mp4"}}], "sourceUrl": "./source/transition-travel.md", "category": "transition", "tags": ["transition", "camera"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "type-and-filter", "summary": "真实 UI 上打字搜索、网格自己收敛成一张卡、点击穿透进详情页", "use": "功能演示的\"操作叙事\"段；搜索/筛选/进入详情的任何交互链路", "duration": "约 2.5s（118–190f）", "energy": "中（发牌高能段之后的从容一拍）", "intention": "让观众\"跟着做一遍\"：看清输入了什么、页面怎么响应、点了哪里。这是全片唯一模拟真人操作的镜头，节奏必须像人手，不能像脚本。", "source": "references/shots/interaction/type-and-filter.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "type-and-filter", "label": "type-and-filter", "description": "真实 UI 上打字搜索、网格自己收敛成一张卡、点击穿透进详情页", "media": {"url": "./media/type-and-filter.mp4?v=1790980736894", "type": "mp4"}}], "sourceUrl": "./source/type-and-filter.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "type-assembly-moves", "summary": "文字集结三式——split-text-stagger 逐字裂升、letterform-drift-assembly 漂移合拢、text-on-path 沿线流入", "use": "大标题/标语的入场；与 type-entrance-moves、document-typewriter-reveal 同属标题入场大品类，全片 ≤2 种", "duration": "单式 4–5.5s（动作段 A ~56f / B ~104f / C ~110f；demo 全长含 hold：A 130f / B 150f / C 160f，各自导出 `*_DURATION`）", "energy": "A 中 / B 中高 / C 中", "intention": "标题入场已有\"原位变形系\"（字符坠落/打字机——字在原地换形态）。本卡补\"集结系\"：字符从别处**汇聚成**标题，运动轨迹 本身有戏。A 琴键式——每字从看不见的裁切线下滑升，理性利落，通用度 最高；B 片头式——字符四散带模糊漂入、逐个锁定加深，Stranger Things 的仪式感，适合品牌名亮相；C 语义式——字符沿一条上升曲线鱼贯流入 再摆正，曲线可以正好描着图表增长线走，文字与数据同框叙事。", "source": "references/shots/typography/type-assembly-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "split-text-stagger", "label": "split-text-stagger 裂升", "description": "每字 overflow 盒内 translateY(115%→0) 带 10% 过冲，delay i×2f，基线同步生长", "use": "通用默认；利落理性", "media": {"url": "./media/split-text-stagger.mp4?v=1790980736895", "type": "mp4"}}, {"key": "drift-assembly", "label": "drift-assembly 漂移合拢", "description": "字符 seed 方向 ±300px + blur 8px 漂入错峰归位，锁定帧加深脉冲，合体后整词呼吸 1.04", "use": "品牌名/片头级亮相", "media": {"url": "./media/drift-assembly.mp4?v=1790980736896", "type": "mp4"}}, {"key": "text-on-path", "label": "text-on-path 沿线流入", "description": "字符沿贝塞尔曲线鱼贯滑入（切线角旋转），到达后 12f 摆正水平", "use": "曲线有语义时（增长线/流程线）", "media": {"url": "./media/text-on-path.mp4?v=1790980736897", "type": "mp4"}}], "sourceUrl": "./source/type-assembly-moves.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "type-entrance-moves", "summary": "标题文字入场一式——letter-drop-physics 字符坠落（重力砸落、弹跳、歪斜站定，最后一拍集体立正归位）", "use": "大标题/章节字卡的入场；与 type-assembly-moves（集结系）、document-typewriter-reveal（打字机）同品类互斥选用", "duration": "单式 5s（含 hold 与静止收尾；动作段 ~116f，demo 150f）", "energy": "中高（物理趣味）", "intention": "标题入场库内已有打字机（沉稳文档感）和集结系（字从别处汇聚），本卡补 物理喜剧感——字符从天而降、砸地弹跳、歪歪扭扭站定，最后一拍 集体立正归位，适合轻松调性的开场破冰（demo 让品牌名「Shotcraft」砸落站定， 副标题「Every shot lands on the beat.」随归位一拍浮出）。标题入场同片 ≤2 种（P4）。", "source": "references/shots/typography/type-entrance-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "letter-drop-physics", "label": "letter-drop-physics 字符坠落", "description": "标题文字入场一式——letter-drop-physics 字符坠落（重力砸落、弹跳、歪斜站定，最后一拍集体立正归位）", "use": "轻松调性开场；\"活物感\"的标题破冰", "media": {"url": "./media/letter-drop-physics.mp4?v=1790980736898", "type": "mp4"}}], "sourceUrl": "./source/type-entrance-moves.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "type-rhythm-sync", "summary": "文字随声同步两式——font-weight-pump 字重脉冲（笔画随鼓点变粗弹回）与 karaoke-fill-sync 卡拉OK填色（词随旁白逐个点亮）", "use": "标题/标语与音轨强绑定的段落；A 绑节拍（鼓点），B 绑语音（旁白逐词）", "duration": "A FontWeightPump 165f / B KaraokeFillSync 150f；A 128 BPM 每拍 14f、衰减窗 9–13f，B 每词按语速 18–33f", "energy": "A 高（蹦迪感）/ B 中（跟读引导）", "intention": "文字动效库内此前全是\"入场怎么进\"，没有词管\"在场的字怎么跟着声音活\"。 这两式补上：A 让标题变成节奏器官——笔画随低音鼓抽动变粗又弹回， 文字在蹦迪，适合高能段落的视觉低音炮；B 让标语变成跟读字幕—— 旁白读到哪个词哪个词从左到右填色点亮，视线被牵着走，适合口播/ 标语强调段。共同点是**字不动、属性动**：无位移、无入退场， 纯粹是字重/颜色在声音的拍点上呼吸。", "source": "references/shots/typography/type-rhythm-sync.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "font-weight-pump", "label": "font-weight-pump 字重脉冲", "description": "命中帧笔画瞬间变粗（stroke+字重跳变），~10f 衰减弹回；重音拍额外撑宽 8%", "use": "音乐驱动的高能段；标题当低音炮", "media": {"url": "./media/font-weight-pump.mp4?v=1790980736899", "type": "mp4"}}, {"key": "karaoke-fill-sync", "label": "karaoke-fill-sync 填色随读", "description": "每词深色从左到右填亮，进度跟语速，读完保持；活跃词下带读指下划线", "use": "旁白/口播强调段；多词标语的视线引导", "media": {"url": "./media/karaoke-fill-sync.mp4?v=1790980736900", "type": "mp4"}}], "sourceUrl": "./source/type-rhythm-sync.md", "category": "typography", "tags": ["typography", "rhythm"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "typewriter-moves", "summary": "打字机 error-retype——误删重打的\"改口\"三幕剧：打出平庸词 → 犹豫 → 退格删掉 → 更快打出卖点词", "use": "slogan/卖点字卡、否定式文案；文字自带时间性的入场", "duration": "~5.3s（160f）", "energy": "中低", "intention": "打字是唯一自带时间性的文字入场——字符一个个到来本身就是节奏， 不需要额外动效。A 式把打字当**独白**：逐字打出平庸词 （demo 眉题 Introducing video-shotcraft 下的 \"just a slideshow\"）→ 停顿犹豫 → 退格删掉 → 更快打出卖点词（\"your cinematic crew\"），犹豫-否定-宣言的 三幕剧，戏全在三档速度差里。", "source": "references/shots/typography/typewriter-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "error-retype", "label": "error-retype", "description": "打字机 error-retype——误删重打的\"改口\"三幕剧：打出平庸词 → 犹豫 → 退格删掉 → 更快打出卖点词", "use": "slogan 字卡的\"改口\"戏；否定式文案", "media": {"url": "./media/error-retype.mp4?v=1790980736901", "type": "mp4"}}], "sourceUrl": "./source/typewriter-moves.md", "category": "typography", "tags": ["typography", "opening"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "ui-strip-away-outro", "summary": "减法式收尾——点击 Publish 后整个编辑器 UI 从外围到中心层层错峰蒸发，黑场上只剩那颗按钮滑到屏心放大，按钮再淡出交棒字标定版", "use": "\"发布/完成\"语义的 outro；想讲\"一键之后一切复杂性消失\"的产品收尾", "duration": "~4.8s（144f：光标就位 34f → 蒸发 ~40f → 按钮独占 → 字标接棒 → 字标 hold ≥1s）", "energy": "中（前段安静操作，中段持续退场，无瞬时冲击）", "intention": "库内收尾全是\"加法\"：outro-group-photo-launch 元素飞来合影，logo sting 是定住再彩蛋。本卡是唯一的\"减法\"路线——点击引爆全 UI 退场， 黑场只留语义焦点（那颗被点的按钮），把\"发布 = 复杂性归零\"翻译成 动效叙事。命门有二：**蒸发要有秩序**——从外围到中心每 4f 一层、 每层带方向性位移（各自往画外散），乱序或同帧齐灭读作断电故障； **按钮是唯一幸存者且必须迁移**——蒸发期间从工具条角落滑到屏心 放大 1.5 倍、白晕随黑场增强，完成从\"UI 控件\"到\"仪式主角\"的升格， 最后淡出把黑场交给字标。", "source": "references/shots/outro/ui-strip-away-outro.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "ui-strip-away-outro", "label": "ui-strip-away-outro", "description": "减法式收尾——点击 Publish 后整个编辑器 UI 从外围到中心层层错峰蒸发，黑场上只剩那颗按钮滑到屏心放大，按钮再淡出交棒字标定版", "media": {"url": "./media/ui-strip-away-outro.mp4?v=1790980736902", "type": "mp4"}}], "sourceUrl": "./source/ui-strip-away-outro.md", "category": "outro", "tags": ["outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "ui-to-brand-morph", "summary": "UI 变品牌两式——icon-flip-bloom 图标 Y 轴翻扁成竖线、从竖线撑开成品牌标志（琥珀斜切随后划入）+ wordmark 逐字落定，与 input-morph-assemble 输入框收缩成取景框竖笔、三块图元落进构造槽位拼成完整标志", "use": "品牌收尾/outro 前最后一拍；\"你每天用的那个 UI 就是这个品牌\"的视觉论证", "duration": "A ~4.3s（130f）/ B ~5.6s（168f）", "energy": "中高（收尾点睛，一次完整变形讲完）", "intention": "品牌收尾库里已有两条路：brand-ink-open 是开场描画压印、 outro-group-photo-launch 是元素围拢合影（聚而不变）。本卡补第三条： **产品 UI 元素自己变形成品牌符号**——A 式是图标翻一个身变成 logo （同位实体交换），B 式是全片反复出现的输入框在最后一次发送后集结成 品牌标志（多元素落位拼装）。观众看到的不是\"logo 出现了\"，而是 \"刚才用的东西原来就是它\"，因果链本身就是品牌论证。", "source": "references/shots/outro/ui-to-brand-morph.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "icon-flip-bloom", "label": "icon-flip-bloom", "description": "图标 anticipation 晃两下→Y 轴 scaleX 压扁成竖线（双层拖影+blur）→最薄处实体交换、spring 展开成 video-shotcraft「镜刻」标志、琥珀斜切第二拍划入→标志左移让位、字标逐字落定", "use": "单图标产品；图标与 logo 形态差异大、需要\"翻过去变身\"的魔术感", "media": {"url": "./media/icon-flip-bloom.mp4?v=1790980736903", "type": "mp4"}}, {"key": "input-morph-assemble", "label": "input-morph-assemble", "description": "光标点发送→文字飞走→输入框 x/y/w/h/r 五量 spring 插值成标志的竖框→上下横条与琥珀斜切从虚线构造框里依次落位拼成「镜刻」标志→左移让位、字标逐字落定", "use": "输入框/卡片等矩形 UI 是全片主角的片子；logo 可拆解为几何图元组合", "media": {"url": "./media/input-morph-assemble.mp4?v=1790980736904", "type": "mp4"}}], "sourceUrl": "./source/ui-to-brand-morph.md", "category": "outro", "tags": ["outro"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "value-stagger-gradient", "summary": "16 根柱入场时 delay 是时间错峰，同时高度/色相/位移/模糊四个属性各自铺成从首到末的数值梯度；第二拍把错峰原点换成中心，脉冲幅度以中心为最大重新铺开", "use": "技法演示与参数化能力的展示镜头；也可直接当数据/频谱/均衡器类界面的入场", "duration": "约 5.0s（150f@30fps）", "energy": "中高（第一拍是连续铺开，第二拍中心脉冲是明确的一次峰值）", "intention": "stagger 通常只被用来错开时间。这张卡要说的是它还能错开**值**——同一个索引既决定 \"什么时候动\"，也决定\"动到多少\"。两拍是一组对照实验：第一拍原点在首位（梯度从左到 右单调铺开），第二拍原点换到中心（梯度以中轴对称铺开）。观众看到的不是两个动画， 而是同一个配方换了一个参数。屏幕上的代码字幕同步换成对应的 stagger 调用，明说这件事。", "source": "references/shots/ui-entrance/value-stagger-gradient.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "value-stagger-gradient", "label": "value-stagger-gradient", "description": "16 根柱入场时 delay 是时间错峰，同时高度/色相/位移/模糊四个属性各自铺成从首到末的数值梯度；第二拍把错峰原点换成中心，脉冲幅度以中心为最大重新铺开", "media": {"url": "./media/value-stagger-gradient.mp4?v=1790980736905", "type": "mp4"}}], "sourceUrl": "./source/value-stagger-gradient.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "vertical-word-roll-blur-cycle", "summary": "句尾词换成竖向滚轮，3 次换词各 0.55s（outQuint 七成 + outBack 三成，前快后极慢带微过冲），相邻行按距离上垂直 blur 与灰度，中心词落定瞬间从灰染成强调色", "use": "\"Crafted for ___\" / \"Built for ___\" 这类句干 + 受众/对象列举的一句话卖点；浅底品牌片的干净一拍", "duration": "约 5.0s（150f@30fps：静置 → 3 次换词 → 尾部整组淡出）", "energy": "中（稳定三拍，无峰值）", "intention": "句尾换词的最优解是滚轮而不是淡入淡出：滚轮自带**方向**（往上翻页）， 观众知道\"还有下一个\"。这卡的两个身份记号是相邻行的**垂直 blur** （滚轮景深，模拟机械转筒的失焦）和落定时的**染色**（灰→强调色， \"这个才是答案\"）。句干（demo `Crafted for`）全程纹丝不动——眼睛钉在滚轮上， 句干一晃列举感就散。", "source": "references/shots/typography/vertical-word-roll-blur-cycle.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "vertical-word-roll-blur-cycle", "label": "vertical-word-roll-blur-cycle", "description": "句尾词换成竖向滚轮，3 次换词各 0.55s（outQuint 七成 + outBack 三成，前快后极慢带微过冲），相邻行按距离上垂直 blur 与灰度，中心词落定瞬间从灰染成强调色", "media": {"url": "./media/vertical-word-roll-blur-cycle.mp4?v=1790980736906", "type": "mp4"}}], "sourceUrl": "./source/vertical-word-roll-blur-cycle.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "voice-waveform-live", "summary": "录音胶囊实时声纹——64 根细竖条随\"说话\"起伏，说话时中部高耸、停顿缩成点线，波形从右往左滚动；说→停→说→提交塌缩的完整表演", "use": "语音输入/AI 助手\"正在听你说\"的功能镜头；无 UI 内容可展示但需要持续活性撑画面的段落", "duration": "172f（~5.7s：入场 14f + 说 1.4s + 停 0.8s + 说 1.4s + 提交塌缩 / 收进气泡 0.8s + hold 0.7s）", "energy": "中（功能性活性，不是炫技）", "intention": "本卡是**功能性**声纹：\"正在听你说\"的实时回执。命门在因果： 波形跟\"用户说话\"跳、是产品功能本身，不是跟 BGM 跳的装饰包装。 说话时波形高耸、停顿时缩成一排点线、历史向左滚出——观众从波形的起伏读出\"它真的在听\"，一段 6s+ 的画面全靠这份 活性撑住，不需要任何别的内容。与 gauge-readout-moves 分工：仪表是 \"报一个数值\"的机械仪式，本卡是\"持续监听\"的生命体征，没有终值。", "source": "references/shots/interaction/voice-waveform-live.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "voice-waveform-live", "label": "voice-waveform-live", "description": "录音胶囊实时声纹——64 根细竖条随\"说话\"起伏，说话时中部高耸、停顿缩成点线，波形从右往左滚动；说→停→说→提交塌缩的完整表演", "media": {"url": "./media/voice-waveform-live.mp4?v=1790980736907", "type": "mp4"}}], "sourceUrl": "./source/voice-waveform-live.md", "category": "interaction", "tags": ["interaction"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "wall-reveal-moves", "summary": "整墙批量入场两式——bento 逐格点亮、蓝图描线成形，全部原位显形不位移，与 deck-deal-flyin 的飞入位移型互补成品类矩阵", "use": "功能墙/卡片墙/整页界面的整体亮相；内容已在原位、要\"显形\"而非\"涌入\"的段落", "duration": "单式约 5s（A 150f / B 150f @30fps，含建立 hold 与静止收尾）", "energy": "中", "intention": "\"一墙内容怎么出场\"库内此前只有 deck-deal-flyin 一个答案——高能量、位移型、 \"东西涌进来\"。但不是每面墙都该涌：品牌段要庄重、 \"从设计到实物\"要讲工序。这两式共同点是**非位移批量入场**——元素原地显形， 版式从第一帧就成立，观众看的是\"状态变化的波前扫过一面墙\"而不是\"物体飞行\"。 选型先问一句：这面墙该\"涌进来\"还是\"亮起来\"？前者去 deck-deal-flyin，后者进本卡。", "source": "references/shots/ui-entrance/wall-reveal-moves.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "bento-light-up", "label": "bento-light-up 逐格点亮", "description": "暗场 3×2 bento 墙压暗待命，琥珀流光逐格描边一圈、内容随即提亮上浮，全亮后镜头缓推收住", "use": "内容庄重/暗场品牌段；节奏沉稳的功能总览", "media": {"url": "./media/bento-light-up.mp4?v=1790980736908", "type": "mp4"}}, {"key": "wireframe-draw-on", "label": "wireframe-draw-on 蓝图描线成形", "description": "界面先以 SVG 细线蓝图分组描画，再一条琥珀发光竖线左→右扫过，扫过处线框实体化成真实界面", "use": "\"从设计到实物/从想法到产品\"叙事；产品首次整体亮相", "media": {"url": "./media/wireframe-draw-on.mp4?v=1790980736909", "type": "mp4"}}], "sourceUrl": "./source/wall-reveal-moves.md", "category": "ui-entrance", "tags": ["ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "white-flash-logo-simplify-cut", "summary": "液态金属质感的彩色词标静置流光，蓄力后从字心炸出一记白闪过曝，曝光回落时同一位置已是扁平版字标——一次闪白完成质感降维", "use": "品牌段落收束（华丽演绎→干净定妆）；情绪从炫技切换到正式宣告的转场拍", "duration": "约 4s（120f@30fps；演出 0–34f · 蓄力 34–46f · 冲白 44–54f · 曝光回落 54–76f · 锁定 72–96f · hold 至 120f）", "energy": "中高（一次脉冲式重音，前后都是静场）", "intention": "先给足华丽（虹彩液态金属在字面上流动、一次斜向高光扫过），再用一次白闪把它\"净化\"成扁平单色字标——观众读到的是\"演出结束，这就是它的正式形象\"。降维是修辞：从感性质感切到理性识别。两版同字号同位置，读作\"同一个字标被净化了\"，不是换了张图。", "source": "references/shots/transition/white-flash-logo-simplify-cut.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "white-flash-logo-simplify-cut", "label": "white-flash-logo-simplify-cut", "description": "液态金属质感的彩色词标静置流光，蓄力后从字心炸出一记白闪过曝，曝光回落时同一位置已是扁平版字标——一次闪白完成质感降维", "media": {"url": "./media/white-flash-logo-simplify-cut.mp4?v=1790980736910", "type": "mp4"}}], "sourceUrl": "./source/white-flash-logo-simplify-cut.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-08-07T04:03:34.000Z"}, {"name": "wipe-transitions", "summary": "几何擦除转场——blinds-slice 百叶窗切条（12 根 3D 叶片错峰翻面成波，波扫过后整页由 A 换成 B）", "use": "新旧页都不动、一条几何边界扫过完成交接的通用转场；不依赖构图里有合适元素，哪儿都能用", "duration": "前态 ≥20f + 擦除 ~56f + 收尾 ≥40f，约 4.4s（132f）", "energy": "中", "intention": "转场库已有三族：穿越系（钻进去）、藏切系（遮住切）、体块系（页面是 实体）。本卡是第四族**几何擦除系**——新旧页都不动，一条几何边界扫过 完成交接，擦除的形状即语义：条扫是\"百叶窗逐叶翻面换页\"。与 shot-transitions C 式穿窗（元素遮罩擦除）的区别：C 用页面内真实元素当遮罩 （依赖构图），本卡是纯几何形——通用性即定位。适合横向推进、翻页语义。", "source": "references/shots/transition/wipe-transitions.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "blinds-slice", "label": "blinds-slice", "description": "几何擦除转场——blinds-slice 百叶窗切条（12 根 3D 叶片错峰翻面成波，波扫过后整页由 A 换成 B）", "use": "翻页/推进语义；横向阅读动线页面", "media": {"url": "./media/blinds-slice.mp4?v=1790980736911", "type": "mp4"}}], "sourceUrl": "./source/wipe-transitions.md", "category": "transition", "tags": ["transition"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "word-relay-filmstrip", "summary": "左列黑白相间等高页面卡步进滚动（焦点卡全亮、邻卡离焦压暗）、右侧衬线大词原位接力（名词恒定+动词轮换）——切词瞬间才滚动一格，词块垂直中心与当前页面卡中点精确对齐", "use": "\"一个主体 × 多种能力\"的枚举段（Shotcraft frames/builds/ships…）；作品集/案例流展示；产品多场景巡礼", "duration": "每词期 ~1.5–2s × 3–4 词；demo 180f（6s）", "energy": "中低（编辑部气质，节奏靠切词的\"咔哒\"感）", "intention": "左边是证据（页面截图胶片），右边是论点（大词）：动词换一次， 胶片就步进一格给出新证据——文字与画面互为注脚。命门是**步进制**： 左列平时完全静止，只在切词瞬间滚动一格（滚动=换证据的机械动作）， 持续滚动会让左列沦为背景装饰、切词失去\"咔哒\"感。第二命门是 **对齐**：大词块垂直中心必须与当前页面卡中点精确对齐（像素级）， 歪了整个版式的\"编辑部严谨感\"就塌了。", "source": "references/shots/typography/word-relay-filmstrip.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "word-relay-filmstrip", "label": "word-relay-filmstrip", "description": "左列黑白相间等高页面卡步进滚动（焦点卡全亮、邻卡离焦压暗）、右侧衬线大词原位接力（名词恒定+动词轮换）——切词瞬间才滚动一格，词块垂直中心与当前页面卡中点精确对齐", "media": {"url": "./media/word-relay-filmstrip.mp4?v=1790980736912", "type": "mp4"}}], "sourceUrl": "./source/word-relay-filmstrip.md", "category": "typography", "tags": ["typography", "ui-entrance"], "addedAt": "2026-07-19T05:45:41.000Z"}, {"name": "word-relay-geometry", "summary": "三个利益词各带一套专属几何接力——虚线大圆减速自转 + 彗星弧飞跑 → 三实线圆 trim 依次生长后收拢咬紧 → 镀铬金属 sheen 扫过后一拍收成纯白；旧词缩到 0.86 淡出，新词描边→填充揭示", "use": "三点式利益陈述（更快/更好/更强）；品牌价值观段落；需要\"一词一世界\"的中段推进", "duration": "约 6.0s（180f@30fps：三段各 ≈60f，段间重叠 6f）", "energy": "中高（三拍推进 + 全程几何运动 + 背景粒子，无静止帧）", "intention": "三点式利益陈述最容易做成三张字卡硬切。接力的做法是给每个词配一套 **只属于它的几何**：虚线圆是\"在转\"（快）、三圆相扣并收拢是\"互相咬合\"（紧 / 好）、 金属扫光是\"材质硬\"（强）——几何本身就在替形容词做论证。第三个词 留了升格待遇（sheen 扫光 + 收白），因为它是结论。背景微尘、共用舞台光与底部 三段进度条把三拍缝成一个连续空间，不然还是三张卡。", "source": "references/shots/typography/word-relay-geometry.md", "updatedAt": "2026-10-02T21:01:48.000Z", "styles": [{"key": "word-relay-geometry", "label": "word-relay-geometry", "description": "三个利益词各带一套专属几何接力——虚线大圆减速自转 + 彗星弧飞跑 → 三实线圆 trim 依次生长后收拢咬紧 → 镀铬金属 sheen 扫过后一拍收成纯白；旧词缩到 0.86 淡出，新词描边→填充揭示", "media": {"url": "./media/word-relay-geometry.mp4?v=1790980736913", "type": "mp4"}}], "sourceUrl": "./source/word-relay-geometry.md", "category": "typography", "tags": ["typography"], "addedAt": "2026-08-07T04:03:34.000Z"}], "staticExport": true, "categories": {"opening": {"zh": "开场与品牌", "en": "Opening & Brand"}, "typography": {"zh": "文字与字卡", "en": "Typography & Title Cards"}, "ui-entrance": {"zh": "界面登场与陈列", "en": "UI Entrance & Showcase"}, "camera": {"zh": "运镜与空间", "en": "Camera & Space"}, "data": {"zh": "数据与指标", "en": "Data & Metrics"}, "interaction": {"zh": "交互与功能演示", "en": "Interaction & Feature Demo"}, "transition": {"zh": "转场", "en": "Transitions"}, "rhythm": {"zh": "节奏与蒙太奇", "en": "Rhythm & Montage"}, "effects": {"zh": "光效与强调", "en": "Light & Emphasis"}, "outro": {"zh": "收尾", "en": "Outro"}}}