Skip to content
native cook
Esc

Loading the catalog…

Scatter Grid Album


A photo album screen that folds between two layouts. Open: eight photos (132 × 176 pt, corner radius 18, soft shadows) lie scattered in two loose columns down the screen, each tilted by 1.5° to 5.5° and overlapping its neighbours, the one in the middle tucked behind the others, over a pale gradient that fills the screen (base #F4F7FA, a blue light #B2C6DE upper left and a mint light #C3E0CF right of middle); the album's name "Highlands" is set large (52 pt heavy, white, tracking −1) at the top with its year "2025" small above it, partly behind the photos. Folded: the gradient becomes a square card (20 pt in from each side, centred at 46% of the screen height, corner radius 15) on a white screen, the photos straighten into a 3×3 grid on it (equal columns with 16 pt gaps, 12 pt row gaps, a taller middle row), the middle cell leaves the gradient showing the name, now shrunk to fit the cell, with the year under it, and a row of four grey line icons sits under the card: share, heart, info, trash. Tap the collage to fold, the card to unfold; the heart fills red (#FF4D6A) with a pop and a ring of six dots, and a second tap empties it; the other icons shrink while pressed. Photos are remote and preloaded; the demo plays it full screen with autoPlay.

Category
Media
Added
Oct 14, 2026
Stacks
RN · Swift · Kotlin
Author
Artem ↗

Is this your design? Ask for a correction or removal

React Native · Expo SDK 52+, TypeScript

✦ If the result drifts from the video, tell your agent what looks different and how it should look. A short correction usually closes the gap.