Grid to App

A product grid expands into a store admin app with sidebar and product catalogue

Installation

$ pnpm dlx shadcn@latest add @remocn/grid-to-app

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GridToApp } from "@/components/remocn/grid-to-app";
 
const GridToAppScene = () => (
  <GridToApp storeName="Hearth & Co" pageTitle="Catalogue" accent="#ff6a2b" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GridToApp"
    component={GridToAppScene}
    durationInFrames={132}
    fps={30}
    width={1280}
    height={720}
  />
);

Two rows of product tiles pull back into a store admin window with a sidebar, header and a product table. The product count rolls up, then the Publish button presses and flips to Store live. Pass storeName, pageTitle, products (name and price) 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.

Props8

Prop	Type	Default
theme	"dark" \| "light""dark" Dark or light admin and background styling.
accent	string"#ff6a2b" Accent color for the Publish button and highlights.
storeName	string"Studio Goods" Store name shown at the top of the sidebar.
pageTitle	string"Products" Heading of the catalogue page.
images	string[]— Product image URLs, one per product, in order.
products	{ name: string; price: string }[]— Products as name and price pairs, shown in tiles and table.
ground	GshPresetId— Preset id for the shader background.
groundParams	Partial<GradientParams>— Overrides for the shader background parameters.

theme"dark" | "light"
Dark or light admin and background styling.
Default"dark"
accentstring
Accent color for the Publish button and highlights.
Default"#ff6a2b"
storeNamestring
Store name shown at the top of the sidebar.
Default"Studio Goods"
pageTitlestring
Heading of the catalogue page.
Default"Products"
imagesstring[]
Product image URLs, one per product, in order.
products{ name: string; price: string }[]
Products as name and price pairs, shown in tiles and table.
groundGshPresetId
Preset id for the shader background.
groundParamsPartial<GradientParams>
Overrides for the shader background parameters.