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.

akashared element·layoutId·expand card

Install

Run this in any project set up for the shadcn CLI. It copies the Lift to Open source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/lift-to-open.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { LiftToOpen } from "@/components/lift-to-open";

export default function Page() {
  return <LiftToOpen />;
}

Built with

A free React motion component in the Surfaces collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

npm: motion, lucide-react

Props

Read from the Lift to Open source. Everything is optional unless it says required.

Prop	Type	Default
itemsrequired	LiftToOpenItem[]	—
className	string	—
label	string	"Gallery"

More in Surfaces

219

Morph Icons

Menu to close, play to pause, plus to check, sun to moon: each pair is one set of paths in two poses, so lines rotate and stretch into place on a spring and reverse cleanly mid-way.

220

Press Ripple

A quiet wave that spreads from exactly where you pressed, clipped to the element's corners, finishes filling even on a quick tap, and gives Enter and Space the same feedback from the centre.

221

Rim Light

A point of light that laps a card's border at a steady pace with a fading tail, tracing rounded corners exactly; every beam on the page shares one clock, so busy cards pulse in step.

244

Card Deal

A grid that deals itself out from one point like a hand of cards: each card flies to its slot tilted and settles flat, and a shuffle sweeps them back into the deck and deals a fresh order, even mid-flight.

Prop

Type

Default

itemsrequired

LiftToOpenItem[]

—

className

string

—

label

string

"Gallery"