import { useState } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { Play } from 'lucide-react' export default function App() { const [step, setStep] = useState(1) const handleClick = () => setStep((prev) => (prev % 3) + 1) return ( <main className="relative flex min-h-screen w-full items-start justify-center bg-zinc-950 px-4 py-10 md:items-center"> <motion.div className="relative flex cursor-pointer items-center justify-center" animate={{ width: step === 1 ? 200 : 300, height: step === 1 ? 200 : step === 2 ? 360 : 400, y: step === 1 ? 0 : step === 2 ? -80 : 0, }} initial={false} onClick={handleClick} > <img src="/image.jpg" alt="image" className="z-[2] h-full w-full bg-zinc-600 object-cover" style={{ borderRadius: 16, }} /> <AnimatePresence mode="wait"> {step === 2 && ( <> <motion.div key={`content-${step}`} className="absolute -bottom-28 w-[320px] bg-white px-5 pb-4 pt-40" style={{ borderRadius: 16, }} animate={{ opacity: 1, y: 0 }} initial={{ opacity: 0, y: -20 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.3, delay: 0.25 }} layoutId="content" > <div className="flex w-full items-center justify-between"> <motion.span className="font-semibold" layoutId="title"> lndev/ui </motion.span> <motion.span className="font-semibold text-blue-500 opacity-75" layoutId="url" > ui.lndev.me </motion.span> </div> <motion.p className="mt-1 text-sm opacity-90" layoutId="description" > lndev-ui is a collection of components and utilities for building web applications. coded by leonel ngoya. </motion.p> </motion.div> <motion.div className="absolute z-[3] flex h-full w-full items-end justify-center" animate={{ opacity: 1 }} initial={{ opacity: 0 }} exit={{ opacity: 0 }} transition={{ duration: 0.3, delay: 0.3 }} key={`play-${step}`} > <motion.div className="-mb-7 flex size-14 items-center justify-center bg-white" style={{ borderRadius: 999 }} layoutId="play" > <Play size={24} className="text-blue-500" /> </motion.div> </motion.div> </> )} {step === 3 && ( <> <motion.div key={`content-${step}`} className="absolute h-[420px] w-[320px] bg-white" style={{ borderRadius: 20, }} animate={{ opacity: 1, y: 0 }} initial={{ opacity: 0, y: 20 }} exit={{ opacity: 0, y: 20 }} transition={{ duration: 0.15 }} layoutId="content" ></motion.div> <motion.div className="absolute z-[3] flex h-full w-full flex-col items-center justify-end gap-2 bg-gradient-to-b from-transparent to-black p-4" animate={{ opacity: 1, y: 0 }} initial={{ opacity: 0, y: 20 }} exit={{ opacity: 0, y: 20 }} transition={{ duration: 0.3 }} key={`play-${step}`} style={{ borderRadius: 16, }} > <motion.div className="flex size-14 items-center justify-center bg-white" style={{ borderRadius: 999 }} layoutId="play" > <Play size={24} className="text-blue-500" /> </motion.div> <div className="flex w-full flex-col items-center justify-between gap-1"> <motion.span className="font-semibold text-white" layoutId="title" > lndev/ui </motion.span> <motion.span className="font-semibold text-blue-500 opacity-75" layoutId="url" > ui.lndev.me </motion.span> </div> <motion.p className="mt-1 text-center text-sm text-white opacity-90" layoutId="description" > lndev-ui is a collection of components and utilities for building web applications. coded by leonel ngoya. </motion.p> </motion.div> </> )} </AnimatePresence> </motion.div> </main> ) }

Expandable Media Card

Code

Stacks

X ( Twitter ) Post