# Logo shrink to wordmark lockup

A large neon-cutout ring collapses fast into a small solid white "O" with a settling overshoot, the icon shifts left to make room, letters slide in to complete the lockup, and a tagline closes it out.

- Category: outro · Tags: shotcraft, remotion, outro
- Spec: 1920×1080 @ 30 fps · 4.9s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/logo-shrink-wordmark-lockup.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/logo-shrink-wordmark-lockup/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/logo-shrink-wordmark-lockup.html

## Params

_No params._

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

## Prompt

## When to use

The film's closing brand seal: collapsing from full-screen graphic energy down to the standard "icon + wordmark + tagline" lockup.

## Intention

The closing "stamp of approval": a full-screen neon ring collapses with all its energy into a single small icon, healing its gap and turning pure white (from performance state to standard state), then settles step by step into the brand lockup spec — the icon makes room, the wordmark enters, the tagline closes it out. What the audience sees is the brand "standing still" out of the motion.

## Duration & energy

- Duration: About 4.4s (132f@30fps; collapse 0.1–1.2s · making room 1.5–2.1s · letters 2–2.7s · tagline 3.2–3.7s)
- Energy: Medium (the collapse has impact, the overall feel is a settled, steady landing)

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

## 意图
片尾的"盖章"动作：满屏的霓虹大环携能量坍缩成一枚小图标，愈合缺口、转为纯白（从演出态到标准态），然后按品牌 lockup 的规范一步步落位——图标让位、字标进场、标语押尾。观众看到的是品牌从动态里"站定"。

## 动效核心
- 收束主曲线：scale 5.4→1（t=0.02–0.28，inOutCubic），t=0.26–0.37 叠 `sin(π)*0.06` 的过冲刹车——到位瞬间胀 6% 再回落，"急停带惯性"
- 缺口愈合与变色和收束同轨（t=0.10–0.28）：霓虹辉光层淡出、描边从 #dfe9ff 过半切 #fff、实心白 O 淡入——三层交叉在缩小过程中完成，落位时已是干净白标
- t=0.34–0.47 图标整体 translateX(−68px) 左移让位（inOutCubic），为字标腾出中轴右侧
- 五字母按 `0.46 + i*0.035` stagger 滑入：opacity 0→1 + translateX 8px→0，各 0.10 时长 outCubic
- 标语（强调色 `ACCENT`，13px 宽字距）t=0.72–0.84 整行淡入，不逐字——层级低于字标一档

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 收束幅度 | scale 5.4→1 | 起始倍率决定"从多满收到多小"；<3 冲击力不足，>7 初始态糊出画 |
| 刹车过冲 | +6%，sin 包络 0.26–0.37 | 砍掉读作硬冻结；>10% 变果冻 |
| 愈合窗口 | 0.10–0.28（与收束同步） | 愈合必须在落位前完成——落位后还在变色读作"没准备好" |
| 左移让位 | −68px，0.34–0.47 | 与字母首入（0.46）几乎无缝衔接，拉开间隔会有"空等"感 |
| 字母 stagger | 0.035/字，各 0.10 时长 | 5 字母合计约 0.28；字更多时按 `(0.7-0.46)/n` 反算间隔保证 0.7 前进完 |
| 标语入场 | 0.72–0.84 整行淡入 | 有意不逐字：标语是注脚不是主角；`ACCENT` 常量换项目色 |

## 已知坑
- `WORDMARK`（5 字母）与标语 `BUILD. SHIP. REPEAT.`（20 字符）都是占位；换品牌词时字母 stagger 节奏依赖字数，标语保持近似字符数否则宽字距排版会溢出或过疏
- 图标是 SVG 双弧切口环（抽象几何 mark），替换为真实品牌 logo 时保留"演出态→标准态"两层结构：一层带效果（辉光/彩色），一层纯净态，用同一条 heal 曲线交叉
- 左移量 −68px 与字标宽度耦合（row 定位在 `50%-40px`）——字数变化时两处一起调，让 lockup 整体在画面居中
- 收尾后无循环回位设计，作 outro 最后一镜使用；需要循环时在 t=1 后接 1s 静帧

## 参考实现
demos/outro/logo-shrink-wordmark-lockup/
（LogoShrinkWordmarkLockup.tsx）

## Reference implementation (Remotion)

- demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.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/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.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.