# UI morphs into brand mark

Two UI-to-brand morphs — icon-flip-bloom, an icon flips flat on Y and blooms into a flower mark with the wordmark settling letter by letter, and input-morph-assemble, an input field shrinking into a pill as three primitives assemble into a logo petal.

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

## Params

_No params._

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

## Prompt

## When to use

The last beat before a brand outro; visual proof that "the UI you use every day is this brand"

## Intention

The brand-outro library already has three routes: brand-ink-open is an opening ink-press reveal, morph-from-primitive is primitive-to-UI-container (the opposite direction), and outro-group-photo-launch is elements gathering for a group photo (assembling without transforming). This card adds a fourth: **the product's own UI element transforms itself into the brand mark** — style A is an icon flipping over into the logo (a same-slot entity swap), style B is the input field that's recurred throughout the film assembling, after its last send, into a single logo petal (multi-element landing and assembly). What the viewer sees isn't "a logo appeared," it's "the thing I was just using turns out to be it" — the causal chain itself is the brand argument.

## Duration & energy

- Duration: A: ~4.3s (130f) / B: ~4.7s (140f)
- Energy: Medium-high (a punctuation beat at the close, one complete morph telling the whole story)

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

## 意图
品牌收尾库里已有三条路：brand-ink-open 是开场描画压印、
morph-from-primitive 是图元→UI 容器（方向相反）、
outro-group-photo-launch 是元素围拢合影（聚而不变）。本卡补第四条：
**产品 UI 元素自己变形成品牌符号**——A 式是图标翻一个身变成 logo
（同位实体交换），B 式是全片反复出现的输入框在最后一次发送后集结成
logo 单瓣（多元素落位拼装）。观众看到的不是"logo 出现了"，而是
"刚才用的东西原来就是它"，因果链本身就是品牌论证。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A icon-flip-bloom | 图标 anticipation 晃两下→Y 轴 scaleX 压扁成竖线（双层拖影+blur）→最薄处实体交换、spring 绽放成 5 瓣花形 mark→mark 左移让位、wordmark 逐字落定 | 单图标产品；图标与 logo 形态差异大、需要"翻过去变身"的魔术感 |
| B input-morph-assemble | 光标点发送→文字飞走→输入框 x/y/w/h/r 五量 spring 插值成圆角胶囊→三粒图元错峰从画外落下拼成抽象单瓣→整组呼吸 | 输入框/卡片等矩形 UI 是全片主角的片子；logo 可拆解为几何图元组合 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A anticipation | 12–34f 倾斜 -12°/+14°/-18°→0°，inOut(sin)，transformOrigin 钉底部 78% | 幅度递增才读作"蓄力"；只晃一下读不出预备动作 |
| A 翻扁 | 12f Easing.in(cubic)，scaleX 1→0.04；两层残影 opacity 0.22/0.14 + blur 6px 滞后 0.12/0.24 | 加速入是"甩"的关键；匀速翻读作 flip 卡片。0.04 是最薄处，实体交换在这帧做 |
| A 绽放 | spring(damping 11, stiffness 130)；5 瓣 ellipse 角度从 -90°（全竖直重叠）张到均匀分布，长 20→38、宽 3→15 同步生长 | 花瓣从闭合竖线张开才接得住"翻过最薄处"；直接 scale 整朵会断因果 |
| A wordmark | mark 16f 左移 -420px 让位；逐字 2.2f 错峰、每字 10f | **wordmark 落定应对照原片：各字母由大变小落位，大的时候模糊、落位时清晰（scale+blur 联动逐字落定），不是横向扫出**；demo 的 translateX -70→0 + blur 16→0 横扫是待改项 |
| B 发送反馈 | 光标 22f 移入按下 scale 0.82 + 按钮闪白 6f；文字 12f Easing.in 加速右上飞出（+700,-380）+ rotate -10° + 淡出 | 飞走必须加速——匀速飞读作平移不读作"发出去了" |
| B morph | 34f 起 spring(damping 13, stiffness 90)，860×120 r26 → 300×108 r54 五量同步；白描边随进度填成实心 | 五量必须同一个 spring 驱动，分开插值会中途散架 |
| B 三粒落下 | 56/70/84f 错峰 14f，各自 spring(damping 12) 从画外 -260px 落到预排位 | 错峰是"集结"的节奏感；齐落读作下雨 |
| B 落定呼吸 | 108f 起整组 scale 1±0.03 正弦（0.18 rad/f），transformOrigin 钉瓣心 | 呼吸给"活的 logo"收尾；没有呼吸落定即死帧 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- A 式实体交换必须发生在 scaleX ≤0.05 的最薄帧——提前换观众看见两个图形叠影，魔术穿帮
- A 式 wordmark 按上表改逐字 scale+blur 落定后，错峰间隔可能要拉大（每字有独立的"由大变小"动作，2.2f 可能读不清），改完按可感性判例正常速度看片
- B 式拼的是抽象单瓣（泪滴+胶囊组合）不是真 Slack logo——实战换成自家 logo 的图元分解，图元数 3–4 粒为宜，多了读作粒子不读作拼装
- 变形中途别叠其他动画（morph-from-primitive 同判例）：morph 本身是全部信息
- 与 outro-group-photo-launch 分工：那是全片元素飞来围住字标合影（聚），本卡是 UI 元素自己变成品牌符号（变）；同片收尾二选一
- 声音：A 翻扁一声"唰"、绽放落定"嗒"；B 发送一声 send、每粒落位一声 pop、呼吸段静

## 参考实现
demos/outro/ui-to-brand-morph/
（IconFlipBloomLogo.tsx / InputMorphsIntoLogo.tsx）
原片出处：A perplexity-promo 88–91.5s / B slack-promo 40–41s

实现状态：两式均有参考实现与 Gallery 动态样片。

## Reference implementation (Remotion)

- demos/outro/ui-to-brand-morph/IconFlipBloomLogo.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/outro/ui-to-brand-morph/IconFlipBloomLogo.tsx
- demos/outro/ui-to-brand-morph/InputMorphsIntoLogo.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/outro/ui-to-brand-morph/InputMorphsIntoLogo.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/ui-to-brand-morph/IconFlipBloomLogo.tsx, demos/outro/ui-to-brand-morph/InputMorphsIntoLogo.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.