One device frame that morphs between watch, phone, tablet and laptop, while the app inside reflows to a layout built for each screen. A segmented picker with a timer tours the devices on its own.
One library, every screen
Wander keeps the same photos everywhere and rearranges the interface around the screen in your hand. Pick a device and watch it reflow.
Albums along the top, a four-column grid below. Drag across to build a trip spread in seconds.
npx shadcn@latest add https://hyperblur.dev/r/showcase-device-gallery.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/showcase-device-gallery.tsx.
import { ShowcaseDeviceGallery } from "@/components/hyperblur/showcase-device-gallery"
<ShowcaseDeviceGallery defaultDevice="tablet" autoPlay={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "One library, every screen" | Small label above the title. |
| title | string | "Your trip, shaped to whatever you are holding" | Section heading. |
| subtitle | string | "Wander keeps the same photos..." | Supporting paragraph. |
| appName | string | "Wander" | App name shown in the laptop sidebar and the stage label. |
| devices | { id: "watch" | "phone" | "tablet" | "laptop"; label: string; headline: string; detail: string }[] | all four devices | Devices in the picker and their captions. |
| defaultDevice | "watch" | "phone" | "tablet" | "laptop" | "phone" | Initial device when uncontrolled. |
| device | "watch" | "phone" | "tablet" | "laptop" | Controlled device. | |
| onDeviceChange | (device: DeviceGalleryKind) => void | Called when the device changes. | |
| autoPlay | boolean | true | Tour the devices automatically, pausing on hover or focus. |
| interval | number | 3600 | Milliseconds per device during the tour. |
| accent | string | "#8b5cf6" | Accent for the timer, glow and app highlights. |