back to lab

iOS Classic Slide to Unlock

April 2024

I recreated the classic 'Slide to Unlock' from the old iPhones using Framer Motion for the animation and a mix of Tailwind CSS and inline CSS for styling. I've also added the unlock sound to make it feel more authentic (works best on Chrome desktop). Wish I still had my old iPhone 3G to make it even more accurate!

slide to unlock

Unlock code snippet

Enter your email to get instant access to all code snippets and stay updated with my latest content!

import { useState } from "react";
import Button from "./ui/Button";


// Nice try lol, I promise I will not send you a tons of spam emails
// I just want to build a newsletter list to share my latest content with you 🥹


const INIT = "INIT";
const SUBMITTING = "SUBMITTING";
const ERROR = "ERROR";
const SUCCESS = "SUCCESS";


const formStates = [INIT, SUBMITTING, ERROR, SUCCESS] as const;




function NewsletterForm() {
  return (
    <form>
      <input type="email" placeholder="
        Enter your email" />
        <Button type="submit">Subscribe</Button>
        </form>
        );
    }
}
Web Exploding Menu
Family Popover Menu