# Triple neon marquee recap

Three rows of opposing neon marquee text (BETTER/FASTER/STRONGER) scroll endlessly, taking turns lighting up, then fade out.

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

## Params

_No params._

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

## Prompt

## When to use

Recap section for the outro theme words; the "afterglow" beat for a three-word slogan (a step down after cel-flash-stomp's slam); music sections with no voiceover

## Intention

One row of marquee is just web decor. Stack three rows, alternate direction on odd/even rows, and cycle the brightness by phase, and it becomes "the theme words parading past the viewer." The key is **alternating light-up**: at any moment only one row is the neon lead, the rest dim to thin outline backdrops — all three lit at once is a broken sign, taking turns is a recap. The opposing scroll directions (top/bottom rows right, middle row left) create an "enclosed" feel: the eye is pinned in the middle as words stream past from both sides, reading as "these three words never stop."

## Duration & energy

- Duration: 4–5s (demo 150f: 10f fade-in + loop body + 20f fade-out)
- Energy: Medium-high (continuous flow + row-by-row pulsing, no instantaneous impact)

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

## 意图
一行 marquee 只是网页装饰；三行叠起来、奇偶反向、再让亮度按相位轮流
走，就成了"主题词在观众眼前列队巡游"。命门是**明暗轮唱**：任一时刻
只有一行是霓虹主角，其余压暗成细描边背景——三行全亮是灯牌事故，
轮流亮才是 recap。反向对滚制造"包围感"：上下行向右、中行向左，
视线被夹在中间，词从两侧源源不断流过，读作"这三个词说不完"。

## 动效核心
- 无缝回绕：副本按固定 unitW 等距绝对定位，`(frame*speed) % unitW`
  取模平移——匀速 linear（marquee 类是库内 linear 豁免项）
- 空心描边字：`-webkit-text-stroke`，color transparent；亮度脉冲
  同时驱动三件事——描边宽 5→8px、opacity 0.35→1、双层 drop-shadow
  辉光（8→30px + 20→70px）——只调 opacity 不调辉光读不出"霓虹通电"
- 轮唱相位：周期 45f，行间相位差 15f（周期/3），余弦软包络且每行
  只占周期前 1/3 亮、后 2/3 归零——保证"一亮俩暗"永远成立
- 三行配色蓝/粉/琥珀（#4d9fff/#ff4dd2/#ffb347），深底 #050308；
  中行反向且略快（14/17/14 px/f）——同速对滚读作镜像，破掉
- 词尾加分隔点（•）撑词间距，unitW = 估宽 + 1.3 倍字号空隙

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 字号/行距 | 300px，行距 350px 排满 1080 | 行间留白 >80px 读作三条横幅广告而非一面词墙 |
| 滚速 | 14/17/14 px/f，中行反向 | >25 读不清词只见光带；三行同速同向读作整版平移 |
| 脉冲周期 | 45f，相位差 15f | 周期 <30f 三行抢闪读作故障；>70f 轮唱感断掉 |
| 亮度区间 | opacity 0.35→1 + stroke 5→8px | 暗态 <0.25 暗行消失，"三行"结构丢了 |
| 辉光 | 双层 drop-shadow，亮态 30/70px | 单层或 <20px 读作普通描边字不读作霓虹 |
| 淡入淡出 | 入 10f / 出 20f 整组 opacity | 循环体无始无终，掐头去尾全靠这两端；硬切进出读作素材没铺满 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 page-waterfall-wall 分工：那卡是页面截图纵向瀑布做"内容体量感"，
  本卡是文字行横向对滚做"主题词余韵"——素材是词不是页，位置在片尾不在中段
- 与 outro-group-photo-launch 分工：全家福是峰值终镜（元素合影+发布会收场），
  本卡是终镜前的 recap 铺垫或低成本备选终镜，两者可串（本卡→淡出→全家福）不可叠
- 与 cel-flash-stomp 同吃"三连词口号"文案：那卡逐词砸（高能宣告），
  本卡整组滚（余韵复读）——同一组词全片最多各用一次，先砸后滚顺序不可反
- 副本数按 `ceil(1920/unitW)+3` 留冗余——短词（≤4 字符）unitW 小，
  副本不足会在回绕瞬间露右侧空缺
- 实战品牌色版：三行可统一品牌色靠明暗区分，但辉光对比须 ≥ demo 的
  0.35→1 幅度，不然轮唱读不出来

## 参考实现
demos/outro/neon-triple-marquee/
（NeonTripleMarquee.tsx）
原片出处：clickup-30 61–64.5s

## Reference implementation (Remotion)

- demos/outro/neon-triple-marquee/NeonTripleMarquee.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/outro/neon-triple-marquee/NeonTripleMarquee.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/neon-triple-marquee/NeonTripleMarquee.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.