# Lift to Open
> A thumbnail that lifts off the grid and grows into its own detail view as one object, cover and title travelling with it, the details fading in once it lands; Escape or a click outside folds it back into its exact slot.
- Page: https://devl.dev/motion/lift-to-open
- Kind: motion · Surfaces
- Install: `npx shadcn@latest add https://devl.dev/r/lift-to-open.json`
- Raw source: https://devl.dev/raw/lift-to-open.tsx
- npm: motion, lucide-react
- License: MIT. The coss ui components it uses (https://coss.com/ui) are AGPL-3.0.
## Usage
```tsx
import { DropletsIcon, MountainIcon, TreePineIcon, WavesIcon } from "lucide-react";
import type { ReactNode } from "react";
import { Button } from "@/components/ui/button";
import { LiftToOpen, type LiftToOpenItem } from "@/components/lift-to-open";
function Route({ stats, about, tags }: { stats: [string, string][]; about: ReactNode; tags: string[] }) {
return (
{stats.map(([label, value]) => (
{label}
{value}
))}
{about}
{tags.map((tag) => (
{tag}
))}
Start route
);
}
const walks: LiftToOpenItem[] = [
{
id: "pine",
title: "Hollow Pine Loop",
meta: "Easy · 6.4 km",
cover: "from-emerald-500 to-teal-700",
art: (null);
const [radius, setRadius] = useState(scale * 10);
useLayoutEffect(() => {
const el = probe.current;
if (!el) return;
const read = () => setRadius(el.offsetWidth);
read();
const observer = new ResizeObserver(read);
observer.observe(el);
return () => observer.disconnect();
}, []);
const marker = (
{item.art && (
{item.art}
)}
);
}
function Heading({ item, scope, shared, size }: { item: LiftToOpenItem; scope: string; shared: boolean; size: "sm" | "lg" }) {
return (
{item.title}
{item.meta && {item.meta} }
);
}
export function LiftToOpen({ items, className, label = "Gallery" }: LiftToOpenProps) {
const scope = useId();
const reduce = useCalmMotion();
const [radius, radiusProbe] = useThemeRadius(1);
const shared = !reduce;
const [openId, setOpenId] = useState(null);
const [closing, setClosing] = useState(false);
const [lifted, setLifted] = useState(null);
const thumbs = useRef(new Map());
const dialog = useRef(null);
const closeButton = useRef(null);
const returnTo = useRef(null);
const timer = useRef | null>(null);
const open = items.find((item) => item.id === openId) ?? null;
useEffect(() => () => {
if (timer.current) clearTimeout(timer.current);
}, []);
useEffect(() => {
if (open) closeButton.current?.focus({ preventScroll: true });
else if (returnTo.current) {
thumbs.current.get(returnTo.current)?.focus({ preventScroll: true });
returnTo.current = null;
}
}, [open]);
const show = (id: string) => {
if (timer.current) clearTimeout(timer.current);
setClosing(false);
setLifted(id);
setOpenId(id);
};
const close = () => {
if (!openId || closing) return;
returnTo.current = openId;
setClosing(true);
timer.current = setTimeout(() => {
setOpenId(null);
setClosing(false);
}, 90);
};
const closeRef = useRef(close);
useEffect(() => {
closeRef.current = close;
});
useEffect(() => {
if (!openId) return;
const outside = (event: PointerEvent) => {
if (dialog.current && !dialog.current.contains(event.target as Node)) closeRef.current();
};
document.addEventListener("pointerdown", outside);
return () => document.removeEventListener("pointerdown", outside);
}, [openId]);
const onKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") {
event.stopPropagation();
close();
return;
}
if (event.key !== "Tab" || !dialog.current) return;
const focusable = [...dialog.current.querySelectorAll("button, a[href], input, select, textarea, [tabindex]:not([tabindex='-1'])")];
if (!focusable.length) return;
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last.focus();
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first.focus();
}
};
return (
{radiusProbe}
{items.map((item) => (
{openId === item.id ? (
) : (
show(item.id)}
onLayoutAnimationComplete={() => setLifted((id) => (id === item.id ? null : id))}
ref={(el) => {
if (el) thumbs.current.set(item.id, el);
else thumbs.current.delete(item.id);
}}
style={{ borderRadius: radius * 1.6 }}
transition={{ ...frameSpring, boxShadow: { duration: 0.3, ease: "easeOut" } }}
type="button"
whileHover={reduce ? undefined : { y: -2, boxShadow: hover }}
whileTap={reduce ? undefined : { scale: 0.97 }}
>
)}
))}
{open && (
{open && (
)}
);
}
```