{ "slug": "graze-face-tour", "title": "Graze face tour", "tagline": "A steep-angle close-up skims low over the UI surface, text initially hovers above the interface with a matching soft shadow, and as the camera moves each piece accelerates down to settle into place.", "description": "A steep-angle close-up skims low over the UI surface, text initially hovers above the interface with a matching soft shadow, and as the camera moves each piec", "category": "camera", "tags": [ "shotcraft", "remotion", "camera", "ui-entrance" ], "tier": "free", "license": "Apache-2.0", "spec": { "width": 1920, "height": 1080, "fps": 30, "duration": 5, "aspect": "16:9" }, "kind": "remotion", "params_schema": { "type": "object", "properties": {} }, "default_params": {}, "preview": { "poster": "https://gimgs.net/motion/media/graze-face-tour/poster-5d4921d9ba33.jpg", "video": "https://gimgs.net/motion/media/graze-face-tour/video-c1c8b50d0af0.mp4" }, "variants": [ { "key": "graze-face-tour", "label": "graze-face-tour · Graze face tour", "description": "A steep-angle close-up skims low over the UI surface, text initially hovers above the interface with a matching soft shadow, and as the camera moves each piece accelerates down to settle into place.", "use": "", "video": "https://gimgs.net/motion/media/graze-face-tour/video-c1c8b50d0af0.mp4", "poster": "https://gimgs.net/motion/media/graze-face-tour/poster-5d4921d9ba33.jpg" } ], "credits": { "author": "video-shotcraft (Vincent Wei)", "url": "https://github.com/Vincentwei1021/video-shotcraft" }, "page_url": "https://gimgs.net/motion/graze-face-tour.html", "json_url": "https://gimgs.net/motion/graze-face-tour.json", "template_url": "https://gimgs.net/motion/graze-face-tour/template.html", "play_url": null, "markdown_url": "https://gimgs.net/motion/graze-face-tour.md", "updated_at": "2026-09-24T07:40:01.238Z", "prompt": "## When to use\n\nA tour of feature areas (treating the UI as terrain to skim over); pairs with a dark scene and neon rim light for a \"product's inner world\" segment; interface content entering region by region.\n\n## Intention\n\nShoot the UI as terrain: a steep-angle close-up turns the sidebar tree, navigation, and list rows into passing landscape, with shallow depth of field reinforcing the \"skimming the surface\" feel. The dramatic beat is **text landing from the air**: text/components don't fade in place — they hover above the interface (raised along the 3D z-axis), casting a matching soft shadow onto the interface while airborne, then accelerate down one after another as the camera advances, the shadow converging and vanishing as height decreases — the audience watches the interface \"complete itself\" as the camera passes. The shadow is the perceptible crux: without it, hovering just reads as an ordinary positional entrance; with it, the spatial relationship is instantly established.\n\n## Duration & energy\n\n- Duration: Single segment 4–5s; can chain multiple segments to extend\n- Energy: Medium-high (sustained camera advance plus continuous element landings, high information density)\n\n## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)\n\n## 意图\n把 UI 拍成地形：大倾角特写让侧栏树、导航、列表行变成掠过的地貌，\n浅景深强化\"贴面\"。戏眼是**文字空中贴落**：文字/组件不是原地淡入，\n而是悬浮在界面上空（3D z 轴抬高），在空中时往界面投同形软影，\n随镜头行进先后加速贴落、影子随高度收敛消失——观众看见界面在\n镜头经过时\"完成自己\"。影子是可感命门：没有影子，悬浮读作\n普通位移入场；有影子，空间关系瞬间成立。\n\n## 动效核心\n- 机位：CSS perspective + rotateX/rotateY 大倾角（面几乎侧掠），\n 沿界面一条路径持续推进；浅景深＝远处 blur 渐强\n- 悬浮元素：初始悬浮高度 H≈120–180px（沿面法线方向抬起），\n easeFall 加速下落+软着陆（落地不回弹或极微回弹）\n- 同形软影：元素原位渲染模糊压暗投影，blur/offset/opacity 全部\n 随当前悬浮高度变化（高＝影大而糊而淡，落地＝影与本体重合消失）\n- 错峰贴落：各元素落地时刻按镜头行进方向排布（先经过的先落），\n 界面在镜头前\"依次完成\"\n- 长镜可拆段接力：段间用相邻段交叉淡化（判例：透明度窗口不重叠\n 会产生黑闪帧）\n\n## 参数表\n| 参数 | 典型值 | 调节手感 |\n|------|--------|----------|\n| 悬浮高度 | 120–180px | <80px 影子和位移都读不出；>250px 落地砸得太重 |\n| 影子参数 | blur/offset/opacity 随高度线性收敛 | 影子恒定不随高度变＝贴纸感；落地影必须归零 |\n| 贴落错峰 | 按镜头行进方向 0.2→0.85 归一化排布 | 同帧齐落读作开关；乱序落读作 bug；**错峰=错开起点但下落过程重叠并行**，串行等待（一个落完另一个才开始）被裁（runway 判例） |\n| 下落曲线 | easeFall 加速+软着陆 | ease-out 下落读作气球飘落，重力感靠加速 |\n| 段间接力 | 相邻段交叉淡化 ≥8f | 透明度窗口不搭接会黑闪（返工判例 f100 纯黑帧） |\n| 景深 | 远处 blur 渐强 | 全清晰读作平面滚动，浅景深才有\"贴面\"体感 |\n\n## 已知坑\n- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，\n 首次实战须以真实素材回验\n- 悬空元素别被环境压黑带吞掉（邻候选 runway 判例）：空中元素\n 需追光/提亮 ~1.3x，否则悬浮状态不可感等于没做\n- 与 space-camera-moves/tension-camera-moves 分工：那两张是相机\n 语言本身；本卡=贴面机位 **+ 元素贴落** 的组合签名，缺一半就\n 改用相机卡\n- **贴落节奏语义判例**（与 neon-frame-orbit-drop 互为反例）：\n 本卡巡礼镜=错峰并行；整体登场镜必须全体同帧齐落（那张卡的\n 错峰版被裁）。选错语法两边都会被裁\n- 原片（clickup-30）是一条连续上行长镜；复刻用三段接力，段落\n 切换藏在交叉淡化里——实战若做真单长镜，路径规划成本高得多\n\n## 参考实现\ndemos/camera/graze-face-tour/\n（GrazeFaceTour.tsx）\n原片出处：clickup-30.mp4\n\n## Reference implementation (Remotion)\n\n- demos/camera/graze-face-tour/GrazeFaceTour.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/camera/graze-face-tour/GrazeFaceTour.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/camera/graze-face-tour/GrazeFaceTour.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/camera/graze-face-tour/GrazeFaceTour.tsx", "url": "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/camera/graze-face-tour/GrazeFaceTour.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": 150, "repo": "https://github.com/Vincentwei1021/video-shotcraft", "files": [ "https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/camera/graze-face-tour/GrazeFaceTour.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/camera/graze-face-tour/GrazeFaceTour.tsx =====\n// graze-face-tour v2 —— 源片 clickup-30.mp4 约 28.5–33s：\n// 相机大倾角贴着 UI 表面游走特写，三段接力：侧栏树 → 顶部 tab 条 → 列表行。\n// v2（用户意见）：页面文字初始悬浮在界面上空（3D 抬高），空中时在 UI 面上\n// 投模糊同形软影；随镜头推进先后落贴回界面，影子随高度收敛消失。\nimport React from 'react';\nimport { AbsoluteFill, interpolate, useCurrentFrame, Easing } from 'remotion';\n\nconst FONT = 'Helvetica, Arial, sans-serif';\nconst INK = '#3a3a40';\nconst MID = '#8b8b92';\nconst FAINT = '#c8c8ce';\n\nconst easeIO = Easing.bezier(0.45, 0, 0.25, 1);\nconst easeFall = Easing.bezier(0.5, 0.05, 0.6, 1); // 加速下落、末端软着陆\n\n/* ---------- 悬浮 + 同形软影 ----------\n * h=悬浮高度(px)。文字整体向上（屏幕上-左）抬起，\n * 原位置留一份模糊压暗的同形投影；h→0 时两者重合、影子消失。 */\nconst FloatWrap: React.FC<{ h: number; children: React.ReactNode }> = ({ h, children }) => (\n
\n {h > 1.5 && (\n
{children}
\n )}\n
{children}
\n
\n);\n\n/* 每行的悬浮高度：land = 该行贴回完成的段内时刻(0..1)，之前从 H 高度加速落下 */\nconst liftOf = (t: number, land: number, H = 120) => {\n const FALL = 0.34;\n const p = Math.min(1, Math.max(0, (t - (land - FALL)) / FALL));\n return (1 - easeFall(p)) * H;\n};\n\n/* ---------- 灰阶自绘 UI 素材 ---------- */\n\nconst Chip: React.FC<{ letter: string; tone: string }> = ({ letter, tone }) => (\n
{letter}
\n);\n\nconst Tri: React.FC<{ open?: boolean }> = ({ open }) => (\n
\n);\n\nconst DocIcon: React.FC = () => (\n
\n
\n
\n
\n);\n\nconst FolderIcon: React.FC = () => (\n
\n
\n
\n);\n\nconst TreeRow: React.FC<{\n depth: number; label: string; icon?: 'tri' | 'triOpen' | 'doc' | 'folder' | 'dash' | 'chip';\n chip?: string; count?: string; size?: number; dim?: boolean;\n}> = ({ depth, label, icon, chip, count, size = 58, dim }) => (\n
\n {icon === 'tri' && }\n {icon === 'triOpen' && }\n {icon === 'doc' && }\n {icon === 'folder' && }\n {icon === 'dash' &&
}\n {chip && }\n
{label}
\n {count &&
{count}
}\n
\n);\n\nconst RecentCard: React.FC<{ title: string; sub: string; w?: number }> = ({ title, sub, w = 880 }) => (\n
\n
\n
\n
{title}
\n
\n
{sub}
\n
\n);\n\n/* 场景 A：侧栏 SPACES 树 + 右侧 Recent 卡（对标截图 1/2/4）\n * v2：树行/卡片按镜头行进方向（自上而下）先后从空中落贴回界面 */\nconst SceneTree: React.FC<{ t?: number }> = ({ t = 1 }) => {\n // 树行落地时刻：镜头由树顶滑向树底，行 index 越大越晚落\n const L = (i: number, n = 14) => liftOf(t, 0.22 + (i / n) * 0.62, 130);\n const rows: [number, string, 'tri' | 'triOpen' | 'doc' | 'folder' | 'dash' | undefined, string | undefined, string | undefined][] = [\n [0, 'People & Teams', 'doc', undefined, undefined],\n [0, 'Goals', 'doc', undefined, undefined],\n [0, 'Docs', 'doc', undefined, undefined],\n [0, 'More', 'dash', undefined, undefined],\n [0, 'EPD', 'tri', 'E', undefined],\n [0, 'Product roadmap', 'tri', 'P', undefined],\n [0, 'Design', 'triOpen', 'D', undefined],\n [1, 'Designer handbook', 'doc', undefined, undefined],\n [1, '3.0', 'folder', undefined, undefined],\n [1, 'Design system', 'folder', undefined, undefined],\n [2, 'Design system', 'doc', undefined, undefined],\n [2, 'Components', 'dash', undefined, '56'],\n [2, 'Patterns', 'dash', undefined, '8'],\n [2, 'Tokens', 'dash', undefined, '256'],\n ];\n return (\n
\n
\n {rows.slice(0, 4).map((r, i) => (\n \n \n \n ))}\n
\n \n
SPACES
\n \n
\n {rows.slice(4).map((r, i) => (\n \n \n \n ))}\n
\n
\n \n
\n
Recent
\n
Favorites
\n
\n \n
\n
\n \n \n \n \n \n \n
\n
\n \n
\n
Todo
\n
Comments
\n
Done
\n
\n \n
\n \n
\n
≡ List
\n
▦ Gallery
\n
\n \n
\n
\n );\n};\n\n/* 场景 B：顶部 tab 条 + 左上侧栏导航（对标截图 6/7）\n * v2：tab 条、logo、Home 行、侧栏项先后从空中贴落 */\nconst SceneTopNav: React.FC<{ t?: number }> = ({ t = 1 }) => (\n
\n
\n {['Product analytics', 'ClickUp 3.0', 'Widget brainstorm', 'Design system'].map((tb, i) => (\n \n
1 ? 0.75 : 1 }}>\n
\n {tb}\n
\n \n ))}\n
\n
\n
\n \n
\n
\n
ClickUp
\n
\n
\n \n
\n \n
\n
\n
Home
\n
3
\n
\n \n {['Inbox', 'Company', 'People & Teams', 'Goals', 'Docs'].map((tb, i) => (\n \n
\n
\n
{tb}
\n
\n \n ))}\n
\n
\n \n
\n
‹
›
\n
\n
Home
\n
\n \n
\n \n
Home
\n \n
\n \n
\n
\n
Search by app, filetype…
\n
\n \n
\n
\n
\n);\n\n/* 场景 C：列表行（对标截图 4 右下 TODAY/TASK NAME 区）\n * v2：Todo 头/TODAY 徽章/任务行自上而下先后贴落 */\nconst SceneListRows: React.FC<{ t?: number }> = ({ t = 1 }) => (\n
\n \n
\n
Todo
\n
Comments
\n
Done
\n
Delegated
\n
\n \n
\n \n
\n
≡ List
\n
▦ Gallery
\n
\n
Filter
Group
Sort
\n
\n
\n \n
\n
\n \n
TODAY
\n \n
\n \n
TASK NAME
\n \n
\n {['New Bugs Per Week', 'Designer handbook', 'Mobile screens', 'Product roadmap'].map((tb, i) => (\n \n
\n
\n
{tb}
\n
\n
…
\n
\n \n ))}\n
\n);\n\n/* ---------- 3D 摄影 ---------- */\n\ntype Cam = {\n rx: number; ry: number; rz: number; scale: number;\n x: [number, number]; y: [number, number];\n};\n\nconst Plane: React.FC<{\n cam: Cam; t: number; edge?: 'left' | 'top'; children: React.ReactNode;\n}> = ({ cam, t, edge = 'left', children }) => {\n const x = interpolate(t, [0, 1], cam.x, { easing: easeIO });\n const y = interpolate(t, [0, 1], cam.y, { easing: easeIO });\n return (\n \n
\n
\n
\n {/* 屏幕边缘霓虹晕染 */}\n {edge === 'left' ? (\n <>\n
\n
\n \n ) : (\n <>\n
\n
\n \n )}\n {children}\n {/* 远端压暗：贴面透视里远处渐暗 */}\n
\n
\n
\n
\n \n );\n};\n\n/* 背景霓虹描边矩形（暗场道具） */\nconst NeonRects: React.FC<{ drift: number }> = ({ drift }) => (\n \n
\n
\n
\n \n);\n\n// 平移目标以内容坐标 (cx,cy) 给出：translate = (W/2-cx, H/2-cy)\nconst SEGS: { cam: Cam; edge: 'left' | 'top'; render: (t: number) => React.ReactNode }[] = [\n {\n // 侧栏树：从树顶（SPACES 附近）贴面滑到树底（Components/Patterns/Tokens）\n cam: { rx: 12, ry: 30, rz: -6, scale: 0.95, x: [1450 - 950, 1450 - 880], y: [1200 - 1050, 1200 - 1850] },\n edge: 'left', render: (t) => ,\n },\n {\n // 顶栏 tab 条 → 右区 Home 大标题\n cam: { rx: 20, ry: -20, rz: 6, scale: 0.95, x: [1500 - 800, 1500 - 2000], y: [1050 - 350, 1050 - 800] },\n edge: 'top', render: (t) => ,\n },\n {\n // 列表行：沿 TASK NAME 行右扫\n cam: { rx: 14, ry: 28, rz: -5, scale: 1.05, x: [1450 - 900, 1450 - 680], y: [1100 - 620, 1100 - 1240] },\n edge: 'left', render: (t) => ,\n },\n];\n\nconst SEG_LEN = 50; // 每段 50 帧，总 150\nconst FADE = 7;\n\nconst Stage: React.FC = () => {\n const frame = useCurrentFrame();\n return (\n \n {SEGS.map((s, i) => {\n const start = i * SEG_LEN;\n const local = frame - start;\n if (local < -FADE || local > SEG_LEN + FADE) return null;\n const t = Math.min(1, Math.max(0, local / SEG_LEN));\n // 相邻段交叉淡化：后段在边界前 [-FADE,0] 淡入、前段在 [SEG_LEN-FADE, SEG_LEN] 淡出，边界帧无纯黑\n const opacity = interpolate(local, [-FADE, 0, SEG_LEN - FADE, SEG_LEN], [i === 0 ? 1 : 0, 1, 1, i === SEGS.length - 1 ? 1 : 0]);\n return (\n \n \n {s.render(t)}\n \n );\n })}\n \n );\n};\n\nexport const GrazeFaceTour: React.FC = () => {\n const frame = useCurrentFrame();\n // 呼吸感的焦点带（浅景深）：焦点椭圆随段落略移\n const seg = Math.min(2, Math.floor(frame / SEG_LEN));\n const focusX = [44, 40, 46][seg];\n const focusY = [46, 40, 50][seg];\n return (\n \n \n {/* 屏幕空间浅景深：焦点带外整体模糊 */}\n \n \n \n {/* 暗角 + 冷调压暗 */}\n \n \n );\n};\n\n\n" }