import { AnimatePresence, motion } from "framer-motion"; import { Download, X } from "lucide-react"; import { useState } from "react"; export default function App() { const [activeBackground, setActiveBackground] = useState<BackgroundType | null>(null); const [view, setView] = useState<"lock" | "home">("lock"); return ( <main className="relative w-full min-h-screen flex items-start md:items-center justify-center px-4 py-10 bg-zinc-50"> <div className="w-full relative overflow-hidden max-w-[393px] h-[760px] rounded-[70px] bg-white border-[6px] border-black ring-4 ring-[#b7b5a8]"> <div className="pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white dark:from-background z-20"></div> <motion.div className="w-full h-full px-4 grid grid-cols-2 gap-3"> <div className="flex flex-col items-center justify-start gap-3"> {BACKGROUNDS.slice(0, BACKGROUNDS.length / 2).map( (background, index) => ( <motion.div key={index} className="relative flex items-center justify-center w-full cursor-pointer" onClick={() => setActiveBackground(background)} layoutId={`background-${background.name}`} style={{ height: background.height, }} > <motion.img src={background.image} alt={background.name} className="w-full h-full object-cover duration-300 transition-all" style={{ borderRadius: 20, opacity: activeBackground ? 0 : activeBackground === background ? 1 : 1, scale: activeBackground ? 0.85 : activeBackground === background ? 1 : 1, }} /> </motion.div> ) )} </div> <div className="flex flex-col items-center justify-start gap-3"> {BACKGROUNDS.slice(BACKGROUNDS.length / 2).map( (background, index) => ( <motion.div key={index} className="relative flex items-center justify-center w-full cursor-pointer" style={{ height: background.height }} onClick={() => setActiveBackground(background)} layoutId={`background-${background.name}`} > <motion.img src={background.image} alt={background.name} className="w-full h-full object-cover duration-300 transition-all" style={{ borderRadius: 20, opacity: activeBackground ? 0 : activeBackground === background ? 1 : 1, scale: activeBackground ? 0.85 : activeBackground === background ? 1 : 1, }} /> </motion.div> ) )} </div> </motion.div> <AnimatePresence mode="wait"> {activeBackground ? ( <motion.div className="absolute inset-0 flex items-center justify-center bg-white z-30" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} > <motion.div layoutId={`background-${activeBackground.name}`} className="relative w-full h-full" > <motion.img src={activeBackground.image} alt={activeBackground.name} className="w-full h-full object-cover" style={{ borderRadius: 0, }} /> </motion.div> </motion.div> ) : null} </AnimatePresence> <AnimatePresence mode="wait"> {activeBackground ? ( <motion.div className="absolute inset-0 flex items-center justify-center z-40" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} > <div className="w-full h-full flex items-center justify-start"> <div className="flex flex-col w-full h-full items-center justify-between gap-4 pt-20 px-6 pb-14 shrink-0 duration-300 transition-transform" style={{ transform: view === "lock" ? "translateX(0)" : "translateX(-100%)", }} > <motion.div className="flex flex-col items-center justify-center gap-2" initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 30 }} transition={{ duration: 0.3 }} > <motion.p className="text-white/80 font-semibold"> Saturday, October 26 </motion.p> <motion.h1 className="text-8xl text-white font-semibold"> 9:23 </motion.h1> </motion.div> <motion.div className="w-full flex items-center justify-between" initial={{ opacity: 0, y: -30 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -30 }} transition={{ duration: 0.3 }} > <button className="size-12 rounded-full bg-white text-black/40 border-[6px] border-black/20 flex items-center justify-center"> <Download size={20} /> </button> <span className="text-white/80 font-semibold text-xl"> {activeBackground.name} </span> <button className="size-12 rounded-full bg-white text-black/40 border-[6px] border-black/20 flex items-center justify-center" onClick={() => setActiveBackground(null)} > <X size={20} /> </button> </motion.div> </div> <div className="flex flex-col w-full h-full items-center justify-between gap-4 pt-20 px-6 pb-8 shrink-0 duration-300 transition-transform" style={{ transform: view === "home" ? "translateX(-100%)" : "translateX(100%)", }} > <div className="w-full grid grid-cols-4 gap-4"> {APPS.map((app, index) => ( <motion.div key={index} className="flex flex-col items-center justify-center gap-2" > <img src={app.icon} alt={app.label} className="size-14" /> <span className="text-white font-medium text-xs"> {app.label} </span> </motion.div> ))} </div> <div className="w-full grid grid-cols-4 gap-4 p-3 bg-white/30 rounded-[32px]"> {BOTTOM_APPS.map((app, index) => ( <motion.div key={index} className="flex flex-col items-center justify-center gap-2" > <img src={app.icon} alt={app.label} className="size-14" /> </motion.div> ))} </div> </div> </div> <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.9 }} transition={{ duration: 0.3 }} className="absolute w-full flex items-center justify-center inset-x-0 bottom-40" > <div className="py-1 px-1 flex items-center gap-1 bg-white/50 rounded-full"> <button className="rounded-full relative text-xs font-semibold py-1 px-2" onClick={() => setView("lock")} > <motion.span className="relative z-[2]" animate={{ color: view === "lock" ? "#000" : "#fff", }} > Lock </motion.span> {view === "lock" && ( <motion.div layoutId="indicator" className="absolute inset-0 w-full h-full bg-white rounded-full" ></motion.div> )} </button> <button className="rounded-full relative text-xs font-semibold py-1 px-2" onClick={() => setView("home")} > <motion.span animate={{ color: view === "home" ? "#000" : "#fff", }} className="relative z-[2]" > Home </motion.span> {view === "home" && ( <motion.div layoutId="indicator" className="absolute inset-0 w-full h-full bg-white rounded-full" ></motion.div> )} </button> </div> </motion.div> </motion.div> ) : null} </AnimatePresence> <div className="rounded-full bg-black h-1 w-36 absolute bottom-3 left-1/2 -translate-x-1/2 z-[50] cursor-pointer"></div> <div className="rounded-full bg-black h-8 w-36 absolute top-3 left-1/2 -translate-x-1/2 z-[50] cursor-pointer"></div> </div> </main> ); } type AppType = { icon: string; label: string; }; type BackgroundType = { name: string; image: string; height: number; }; const BACKGROUNDS: BackgroundType[] = [ { name: "Mountains", image: "/1.jpg", height: 200, }, { name: "Beach", image: "/2.jpg", height: 200, }, { name: "City", image: "/3.jpg", height: 230, }, { name: "Desert", image: "/4.jpg", height: 210, }, { name: "Forest", image: "/5.jpg", height: 200, }, { name: "Lake", image: "/6.jpg", height: 240, }, { name: "Plants", image: "/7.jpg", height: 260, }, { name: "Sunset", image: "/8.jpg", height: 140, }, ]; const APPS: AppType[] = [ { icon: "/appstore.svg", label: "App Store" }, { icon: "/calendar.svg", label: "Calendar" }, { icon: "/camera.svg", label: "Camera" }, { icon: "/facetime.svg", label: "FaceTime" }, { icon: "/health.svg", label: "Health" }, { icon: "/password.svg", label: "Passwords" }, { icon: "/photos.svg", label: "Photos" }, { icon: "/reminder.svg", label: "Reminders" }, { icon: "/settings.svg", label: "Settings" }, { icon: "/siri.svg", label: "Siri" }, { icon: "/tips.svg", label: "Tips" }, { icon: "/weather.svg", label: "Weather" }, ]; const BOTTOM_APPS: AppType[] = [ { icon: "/phone.svg", label: "Phone" }, { icon: "/imessage.svg", label: "Messages" }, { icon: "/mail.svg", label: "Mail" }, { icon: "/music.svg", label: "Music" }, ];

Wallpaper App Interaction

Code

Stacks

Inspiration

X ( Twitter ) Post