Phone Notification Stack

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Notifications *

  notifications · array

  The cards, in the order they land: the first entry arrives first and ends up at the top of the stack, dimming as the later ones drop in. Three reads best; four is the ceiling before the stack runs out of screen.

  now: 3 items

• Clock

  clock · string

  Lock-screen time. Set large under the status row, and again small inside the status row itself.

  now: 9:41

• Date label

  dateLabel · string

  Small uppercase mono line above the big clock, e.g. 'Tuesday 12 March'. Omit for a barer screen.

  now: Tuesday 12 March

• Battery

  battery · number

  Battery fill in percent, drawn into the status-row cell. Deliberately never written out as text.

  now: 78

• Kicker

  kicker · string

  Small mono label at the top left of the frame, beside an accent tick. Omit to leave the device alone.

  now: Push

• Caption

  caption · string

  One display-face line at the top of the frame. Five to nine words: it wraps to two lines and must not reach down to the device.

  now: Everyone knows the moment it ships.

• Tilt

  tilt · number

  Settled rotateX in degrees. 0 is a flat mockup; 7 reads as a device held slightly away; past 12 the screen starts to keystone and the type in it softens.

  now: 7

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate