Pinch density

The same 26 plates at three densities — one full plate, a three-column grid, a list with thumbnails — and a pinch steps between them. Nothing is redrawn: every tile FLIPs from its old rectangle to its new one on one 320ms curve.

What it is

One archive of plates, three ways to see it: a single full-bleed image, a three-column grid, or a list with thumbnails — and you move between them by pinching, the way you zoom a map. Nothing reloads or snaps; every picture glides from where it was to where it belongs. The pattern behind photo apps, file browsers and any gallery that has to work at a glance and up close. Rebuilt with real plates from a restaurant's kitchen.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

@叨叨AI (Douyin) · 第 8 集「8 个高级交互提升 App 和小程序的质感差别」· 01 捏合改密度 Pinch Density