# Ride Tracking
URL: https://remocn.dev/docs/product-scenes/ride-tracking

A phone map draws a route, the car drives it while the ETA falls, and an arrival check lands.

- Install: `npx shadcn@latest add @remocn/ride-tracking`
- Vibe: clean
- Natural length: 244f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ride-tracking
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RideTracking } from "@/components/remocn/ride-tracking";

const RideTrackingScene = () => (
  <RideTracking
    eta={4}
    pickup="214 Linden St"
    lines={["Book it in one tap.", "Watch it come to you.", "Your ride is here."]}
  />
);

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

A phone shows a map where the route draws, a trip card slides up with the driver and car, and the car follows the route while the ETA counts down from `eta` minutes. It ends on an arrival check. Pass `driver` (name, rating, car, plate), `pickup` and `eta`; `lines` are the three 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `driver` | `RideDriver` | `DEFAULT_DRIVER` | Driver card: name, initials, rating, trips, car and plate |
| `eta` | `number` | `4` | Starting ETA in minutes; counts down to arrival |
| `pickup` | `string` | `"214 Linden St"` | Pickup street shown on the pin and in the sheet |
| `accent` | `string` | `"#276EF1"` | 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 |
| `lines` | `[string, string, string]` | — | Three captions beside the phone: route, drive, arrival |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A mobility, delivery or logistics launch where the beat is watch-it-come-to-you.
- A vertical cut with three captions: book, track, arrive.
- A scene where an ETA counting down is the hook.

## Don't use when
- You want a lock-screen countdown instead of a map — use `live-activity`.
- You want a payment confirmation with a receipt — use `money-send`.
- You want a store listing and install flow — use `app-store-listing`.