3D 卡片堆叠展开
3D Card Stack Reveal
真实渲染预览
这个动效用来做什么
三到五张卡片从稳定堆叠状态按输入顺序依次显现、旋转并扇形展开，随后收束到稳定的前景层级。
Three to five cards reveal in stable input order, rotate and fan out from a stack, then settle into a stable foreground layering.
- 范围
- 镜头
- 复杂度
- 高级
- 建议时长
- 3.6s
- 画幅
- 16:9 · 9:16
可替换参数
cards必填 · asset-listOrdered card assets; source order controls the reveal and foreground order.
- 默认值
["assets/card-alpha.svg","assets/card-bravo.svg","assets/card-charlie.svg"]
归一化动作时间线
所有事件都使用 0 到 1 的归一化进度：0 是镜头开始，1 是镜头结束；事件可以重叠，适配器再把相同比例映射到秒或帧。
0.00–0.140.06–0.500.06–0.520.20–0.780.20–0.720.18–0.760.76–0.920.92–1.00复制执行上下文
预览与引用使用同一个引擎选择。上下文保留共享机器标记与对应 Adapter 路由。
正在加载当前 Recipe 的上下文…
引擎实现
HyperFrames
- Composition
card-stack-reveal- 入口文件
index.html- 确定性
- 是
- lint通过
- validate通过
- inspect通过
- render通过
Remotion
- Composition
CardStackReveal- 入口文件
CardStackReveal.tsx- 确定性
- 是
- typecheck通过
- build通过
- render通过
来源与使用边界
- 再分发状态
- original
- 来源说明
- Self-authored Milestone B test recipe and fixtures.
- Recipe 文件
recipes/ui/3d-card-stack-reveal/recipe.yaml
参考
无外部参考；该 Recipe 与测试素材为项目原创。
验收标准
deterministic-orderRender order is deterministic and follows the asset-list source order.
list-cardinalityBoth 3-card and 5-card input variants produce a coherent stack and fan.
stable-depthForeground cards retain stable z and depth ordering without unexpected flips.
bounded-settleEach card settles into its final fan position without perpetual oscillation.
responsive-layoutAt least one 16:9 and one 9:16 variant retain readable, unclipped cards.
content-visibilityEvery card is fully visible without another card covering its content in the final hold state.