# Phone Trio
URL: https://remocn.dev/docs/product-scenes/phone-trio

Three phones rise side by side: a profile, a scrolling photo feed and a banner announcing the portfolio is live.

- Install: `npx shadcn@latest add @remocn/phone-trio`
- Vibe: premium
- Natural length: 104f @ 30fps

## Installation

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

## Usage

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

const PhoneTrioScene = () => (
  <PhoneTrio
    name="Ines Marlow"
    role="Motion designer"
    headline="Driven by motion, obsessed with the"
    accentWord="seamless."
  />
);

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

Three phones rise one after another: a profile card with `name`, `handle`, `role` and `skills`, a photo feed that scrolls, and a third that receives a `liveLabel` banner as the trio fans forward. The headline joins `headline` with an accent-colored `accentWord`. Ships dark by default and light. The default `images` are files that only exist in the Remocn repo, so pass your own photo URLs.

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 |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette |
| `accent` | `string` | `"#ff5a36"` | Accent color for highlights, buttons and progress |
| `name` | `string` | `"Ines Marlow"` | Profile name on the first phone |
| `handle` | `string` | `"ines.marlow"` | Profile handle under the name |
| `role` | `string` | `"Motion designer"` | Role line under the name |
| `headline` | `string` | `"Driven by motion, obsessed with the"` | Headline text before the accent word |
| `accentWord` | `string` | `"seamless."` | Last word of the headline, set in the accent color |
| `images` | `string[]` | — | Photo URLs for the feed; defaults exist only in the Remocn repo |
| `skills` | `string[]` | `["Motion", "Sound", "Web"]` | Skill chips shown on the profile |
| `liveLabel` | `string` | `"Portfolio is live"` | Text of the banner that drops in near the end |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A portfolio, creator or personal-brand launch that needs profile, feed and notification in one frame.
- A premium editorial hero with a bold headline and one accent-colored word.
- A reveal that ends on a we-are-live banner dropping onto a phone.

## Don't use when
- You only need one phone and a long scrolling screen — use `phone-scroll`.
- The story is install and download progress — use `app-store-listing`.
- The product is a desktop web app, not mobile — use `url-bar-cta`.