Button to Card

A button expands into a store card row with product images, prices and status

Installation

$ pnpm dlx shadcn@latest add @remocn/button-to-card

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ButtonToCard } from "@/components/remocn/button-to-card";
 
const ButtonToCardScene = () => (
  <ButtonToCard
    buttonLabel="Add a product"
    name="Linen throw"
    price="$72.00"
    storeName="Hearth & Co"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ButtonToCard"
    component={ButtonToCardScene}
    durationInFrames={162}
    fps={30}
    width={1280}
    height={720}
  />
);

A pill button presses and morphs into a product form that types the name and price. A cursor drags an image into the media slot, saves, and the card shrinks into a row of product tiles with a store header and a Live status. Pass buttonLabel, name, price, others (the other tiles), storeName, and your own images, because the default images use staticFile(...) paths that only exist in the Remocn repo. The theme prop ships dark and light.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props10

Prop	Type	Default
theme	"dark" \| "light""dark" Dark or light card and background styling.
accent	string"#f2552c" Accent color for the button and status highlights.
buttonLabel	string"Add an item" Text on the starting pill button.
name	string"Ceramic pitcher" Name typed into the new product card.
price	string"$48.00" Price typed into the new product card, with currency symbol.
images	string[]— Product image URLs: the new item's image first, then the others.
others	{ name: string; price: string }[]— Other products shown beside the new one, as name and price pairs.
storeName	string"Studio Goods" Store name shown in the header and catalogue title.
ground	GshPresetId— Preset id for the shader background.
groundParams	Partial<GradientParams>— Overrides for the shader background parameters.

theme"dark" | "light"
Dark or light card and background styling.
Default"dark"
accentstring
Accent color for the button and status highlights.
Default"#f2552c"
buttonLabelstring
Text on the starting pill button.
Default"Add an item"
namestring
Name typed into the new product card.
Default"Ceramic pitcher"
pricestring
Price typed into the new product card, with currency symbol.
Default"$48.00"
imagesstring[]
Product image URLs: the new item's image first, then the others.
others{ name: string; price: string }[]
Other products shown beside the new one, as name and price pairs.
storeNamestring
Store name shown in the header and catalogue title.
Default"Studio Goods"
groundGshPresetId
Preset id for the shader background.
groundParamsPartial<GradientParams>
Overrides for the shader background parameters.