{ "slug": "spotlight-sweep-moves", "title": "Dark-stage spotlight reveals", "tagline": "Three dark-stage spotlight reveals — A wake-sleep sweep (light in = bright, light out = dark), B edge-hugging glow pan (violet light seeps along UI edges + steady rightward sweep), C corner reveal (radial light expands steadily from a corner to light the whole screen); light itself narrates in the dark.", "description": "Three dark-stage spotlight reveals — A wake-sleep sweep (light in = bright, light out = dark), B edge-hugging glow pan (violet light seeps along UI edges + st", "category": "effects", "tags": [ "shotcraft", "remotion", "effects", "ui-entrance", "transition" ], "tier": "free", "license": "Apache-2.0", "spec": { "width": 1920, "height": 1080, "fps": 30, "duration": 4.54, "aspect": "16:9" }, "kind": "remotion", "params_schema": { "type": "object", "properties": {} }, "default_params": {}, "preview": { "poster": "https://gimgs.net/motion/media/spotlight-sweep-moves/poster-6ea19d85416a.jpg", "video": "https://gimgs.net/motion/media/spotlight-sweep-moves/video-ef3aca65c1d1.mp4" }, "variants": [ { "key": "glow-wake-sleep-panel", "label": "glow-wake-sleep-panel · Wake-sleep sweep", "description": "A radial reveal mask follows the light head moving steadily left to right; a triple-layer violet glow tracks along the top edge, grazes the logo outline, lights a vertical afterglow at the right edge, then the panel sinks back into darkness at the tail", "use": "Introducing a single UI panel in a dark-toned brand film — an entrance and exit that wake and sleep", "video": "https://gimgs.net/motion/media/spotlight-sweep-moves/video-ef3aca65c1d1.mp4", "poster": "https://gimgs.net/motion/media/spotlight-sweep-moves/poster-6ea19d85416a.jpg" }, { "key": "slide-spotlight-pan", "label": "slide-spotlight-pan · Edge-hugging glow pan", "description": "Light first traces the top-left vertical edge, turns the corner and travels along the top edge, violet glow bleeding into the UI's top inner edge; the spotlight head reveals at constant speed moving right while the panel slides left at constant speed — reading as a rightward camera pan", "use": "Touring a wide panel or multi-column board horizontally, lighting up feature areas segment by segment", "video": "https://gimgs.net/motion/media/spotlight-sweep-moves/video-0640b7d5423a.mp4", "poster": "https://gimgs.net/motion/media/spotlight-sweep-moves/poster-slide-spotlight-pan-64039fd9a48f.jpg" }, { "key": "corner-spotlight-reveal", "label": "corner-spotlight-reveal · Corner reveal", "description": "A radial spotlight in the top-left corner expands with strictly linear radius; what it reaches is revealed, what it hasn't stays black, until the whole screen is lit — light itself is the transition", "use": "A black-stage opener that lights up the interface's entrance; a light transition between passages", "video": "https://gimgs.net/motion/media/spotlight-sweep-moves/video-6cbeb257118d.mp4", "poster": "https://gimgs.net/motion/media/spotlight-sweep-moves/poster-corner-spotlight-reveal-c368c5592d0a.jpg" } ], "credits": { "author": "video-shotcraft (Vincent Wei)", "url": "https://github.com/Vincentwei1021/video-shotcraft" }, "page_url": "https://gimgs.net/motion/spotlight-sweep-moves.html", "json_url": "https://gimgs.net/motion/spotlight-sweep-moves.json", "template_url": "https://gimgs.net/motion/spotlight-sweep-moves/template.html", "play_url": null, "markdown_url": "https://gimgs.net/motion/spotlight-sweep-moves.md", "updated_at": "2026-09-24T07:40:25.585Z", "prompt": "## When to use\n\nIntroducing UI panels/feature areas one by one in dark-toned brand films; a black-stage opener that \"lights up\" the interface; a light transition between passages\n\n## Intention\n\nIn the dark, viewers only see what the light lets them see — the spotlight is lighting, camera move, and edit all at once: wherever the light lands, that's the entrance; when the light leaves, that's the exit. All three share an identity element — an \"edge-hugging violet glow\" (light tracing the UI border/logo/top edge, the glow bright and soft, the light \"caressing\" the interface rather than an outline animation). The linchpin is **constant speed**: the spotlight's movement/expansion must be strictly linear — easing would give the light \"intent,\" only constant speed reads as a searchlight's mechanical sweep (case in point for style C: linear but with too large a final radius means it saturates in the first quarter, and the feel is no longer even).\n\n## Duration & energy\n\n- Duration: Single style: 3.5–4.5s; A/B can be chained into a tour passage\n- Energy: Medium-low (restrained, mysterious, the payoff is the moment of lighting up)\n\n## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)\n\n## 意图\n黑场里观众只能看见光给看的东西——聚光既是照明也是运镜和剪辑：\n光到哪里哪里登场，光走即谢幕。三式共用\"贴边紫色辉光光线\"这个\n身份元素（光线贴着 UI 边框/logo/顶边走，辉光要亮要糊，是光在\n\"抚摸\"界面而不是描边动画）。命门是**匀速**：聚光的移动/扩张\n严格 linear——缓动会让光有\"意图\"，匀速才读作探照灯的机械扫掠\n（C 式判例：linear 但半径终值过大＝前 1/4 就饱和，观感照样不匀速）。\n\n## 动效核心\n**A 醒睡扫过**（glow-wake-sleep-panel）：radial 显影罩跟随光头从左\n向右匀速移动，范围外全黑；贴顶边紫色光线三层辉光（blur26 宽糊+\nblur9 中层+亮芯+粉色偏移层）随扫光同步走，经过 logo 时 boxShadow\n描光、到右缘点亮竖直残光；尾段光走面板沉回黑暗——有醒有睡。\n**B 贴边泛光横摇**（slide-spotlight-pan）：光线锚定面板边缘（先绕\n左上角竖缘、转角后沿顶边横走），紫光晕染渗入 UI 顶部内侧（光从\n边缘渗进界面）；聚光头匀速右移显影、面板同时匀速左滑＝相机右摇感。\n**C 角落匀速显影**（corner-spotlight-reveal）：左上角径向聚光半径\n严格 linear 扩张，照到显影照不到沉黑，最终全亮（光即转场）。\n\n## 参数表\n| 参数 | 典型值 | 调节手感 |\n|------|--------|----------|\n| 聚光移动/扩张 | 全程 linear、零缓动 | **匀速是命门**——全程零缓动；加 ease 读作光有主观意图 |\n| C 式半径终值 | 恰好在片尾覆盖全屏（1300@1080p/100f） | 终值过大＝提前饱和假匀速：亮度采样须全程平滑爬升（实测 8/46/101/…/238） |\n| 贴边光线辉光 | 3–4 层（blur26+blur9+亮芯+粉偏移） | 层少读作细线描边；辉光要够亮够糊才是\"光\" |\n| 光线锚定 | 严格贴 UI 边缘/顶边/logo | 光线脱离边缘漂浮＝失去\"抚摸界面\"语义（A 式返工判例：定位丢失紫光跑到底边） |\n| 显影罩 | radial 渐变硬边略糊（feather ~15%） | 边太硬像圆形遮罩；太糊没有\"照到/照不到\"的界线 |\n\n## 已知坑\n- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，\n 首次实战须以真实素材回验\n- 与 light-play-moves 分工：那张是元素/文字上的\n 光泽戏（sheen/辉光呼吸）；本卡光是**运镜和剪辑**（显影/谢幕/转场），\n 光决定观众看什么\n- 三式重做判例：聚光扫过必须带贴边光线同行（v1 只有显影罩被裁\n \"改改再看\"——裸聚光没有身份，贴边紫光才是这个手法的签名）\n- 原片（clickup-30）光线转角有一瞬彩虹色散，demo 未做；实战可\n 在转角帧加 1–2f 色散层提质感\n\n## 参考实现\ndemos/effects/spotlight-sweep-moves/\n（CornerSpotlightReveal.tsx / GlowWakeSleepPanel.tsx / SlideSpotlightPan.tsx）\n原片出处：clickup-30.mp4\n\n## Reference implementation (Remotion)\n\n- demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx\n- demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx\n- demos/effects/spotlight-sweep-moves/SlideSpotlightPan.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/SlideSpotlightPan.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/spotlight-sweep-moves/CornerSpotlightReveal.tsx, demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx, demos/effects/spotlight-sweep-moves/SlideSpotlightPan.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/spotlight-sweep-moves/CornerSpotlightReveal.tsx", "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx" }, { "path": "demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx", "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx" }, { "path": "demos/effects/spotlight-sweep-moves/SlideSpotlightPan.tsx", "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/SlideSpotlightPan.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": 136, "repo": "https://github.com/Vincentwei1021/video-shotcraft", "files": [ "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/CornerSpotlightReveal.tsx", "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx", "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/spotlight-sweep-moves/SlideSpotlightPan.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/spotlight-sweep-moves/CornerSpotlightReveal.tsx =====\n// corner-spotlight-reveal —— 对标 clickup-30.mp4 41.5–44.6s：\n// 黑场上，左上角径向聚光从小到大扩张，把白色 Inbox 界面逐步\"点亮\"，\n// 照到的区域显影、照不到的沉黑，最终全屏亮起。光即转场。\nimport React from 'react';\nimport { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';\n\nconst FONT = '\"Avenir Next\", \"Helvetica Neue\", Helvetica, sans-serif';\n\n// 灰阶 Inbox 界面（自绘，替代真 UI）\nconst InboxPanel: React.FC = () => (\n \n
\n
Inbox
\n \n
\n
\n
All
\n
Tasks
\n
Docs
\n
People
\n
Chat
\n
\n {[0, 1, 2].map((row) => (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n ))}\n
\n);\n\nexport const CornerSpotlightReveal: React.FC = () => {\n const frame = useCurrentFrame();\n\n // 聚光半径扩张：全程匀速（用户裁决\"整个过程要匀速\"——严格 linear，无缓动）\n // r+feather=1.85r 是光前沿；1.85*1300≈2400 恰在片尾盖满全屏对角，\n // 保证扩张动作占满全片时长而不是前 1/3 就饱和\n const r = interpolate(frame, [0, 100], [160, 1300], {\n extrapolateLeft: 'clamp',\n extrapolateRight: 'clamp',\n });\n\n // 光心沿左上角匀速游移（linear）\n const cx = interpolate(frame, [0, 96], [140, 420], { extrapolateRight: 'clamp' });\n const cy = interpolate(frame, [0, 96], [90, 260], { extrapolateRight: 'clamp' });\n\n // 软边宽度：扩张时边缘更羽化\n const feather = r * 0.85;\n\n // UI 轻微透视漂移（原片相机贴着界面缓推）\n const drift = interpolate(frame, [0, 100], [0, 1]);\n const scale = 1.75 - 0.28 * drift;\n const tx = -40 + 70 * drift;\n const ty = -30 + 50 * drift;\n\n const mask = `radial-gradient(circle ${r + feather}px at ${cx}px ${cy}px, rgba(255,255,255,1) ${Math.max(\n 0,\n ((r - feather * 0.25) / (r + feather)) * 100,\n )}%, rgba(255,255,255,0) 100%)`;\n\n return (\n \n \n \n \n {/* 聚光自身的白热光晕（叠在界面上方，光心最亮） */}\n \n \n );\n};\n\n\n// ===== demos/effects/spotlight-sweep-moves/GlowWakeSleepPanel.tsx =====\n// glow-wake-sleep-panel v3 —— 扫光方向改为从左向右（用户裁决）：\n// 聚光灯从左向右\"扫过\"斜置面板；一条带辉光的紫色光线贴着 UI 顶边/边框/\n// logo 划过，光到即亮、光走即暗，尾段沉回黑暗（右缘残留蓝紫）。\nimport React from 'react';\nimport { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion';\n\nconst W = 1250;\nconst H = 860;\nconst R = 26;\n\nconst ink = '#3a3a3a';\nconst mid = '#9a9a98';\nconst line = '#e2e2e0';\n\nconst Row: React.FC<{ w: number; icon?: boolean }> = ({ w, icon = true }) => (\n
\n {icon &&
}\n
\n
\n);\n\nconst TaskCard: React.FC<{ seed: number }> = ({ seed }) => (\n
\n
\n
\n
\n
\n);\n\n// 灰阶斜置面板（ClickUp 布局形：侧栏 + Review/Shipped 两列）\nconst Panel: React.FC = () => (\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {[0, 1].map((col) => (\n
\n
\n
\n
\n
\n {[0, 1, 2].map((i) => )}\n
\n ))}\n
\n
\n
\n);\n\n// 贴边紫色光线（多层辉光：宽糊层+中层+亮芯），水平段，中心在 cx\nconst EdgeStreak: React.FC<{ cx: number; y: number; len: number; opacity: number; vertical?: boolean }> =\n ({ cx, y, len, opacity, vertical = false }) => {\n const long = { position: 'absolute' as const, left: 0, top: 0, opacity };\n const grad = (c: string) => vertical\n ? `linear-gradient(180deg, rgba(0,0,0,0) 0%, ${c} 45%, ${c} 55%, rgba(0,0,0,0) 100%)`\n : `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${c} 45%, ${c} 55%, rgba(0,0,0,0) 100%)`;\n if (vertical) {\n return (\n
\n
\n
\n
\n
\n );\n }\n return (\n
\n
\n
\n
\n {/* 粉色偏移层：截图里光带紫中带粉 */}\n
\n
\n );\n };\n\nexport const GlowWakeSleepPanel: React.FC = () => {\n const frame = useCurrentFrame();\n\n // 聚光沿面板顶边从左向右匀速扫过（面板本地座标）\n const sx = interpolate(frame, [4, 120], [-260, W + 260], {\n extrapolateLeft: 'clamp', extrapolateRight: 'clamp',\n });\n const sy = 150; // 聚光照在面板上部\n\n // 全局明暗包络：醒 → 展示 → 睡\n const env = interpolate(frame, [0, 16, 100, 130], [0, 1, 1, 0], {\n extrapolateLeft: 'clamp', extrapolateRight: 'clamp',\n });\n // 尾段右缘残光：最后只剩右缘一线蓝紫\n const rightNear = Math.max(0, Math.min(1, (sx - (W - 420)) / 420));\n const tailBlue = interpolate(frame, [100, 116, 132], [0, 0.8, 0.25], {\n extrapolateLeft: 'clamp', extrapolateRight: 'clamp',\n });\n\n // logo 描光：聚光经过 logo（本地 x≈60）时点亮\n const logoGlow = Math.exp(-((sx - 60) ** 2) / (2 * 230 ** 2)) * env;\n\n // 摄影机慢漂移：面板随扫光从左上往右下走（对应扫光方向）\n const drift = interpolate(frame, [0, 132], [-150, 150]);\n const driftY = interpolate(frame, [0, 132], [-36, 36]);\n\n return (\n \n
\n
\n {/* 聚光环境雾光：跟随光头，泛在面板后黑场 */}\n
\n {/* 后层重影面板（截图④⑤双层） */}\n
\n
\n \n {/* 重影面板同样受聚光范围控制 */}\n
\n
\n
\n {/* 面板本体：聚光范围内显影，范围外沉黑 */}\n
\n \n
\n {/* 尾段右缘蓝紫残光罩 */}\n
\n
\n {/* 贴顶边划过的紫色光线（本体） */}\n \n {/* 右缘竖直光线：聚光接近右侧时点亮，尾段转蓝紫 */}\n \n {/* logo 一圈描光（截图⑤：光经过 logo 时） */}\n
\n {/* 光头本体眩光：贴着顶边的亮团 */}\n
\n
\n
\n \n );\n};\n\n\n// ===== demos/effects/spotlight-sweep-moves/SlideSpotlightPan.tsx =====\n// slide-spotlight-pan v2 —— 按用户截图 clickup03 重做：\n// 紫色光线贴着 UI 面板边缘泛光（先绕左上角竖缘、再沿顶边横走），\n// 聚光头匀速右移，照到处显影、离开处沉暗；面板匀速左滑（相机右摇感）。\n// 用户裁决：\"紫色的光线是贴着ui界面泛光的，聚光的移动是匀速的\"。\nimport React from 'react';\nimport { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion';\n\nconst ink = '#3c3c3a';\nconst mid = '#98989a';\nconst line = '#e4e4e2';\n\nconst PW = 3000;\nconst PH = 1400;\nconst TOP = 150; // 面板顶边在屏幕座标的 y\nconst CR = 60; // 面板圆角\n\nconst SideRow: React.FC<{ w: number }> = ({ w }) => (\n
\n
\n
\n
\n);\n\nconst Task: React.FC<{ seed: number }> = ({ seed }) => (\n
\n
\n
\n
\n
\n);\n\nconst Col: React.FC<{ accent: string; seed: number; w: number }> = ({ accent, seed, w }) => (\n
\n
\n
\n
\n
\n
\n {[0, 1].map((i) => )}\n
\n);\n\n// 超宽面板内容（放大特写级别）：侧栏 + 顶栏 + 三列看板\nconst WidePanel: React.FC = () => (\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n \n \n
\n
\n
\n);\n\nexport const SlideSpotlightPan: React.FC = () => {\n const frame = useCurrentFrame();\n // 面板匀速左滑（相机右摇）——严格 linear\n const slide = interpolate(frame, [0, 132], [180, -1100]);\n // 聚光头在面板本地座标沿顶边匀速右移——严格 linear\n // 起点在左上角竖缘（负值=还在左缘竖直段），随后转过角沿顶边走\n const head = interpolate(frame, [0, 132], [-360, 2600]);\n const onTop = Math.max(0, head); // 顶边段进度\n const cornerT = Math.min(1, Math.max(0, (head + 360) / 360)); // 竖缘段 0→1\n const vertHeadY = TOP + 620 - cornerT * 620; // 左缘光头从下往上爬到角\n\n // 屏幕座标的光头位置\n const headScreenX = slide + onTop;\n // 光头在竖缘阶段贴着面板左缘\n const leftEdgeX = slide;\n\n // 竖缘光线强度：角前满、转角后衰减\n const vGlow = head < 0 ? 1 : Math.max(0, 1 - head / 900);\n // 顶边光线强度：转角后满\n const hGlow = Math.min(1, Math.max(0, (head + 120) / 240));\n\n const grad = (dir: string, c: string) =>\n `linear-gradient(${dir}, rgba(0,0,0,0) 0%, ${c} 42%, ${c} 58%, rgba(0,0,0,0) 100%)`;\n\n return (\n \n {/* 面板层：聚光范围内显影 */}\n
\n \n {/* 贴面泛光：光头下方的紫光晕染进 UI 顶部（贴着界面泛光的关键层） */}\n
\n {/* 左缘贴面泛光（竖缘阶段） */}\n
\n {/* 聚光范围外压暗：以光头为中心的显影罩（面板本地座标，跟光头走） */}\n
\n
\n\n {/* ===== 贴边紫色光线本体（屏幕层，贴着面板边缘） ===== */}\n {/* 顶边横向光线：三层辉光 + 亮芯，中心=光头 */}\n
\n
\n
\n
\n
\n
\n {/* 左上角竖缘光线（起始阶段，贴面板左缘） */}\n
\n
\n
\n
\n
\n\n {/* 顶上方黑檐：光带以上纯黑（截图里顶边之上是黑场） */}\n
\n \n );\n};\n\n\n" }