01
The grid is the cut
Every seam is 32 portrait tiles flipping closed in posting order, post 1 bottom-right in terracotta like the logo, then opening on the next scene.
experiment 006 · code
Grid Studio · Showreel
26.0s · 1920×1080 · 30fps · 6 scenes
A motion reel for Grid Studio, twelve free Instagram tools that run in the browser. The film is a grid: every cut is a wipe of numbered tiles in posting order, and one coastline photo is cut, posted and reassembled on a profile.
Music and sound effects. No spoken dialogue. On-screen text carries the story.
scene breakdown · select a scene to play
The study
Show Grid Studio's core idea, one image into a seamless 3:4 grid, in its own paper, ink and terracotta language, then the eleven tools around it and the fact that nothing leaves the browser.
- tools
- HyperFramesHTMLCSSGSAP
- techniques
- Posting-order tile wipeProfile reflowTool micro-loops
process notes
02
Real material
The real mark, the app's own demo photo (Stefan Kunze, Unsplash License), the live page in a browser and the product's typefaces. The tool panels are rebuilt in HTML so they stay sharp.
03
Instagram's real behaviour
Posts go live one at a time and the profile reflows newest-first, so the banner only lines up once the last tile is posted. The lockup lands on the music's final hit.