Design a modern Lockscreen Mobile App UI that displays a Clock and Photo Slideshow.
Full-screen immersive layout (edge-to-edge)
Background: full-screen photo slideshow
Overlay:
Optional subtle gradient overlay to ensure text readability
Large, bold, highly readable font
Support:
Modern typography (thin or semi-bold sans-serif)
Subtle glow or shadow for contrast on images
Configurable interval:
Select animation type:
Animation speed (slow / normal / fast)
If no network:
High-fidelity mobile UI
Include:
Show both Light and Dark versions
Now let me build the full lockscreen UI with all the components:
Now I need to add the @theme inline section back and the rest of the CSS:
Good. Now let me update the layout and build all the components:
Now let me add the Slider component from shadcn since it's needed in settings:
Good, the slider is already available. Let me also verify the Switch component exists:
All components exist. Let me also update the globals.css to add some keyframe animations for the transitions:
I need to clean up the duplicate @theme inline block:
I can see the duplicate @theme inline block. Let me remove the old one:
The FrameTime lockscreen UI is complete. Here's what was built across 6 files: