# Command Palette Summon

The command palette descends — the whole screen dims and blurs, the ⌘K panel springs down with overshoot, candidate rows appear staggered, and the list narrows in real time as you type.

- Category: interaction · Tags: shotcraft, remotion, interaction, ui-entrance
- Spec: 1920×1080 @ 30 fps · 5.06s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/command-palette-summon.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/command-palette-summon/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/command-palette-summon.html

## Params

_No params._

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

## Prompt

## When to use

The "the whole product lives in one input box" narrative for efficiency-focused products; the signature entrance for a command palette/search/shortcut feature.

## Intention

The signature ritual of Raycast/Linear launch films: one soft sound, the whole UI world dims to make way, the ⌘K panel drops from above center, the candidate list appears staggered; type two letters, and the list narrows in real time — "everything you need lives in this one input box." The simulated typing follows real human typing speed (R3), and the narrowing's "squeeze" feel comes from row-height collapse, not fading.

## Duration & energy

- Duration: 4–5s.
- Energy: Medium (a ritual feel; the drop and the narrowing are the two small impact beats).

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

## 意图
Raycast/Linear 发布片的标志性仪式：一声轻响，整个 UI 世界压暗
让路，⌘K 面板从中心上方弹落，候选列表错峰浮现；敲两个字母，
列表实时收窄——"你要的一切都在这个输入框里"。模拟交互按真人
操作速度走（R3），收窄的"挤压感"来自行高塌缩而非淡出。

## 动作阶段
| 阶段 | 帧段参考 | 内容 |
|------|------|------|
| 1 静置 | f0–12 | dashboard 初始状态 |
| 2 让路 | f12–22 | 背景压暗至 45% + blur 10px |
| 3 降临 | f18–33 | 面板 -20px 落入，过冲 +8px 回正（与压暗跨骑） |
| 4 候选浮现 | f32–56 | 5 行每 4f 错峰上浮 |
| 5 输入收窄 | ~f62–90 | 两次按键字符出现，行高塌缩收窄 5→2（塌缩完条件卸载） |
| 6 选中定格 | 末 ≥40f | 首条高亮（底色+左描边），光标转常亮，真静止 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 压暗 | 亮度 45% + blur 10px，10f | 压不够面板不突出；全黑失去上下文 |
| 弹落 | 起点上方 20px，overshoot 一拍回正 | 无过冲读作淡入，仪式感没了 |
| 候选错峰 | 4f/行 | 同帧出读作贴图 |
| 收窄 | height→0 + overflow hidden 塌缩 | 淡出收窄没有"挤压"感；塌缩完必须卸载 |
| 光标 | 闪烁周期 16f；定格后强制常亮 | 闪到结尾就永不真静止（demo 判例） |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 输入节奏按真人打字速度（R3 判例），两键间隔 ≥12f
- 组合款见 theme-switch-moves B 式（面板收缩成点引发主题涟漪）
- 实战候选行放真实功能名——这是功能清单的天然展位（P4 映射）
- 声音：唤出一声轻响（非游戏音），按键 2 声键帽拟音，
  高亮一声轻 pop（S1/S4 同源）

## 参考实现
demos/interaction/command-palette-summon/
（CommandPaletteSummon.tsx）

## Reference implementation (Remotion)

- demos/interaction/command-palette-summon/CommandPaletteSummon.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/command-palette-summon/CommandPaletteSummon.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/interaction/command-palette-summon/CommandPaletteSummon.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.