Motion study

Phone Notification Stack

Loading…
Scene

Overview

Lock screen. Zoom into the stack. Front card scales; the back card slides out from behind; camera pulls back to the device.

Build

  1. 01

    Phone chrome holds.

  2. 02

    Focus-zoom on the stack.

  3. 03

    Back card reveals from behind.

  4. 04

    Pull back to 1×.

.phone { animation: phone-motion }
.front { animation: benji-motion }
.back { animation: grok-motion }
Example source React / TSX

examples/phone-notification-stack.tsx · Uses the catalog’s shared composition helpers.

Loading source…