# Cart Add
URL: https://remocn.dev/docs/product-scenes/cart-add

A shop page picks a color and size, then a cart drawer slides in with Checkout

- Install: `npx shadcn@latest add @remocn/cart-add`
- Vibe: clean
- Natural length: 168f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/cart-add
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CartAdd } from "@/components/remocn/cart-add";

const CartAddScene = () => (
  <CartAdd product="Trail Jacket" brand="northline" pickColor={2} accent="#3B5BFD" />
);

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

A product page appears, a cursor picks a color swatch and a size, the price updates, and clicking Add to cart flies a thumbnail into a cart drawer that slides in with a free-shipping bar and Checkout button. Pass `product`, `colors`, `sizes` (label and price), and `images` (one per color) to match your shop. The `theme` prop 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 |
|---|---|---|---|
| `brand` | `string` | `"fernway"` | Brand name shown in the header and on the product. |
| `product` | `string` | `"Summit Bottle"` | Product name shown on the page and in the cart. |
| `category` | `string` | `"Drinkware"` | Small category label above the product name. |
| `description` | `string` | `"Double-wall steel keeps drinks cold for 24 hours. Leak-proof cap, powder-coat finish that never sweats."` | Product description paragraph shown on the page. |
| `rating` | `number` | `4.8` | Rating shown next to the review count. |
| `reviews` | `string` | `"2,184"` | Review count text, for example 2,184. |
| `colors` | `CartColor[]` | `DEFAULT_COLORS` | Color options as name and swatch pairs. |
| `sizes` | `CartSize[]` | `DEFAULT_SIZES` | Size options with a label and numeric price each. |
| `startColor` | `number` | `0` | Index of the color selected at the start. |
| `pickColor` | `number` | `1` | Index of the color the cursor picks. |
| `startSize` | `number` | `1` | Index of the size selected at the start. |
| `pickSize` | `number` | `2` | Index of the size the cursor picks. |
| `images` | `string[]` | — | Product image URLs, one per color. Defaults to a drawn illustration. |
| `currency` | `string` | `"$"` | Currency symbol placed before prices. |
| `freeShippingAt` | `number` | `75` | Order total that unlocks free shipping in the drawer bar. |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark page and drawer styling. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for selection, buttons and the progress bar. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `ground` | `GshPresetId` | — | Preset id for the shader background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader background parameters. |
| `url` | `string` | — | Declared in the props type but not used by the component. |

## Use when
- An e-commerce or storefront-builder launch beat showing a product page turning into a sale.
- A checkout-flow demo that should show variant selection, add to cart and a free-shipping progress bar.
- A product-photo-led ad where your own images swap in per color option.

## Don't use when
- The story starts at payment, not the product page — use `coupon-apply`, which works on an order summary.
- You want a store admin or catalogue view instead of the shopper side — use `grid-to-app`.