# Mosaic reframe

12 tiles continuously morph among three layouts — a regular grid, a feature mosaic, and a diagonal waterfall — position and size each interpolating, with a slight per-tile stagger and a hold between segments.

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

## Params

_No params._

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

## Prompt

## When to use

A showcase transition for "the same content, several ways of looking at it": layout-capability displays for portfolio/template-library/photo-album products.

## Intention

Let the audience watch "the layout itself thinking": the same 12 pieces of content move from an orderly archival state (grid), to a curated state with hierarchy (feature mosaic), to a state with attitude and motion (diagonal waterfall). The three layouts are three narrative tones, and the morphing itself demonstrates the product's capability.

## Duration & energy

- Duration: About 6.0s (180f@30fps; appear 0–0.6s · A→B 1.6–2.5s · hold · B→C 3.7–4.8s)
- Energy: Medium (continuous, flowing rearrangement, no peak, a composed mood)

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

## 意图
让观众看见"布局本身在思考"：同样 12 张内容，从整齐档案态（网格）变成有主次的策展态（feature mosaic），再变成有态度的动态态（对角瀑布）。三段排版是三种叙事语气，变形过程即产品能力。

## 动效核心
- 三套布局硬编码为坐标表：A=4×3 规则网格；B=6×4 单元格 mosaic（首片占 3×2 大位）；C=对角瀑布 `x=1+i*6.4, y=-7+i*7.6, rot=-15+i*3°` 递增旋转
- 每片对 `x/y/w/h/rot` 五个通道**独立插值**（`acc` 按段查表 + smoothstep），不走 transform 整体缩放——宽高真实变化，圆角阴影不变形
- 段窗口 A→B t=0.26–0.42、B→C t=0.62–0.80，之间留 ≥0.2 的 hold 读版面
- 逐片微 stagger `i*0.007`（约每片错 2 帧）：重排像波浪扫过而非整版闪变
- 开场逐片浮现：`i*0.012` 错峰 + scale 0.82→1 + opacity（outCubic），首片始终 zIndex 抬高（它是 mosaic 段的主图）

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 段窗口 | 每段变形 0.16–0.18，hold ≥0.2 | hold 是读版面的呼吸位，压缩到 <0.1 三段糊成一段 |
| 微 stagger | 0.007/片（≈2 帧） | 0 = 整版机械闪变；>0.02 波浪太明显抢过版面本身 |
| 瀑布参数 | 间距 6.4/7.6%，rot −15°+3°/片 | 旋转递增是"串"的灵魂；等角会退化成斜排网格 |
| mosaic 大位 | 首片 3×2 单元格 | 换 slots 表可重排主次；保证有一块 ≥2×2 的锚点位 |
| 浮现节奏 | 0.012/片 + 0.14 时长 | 12 片合计约 0.27 进完；作转场用时可砍掉浮现直接从 A 态起 |
| 瓦片内容 | 渐变底 + 圆点 + 双信息条（占位） | 换真实截图/图片时保留 overflow:hidden 圆角容器，宽高插值不裁坏内容 |

## 已知坑
- 五通道独立插值意味着**不能**换成 `transform: scale`——宽高动画会引发子元素重排，占位内容用了百分比定位可自适应，换成真实图片要用 `object-fit: cover`
- C 段瓦片有意越出画框（y 从 −7% 到 91%），画框裁切是构图的一部分，别加 padding "修复"
- 三套坐标表都以 92% 内容区 + 4% 边距为基准，改画幅比例需整表重算
- 段窗口与 stagger 叠加后末片 B→C 到 0.887 才结束，再加段落需压缩前段而不是顺延（保证 t=1 前全部落定）

## 参考实现
demos/transition/mosaic-reframe/
（MosaicReframe.tsx）

## Reference implementation (Remotion)

- demos/transition/mosaic-reframe/MosaicReframe.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/mosaic-reframe/MosaicReframe.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/transition/mosaic-reframe/MosaicReframe.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.