# Sakuga timing shift

On-3s cuts to on-1s — an element moves in choppy 3-frame steps, then snaps to buttery frame-by-frame speed at the climax.

- Category: rhythm · Tags: shotcraft, remotion, rhythm, ui-entrance
- Spec: 1920×1080 @ 30 fps · 5.06s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/sakuga-timing-shift.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/sakuga-timing-shift/template.html
- Repo: https://github.com/Vincentwei1021/video-shotcraft
- Credits: video-shotcraft (Vincent Wei) — https://github.com/Vincentwei1021/video-shotcraft
- Page: https://gimgs.net/motion/sakuga-timing-shift.html

## Params

_No params._

Default params (base64url for `?p=`): `e30`

## Prompt

## When to use

Emphatic movement for a single element (a card entrance, a metric sprinting to the finish); sections that need a "handmade feel → climax burst" contrast

## Intention

The library already has speed-ramp for continuous speed changes and hit-counter for a localized hitch. This card is different — **it changes the frame rate itself, not the speed**: during the choppy section, the driving frame is q=floor(f/3)*3, so the element only moves once every 3 frames (a 10fps flip-book feel); at the switch point it starts driving off the raw f frame by frame for a buttery sprint. The chunky threes and the smooth ones cut together in the same shot — this is the "shooting on 3s / on 1s" performance technique from Japanese animation. The choppy section isn't cheap, it's handmade-feeling, and the switch point itself is the climax marker.

## Duration & energy

- Duration: ~5s
- Energy: Medium-high

## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)

## 意图
库内时间轴操纵已有 speed-ramp 连续变速与 hit-counter 的局部顿帧。
本卡是另一种——**改的不是速度是帧率本身**：
顿挫段驱动帧 q=floor(f/3)*3，元素每 3 帧才动一步（10fps 手翻书），
切换帧起改用原始 f 逐帧驱动，丝滑冲刺。一拍三的钝与一拍一的滑
同屏对切，日式作画的拍数演出（shooting on 3s / on 1s）。顿挫段
不是低级感是手工感，切换点即高潮标记。

## 动效核心
- 顿挫段：q = Math.floor(f/3)*3 当驱动帧，位置线性 X 120→1380，
  每步 ≈79px；姿势 sin(q) rotate ±5°，一步一个样
- f48 切换：改原始 f 连续驱动，Easing.out(poly(4)) 高初速冲刺
  折返中央 + 过冲 36px + 3f scaleX 0.9 回弹急停
- 冲刺段运动拉伸由位置差分速度驱动（scaleX 峰值 ≈1.35 /
  scaleY 0.88），残影 2 层**条件挂载**——速度低即摘除，非 opacity 0
- 角标 "on 3s"/"on 1s" 随段切换，切换瞬间 pop 1.35×；角标
  line-boil 用 h() 伪随机、f=108 后冻结
- f108–150 真静止 42f，全画面无任何动画

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 拍数 | 顿挫段 floor(f/3)（一拍三） | /2 顿感不足、/4 以上读作播放器卡死 |
| 每步位移 | ≈79px（总程 ÷ 步数倒推） | <30px 读作卡顿掉帧不是顿挫——命门 |
| 步间姿势 | sin(q) rotate ±5° | 无姿势变化的纯位移顿挫像 bug 不像手翻书 |
| 切换帧 | f48（顿挫:冲刺 ≈ 3:2） | 切换必须一帧完成，任何补间都毁掉"换拍"感 |
| 冲刺缓动 | Easing.out(poly(4)) + 过冲 36px + 3f 回弹 | 初速要猛，与顿挫段拉满反差 |
| 收尾 | 真静止 ≥42f，角标沸腾同步冻结 | 沸腾残留毁真静止（feTurbulence 摘罩判例同族） |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 同一镜头单一时间操纵者判例：与 speed-ramp / hit-counter 顿帧
  互斥，一个镜头只能有一个人动时间轴
- 顿挫段每步位移 ≥30px 才读得出"顿"——微步顿挫读作渲染掉帧，
  这是本卡命门；步幅不够就缩短总时长换大步幅
- 切换点必须有标注（角标 "on 3s"→"on 1s" 或一声打点，
  sound-design §4.5）——无标注观众只觉得"变快了"，读不出"换拍"

## 参考实现
demos/rhythm/sakuga-timing-shift/
（SakugaTimingShift.tsx）

## Reference implementation (Remotion)

- demos/rhythm/sakuga-timing-shift/SakugaTimingShift.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/rhythm/sakuga-timing-shift/SakugaTimingShift.tsx

The component imports shared fixtures from `demos/_fixtures` and helpers from `assets/lib` in the repo; SKILL.md there documents the render workflow.


## Flow

1. **Read the recipe**
   Prompt = when to use, intention, parameter table with typical values and how each one feels, known pitfalls. Treat values as calibrated starting points.
2. **Get the code** — tool: git
   `git clone https://github.com/Vincentwei1021/video-shotcraft && cd video-shotcraft && npm install`
3. **Register + render** — tool: remotion
   `npx remotion render <CompositionId> out.mp4   # component: demos/rhythm/sakuga-timing-shift/SakugaTimingShift.tsx`
4. **Or re-implement**
   Port the timing/easing from the recipe to HTML + WAAPI (gimgs motion contract) or any engine; keep the same segment windows and easing.

## Render

Clone https://github.com/Vincentwei1021/video-shotcraft (npm install). The component lives under demos/{category}/{name}/ and imports shared fixtures from demos/_fixtures and helpers from assets/lib. Copy it (with those imports) into a Remotion project, register a <Composition> with the template's width/height/fps/duration in Root.tsx, then `npx remotion render <CompositionId> out.mp4`. SKILL.md in the repo documents the full Claude Code / Codex workflow. The prompt below is the shot recipe (timing, easing, parameter table, pitfalls) — enough to re-implement the shot in HTML/WAAPI or another engine if you prefer.

## Contract

React/Remotion composition (TSX) from the open-source video-shotcraft library (Apache-2.0). It is not a browser-playable template: clone the repo, register the component in a Remotion project and render with `npx remotion render`. The recipe (prompt) describes timing, easing and parameters so you can also re-implement the shot in any engine.