` 全屏定位、默认 opacity 0、z-index 100。 #### 入场动画规则 - 每个 scene 的每个元素都用 `tl.from(...)` 入场（y/opacity/scale） - 入场 stagger 0.1-0.3s；首元素 t = scene.start + 0.3 起 - ≥3 种不同 ease（`power3.out` / `back.out(1.3)` / `expo.out` / `elastic.out(1, 0.5)`） - **不要 `gsap.to({opacity: 0})` 退场** — 转场已处理。只有最后 scene 可 fade-to-black - **整片必须用到 ≥3 种** [Modern Motion Techniques](#modern-motion-techniques) ### Modern Motion Techniques 平庸视频和现代视频的差别一半在排版、一半在 motion。下面 7 种每片必须用 ≥3 种（特定 scene 用，不要全片堆）。 #### 1. Kinetic Typography（字符 stagger 入场）—— A 类 hero ```html

维修工

``` ```js tl.from('.kinetic span', { y: 180, opacity: 0, rotateX: -90, duration: 0.7, stagger: 0.06, ease: 'back.out(1.4)', transformOrigin: '50% 100%', }, T); ``` #### 2. Camera Punch（推近 / 拉远）—— A3、D 类 ```js tl.from(scene, { scale: 1.15, opacity: 0, duration: 0.5, ease: 'expo.out' }, sceneStart); ``` #### 3. Mask Reveal（clip-path 揭示）—— E 类 quote ```css .reveal { clip-path: inset(0 100% 0 0); } ``` ```js tl.to('.reveal', { clipPath: 'inset(0 0% 0 0)', duration: 0.9, ease: 'expo.inOut' }, T); ``` #### 4. Number Ticker（数字滚动）—— D1 ```html

``` ```js const ticker = document.querySelector('.ticker'); const obj = { val: 0 }; tl.to(obj, { val: parseInt(ticker.dataset.end), duration: 1.8, ease: 'power2.out', onUpdate: () => { ticker.textContent = Math.round(obj.val).toLocaleString(); }, }, T); ``` #### 5. Outline → Fill（空心字变实心）—— A2 ```css .morph { -webkit-text-stroke: 4px #f5efe5; color: transparent; } ``` ```js tl.to('.morph', { color: '#e87a3e', webkitTextStrokeColor: '#e87a3e', duration: 0.5, ease: 'power2.out' }, T); ``` #### 6. Letter Highlight Sweep（关键词扫光）—— E 类 climax 词 ```html 搭档 ``` ```css .sweep { position: relative; display: inline-block; padding: 0 8px; } .sweep-bg { position: absolute; inset: 0; background: #e87a3e; transform: scaleX(0); transform-origin: left; z-index: -1; } ``` ```js tl.to('.sweep-bg', { scaleX: 1, duration: 0.5, ease: 'power3.inOut' }, T); tl.to('.sweep', { color: '#0e0b08', duration: 0.1 }, T + 0.25); ``` #### 7. Background Color Punch（背景闪变）—— 全片 1-2 次 ```js tl.to(scene, { backgroundColor: '#e87a3e', duration: 0.08 }, T) .to(scene, { backgroundColor: '#0e0b08', duration: 0.4, ease: 'power2.out' }, T + 0.1); ``` **Strike-through 动画**：用真实 DOM `` 而不是 `::after`。伪元素 + CSS 变量在 hyperframes 某些渲染路径下不工作。 ```html 领导 ``` ```css .strike-line { position: absolute; left: -10px; right: -10px; top: 56%; height: 10px; background: #e87a3e; transform: scaleX(0); transform-origin: left; } ``` ```js tl.to('.strike .strike-line', { scaleX: 1, duration: 0.55, ease: 'power2.inOut' }, T); ``` ### Step 6: 加 SFX ```bash ~/.claude/skills/wjs-converting-text-to-video/scripts/synth-sfx.sh /video ``` 生成 `video/sfx/{tick,chime,bell}.mp3`： - `tick.mp3` — 80ms 1.2kHz sine，**转场用**（每次 scene 切换前 0.3s） - `chime.mp3` — 220ms 880+1320Hz 双音，对话/列表某项亮起时（**可选**） - `bell.mp3` — 1.5s 低频钟，最后 climax 词出来时（**全片最多 1 次**） **接入 timeline**： ```html

``` **⚠️ 每个 `

维 修 工

维修工