# Phone Scroll
URL: https://remocn.dev/docs/product-scenes/phone-scroll

A phone rises and flicks a tall app screen to each scroll stop while a headline slides in beside it.

- Install: `npx shadcn@latest add @remocn/phone-scroll`
- Vibe: clean
- Natural length: 86f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/phone-scroll
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PhoneScroll } from "@/components/remocn/phone-scroll";

const PhoneScrollScene = () => (
  <PhoneScroll
    stops={[930]}
    label="Find your next stay in two taps."
    labelAccent="two taps."
  />
);

export const RemotionRoot = () => (
  <Composition
    id="PhoneScroll"
    component={PhoneScrollScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A phone springs up beside a headline, then flicks its tall screen to each scroll stop with motion blur and momentum while a touch dot marks the press. Pass `src` with a tall screenshot, or `children` with your own 393pt-wide screen (omit both for a built-in sample feed), `stops` for the scroll offsets, and `label` plus `labelAccent` for the headline. 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `src` | `string` | — | Tall screenshot rendered 393pt wide and scrolled |
| `stops` | `number[]` | `[930]` | Scroll offsets in screen points; one flick per stop |
| `label` | `string` | `"Find your next stay in two taps."` | Headline beside the phone; empty string hides it |
| `labelAccent` | `string` | `"two taps."` | Trailing part of the label set in italic serif |
| `eyebrow` | `string` | `"remocn for iOS"` | Small line above the headline |
| `children` | `React.ReactNode` | — | Custom screen content, 393pt wide, scrolled like the screenshot |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A mobile product beat showing a long feed or page being scrolled, with a one-line promise beside the phone.
- A square or vertical clip where a tall screenshot passed as `src` needs to scroll naturally.
- A quick hero beat for an app landing section where `label` carries the value proposition.

## Don't use when
- You want three phones for a notification, a feed and a profile — use `phone-trio`.
- The story is install and Open rather than scrolling — use `app-store-listing`.
- You need the camera to tour regions of a desktop screenshot — use `screenshot-tour`.