Retro Slide to Unlock

A skeuomorphic lock screen inspired by early-2010s phones: live clock, drawn water wallpaper, a shimmering slide to unlock knob, camera peek, and working home and sleep buttons with music controls, in an optional classic phone frame. Fully props-driven and keyboard accessible.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Retro Slide to Unlock to your project and fits it to your theme.

import { SlideToUnlock } from "@/components/ui/retro-slide-to-unlock";

export default function Demo() {
  return (
    <div className="flex min-h-dvh w-full items-center justify-center bg-neutral-950">
      <SlideToUnlock
        device="classic"
        carrier="SOS only"
        label="slide to unlock"
        track={{ title: "Gymnopédie No. 1", artist: "Erik Satie" }}
        className="h-dvh w-full"
      />
    </div>
  );
}