import { X, Map } from "lucide-react"; import { motion, AnimatePresence } from "motion/react"; import { useState } from "react"; export default function App() { const [showMap, setShowMap] = useState(false); return ( <main className="relative w-full min-h-screen flex items-start md:items-center justify-center px-4 py-10"> <div className="relative w-full max-w-xl flex items-center justify-center"> <motion.div onClick={() => setShowMap(true)} className="py-4 px-6 bg-[#E9E8F1] relative cursor-pointer w-52 flex items-center justify-center gap-2" style={{ borderRadius: 40, }} layoutId="map" > <motion.div layoutId="close" className="flex items-center justify-center" > <Map /> </motion.div> <span style={{ transform: showMap ? "translatey(100%)" : "none", opacity: showMap ? 0 : 1, filter: showMap ? "blur(10px)" : "none", }} className="font-medium block duration-500 transition-all" > View on Map </span> </motion.div> <AnimatePresence> {showMap && ( <div className="absolute inset-0 size-full flex items-center justify-center"> <motion.div layoutId="map" className="relative overflow-hidden size-96 bg-zinc-200" style={{ borderRadius: 40, }} > <iframe width="800" height="600" src="https://www.openstreetmap.org/export/embed.html?bbox=11.518773436546327%2C3.8594215453837717%2C11.522313952445986%2C3.861929072022931&layer=mapnik" style={{ border: 0 }} className="grayscale" ></iframe> <motion.button layoutId="close" onClick={() => setShowMap(false)} className="absolute top-4 right-4 bg-white rounded-full p-2 shadow-xl" > <X size={24} strokeWidth={3} className="text-gray-400" /> </motion.button> </motion.div> </div> )} </AnimatePresence> </div> </main> ); }

View On Map Interaction

Code

Stacks

Inspiration

X ( Twitter ) Post