App Showcase
A realistic iPhone or Android device frame that shows your app on screen, with scroll, loop, carousel, and cluster interactions.
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://godui.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
import { AppShowcase } from "@/components/godui/app-showcase";Scroll (default) — Apple-style hero
The phone floats in and the tall screenshot pans with page scroll.
<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:
<AppShowcase device="android" mode="loop" src="/app-tall.png" />Carousel — feature tour
Cross-fade through multiple screens with dot controls.
Cluster — parallax centerpiece
Two or three phones at different depths that react to the pointer.
Frame colors
Each device comes in black, silver, and gold finishes.
Props
| 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.