# Marker underline title

After the headline settles, a marker-pen underline draws fast left to right beneath a keyword — a widening stroke, a rough edge, a slight upward slant hugging the letters' baseline.

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

## Params

_No params._

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

## Prompt

## When to use

Emphasizing a single keyword in a headline (new/free/AI…); a hand-drawn, human-touch brand tone; annotation-style emphasis in body copy.

## Intention

A sudden hand-drawn marker stroke inside a printed headline uses the material contrast to pull one word out of the layout — like someone circling a point with a real pen on a poster. Three crux points: **fast** (one continuous stroke over 8–12f; slower reads as a loading bar), **close** (hugging the letters' baseline; farther away reads as a divider, not emphasis), and **follows the slant** (an italic word's underline must slant slightly up from left to right — drawing it the wrong direction is the most common and most obviously fake mistake).

## Duration & energy

- Duration: Starts 4–8f after the headline settles, the stroke draws over 8–12f, total 1–1.5s
- Energy: Low (one stroke of emphasis, doesn't steal the headline's spotlight)

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

## 意图
打印体标题里突然出现一笔手绘马克笔，用材质反差把一个词从
排版里拎出来——像人拿笔在海报上圈重点。命门有三：**快**
（8–12f 一笔呵成，慢了读作加载条）、**近**（贴着字底，离远了
读作分隔线不是强调）、**跟字势**（斜体词的划线必须左低右高
微上斜——斜向画反是最容易犯且一眼假的错，判例见已知坑）。

## 动效核心
- SVG path 描画（strokeDashoffset 或裁剪窗），从左到右 8–12f，
  ease-out 微收尾（起笔快收笔略缓＝手劲）
- 笔形：路径变宽（中段最宽）、边缘毛糙（轻微噪声扰动/粗糙笔刷
  贴图），首尾略细＝起笔收笔
- 位置：贴字底（bottom 偏移 ≈ -0.1em），中轴微上斜跟随斜体字势
- 时机：标题完全落定后 +4~8f 起笔——划线是"看完标题后的强调"，
  与标题同动就抢戏

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 划线时长 | 10f（原片实测节奏；14f 版被裁偏慢） | >14f 读作进度条；<6f 看不见笔迹方向 |
| 字底距离 | ≈-0.1em（从 -40 收到 -20@1080p 才贴住字势） | 离远读作分隔线；碰到字底降部又乱 |
| 斜向 | 左低右高微上斜（跟斜体） | **画反（左高右低）一眼假**——返工判例 |
| 笔宽 | 中段 ~0.12em，首尾 ~0.6x | 等宽读作机器线；差异>2x 读作书法 |
| 毛糙度 | 边缘轻噪声 | 太糙读作故障；全平滑读作 CSS border |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 draw-svg-trace 撞领域（有意单列为两卡）：那张是通用
  SVG 描画（图标/插画/任意线稿）；本卡专做**文字强调**的马克笔
  质感（变宽+毛糙+跟字势），做图形描画去用那张
- 斜向判例：v1 左高右低被比对环节抓出——划线斜向必须跟字势，
  正体字则水平微抖
- 残余差距：原片（notion-ai）笔头飞白颗粒感更细碎，实战可加
  更细的笔刷噪点

## 参考实现
demos/typography/marker-underline-title/
（MarkerUnderlineTitle.tsx）
原片出处：notion-ai.mp4

## Reference implementation (Remotion)

- demos/typography/marker-underline-title/MarkerUnderlineTitle.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/marker-underline-title/MarkerUnderlineTitle.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/typography/marker-underline-title/MarkerUnderlineTitle.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.