LockPhone
The owner's iPhone, locked, as a satellite beside a staged window: the date, the clock and the notifications that land on it. Stageshow's iPhone (MIT, vendored in components/generated/stageshow), never one drawn by hand.
With a notification
08:04
Thursday, 8 October
08:04
OkaminowPetra booked a lash fill for Friday at 10:00.import { LockPhone, PhoneNotification } from "@/components/shared/lock-phone";
<LockPhone width={208} date="Thursday, 8 October" time="08:04">
<PhoneNotification
title="Okami"
body="Petra booked a lash fill for Friday at 10:00."
time="now"
/>
</LockPhone>LockPhone API
| Prop | Type | Default | Description |
|---|---|---|---|
| width | number | — | Outer width in px; the height follows the iPhone's. |
| date | string | — | The lock screen's date, in the page's language. |
| time | string | — | The clock and the status bar's time. |
| children | ReactNode | — | PhoneNotifications, stacked under the clock. |
PhoneNotification API
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Bold, beside Okami's app icon: “Okami”. |
| body | string | — | Wraps to three lines, at true iOS size. |
| time | string | "now" | In the page's language. |
| className | string | — | Its arrival: a motion recipe's classes. |
Guidelines
- A satellite straddles the window's edge, about half outside, and runs off the stage's foot; it never covers what the window explains.
- Notifications stay at iOS size: if one wouldn't read, make the phone bigger and crop it, never the notification.
- Don't edit the vendored files; LockPhone gives them Okami's tokens.