← WOOK.Lab · 06 / 07Get in touch ↗
WEB · MOTIONInterface Experiment

Scroll through a place and the next one grows out of the footer.

Album home: the Maldives photo hung centred like a framed picture on a dark wall.
Album index overlay: a horizontal row of trip cover cards with index, title and date.

/ About

Next.jsFramer MotionLenisTypeScriptSCSS Modules

Travel photos end up in folders no one reopens. The first version bent them into a 3D ring; this rebuild drops the 3D and treats the archive as one document. The loader's last card becomes the hero, the end of each place pulls in the next. Nothing cuts.

What it explores

01

No cuts: every transition clones the image it leaves from and swaps the route underneath, so the last frame of one page is the first frame of the next.

02

Scroll resets only while the screen is covered: the clone holds the frame, the old page jumps to the top unseen, then the new hero takes over.

03

One clip-path template: mixing inset(0%) and inset(0) made reveals snap instead of animate, so every value comes from a single helper.

04

Compositor-only scroll: only transform, opacity and clip-path move on scroll, on top of Lenis smoothing.

Next experiment · WEB · PERSONAL

Wedding Invite

→