# Aurora Bloom Background Flip

A light-gray backdrop lifts a purple-orange soft-focus blob from below, then the whole background darkens to near-black in ~0.36s as the blob compresses into an afterglow; copy blur-swaps in the gap.

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

## Params

_No params._

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

## Prompt

## When to use

A narrative turning point ("for years… → everything changed"); the beat where a brand film pivots from setup to emphasis; a scene change between light and dark palettes.

## Intention

Treat the "background inversion" as a punctuation mark: let the aurora rise slowly for the first 62% while viewers settle into the light background, then crush the whole frame to near-black in under 0.4s — this reads more like "turning a page" than any zoom or flash-white could. The copy change must land right after the inversion, with a gap in between, so viewers absorb the visual change before reading the new line.

## Duration & energy

- Duration: About 5.2s (156f@30fps).
- Energy: Low to high (the first two-thirds is a slow build; the darkening instant is the film's emphasis beat).

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

## 意图
把"底色反转"当成重音符号用：前 62% 让极光慢慢升起、观众适应浅底，
然后用不到 0.4s 把整个画面压到近黑——这一下比任何缩放/闪白都更像
"翻页"。文案的换句必须卡在反转之后，且中间留空档，让观众先接住画面
变化再读新句。

## 动效核心
- 三层 `blur(60px)` blob 从画框底部升起：主紫 `rgba(107,79,224,.85)`
  90%×85%、橙核 `rgba(217,122,74,.9)`、白色融边 `rgba(255,255,255,.8)`
- 升起 `seg(0.04→0.62, outCubic)`：`translateY 32%→−6%` + `scale 1→1.25`
- 反转 `flip = seg(0.63→0.70, inOutQuad)`（归一化 0.07 ≈ 0.36s）：
  底色 `mix([236,236,236] → [10,10,18])`，blob opacity 1→0.4 压成余晖，
  白色融边层 `1−flip` 直接收掉
- 橙核独立 `translateX ±8%`（2.2 周期/全片）横向慢漂，让 blob 内部
  有相对运动而不是整块升降
- A 句逐词 `blur 0→8px` + 淡出（stagger 0.04、各 0.10、inQuad）；
  B 句逐词 `outQuint` blur-in（stagger 0.06、各 0.11），落位后 0.16 内
  由 DEEPP 紫收色到白

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| blob 模糊/尺寸 | blur(60px)，主层 90%×85%，容器 inset −10% | 模糊小于 40px 就看得出是圆，成了"色球"不是"光" |
| 升起 | translateY 32%→−6% + scale 1→1.25，t 0.04→0.62 outCubic | 占掉 60% 时长是故意的：酝酿越长，反转越有分量 |
| 反转时长 | t 0.63→0.70 inOutQuad ≈ 0.36s | **命门**：拉到 1s 就不是重音而是渐变过场 |
| 底色 | #ececec → #0a0a12（不是纯黑） | 纯黑会让余晖 blob 边缘出现色阶断层 |
| blob 压暗 | opacity 1→0.4，白色融边层同步归零 | 不压暗 blob，暗场里紫橙会过曝糊成一团 |
| 橙核漂移 | translateX ±8%，2.2 周期/全片 | 幅度到 15% 就看得出是"一个球在动" |
| A 句 blur-out | 逐词 stagger 0.04、各 0.10、inQuad、blur→8px | inQuad 让消失是加速的，读作"被光吞掉" |
| B 句 blur-in | 逐词 stagger 0.06、各 0.11 outQuint + 0.16 内紫→白 | 收色比入场晚一点，落定瞬间才转白，是"定稿"的信号 |
| 换句空档 | A 收完 t≈0.64 → B 起 0.76（≈0.6s 无字） | cross-fade 会把两句糊在一起，空档才读出"翻篇" |

## 已知坑
- 白色融边层（blobC）只在浅底成立，反转时必须 `1−flip` 收掉，
  否则暗场里留一团灰雾
- DEEPP/PURPLE 是这个效果的**本体光色**，不是品牌色槽位；要换成项目色
  必须 blob 三层 + B 句文字色整组一起换，只换文字色会和背景脱节
- 文案是中性占位（"For many years" / "everything changed"），逐词
  stagger 的节奏依赖词数与字长，换句要回调 0.04/0.06 两个间隔
- 底色用 JS 逐帧写 `background`（`mix()` 出实色），不要用 CSS transition，
  否则 seek 到任意帧时颜色不确定

## 参考实现
demos/effects/aurora-bloom-bg-flip/
（AuroraBloomBgFlip.tsx）

## Reference implementation (Remotion)

- demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.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/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.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.