Lockscreen Alerts
Social formatsA phone lock screen wakes over a drifting wallpaper and two notifications drop in one after the other, blurred glass over the colour behind them
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 7 settings
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.
- Timetime · string
The clock. The largest thing in the frame, so keep it to four characters.
now: 9:45
- Datedate · string
Date line above the clock.
now: Thursday, August 14
- Notifications *notifications · array
The alerts that land, in order, one after another. Three is the most that fits above the fold on a phone, which is why it is the ceiling.
now: 2 items
- Wallpaperwallpaper · "dusk" | "aurora" | "ember" | "ink"
Which drawn wallpaper sits behind the glass. Ignored when imageSrc is set.
now: dusk
- Image srcimageSrc · string
Optional wallpaper photograph, as a path inside public/, for example 'wallpapers/dusk.jpg'. Local files only, so a render never depends on a network.
- Show controlsshowControls · boolean
The torch and camera buttons at the bottom. Off gives a cleaner frame when the alerts are the whole story.
now: true
- Brandbrand · string
Brand token id, one of the keys of BRANDS. Used only for the surround when the phone does not fill the frame.
now: slate
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A ten second vertical hook built as a classic iPhone lock screen. Full bleed wallpaper behind everything, drifting slowly so the frame never goes dead. Padlock, date and a very large clock centred at the top, status icons in the corner. The screen wakes first, then two notification cards drop in a second apart, dark blurred glass over the wallpaper with an app glyph, a bold app name, a timestamp and two lines of message. Torch and camera buttons at the bottom over a home indicator. Draw the wallpaper in code so the component is still one file, and allow a photograph from the public folder for the case where a real image is the point.
