# Page waterfall wall

Real page screenshots split into 3–4 columns scroll endlessly at different speeds and directions on a tilted-back 3D wall.

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

## Params

_No params._

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

## Prompt

## When to use

A sense-of-scale section for "many pages/features/templates"; montage mid-section build-up or a product-breadth shot after the intro

## Intention

A flowing overview: let the viewer "see a lot of pages stream by" in a few seconds, reading as scale rather than detail. Division of labor with outro-group-photo-launch: that's a **convergent** overview (elements fly in to surround the wordmark and freeze for a group photo, semantics "they belong to the same product"), this is a **flowing** overview (content keeps streaming without ever freezing, semantics "there's still more we haven't shown you"). Division of labor with odometer-digit-roll: that's a mechanical reel with a final value (settling digit by digit), this loops infinitely with no final value. Division of labor with wall-reveal-moves: that's the wall's **entrance move**, this is the wall's **ongoing state** — wall-reveal-moves can hand off into this card to keep flowing after it enters.

## Duration & energy

- Duration: 4–6s (an infinite loop body, trimmed to the section's needed length)
- Energy: Medium (a flowing-display type)

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

## 意图
流动式一览：让观众在几秒内"看到很多页面流过"，读感是体量而非细节。
与 outro-group-photo-launch 分工：那是**聚拢式**一览（元素飞来围住
字标定格合影，语义"属于同一产品"），本卡是**流动式**一览（内容持续
流过不定格，语义"还有很多没给你看完"）。与 odometer-digit-roll 分工：
那是有终值的机械滚轮（逐位停稳读数字），本卡无终值无限循环。
与 wall-reveal-moves 分工：那是整墙**入场动作**，本卡是墙的**持续状态**，
可用那卡入场后交棒本卡续流。

## 动效核心
- lib 组件 `assets/lib/VerticalTicker.tsx`：父层 perspective(1000px)
  rotateX(20°) scale(1.2) 后仰成墙；每列 [...items,...items] 翻倍 +
  progress 取模 translateY 0→-50% 无缝循环；上下渐变遮罩收边
- 差速反向是视差命门：3 列 loop 时长错开（如 12/9/14s），中列反向——
  等速同向读作一张大图在滚，差速反向才读出"独立的列"
- 镜头缓推寄生在外层（scale 1→1.06 线性铺满全镜），墙自身循环、
  镜头单向，两个运动源方向不同不打架
- 素材：真实页面截图切片（Q1 脱敏后），卡片级切块比整页长图好——
  整页切片滚动时观众来不及读，卡片块有完整轮廓可辨识

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 列数 | 3（1080p）/ 4（超宽） | 2 列读不出"墙"，5 列单列过窄纹理糊 |
| loop 时长 | 相邻列差 ≥25%（12/9/14s） | 差速太小视差读不出；最快列 <7s 开始读作"刷屏" |
| 方向 | 中列反向（-1,1,-1 或交替） | 全同向=一张大图；反向列是"独立列"的最强证据 |
| 倾角/透视 | rotateX 20° / perspective 1000px | >25° 顶部行文字透视压糊（Q2）；<12° 读不出墙面后仰 |
| scale | 1.2 基础 + 缓推至 ~1.26 | 1.2 是补透视收缩的底值，低于它四角露底 |
| 遮罩高度 | 200px | 太矮行硬进硬出；太高可视区剩不下 2 行 |
| 循环周期 | -50% 位移必须恰等于单副本周期（内容高+n·gap） | lib 已用 marginBottom 保证；自写实现用 flex gap 会差 gap/2 跳帧 |

## 已知坑
- **参数借鉴自外部实现（remotion-3d-ticker），非实战定稿；
  首次实战须以真实素材回验**
- 每列 items 总高必须 ≥ 视口有效高（否则同屏见同一切片两次，穿帮）；
  列间切片不要复用同一张图，同图同时出现在两列读作素材穷
- 本卡是氛围/铺陈镜头不是信息镜头：切片上文字只求"看得出是真页面"
  不求读完；想让观众读某一块，交棒 spotlight-hero-card 单主角处理
- P4 去重：与 outro 合影同片共存没问题（一流动一聚拢），但全片
  瀑布墙只出现一次，二次出现读作凑时长

## 参考实现
assets/lib/VerticalTicker.tsx（核心组件）；
demo 见 demos/ui-entrance/page-waterfall-wall/（PageWaterfallWall.tsx / VerticalTicker.tsx）。

## Reference implementation (Remotion)

- demos/ui-entrance/page-waterfall-wall/PageWaterfallWall.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/page-waterfall-wall/PageWaterfallWall.tsx
- demos/ui-entrance/page-waterfall-wall/VerticalTicker.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/page-waterfall-wall/VerticalTicker.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/ui-entrance/page-waterfall-wall/PageWaterfallWall.tsx, demos/ui-entrance/page-waterfall-wall/VerticalTicker.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.