Ride Tracking
A phone map draws a route, the car drives it while the ETA falls, and an arrival check lands.
$ pnpm dlx shadcn@latest add @remocn/ride-trackingUsage
// 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.
Props9
| Prop | Type | Default |
|---|---|---|
| driver | RideDriverDEFAULT_DRIVER Driver card: name, initials, rating, trips, car and plate | |
| eta | number4 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 | number1 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 | |
- driverRideDriver
Driver card: name, initials, rating, trips, car and plate
Default
DEFAULT_DRIVER - etanumber
Starting ETA in minutes; counts down to arrival
Default
4 - pickupstring
Pickup street shown on the pin and in the sheet
Default
"214 Linden St" - accentstring
Accent color for highlights, buttons and progress
Default
"#276EF1" - speednumber
Playback speed multiplier for the whole timeline
Default
1 - theme"light" | "dark"
Light or dark palette
Default
"light" - lines[string, string, string]
Three captions beside the phone: route, drive, arrival
- groundGshPresetId
gradients.sh preset id for the backdrop shader
- groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters