A mobile lock screen is the first screen a phone shows — a big clock, the date, a stack of notifications, and a swipe-to-unlock hint. It's a great showcase for app concepts, push-notification designs, and onboarding flows. This snippet builds a polished one inside a CSS phone frame with a live clock and a real swipe-up gesture, in HTML, CSS, and vanilla JavaScript with no dependency.

Live clock and date

A tick() function formats the current time in 12-hour style and writes it to both the large clock and the status bar, and builds a friendly date ("Monday, June 29") from DAYS and MONTHS arrays rather than a locale string, so the format is fully in your control. An interval keeps it current. The large time uses a thin font-weight: 300 with negative letter-spacing to mimic the system lock-screen typography.

Glassmorphism notifications

Each notification is a frosted card — a semi-transparent white background plus backdrop-filter: blur(10px) — layered over the gradient wallpaper, which is the modern lock-screen look. They animate in with a staggered lsIn keyframe (increasing animation-delay per card) so the stack cascades on load, and the list scrolls independently with overflow-y:auto.

The wallpaper

The background is a multi-stop linear-gradient with a soft radial-gradient highlight layered via ::after for depth, giving a rich wallpaper without an image. All the foreground text and glyphs are white over it, with the notification glass providing contrast for readability.

A real swipe-up gesture

Unlocking works two ways: clicking the grip, or an actual swipe — pointerdown records the start Y, and pointerup checks whether the finger moved up more than 60px before triggering unlock(). The unlock animates the whole screen up and fades it, then resets, simulating the transition into the home screen. This is the same threshold-based swipe detection used for sheets and dismissible cards.

Reusing it

Swap the notifications for your own data, change the wallpaper gradient, and keep the frame as a wrapper. It pairs naturally with a phone mockup for presenting an app, or as the entry point before a mobile login screen.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You do not have to trace the gesture math by hand to know if it feels right. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the swipe detection compares startY minus the pointerup clientY against a 60px threshold rather than tracking movement continuously with pointermove, or how the unlock function's two chained setTimeout calls produce the slide-up-then-reset sequence. The same assistant can help optimize it — ask whether the 5-second tick interval for the clock is wasteful when the displayed format only changes once a minute, or whether backdrop-filter blur on three stacked notification cards has a noticeable cost on lower-end devices. It is just as useful for extending the feature: have it add a real drag-following animation instead of a threshold-only swipe, support swiping individual notifications away, or wire the unlock into an actual screen transition to a home screen or login screen. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a mobile lock screen in plain HTML, CSS, and JavaScript inside a phone-frame container — no animation library.

Requirements:
- A gradient wallpaper background (a multi-stop linear-gradient plus a soft radial-gradient highlight layered on a pseudo-element) with a status bar, a small lock icon, a date line, and a large time display using tabular figures.
- Drive the time and date from the real system clock with a repeating interval, formatting the time and a full weekday-plus-month date string yourself from Date object fields rather than relying on a locale-formatting shortcut.
- A stack of notification cards using the glassmorphism technique: a semi-transparent background color combined with backdrop-filter blur so the wallpaper shows through, each card entering with a staggered fade-and-slide-up keyframe animation where each successive card's animation-delay is slightly longer than the one before it.
- Implement swipe-to-unlock two ways: clicking a visible grip/handle element, and an actual pointer gesture — record the starting Y coordinate on pointerdown, and on pointerup, only trigger the unlock if the pointer moved upward by more than a fixed pixel threshold (do not require continuous tracking during the drag).
- The unlock action must animate the whole screen sliding upward while fading out, then after that animation completes, reset the screen instantly below its start position with transitions disabled, then re-enable transitions and animate it back to its resting position and full opacity, so the sequence reads as one continuous unlock rather than two visible steps.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA phone lock screen renders with a live clock and notifications.
2
Watch the clockThe time and date update live from the system clock.
3
See the notificationsGlassy cards cascade in over the gradient wallpaper.
4
Swipe upDrag up from the screen to trigger the unlock animation.
5
Or tap the gripClicking the swipe hint unlocks too.
6
Customize itSwap notifications and the wallpaper gradient for your app.

Real-world uses

Common Use Cases

App concept demos

Present a concept beside a phone mockup.

Push notification design

Show alerts like a notification center.

Onboarding entry

Lead into a mobile login screen.

Marketing screenshots

Frame an app launch in a product hero.

Wallpaper and theme demos

Pair with a color theme switcher.

Learning swipe gestures

A reference for threshold-based pointer swipes.

Got questions?

Frequently Asked Questions

A pointerdown handler records the starting Y coordinate, and pointerup checks whether the pointer moved upward by more than 60 pixels — if so it calls unlock(), which slides the screen up and fades it before resetting. Clicking the grip triggers the same function. It's the same threshold-based swipe detection used for bottom sheets and dismissible cards.

Yes. A tick() function reads the current Date, formats the time in 12-hour style, and updates both the large clock and the status bar, plus builds the date string from day and month name arrays. An interval keeps it current, so the lock screen never looks frozen on a placeholder time.

Each card has a semi-transparent white background combined with backdrop-filter: blur(10px), so the gradient wallpaper shows through softly — the glassmorphism look used on real lock screens. They animate in with a staggered keyframe, increasing the animation-delay per card so the stack cascades rather than appearing all at once.

Definitely. The wallpaper is a CSS gradient with a radial highlight, so change the colors or swap in a background image. The notifications are plain markup driven by an icon, title, time, and message, so replace them with your own data or render them from an array in a framework.

Keep the time in state updated by an interval in a mount effect with cleanup, and render notifications from an array. Implement unlock as a state flag that toggles the slide-and-fade classes. The swipe uses pointer events on a ref. In Tailwind, build the wallpaper with a gradient and the glass cards with bg-white/15 and backdrop-blur.

Loading…