{ "slug": "aurora-bloom-bg-flip", "title": "Aurora Bloom Background Flip", "tagline": "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.", "description": "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 ", "category": "effects", "tags": [ "shotcraft", "remotion", "effects" ], "tier": "free", "license": "Apache-2.0", "spec": { "width": 1920, "height": 1080, "fps": 30, "duration": 5.7, "aspect": "16:9" }, "kind": "remotion", "params_schema": { "type": "object", "properties": {} }, "default_params": {}, "preview": { "poster": "https://gimgs.net/motion/media/aurora-bloom-bg-flip/poster-12cba9c50218.jpg", "video": "https://gimgs.net/motion/media/aurora-bloom-bg-flip/video-683f6bec63c5.mp4" }, "variants": [ { "key": "aurora-bloom-bg-flip", "label": "aurora-bloom-bg-flip", "description": "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.", "use": "", "video": "https://gimgs.net/motion/media/aurora-bloom-bg-flip/video-683f6bec63c5.mp4", "poster": "https://gimgs.net/motion/media/aurora-bloom-bg-flip/poster-12cba9c50218.jpg" } ], "credits": { "author": "video-shotcraft (Vincent Wei)", "url": "https://github.com/Vincentwei1021/video-shotcraft" }, "page_url": "https://gimgs.net/motion/aurora-bloom-bg-flip.html", "json_url": "https://gimgs.net/motion/aurora-bloom-bg-flip.json", "template_url": "https://gimgs.net/motion/aurora-bloom-bg-flip/template.html", "play_url": null, "markdown_url": "https://gimgs.net/motion/aurora-bloom-bg-flip.md", "updated_at": "2026-09-24T07:39:41.934Z", "prompt": "## When to use\n\nA 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.\n\n## Intention\n\nTreat 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.\n\n## Duration & energy\n\n- Duration: About 5.2s (156f@30fps).\n- Energy: Low to high (the first two-thirds is a slow build; the darkening instant is the film's emphasis beat).\n\n## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)\n\n## 意图\n把\"底色反转\"当成重音符号用：前 62% 让极光慢慢升起、观众适应浅底，\n然后用不到 0.4s 把整个画面压到近黑——这一下比任何缩放/闪白都更像\n\"翻页\"。文案的换句必须卡在反转之后，且中间留空档，让观众先接住画面\n变化再读新句。\n\n## 动效核心\n- 三层 `blur(60px)` blob 从画框底部升起：主紫 `rgba(107,79,224,.85)`\n 90%×85%、橙核 `rgba(217,122,74,.9)`、白色融边 `rgba(255,255,255,.8)`\n- 升起 `seg(0.04→0.62, outCubic)`：`translateY 32%→−6%` + `scale 1→1.25`\n- 反转 `flip = seg(0.63→0.70, inOutQuad)`（归一化 0.07 ≈ 0.36s）：\n 底色 `mix([236,236,236] → [10,10,18])`，blob opacity 1→0.4 压成余晖，\n 白色融边层 `1−flip` 直接收掉\n- 橙核独立 `translateX ±8%`（2.2 周期/全片）横向慢漂，让 blob 内部\n 有相对运动而不是整块升降\n- A 句逐词 `blur 0→8px` + 淡出（stagger 0.04、各 0.10、inQuad）；\n B 句逐词 `outQuint` blur-in（stagger 0.06、各 0.11），落位后 0.16 内\n 由 DEEPP 紫收色到白\n\n## 参数表\n| 参数 | 典型值 | 调节手感 |\n|------|--------|----------|\n| blob 模糊/尺寸 | blur(60px)，主层 90%×85%，容器 inset −10% | 模糊小于 40px 就看得出是圆，成了\"色球\"不是\"光\" |\n| 升起 | translateY 32%→−6% + scale 1→1.25，t 0.04→0.62 outCubic | 占掉 60% 时长是故意的：酝酿越长，反转越有分量 |\n| 反转时长 | t 0.63→0.70 inOutQuad ≈ 0.36s | **命门**：拉到 1s 就不是重音而是渐变过场 |\n| 底色 | #ececec → #0a0a12（不是纯黑） | 纯黑会让余晖 blob 边缘出现色阶断层 |\n| blob 压暗 | opacity 1→0.4，白色融边层同步归零 | 不压暗 blob，暗场里紫橙会过曝糊成一团 |\n| 橙核漂移 | translateX ±8%，2.2 周期/全片 | 幅度到 15% 就看得出是\"一个球在动\" |\n| A 句 blur-out | 逐词 stagger 0.04、各 0.10、inQuad、blur→8px | inQuad 让消失是加速的，读作\"被光吞掉\" |\n| B 句 blur-in | 逐词 stagger 0.06、各 0.11 outQuint + 0.16 内紫→白 | 收色比入场晚一点，落定瞬间才转白，是\"定稿\"的信号 |\n| 换句空档 | A 收完 t≈0.64 → B 起 0.76（≈0.6s 无字） | cross-fade 会把两句糊在一起，空档才读出\"翻篇\" |\n\n## 已知坑\n- 白色融边层（blobC）只在浅底成立，反转时必须 `1−flip` 收掉，\n 否则暗场里留一团灰雾\n- DEEPP/PURPLE 是这个效果的**本体光色**，不是品牌色槽位；要换成项目色\n 必须 blob 三层 + B 句文字色整组一起换，只换文字色会和背景脱节\n- 文案是中性占位（\"For many years\" / \"everything changed\"），逐词\n stagger 的节奏依赖词数与字长，换句要回调 0.04/0.06 两个间隔\n- 底色用 JS 逐帧写 `background`（`mix()` 出实色），不要用 CSS transition，\n 否则 seek 到任意帧时颜色不确定\n\n## 参考实现\ndemos/effects/aurora-bloom-bg-flip/\n（AuroraBloomBgFlip.tsx）\n\n## Reference implementation (Remotion)\n\n- demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx\n\nThe component imports shared fixtures from `demos/_fixtures` and helpers from `assets/lib` in the repo; SKILL.md there documents the render workflow.\n", "flow": [ { "step": "Read the recipe", "note": "Prompt = when to use, intention, parameter table with typical values and how each one feels, known pitfalls. Treat values as calibrated starting points." }, { "step": "Get the code", "tool": "git", "cmd": "git clone https://github.com/Vincentwei1021/video-shotcraft && cd video-shotcraft && npm install" }, { "step": "Register + render", "tool": "remotion", "cmd": "npx remotion render out.mp4 # component: demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx" }, { "step": "Or re-implement", "note": "Port the timing/easing from the recipe to HTML + WAAPI (gimgs motion contract) or any engine; keep the same segment windows and easing." } ], "files": [ { "path": "demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx", "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx" } ], "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.", "render": { "engine": "remotion", "frames": 171, "repo": "https://github.com/Vincentwei1021/video-shotcraft", "files": [ "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx" ], "note": "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 with the template's width/height/fps/duration in Root.tsx, then `npx remotion render 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." }, "source": "// ===== demos/effects/aurora-bloom-bg-flip/AuroraBloomBgFlip.tsx =====\n// aurora-bloom-bg-flip — Aurora Bloom 极光升腾底色反转（motion-lab 定稿转原生 Remotion）\n// 浅灰底从底部升起紫橙柔焦 blob，随后整个底色 0.35s 内压暗到近黑、blob 压成余晖；\n// 文案同步 blur-out → 换句 blur-in（强调色→白收色），换句间留空档不 cross-fade。\n// 文案为中性占位；blob/文字的紫橙是这个效果本体的光色（DEEPP 常量），落地时可整组换成项目色。\n// 设计坐标 480×270（DesignStage 等比放大），参数表数值以此坐标系标定。\nimport React from 'react';\nimport { DesignStage, E, lerp, seg, useT } from '../../_fixtures/Motion';\n\nexport const AURORA_BLOOM_BG_FLIP_DURATION = 156; // 5200ms @30fps\n\n// RGB 三元组插值 → CSS 颜色（effect.js 文件级共享 mix，此处内联）\nconst mix = (a: number[], b: number[], k: number) =>\n `rgb(${Math.round(a[0] + (b[0] - a[0]) * k)},${Math.round(a[1] + (b[1] - a[1]) * k)},${Math.round(a[2] + (b[2] - a[2]) * k)})`;\nconst DEEPP = [124, 92, 255]; // 效果本体光色（深紫）\nconst WHITE = [245, 245, 250];\nconst LIGHT = [236, 236, 236]; // 亮场底色\nconst DARK = [10, 10, 18]; // 暗场底色\n\n// 占位文案（词数/字长贴近原片，逐词错相节奏依赖这个）\nconst WA = 'For many years'.split(' ');\nconst WB = 'everything changed'.split(' ');\n\nconst FONT = '600 26px -apple-system,system-ui,sans-serif';\n\nexport const AuroraBloomBgFlip: React.FC = () => {\n const t = useT();\n // blob 升起 + 放大\n const rise = seg(t, 0.04, 0.62, E.outCubic);\n const flip = seg(t, 0.63, 0.7, E.inOutQuad); // 快速压暗，故意只 ~0.35s\n\n return (\n \n {/* 柔焦 blob 组：整体 translateY 升起 + scale 放大，flip 后压成余晖 */}\n \n {/* 紫色主 blob */}\n \n {/* 橙色核心：横向慢漂 */}\n \n {/* 白色融边：暗场里收掉 */}\n \n \n {/* 文案行：flex 居中，两句各自绝对定位（同点居中，互不占位） */}\n \n {/* 文案 A：blob 上升期逐词 blur-out */}\n
\n {WA.map((w, i) => {\n const out = seg(t, 0.46 + i * 0.04, 0.56 + i * 0.04, E.inQuad);\n return (\n \n {w}\n \n );\n })}\n
\n {/* 空档后文案 B：逐词 blur-in + 紫→白收色 */}\n
\n {WB.map((w, i) => {\n const d0 = 0.76 + i * 0.06;\n const a = seg(t, d0, d0 + 0.11, E.outQuint);\n const c = seg(t, d0 + 0.1, d0 + 0.26, E.outQuad);\n return (\n \n {w}\n \n );\n })}\n
\n \n \n );\n};\n\n\n" }