原片 · Framer · 0:15–0:18YouTube ↗
Motionboard 复刻

作品墙漂移

满屏作品卡片斜向匀速漂移并慢放大,结尾加速推近一张。

原片出处

YouTube ↗
YouTube ↗
完整配方

为什么有效

靠卡片数量证明有很多人在用;卡片配色各不相同,漂移时色块轮流经过画面中心,结尾推近一张让视线落到具体作品。

参数

时长
漂移 0–5.9s(177 帧);推近 5.35–6.0s(约 20 帧);落定卡片停留 6.0–7.65s,模板栏 6.3s 升起(0.7s);拉回 7.65–8.65s(1.0s);字标 8.3s 起;全片 11s
缓动
漂移与放大 linear;推近前 72% 用 expo.in 曲线(2^(10p−10)),最后约 0.18s 接速度衔接的三次缓出,让卡片软着陆;拉回 power3.inOut;模板栏与字标 expo.out
镜头
2400×1600px 的墙朝左上平移 x:-440, y:-260,历时 5.9s(约每秒 75px,占画面宽 3.9%),scale 1→1.15,以画面中心为原点;片头 0.5s 从黑场淡入(power1.out);推近让一张卡片铺满画面,同时 borderRadius 10→0
主体
六列 masonry 网站截图卡片,宽 360px,间距 22px,列顶错开在 −260 到 −40px,五种卡高(202.5、225、360、450、480px);每张卡是自带配色和字体的缩小页面;推近目标是一张 202.5px 高的 SaaS 模板页
风格
深色 #0b0b0c 底;卡片圆角 10px,白、深色、橙、黄、紫的网站设计混排,字体各异;停留后墙面被深色径向遮罩压暗(0.9s),由环轨加行星的标志和 136px 字标接管

提示词

用「作品墙漂移(Showcase Wall)」展示你的用户作品:画面铺满六列 masonry 网站截图卡片(宽 360px,间距 22px,五种卡高从 202.5 到 480px,列顶错开),每张卡是自带配色和字体的缩小页面,片头 0.5s 从黑场淡入。整面墙朝左上 linear 漂移(5.9s 内 x -440px、y -260px,约每秒 4% 画面宽),同时 scale 从 1 线性放大到 1.15。5.35s 起用 0.65s 推近其中一张卡片,先按 expo.in 曲线加速,最后用一小段三次缓出软着陆,直到它铺满画面、圆角归零。在这张卡片上停留约 1.6s,你的产品信息栏用 expo.out 在 0.7s 内升起;随后用 1s、power3.inOut 拉回整面墙,压暗墙面,落上你的字标。

常见说法

  • 满屏作品卡片慢慢飘过去
  • 很多人在用的那种展示墙
  • 卡片墙斜着移动再推到一张

容易混淆

  • 推近操作再拉回推近再拉回服务一次操作并会拉回;本条是匀速漂移,结尾单向推近后切走
  • 堆积清空堆积清空是元素逐个出现再清空;本条的卡片从一开始就铺满,整体在移动
配方文件 (.md)

更多「开场」