# Hashtag to pill materialize

"#word" types itself in, hard-cuts on 1 frame into a large pill label, holds, then shrinks and moves left into position, another hard cut reveals the finished page — two hard cuts around one slide.

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

## Params

_No params._

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

## Prompt

## When to use

Demo segments for tag/category/keyword features (tagging in a notes app, topic aggregation); a three-act narrative of "type it → it becomes a UI object → it settles into the finished product".

## Intention

The conventional way to materialize text is a fade/morph/expand. Frame-by-frame breakdown of the original footage proves Bear does the opposite: **materializing happens on a 1-frame hard cut** — one frame it's still text+cursor, the next it's a complete pill, no expansion, no cross-fade, no rebound. A hard cut delivers the certainty of "snap, done" — any gradual transition would soften "object" into "effect". The whole segment's skeleton is **two hard cuts bracketing one slide**: hard-cut materialize → smooth shrink-move into place → hard-cut reveal of the finished page. The only continuous motion (the shrink-move) is framed by two hard cuts, which is exactly what makes it read as fast and stable. This rhythm skeleton is the crux — change the nature of any one of the three beats and the whole card collapses.

## Duration & energy

- Duration: Typing ~40f + hard-cut pill hold ~18f + shrink-move 14f + hard-cut reveal then rest; whole segment about 3.5s (18–21.5s in the source footage)
- Energy: Medium (crisp and clean, driven by the hard cuts, not by bounce)

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

## 意图
文字变实体的常规做法是渐变/morph/展开，原片帧级拆解证明 Bear 反着
来：**实体化是 1 帧硬切**——上一帧还是文字+光标，下一帧就是完整
胶囊，无展开无 cross-fade 无回弹。硬切给的是"啪、成了"的确定感，
任何渐变都会把"实体"软化成"特效"。全段骨架是**两次硬切夹一次
滑动**：硬切实体化 → 平滑缩移归位 → 硬切揭示成品页。唯一的连续
运动（缩移）被两记硬切框住，才显得又快又稳。这个节奏骨架是命门，
三段挪动任何一段的性质（把硬切改渐变、把滑动改硬切）整卡就塌。

## 动效核心
- 打字段：几何无衬线（Futura 气质）居中打 "#word"，**红实心光标
  恒亮不闪**（原片实测，别加 blink）；人手节奏 4–6f/字带确定性抖动
- **实体化 = 1 帧硬切**：文字+光标整层消失，同帧出现无描边浅灰
  胶囊 + 图标 + 词（字号不变、原位等大，# 被图标替换）；仅允许
  3f 1.03→1 微落定防死板
- 胶囊 hold ~0.6s → 一段 bezier easeInOut 缩小左移（~0.55x、
  ~14f）落到页面标签位，位置/缩放同曲线同起止，中途不分段
- 落位后**再 1 帧硬切**揭示成品页：底色/标题/正文/胶囊配色同帧
  全变，之后真静止收尾
- 实现要点：胶囊按大字号绘制、整体 transform 缩放，且
  transformOrigin 必须 0 0 + translate 先行，否则落位中心漂移

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 打字节奏 | 4–6f/字（原片 ~6 字/秒），mulberry32 抖动 | 均匀间隔读作机打；光标必须恒亮（**原片实测**不闪烁） |
| 实体化 | **1 帧硬切**（原片帧级实测无任何过渡）+ 3f 1.03→1 微落定 | 加淡入/展开立刻降级成普通 morph；微落定 >4f 读作弹跳 |
| 胶囊几何 | 740×236@1920（**原片实测** 493×157@720p ×1.5），无描边 | 胶囊要"宽大过头"才有实体感；加描边读作按钮 |
| hold | ~18f（0.6s，**原片实测**） | <12f 观众没看清胶囊长啥样就飞了 |
| 缩移 | ~0.55x（**原片实测** 273/493）、14f、bezier(0.5,0,0.25,1) | 缩放与位移必须同曲线；分开调会读作两个动画 |
| 揭示 | 落位 +3f 再 1 帧硬切全页 | 揭示若做转场，第二记硬切没了，骨架塌一半 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 typewriter-moves/ai-stream-response（打字呈现）、
  morph-from-primitive（图元渐变成形）撞领域：本卡命门是**硬切
  实体化非渐变变形**——只要你想加过渡，就该去用那几张卡而不是改这张
- 早期版本曾杜撰"胶囊飞入下方滑入笔记卡"段，原片对照证伪已砍；
  别复活飞行段
- transformOrigin 默认 50% 50% 会让缩放落位中心漂移 (1−s)×半宽，
  必须 origin 0 0 + translate 到目标中心再 scale（demo 内注释）
- 与原片残余差距：音符图标手绘 SVG 曲线、Futura 回退字重、揭示帧
  正文间距 ~10px 级别偏差；节奏与硬切时点已密帧对齐

## 参考实现
demos/interaction/hashtag-to-pill-materialize/
（HashtagToPillMaterialize.tsx）
原片出处：bear-app.mp4 18–21.5s

## Reference implementation (Remotion)

- demos/interaction/hashtag-to-pill-materialize/HashtagToPillMaterialize.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/hashtag-to-pill-materialize/HashtagToPillMaterialize.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/hashtag-to-pill-materialize/HashtagToPillMaterialize.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.