App Store Listing

A phone storefront listing taps Get, downloads while screenshots swipe past, then the button becomes Open.

Installation

$ pnpm dlx shadcn@latest add @remocn/app-store-listing

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { AppStoreListing } from "@/components/remocn/app-store-listing";
 
const AppStoreListingScene = () => (
  <AppStoreListing
    appName="Acme"
    subtitle="Plan your week"
    rating={4.8}
    chartRank={3}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="AppStoreListing"
    component={AppStoreListingScene}
    durationInFrames={200}
    fps={30}
    width={1280}
    height={720}
  />
);

A phone rises with the app listing: icon, info strip and a screenshot carousel. A tap on Get collapses the button into a progress ring, the screenshots swipe sideways while it downloads, and the button expands into Open. Pass appName, subtitle, rating, iconSrc and screenshots (each with a src) to match your app; lines are the four captions beside the phone. Ships light and dark.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props17

Prop	Type	Default
appName	string"remocn" App name next to the icon
subtitle	string"Launch videos, written in React" One-line subtitle under the app name
developer	string"remocn Labs" Developer or publisher name
iconSrc	string— App icon image URL; a built-in mark shows when omitted
rating	number4.8 Average star rating, e.g. 4.8
ratingCount	string"12K" Rating count label, e.g. '12K'
ageRating	string"4+" Age rating label in the info strip
category	string"Developer Tools" Category label in the info strip
chartRank	number3 Chart position shown in the info strip
award	string \| nullnull Optional award label; null hides it
screenshots	AppScreenshot[]DEFAULT_SHOTS Screenshot cards, each with a title and optional image src
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
theme	"light" \| "dark""light" Light or dark palette
lines	string[]— Four captions beside the phone, one per beat
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

appNamestring
App name next to the icon
Default"remocn"
subtitlestring
One-line subtitle under the app name
Default"Launch videos, written in React"
developerstring
Developer or publisher name
Default"remocn Labs"
iconSrcstring
App icon image URL; a built-in mark shows when omitted
ratingnumber
Average star rating, e.g. 4.8
Default4.8
ratingCountstring
Rating count label, e.g. '12K'
Default"12K"
ageRatingstring
Age rating label in the info strip
Default"4+"
categorystring
Category label in the info strip
Default"Developer Tools"
chartRanknumber
Chart position shown in the info strip
Default3
awardstring | null
Optional award label; null hides it
Defaultnull
screenshotsAppScreenshot[]
Screenshot cards, each with a title and optional image src
DefaultDEFAULT_SHOTS
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
theme"light" | "dark"
Light or dark palette
Default"light"
linesstring[]
Four captions beside the phone, one per beat
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters