每一格,
都算数

EVERY CELL COUNTS.

把一张图像拆成 378 个真实的方块。让它们在时间里失序、聚拢,再各自回到唯一正确的位置。

由 378 个黑色方块组成的像素动物图腾,方块之间保留透明缝隙

像素画读取失败。请刷新页面,或检查 assets/logo-mark.png。

THE MARK 源图 B · 裁去空白边距 · 未重绘

LOADING / 读取网格

01 / SOURCE

从一张图开始,不从一句描述开始。

先有格子,
才有形状。

PIXEL STUDIO 把图像理解为一组可被逐个指认的单位。我们不把像素当作滤镜,而把它当作结构:每个方块都有坐标、颜色和归处。

这件主视觉来自一张已经完成的方块像素画。网站读取它的真实像素,提取出 378 个方块,再用同一份数据完成解构与归位。最终画面不是重新生成的近似图,而是从源图反遮罩得到的透明母版。

源图 B 为 1672 × 941 JPEG,无原始 Alpha。透明通道由白底反遮罩重建;这一限制已在验收报告中记录。

方块
378
横向节距
20.170px
横向缝隙
3.670px
展示尺寸
824×928
近似替换
0

EXTRACTION CHECK

校正差异:均值 0.35 / 最大 6(0–255) 原始方块中心全部保留

查看逐格校验图

02 / SIX STUDIES

概念习作 · 非真实客户案例 · 全部可替换

六次关于方块的练习。

03 / METHOD

不是特效,
是归位。

一次动画只做一件事:让方块从分散回到唯一正确的坐标。所有扰动都是临时的,目标永远不动。

  1. A

    读取

    从文件 B 的真实像素提取 378 个方块,保留每块的中心、颜色与缝隙。没有随机生成的替代网格。

  2. B

    编排

    苏醒、汇聚、轮廓、重组、归位。轮廓格先到,内部格后到;每一块都有固定的结束坐标。

  3. C

    守住

    暂停冻结当前帧,恢复从原位继续。交互只改变临时偏移;目标、颜色、形状和透明缝隙不参与扰动。

GRID RESPONSE

08 × 08 / 局部扰动

移动指针或轻触
离开即归位

TARGET LOCKED OFFSET ONLY 0 MUTATIONS
RENDERCANVAS 2D
LOOPONE rAF
TARGETS378 FIXED
PAUSETIME FROZEN
REDUCED MOTIONSTATIC FIRST

04 / OPEN CALL

让下一张图,
从一格开始。

如果你也在做一件需要被逐格看见的作品,我们可以从一张图、一个网格、一次归位开始。

回到作品

概念演示站点。未填写真实联系方式,不伪造提交或成功反馈。