Slide to Unlock

Component

About

The iOS 6 lock screen recreated in React inside an iPhone 4S frame: live clock, canvas water wallpaper, shimmering slide to unlock, camera grabber, and working home and sleep buttons with music controls.

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

Code

How Slide to Unlock is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function Demo() {
  return (
    <main className="flex min-h-dvh flex-col items-center justify-center bg-[#0b0b0d] sm:gap-3 sm:py-2">
      <SlideToUnlock className="h-dvh w-full" />
      <p className="py-3 text-xs text-neutral-500 sm:py-0">
        by{" "}
        <a
          href="https://aakashmehra.com/ref/slidetounlock"
          target="_blank"
          rel="noopener noreferrer"
          className="text-neutral-400 underline-offset-2 hover:text-neutral-200 hover:underline"
        >
          aakashmehra.com
        </a>
      </p>
    </main>
  );
}