Cart Add

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

Installation

$ pnpm dlx 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.

Props21

Prop	Type	Default
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	number4.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	number0 Index of the color selected at the start.
pickColor	number1 Index of the color the cursor picks.
startSize	number1 Index of the size selected at the start.
pickSize	number2 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	number75 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	number1 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.

brandstring
Brand name shown in the header and on the product.
Default"fernway"
productstring
Product name shown on the page and in the cart.
Default"Summit Bottle"
categorystring
Small category label above the product name.
Default"Drinkware"
descriptionstring
Product description paragraph shown on the page.
Default"Double-wall steel keeps drinks cold for 24 hours. Leak-proof cap, powder-coat finish that never sweats."
ratingnumber
Rating shown next to the review count.
Default4.8
reviewsstring
Review count text, for example 2,184.
Default"2,184"
colorsCartColor[]
Color options as name and swatch pairs.
DefaultDEFAULT_COLORS
sizesCartSize[]
Size options with a label and numeric price each.
DefaultDEFAULT_SIZES
startColornumber
Index of the color selected at the start.
Default0
pickColornumber
Index of the color the cursor picks.
Default1
startSizenumber
Index of the size selected at the start.
Default1
pickSizenumber
Index of the size the cursor picks.
Default2
imagesstring[]
Product image URLs, one per color. Defaults to a drawn illustration.
currencystring
Currency symbol placed before prices.
Default"$"
freeShippingAtnumber
Order total that unlocks free shipping in the drawer bar.
Default75
theme"light" | "dark"
Light or dark page and drawer styling.
Default"light"
accentstring
Accent color for selection, buttons and the progress bar.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
groundGshPresetId
Preset id for the shader background.
groundParamsPartial<GradientParams>
Overrides for the shader background parameters.
urlstring
Declared in the props type but not used by the component.