{ "slug": "white-flash-logo-simplify-cut", "title": "White flash: logo simplifies", "tagline": "A colorful liquid-gradient wordmark holds with flowing light, then the frame flashes white and overexposes; a flat wordmark fades in on white and settles — one flash completes the downgrade to simplicity.", "description": "A colorful liquid-gradient wordmark holds with flowing light, then the frame flashes white and overexposes; a flat wordmark fades in on white and settles — on", "category": "transition", "tags": [ "shotcraft", "remotion", "transition" ], "tier": "free", "license": "Apache-2.0", "spec": { "width": 1920, "height": 1080, "fps": 30, "duration": 4.1, "aspect": "16:9" }, "kind": "remotion", "params_schema": { "type": "object", "properties": {} }, "default_params": {}, "preview": { "poster": "https://gimgs.net/motion/media/white-flash-logo-simplify-cut/poster-7c944f7c68fc.jpg", "video": "https://gimgs.net/motion/media/white-flash-logo-simplify-cut/video-6fc87be24ab7.mp4" }, "variants": [ { "key": "white-flash-logo-simplify-cut", "label": "white-flash-logo-simplify-cut", "description": "A colorful liquid-gradient wordmark holds with flowing light, then the frame flashes white and overexposes; a flat wordmark fades in on white and settles — one flash completes the downgrade to simplicity", "use": "", "video": "https://gimgs.net/motion/media/white-flash-logo-simplify-cut/video-6fc87be24ab7.mp4", "poster": "https://gimgs.net/motion/media/white-flash-logo-simplify-cut/poster-7c944f7c68fc.jpg" } ], "credits": { "author": "video-shotcraft (Vincent Wei)", "url": "https://github.com/Vincentwei1021/video-shotcraft" }, "page_url": "https://gimgs.net/motion/white-flash-logo-simplify-cut.html", "json_url": "https://gimgs.net/motion/white-flash-logo-simplify-cut.json", "template_url": "https://gimgs.net/motion/white-flash-logo-simplify-cut/template.html", "play_url": null, "markdown_url": "https://gimgs.net/motion/white-flash-logo-simplify-cut.md", "updated_at": "2026-09-24T07:40:35.821Z", "prompt": "## When to use\n\nA brand passage's closing beat (ornate performance → clean formal identity); a transition beat where the mood shifts from showy flair to a formal statement\n\n## Intention\n\nFirst give it full ornateness (a six-color liquid gradient flowing across the letterforms, soft light sweeping across), then a single white flash \"purifies\" it into a flat, three-color wordmark — the viewer reads \"the performance is over, this is its formal identity.\" The downgrade is rhetorical: cutting from a sensory texture to a rational identity.\n\n## Duration & energy\n\n- Duration: ~3.6s (108f@30fps; flowing light hold 0–1.2s · white flash 1.2–1.5s · flat settle 1.7–2.7s)\n- Energy: Medium-high (one pulse-like accent, quiet on both sides)\n\n## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)\n\n## 意图\n先给足华丽（六色液态渐变在字面上流动、柔光扫掠），再用一次白闪把它\"净化\"成扁平三色字标——观众读到的是\"演出结束，这就是它的正式形象\"。降维是修辞：从感性质感切到理性识别。\n\n## 动效核心\n- 液态层：六色渐变 `background-size:320%`，`backgroundPosition = t*100%` 全程缓慢流动；一块 220×120 径向柔光（blur 6px + screen 混合）随 t 横移 ±30px 做高光扫掠\n- 冲白 t=0.34–0.42（inQuad 加速冲入）白层盖满；同窗口给液态层一个 `sin(π)` 脉冲：blur 0→5px + brightness 1→2.2——\"过曝烧穿\"的一帧\n- 白层冲入后**保持不退**，后半场全程白底\n- 扁平字标 t=0.48–0.74 淡入 + scale 0.96→1（outCubic），字色是三段线性渐变（`GRAD_A/B/C` 常量，可按项目替换）\n- 柔光层随冲白同步熄灭（`1-flashK`），不残留在白底上\n\n## 参数表\n| 参数 | 典型值 | 调节手感 |\n|------|--------|----------|\n| 冲白窗口 | 0.34–0.42（inQuad） | 换算 0.29s@3.6s——冲白必须\"快进慢不退\"；用 outQuad 会显得白光是飘进来的 |\n| 过曝脉冲 | blur 5px + brightness ×2.2，sin 包络 | 砍掉脉冲则冲白像纯剪辑；>8px blur 液态字彻底糊掉反而看不出\"是它在烧\" |\n| 扁平入场 | 0.48–0.74，scale 0.96→1 | 与冲白间隔 0.06 的白屏静默是呼吸位；缩太短观众来不及\"清屏\" |\n| 液态流速 | backgroundPosition t*100% | 拉长 dur 时流速自动变慢，静置段够 1s 以上流动感才可读 |\n| 字标字号 | 液态 62px / 扁平 58px | 扁平版略小一号是\"落定收束\"暗示；同号会读作换皮不换人 |\n| 渐变常量 | `GRAD_A/B/C`（块顶定义） | 换成项目品牌三色即完成收编；液态层六色一般保留（它是\"演出\"不是品牌） |\n\n## 已知坑\n- 白层是\"冲入后保持\"，不是闪一下回黑——后半场底色即白色，若下一镜是暗场需另接转场，或复用本卡结尾白底直切\n- `WORDMARK` 常量是占位字标（5 字母），换长词需同步缩字号与 letter-spacing，两层（液态/扁平）都要改\n- 冲白配 SFX 是必选项（impact/whoosh-bright 类），无声的白闪读作素材丢帧\n- mix-blend-mode:screen 的柔光层在白底上不可见属预期，别在冲白后调它\n\n## 参考实现\ndemos/transition/white-flash-logo-simplify-cut/\n（WhiteFlashLogoSimplifyCut.tsx）\n\n## Reference implementation (Remotion)\n\n- demos/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.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/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.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/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.tsx", "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.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": 123, "repo": "https://github.com/Vincentwei1021/video-shotcraft", "files": [ "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.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/transition/white-flash-logo-simplify-cut/WhiteFlashLogoSimplifyCut.tsx =====\n// white-flash-logo-simplify-cut — White Flash Simplify 冲白降维切换\n// （motion-lab 定稿转原生 Remotion）\n// 彩色液态质感词标（占位字标）静置后画面 0.2s 冲白（冲白瞬间叠一帧轻微\n// blur 做过曝感），紧接扁平渐变版字标从白底淡入 + scale 0.96→1 定格。\n// 一次闪白完成\"液态质感→扁平字标\"的降维切换。\n// 设计坐标 480×270（DesignStage 等比放大），参数表数值以此坐标系标定。\nimport React from 'react';\nimport { DesignStage, E, lerp, seg, useT } from '../../_fixtures/Motion';\n\nexport const WHITE_FLASH_LOGO_SIMPLIFY_CUT_DURATION = 108; // 3600ms @30fps\n\n// 该效果依赖的文件级共享量（扁平字标渐变三色 + 占位词标）\nconst GRAD_A = '#7b3df0';\nconst GRAD_B = '#5a6cf5';\nconst GRAD_C = '#22c4e8';\nconst WORDMARK = 'BRAND';\n\nexport const WhiteFlashLogoSimplifyCut: React.FC = () => {\n const t = useT();\n // 液态层：静置期缓慢流动的渐变 + 高光微移\n const flow = t * 100;\n // 冲白瞬间给彩色层一帧过曝 blur\n const flashK = seg(t, 0.34, 0.42, E.inQuad);\n const blurPulse = Math.sin(seg(t, 0.34, 0.46) * Math.PI);\n // 扁平 logo：opacity 0→1 + scale 0.96→1，cubic ease-out\n const lk = seg(t, 0.48, 0.74, E.outCubic);\n return (\n \n
\n {/* 彩色液态词层 */}\n \n {WORDMARK}\n
\n {/* 液态高光扫层（贴在字上方的柔光条） */}\n \n {/* 白色全屏层：easeIn 冲入后保持 */}\n
\n {/* 扁平渐变字标层（渐变色见顶部 GRAD_*） */}\n \n \n {WORDMARK}\n
\n \n \n \n );\n};\n\n\n" }