# Brand Frame Snap

A brand-color frame grammar — a thick solid frame grows before the content to enclose the whole screen, with the screen recording dropping in; on mode switch the frame hard-flips color on the same frame as the layout inside swaps.

- Category: effects · Tags: shotcraft, remotion, effects, transition
- Spec: 1920×1080 @ 30 fps · 4.39s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/brand-frame-snap.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/brand-frame-snap/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/brand-frame-snap.html

## Params

_No params._

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

## Prompt

## When to use

A whole-film wrapper for dual-mode/dual-chapter product films (blue = mode A, green = mode B color coding); brand-wrapping real screen-recording footage.

## Intention

Raw screen recording filling the frame has no brand presence, and slapping a logo watermark on it feels cheap. This card "mats" the recording with a thick brand-color frame: the frame appears before the content (frame first, footage second, for ritual weight), and afterward the frame color becomes a semantic code across the film — blue for Design, green for Dev Mode. On a chapter switch, the whole frame hard-flips color within a single frame, no gradient — a hard color cut is the visual equivalent of a "gear shift" sound effect; the layout inside switches A→B and the corner badge/label text change on the same frame, and all three landing together nails "mode switched." Division of labor with theme-switch-moves: that one changes the UI's own skin (with a sweeping boundary), this one changes the "frame" wrapper layer (same-frame, no boundary) — the semantics are mode/chapter switch, not theme switch.

## Duration & energy

- Duration: One color flip ~4.3s (130f); the frame itself can stay on screen the whole film.
- Energy: Medium (the color-flip instant is high, the rest is a quiet wrapper layer).

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

## 意图
真实录屏直接铺满屏没有品牌存在感，加 logo 水印又廉价。本卡用一圈
粗品牌色画框把录屏"装裱"起来：画框**先于内容出现**（先立画框再放
画，仪式感），之后画框颜色成为全片的语义编码——蓝=Design、绿=Dev
Mode。章节切换时整圈画框一帧内硬翻色，无渐变，颜色硬切就是"换挡"
声效的视觉等价物；窗内布局同帧 A→B、角标与徽标同步换字，三处同帧
共振把"模式切换"砸实。与 theme-switch-moves 分工：那换的是 UI 本体
肤色（有扫过边界），本卡换的是"画框"这个包装层（同帧无边界），
语义是模式/章节切换不是主题切换。

## 动效核心
- 画框用 4 条实体色带（非 border 属性），厚度 0→44px ease-out 18f
  长出；翻色 = 同一帧换 background，帧确定
- 录屏窗口 spring(damping 16) 从下方 560px + scale 0.82→1 落进框内
  （帧 14 起，画框长出中段——框未成形窗先到会读作框追窗）
- 翻色帧三件事同帧：画框换色 + 窗内布局 A→B 硬切 + 框带角标/窗口
  徽标换字（DESIGN→DEV MODE）
- 翻色瞬间叠 2 帧白闪脉冲（opacity 0.55 起阶梯衰减）+ 画框厚度阻尼
  弹跳（exp(-0.22t)·cos(0.9t)·10px），给"换挡"打击感

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 画框厚度 | 44px（1080p） | 太薄读作描边不读作"装裱"；>60px 开始吃内容区 |
| 画框生长 | 18f ease-out，先于窗口 14f | 画框必须先立——内容先到画框后包读作补救 |
| 窗口落位 | spring(damping 16, stiffness 110)，y 560→0 + scale 0.82→1 | 落进"框内"是语义关键，落点必须完全在框带内侧 |
| 翻色时刻 | demo 78f；停一拍（窗口落定后 ≥30f）再翻 | 落定没坐稳就翻，观众还没建立"蓝=当前模式"的编码 |
| 白闪脉冲 | 2–3f，0.55→0.19 阶梯 | 帮眼睛登记"这一帧变了"；>4f 抢了 cel-flash 的活 |
| 厚度弹跳 | exp 衰减 cos，初幅 10px | 纯硬切略干；弹跳是"挡位卡进去"的机械回馈 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 翻色必须真同帧：画框、窗内布局、角标文字三者错开哪怕 2f，"换挡"就散成三个小动画
- 颜色编码要全片守约：蓝框段落里不许出现绿色主 UI 元素，编码被稀释后翻色就只是换色
- 画框是包装层不是主角：全片翻色 ≤2 次，翻多了读作霓虹灯（P4 克制原则）
- 两个模式的品牌色对比度要够（demo 蓝 #3E7BFA / 绿 #1BC47D）；同明度邻近色翻了等于没翻
- 声音：翻色帧钉一声干脆的机械 click/换挡声，白闪与声同帧；画框生长段可静

## 参考实现
demos/effects/brand-frame-snap/
（BrandFrameSnap.tsx）
原片出处：figma-devmode 0:28–0:32 + 0:43–0:47

## Reference implementation (Remotion)

- demos/effects/brand-frame-snap/BrandFrameSnap.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/brand-frame-snap/BrandFrameSnap.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/effects/brand-frame-snap/BrandFrameSnap.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.