Motion Registry
screenshot.focus-highlight

截图聚焦与标注

Screenshot Focus and Highlight

仅本次打开有效
01
Live preview

真实渲染预览

查看引用 ↓
实机渲染 · Remotion
02
Purpose

这个动效用来做什么

截图先稳定出现，镜头推进并聚焦指定区域，同时绘制与该区域几何绑定的标注框。

A screenshot appears, the camera pushes into a chosen region, and a geometrically bound annotation box draws while the push is still in progress.

范围
镜头
复杂度
进阶
建议时长
3.2s
画幅
16:9 · 9:16
截图图形
聚焦强调解释
知识视频新闻解读教程
03
Inputs

可替换参数

screenshot必填 · asset

Original test screenshot shown in the shot.

默认值
assets/sample-dashboard.svg
focus_region必填 · rect

Normalized region inside the screenshot to receive camera focus and annotation.

默认值
{"x":0.54,"y":0.47,"width":0.4,"height":0.38}
annotation_style可选 · enum

Visual treatment for the region-bound annotation.

默认值
outline
remotion_settings可选 · object

仅 Remotion 的可换素材增强版。提供此对象时替代旧视觉参数；省略则保留旧行为。高级版只验收横屏/竖屏。截图/产品固定6秒；字幕用输出时间戳，片长为末词结束+停留，媒体偏移独立计算；使用随附精确音频导出脚本。

适用引擎：Remotion；其他引擎仍使用原有参数。

展开完整输入示例（JSON）
{
  "title": "把重点，放到眼前。",
  "annotation": "转化率提升，不只是流量增加。",
  "focus": "conversion",
  "values": {
    "revenue": "$42,800",
    "conversion": "6.4%",
    "visitors": "128K"
  },
  "image": "p2/dashboard-a.png",
  "imageWidth": 1100,
  "imageHeight": 650,
  "region": {
    "x": 0.45,
    "y": 0.29384615384615387,
    "width": 0.2381818181818182,
    "height": 0.22615384615384615
  },
  "maxZoom": 2.7
}
04
Motion timeline

归一化动作时间线

当前预览为可换素材增强版：截图与产品镜头为 6 秒，字幕按末词时间加停留时间计算。下方为旧版基础时间线；增强版以所复制入口与 remotion_settings 为准。切换其他引擎仍使用旧参数与旧时间线。

所有事件都使用 0 到 1 的归一化进度：0 是镜头开始，1 是镜头结束；事件可以重叠，适配器再把相同比例映射到秒或帧。

screenshot-fade-inopacity.fade
0.00–0.08
screenshot-scale-intransform.scale
0.00–0.08
camera-focuscamera.focus-region
0.08–0.55
annotation-drawannotation.draw-box
0.44–0.68
holdstate.hold
0.68–1.00
05
Copy to Agent

复制执行上下文

预览与引用使用同一个引擎选择。上下文保留共享机器标记与对应 Adapter 路由。

正在加载当前 Recipe 的上下文…
06
Engine implementations

引擎实现

gsap-timeline

HyperFrames

已验证
Composition
screenshot-focus
入口文件
index.html
确定性
是
  • lint通过
  • validate通过
  • inspect通过
  • render通过
frame-based

Remotion

已验证
Composition
MediaScreenshotFocus
入口文件
MediaScreenshotFocus.tsx
确定性
是
  • typecheck通过
  • build通过
  • render通过
07
Source, reference & rights

来源与使用边界

再分发状态
original
来源说明
Self-authored Milestone B test recipe and fixture.
Recipe 文件
recipes/screenshot/focus-highlight/recipe.yaml

参考

无外部参考；该 Recipe 与测试素材为项目原创。

08
Verification

验收标准

01
deterministic

Repeated renders with the same screenshot and region are stable.

02
region-bound-annotation

The annotation remains geometrically attached to the selected screenshot region during camera movement.

03
intentional-overlap

Annotation drawing overlaps the camera focus interval rather than beginning after it ends.

04
responsive-focus

The focus region stays safely visible in the verified 16:9 and 9:16 variants.

05
original-test-asset

The default screenshot fixture is self-generated and free to redistribute.

06
p2-media-variant

Only the Remotion advanced settings variant uses P2 timing and local media. Legacy parameters, entry IDs, HyperFrames and Three.js remain unchanged; the core timeline describes the legacy variant. Verified P2 evidence covers 16:9, 9:16 and two alternate inputs.

2 个实现已通过真实渲染理解验证模型