data.flow-volume

体积数据流

Volumetric Data Flow

仅本次打开有效
范围
场景
复杂度
高级
建议时长
4.2s
画幅
16:9 · 9:16 · 1:1
01
Live preview

真实渲染预览

实机渲染 · HyperFrames
02
Purpose

这个动效用来做什么

发光数据包沿三维流道穿过空间节点并在终点汇聚,形成有限时长的吞吐叙事。

Glowing data packets cross spatial nodes through 3D flow lanes and converge at targets in a finite throughput narrative.

混合
解释强调揭示
数据叙事知识视频产品演示演示文稿
03
Inputs

可替换参数

nodes必填 · string

Pipe-separated labels for the source, transit, and target nodes.

默认值
INGEST|PROCESS|CACHE|DELIVER
packet_count可选 · integer

Deterministic number of packets travelling through the volume.

默认值
18
flow_rate可选 · number

Normalized throughput multiplier for packet travel distance.

默认值
0.82
headline必填 · string

Caption explaining the flow volume.

默认值
THROUGHput / 24H
04
Motion timeline

归一化动作时间线

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

volume.revealopacity.fade
0.04–0.30
nodes.staggercollection.stagger
0.10–0.56
packets.flowpath.draw
0.18–0.74
volume.emphasistransform.scale
0.58–0.82
volume.holdstate.hold
0.82–1.00
05
Copy to Agent

复制执行上下文

四个上下文共享同一份可机器校验核心;引擎标签只追加已验证 Adapter 路由、能力与实现纪律。

<!-- motion-registry-context:{"format":"1.0.0","recipe_id":"data.flow-volume","recipe_version":"0.2.0","recipe_source":"recipes/data/flow-volume/recipe.yaml"} -->
# Motion Registry Context

<!-- motion-registry-section:recipe-identity:start -->
## Recipe identity
- Recipe ID: data.flow-volume
- Schema version: 0.2.0
- Recipe source: recipes/data/flow-volume/recipe.yaml
<!-- motion-registry-section:recipe-identity:end -->

<!-- motion-registry-section:motion-intent:start -->
## Motion intent and scope
- Purpose (zh): 发光数据包沿三维流道穿过空间节点并在终点汇聚,形成有限时长的吞吐叙事。
- Purpose (en): Glowing data packets cross spatial nodes through 3D flow lanes and converge at targets in a finite throughput narrative.
- Scope: scene
- Complexity: advanced
- Subjects: mixed
- Intents: explain, emphasize, reveal
- Use cases: data-story, knowledge-video, product-demo, presentation
- Recipe capabilities: volumetric-flow, packet-travel, spatial-nodes, throughput-control
<!-- motion-registry-section:motion-intent:end -->

<!-- motion-registry-section:inputs:start -->
## Inputs
- nodes: string (required; default=INGEST|PROCESS|CACHE|DELIVER) — Pipe-separated labels for the source, transit, and target nodes.
- packet_count: integer (optional; default=18) — Deterministic number of packets travelling through the volume.
- flow_rate: number (optional; default=0.82) — Normalized throughput multiplier for packet travel distance.
- headline: string (required; default=THROUGHput / 24H) — Caption explaining the flow volume.
<!-- motion-registry-section:inputs:end -->

<!-- motion-registry-section:normalized-timeline:start -->
## Normalized motion timeline (0 to 1)
- 0.04–0.30 · volume.reveal · opacity.fade → volume · parameters={"from":0,"to":1}
- 0.10–0.56 · nodes.stagger · collection.stagger → nodes · parameters={"order":"source","fraction":0.1}
- 0.18–0.74 · packets.flow · path.draw → packets · parameters={"from":0,"to":1}
- 0.58–0.82 · volume.emphasis · transform.scale → volume · parameters={"from":0.96,"to":1}
- 0.82–1.00 · volume.hold · state.hold → volume · parameters={}
<!-- motion-registry-section:normalized-timeline:end -->

<!-- motion-registry-section:output-envelope:start -->
## Output envelope
- Aspect ratios: 16:9, 9:16, 1:1
- Duration: min 2.8s; preferred 4.2s; max 6s
<!-- motion-registry-section:output-envelope:end -->

<!-- motion-registry-section:acceptance:start -->
## Acceptance constraints
- volumetric-grammar: The final frame shows depth-separated nodes, multiple flow lanes, and packet trails rather than a flat graph.
- finite-flow: Every packet travels a bounded distance and stops at a target before the hold.
- deterministic: The same inputs produce identical packet lanes, node positions, timing, and final state.
- readable-labels: Node labels and the headline remain readable and are not covered by packets or glow.
<!-- motion-registry-section:acceptance:end -->

<!-- motion-registry-section:handoff-invariants:start -->
## Handoff invariants
- Preserve the subject, input meaning, event order, overlaps, final state, and approximate normalized timing.
- Keep the implementation deterministic and retain a readable, stable final hold.
- Treat the Recipe document as the source of truth; do not infer engine APIs in this shared core.
<!-- motion-registry-section:handoff-invariants:end -->
06
Engine implementations

引擎实现

gsap-timeline

HyperFrames

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

Remotion

已验证
Composition
DataFlowVolume
入口文件
DataFlowVolume.tsx
确定性
  • typecheck通过
  • render通过
frame-based

Three.js

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

来源与使用边界

再分发状态
original
来源说明
Self-authored H2 Recipe and procedural adapters.
Recipe 文件
recipes/data/flow-volume/recipe.yaml

参考

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

08
Verification

验收标准

01
volumetric-grammar

The final frame shows depth-separated nodes, multiple flow lanes, and packet trails rather than a flat graph.

02
finite-flow

Every packet travels a bounded distance and stops at a target before the hold.

03
deterministic

The same inputs produce identical packet lanes, node positions, timing, and final state.

04
readable-labels

Node labels and the headline remain readable and are not covered by packets or glow.

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