{ "slug": "logo-shrink-wordmark-lockup", "title": "Logo shrink to wordmark lockup", "tagline": "A large neon-cutout ring collapses fast into a small solid white \"O\" with a settling overshoot, the icon shifts left to make room, letters slide in to complete the lockup, and a tagline closes it out.", "description": "A large neon-cutout ring collapses fast into a small solid white \"O\" with a settling overshoot, the icon shifts left to make room, letters slide in to complet", "category": "outro", "tags": [ "shotcraft", "remotion", "outro" ], "tier": "free", "license": "Apache-2.0", "spec": { "width": 1920, "height": 1080, "fps": 30, "duration": 4.9, "aspect": "16:9" }, "kind": "remotion", "params_schema": { "type": "object", "properties": {} }, "default_params": {}, "preview": { "poster": "https://gimgs.net/motion/media/logo-shrink-wordmark-lockup/poster-6ac3a87083cd.jpg", "video": "https://gimgs.net/motion/media/logo-shrink-wordmark-lockup/video-4d2dc7472248.mp4" }, "variants": [ { "key": "logo-shrink-wordmark-lockup", "label": "logo-shrink-wordmark-lockup · Logo shrink to wordmark lockup", "description": "A large neon-cutout ring collapses fast into a small solid white \"O\" with a settling overshoot, the icon shifts left to make room, letters slide in to complete the lockup, and a tagline closes it out.", "use": "", "video": "https://gimgs.net/motion/media/logo-shrink-wordmark-lockup/video-4d2dc7472248.mp4", "poster": "https://gimgs.net/motion/media/logo-shrink-wordmark-lockup/poster-6ac3a87083cd.jpg" } ], "credits": { "author": "video-shotcraft (Vincent Wei)", "url": "https://github.com/Vincentwei1021/video-shotcraft" }, "page_url": "https://gimgs.net/motion/logo-shrink-wordmark-lockup.html", "json_url": "https://gimgs.net/motion/logo-shrink-wordmark-lockup.json", "template_url": "https://gimgs.net/motion/logo-shrink-wordmark-lockup/template.html", "play_url": null, "markdown_url": "https://gimgs.net/motion/logo-shrink-wordmark-lockup.md", "updated_at": "2026-09-24T07:40:06.388Z", "prompt": "## When to use\n\nThe film's closing brand seal: collapsing from full-screen graphic energy down to the standard \"icon + wordmark + tagline\" lockup.\n\n## Intention\n\nThe closing \"stamp of approval\": a full-screen neon ring collapses with all its energy into a single small icon, healing its gap and turning pure white (from performance state to standard state), then settles step by step into the brand lockup spec — the icon makes room, the wordmark enters, the tagline closes it out. What the audience sees is the brand \"standing still\" out of the motion.\n\n## Duration & energy\n\n- Duration: About 4.4s (132f@30fps; collapse 0.1–1.2s · making room 1.5–2.1s · letters 2–2.7s · tagline 3.2–3.7s)\n- Energy: Medium (the collapse has impact, the overall feel is a settled, steady landing)\n\n## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)\n\n## 意图\n片尾的\"盖章\"动作：满屏的霓虹大环携能量坍缩成一枚小图标，愈合缺口、转为纯白（从演出态到标准态），然后按品牌 lockup 的规范一步步落位——图标让位、字标进场、标语押尾。观众看到的是品牌从动态里\"站定\"。\n\n## 动效核心\n- 收束主曲线：scale 5.4→1（t=0.02–0.28，inOutCubic），t=0.26–0.37 叠 `sin(π)*0.06` 的过冲刹车——到位瞬间胀 6% 再回落，\"急停带惯性\"\n- 缺口愈合与变色和收束同轨（t=0.10–0.28）：霓虹辉光层淡出、描边从 #dfe9ff 过半切 #fff、实心白 O 淡入——三层交叉在缩小过程中完成，落位时已是干净白标\n- t=0.34–0.47 图标整体 translateX(−68px) 左移让位（inOutCubic），为字标腾出中轴右侧\n- 五字母按 `0.46 + i*0.035` stagger 滑入：opacity 0→1 + translateX 8px→0，各 0.10 时长 outCubic\n- 标语（强调色 `ACCENT`，13px 宽字距）t=0.72–0.84 整行淡入，不逐字——层级低于字标一档\n\n## 参数表\n| 参数 | 典型值 | 调节手感 |\n|------|--------|----------|\n| 收束幅度 | scale 5.4→1 | 起始倍率决定\"从多满收到多小\"；<3 冲击力不足，>7 初始态糊出画 |\n| 刹车过冲 | +6%，sin 包络 0.26–0.37 | 砍掉读作硬冻结；>10% 变果冻 |\n| 愈合窗口 | 0.10–0.28（与收束同步） | 愈合必须在落位前完成——落位后还在变色读作\"没准备好\" |\n| 左移让位 | −68px，0.34–0.47 | 与字母首入（0.46）几乎无缝衔接，拉开间隔会有\"空等\"感 |\n| 字母 stagger | 0.035/字，各 0.10 时长 | 5 字母合计约 0.28；字更多时按 `(0.7-0.46)/n` 反算间隔保证 0.7 前进完 |\n| 标语入场 | 0.72–0.84 整行淡入 | 有意不逐字：标语是注脚不是主角；`ACCENT` 常量换项目色 |\n\n## 已知坑\n- `WORDMARK`（5 字母）与标语 `BUILD. SHIP. REPEAT.`（20 字符）都是占位；换品牌词时字母 stagger 节奏依赖字数，标语保持近似字符数否则宽字距排版会溢出或过疏\n- 图标是 SVG 双弧切口环（抽象几何 mark），替换为真实品牌 logo 时保留\"演出态→标准态\"两层结构：一层带效果（辉光/彩色），一层纯净态，用同一条 heal 曲线交叉\n- 左移量 −68px 与字标宽度耦合（row 定位在 `50%-40px`）——字数变化时两处一起调，让 lockup 整体在画面居中\n- 收尾后无循环回位设计，作 outro 最后一镜使用；需要循环时在 t=1 后接 1s 静帧\n\n## 参考实现\ndemos/outro/logo-shrink-wordmark-lockup/\n（LogoShrinkWordmarkLockup.tsx）\n\n## Reference implementation (Remotion)\n\n- demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.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/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.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/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.tsx", "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.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": 147, "repo": "https://github.com/Vincentwei1021/video-shotcraft", "files": [ "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.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/outro/logo-shrink-wordmark-lockup/LogoShrinkWordmarkLockup.tsx =====\n// logo-shrink-wordmark-lockup — Shrink & Lockup 图标收束落位（motion-lab 定稿转原生 Remotion）\n// 霓虹切口大环 easeInOut 快速缩成中央实心小白 O（抽象几何 mark，末尾轻微过冲刹车），\n// 随后图标左移让位，五个字母从左到右逐个 opacity+8px 滑入完成 lockup，\n// 强调色标语延迟整行淡入收尾。设计坐标 480×270（DesignStage 等比放大）。\nimport React from 'react';\nimport { DesignStage, E, lerp, seg, useT } from '../../_fixtures/Motion';\n\nexport const LOGO_SHRINK_WORDMARK_LOCKUP_DURATION = 132; // 4400ms @30fps\n\nconst ACCENT = '#e0342c';\nconst WORDMARK = 'BRAND';\nconst ICON = 30; // 图标基准尺寸(px)\nconst SHIFT = -68; // 图标 lockup 左位偏移\n\n// 圆弧 path（角度制，顺时针 sweep）\nconst arcPath = (cx: number, cy: number, r: number, a0: number, a1: number) => {\n const p = (a: number) => [cx + r * Math.cos((a * Math.PI) / 180), cy + r * Math.sin((a * Math.PI) / 180)];\n const [x0, y0] = p(a0);\n const [x1, y1] = p(a1);\n const large = Math.abs(a1 - a0) > 180 ? 1 : 0;\n return `M${x0.toFixed(2)},${y0.toFixed(2)} A${r},${r} 0 ${large} 1 ${x1.toFixed(2)},${y1.toFixed(2)}`;\n};\n\n// 双弧组：a0-a1 与其对角（+180°）两段圆弧 —— 带缺口的切口环\nconst Arcs: React.FC<{ a0: number; a1: number; col: string; w: number; blur: number; opacity: number; stroke?: string }> = ({\n a0,\n a1,\n col,\n w,\n blur,\n opacity,\n stroke,\n}) => (\n \n {[\n [a0, a1],\n [a0 + 180, a1 + 180],\n ].map(([b0, b1], i) => (\n \n ))}\n \n);\n\nexport const LogoShrinkWordmarkLockup: React.FC = () => {\n const t = useT();\n // 收束：scale 5.4→1（easeInOut），末尾轻微 1.05 过冲刹车\n const k = seg(t, 0.02, 0.28, E.inOutCubic);\n const brake = Math.sin(seg(t, 0.26, 0.37) * Math.PI) * 0.06;\n const s = lerp(k, 5.4, 1) * (1 + brake);\n // 左移让位：落位后 t 0.34-0.47\n const shift = seg(t, 0.34, 0.47, E.inOutCubic) * SHIFT;\n // 霓虹缺口态 → 实心白 O 交叉淡化（随收束进行）\n const heal = seg(t, 0.10, 0.28, E.inOutQuad);\n // 底色标定：原样片 mp4（yuv420p，无色彩元数据）把 #05060a 解码回 rgb(3,5,9)，\n // 深底上 2/255 的恒差会拖垮平坦区 SSIM，这里钉到解码值；其余数值与 effect.js 一致\n return (\n \n
\n {/* 图标：SVG 双弧切口环 —— 抽象几何 mark，非任何具体品牌 logo（收束时缺口愈合、霓虹转纯白） */}\n \n \n {/* 霓虹晕（带缺口） */}\n \n {/* 霓虹芯：heal 过半后转纯白 */}\n 0.5 ? '#fff' : '#dfe9ff'}\n />\n {/* 愈合后的实心白 O */}\n \n \n
\n {/* 字母行（图标右侧）：从左到右 stagger，opacity 0→1 + translateX 8px→0 */}\n \n {[...WORDMARK].map((ch, i) => {\n const lk = seg(t, 0.46 + i * 0.035, 0.46 + i * 0.035 + 0.10, E.outCubic);\n return (\n \n {ch}\n \n );\n })}\n \n {/* 强调色标语（占位文案）：延迟整行淡入 */}\n \n BUILD. SHIP. REPEAT.\n \n \n \n );\n};\n\n\n" }