<AppShowcase
mode="carousel"
screens={["/a.png", "/b.png", "/c.png"]}
/>

<AppShowcase
mode="cluster"
screens={["/a.png", "/b.png", "/c.png"]}
/>

<AppShowcase mode="loop" frameColor="silver" src="/app-tall.png" />

App Showcase

tsx

import { AppShowcase } from "@/components/myndui/app-showcase";export function Hero() {return (  <AppShowcase    device="iphone"    mode="loop"    width={260}    src="/app-home.png"    alt="App home screen"  />);}

Documentation

Learn Playground

The hero shot of every mobile-app landing page: your screenshots or demo video framed in a real device. Pick a device and an interaction — the screen pans as you scroll, auto-scrolls on a loop, cross-fades a feature tour, or fans out into a parallax cluster. The screen below auto-scrolls while it is in view.

Installation

pnpm dlx shadcn@latest add "https://myndui.design/r/app-showcase.json"

AppShowcase renders a pure-CSS device shell (accurate Dynamic Island on iPhone, hole-punch on Android) with the screen masked and correctly clipped. Video is a plain DOM overlay to avoid the Safari/iOS masking bug. Every mode has a reduced-motion fallback that renders a calm, static frame.

Usage

tsx

import { AppShowcase } from "@/components/myndui/app-showcase";

Scroll (default) — Apple-style hero

The phone floats in and the tall screenshot pans with page scroll.

tsx

<AppShowcase device="iphone" mode="scroll" src="/app-tall.png" />

Loop — auto-scrolling screen

The screenshot scrolls on a gentle infinite loop while the phone is in view (the preview at the top of this page). Swap device for the Android frame:

tsx

<AppShowcase device="android" mode="loop" src="/app-tall.png" />

Prop	Type	Default	Description
`device`	`"iphone" \| "android"`	`"iphone"`	Device frame to render.
`mode`	`"scroll" \| "loop" \| "carousel" \| "cluster"`	`"scroll"`	The screen interaction.
`src`	`string`	—	Single screen source (`scroll` / `loop`). A tall image pans best.
`videoSrc`	`string`	—	Screen video source (`scroll` / `loop`).
`screens`	`string[]`	—	Screens for `carousel` / `cluster`.
`frameColor`	`"black" \| "silver" \| "gold"`	`"black"`	Bezel finish.
`autoplay`	`boolean`	`true`	Autoplay the loop / carousel.
`interval`	`number`	`4`	Carousel step / loop pace, in seconds.
`width`	`number`	`300`	Frame width in px; height derives from the aspect ratio.
`alt`	`string`	—	Accessible label for the screen media.

AppShowcase also forwards every standard <div> attribute to the root.