# Sheet Formula
URL: https://remocn.dev/docs/product-scenes/sheet-formula

A spreadsheet types a formula, fills it down a column, then drops a bar chart onto the sheet.

- Install: `npx shadcn@latest add @remocn/sheet-formula`
- Vibe: data
- Natural length: 270f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/sheet-formula
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SheetFormula } from "@/components/remocn/sheet-formula";

const SheetFormulaScene = () => (
  <SheetFormula
    formula="=D2/C2"
    formulaHeader="ARPU"
    valueFormat="currency"
    chartTitle="ARPU by month"
  />
);

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

A sheet window types `formula` into the first cell of a new column, the cursor drags the fill handle to copy it down every row, then the chart button drops an animated bar chart of the results. Pass `rows` (month, signups, paid, revenue), `formula` (references use columns A to D from row 2), `formulaHeader`, `valueFormat` and `chartTitle`; `lines` are three captions beside the sheet. 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 |
|---|---|---|---|
| `rows` | `SheetRow[]` | `DEFAULT_ROWS` | Data rows: month, signups, paid and revenue |
| `formula` | `string` | `"=D2/C2"` | Formula typed into the first new cell; references use columns A to D |
| `formulaHeader` | `string` | `"ARPU"` | Header of the formula column |
| `valueFormat` | `"currency" \| "percent" \| "number"` | `"currency"` | Format of computed values: currency, percent or number |
| `title` | `string` | `"Signups 2026"` | Sheet title in the window |
| `chartTitle` | `string` | `"ARPU by month"` | Title of the chart that drops in |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `lines` | `[string, string, string]` | — | Three captions beside the sheet: type, fill, chart |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A spreadsheet, analytics or no-code data product where type-once, fill-down, chart-it is the pitch.
- A data beat that goes from raw columns to a chart in three clear steps.
- A vertical cut with three captions matching type, fill and chart.

## Don't use when
- The chart is the star and no spreadsheet is needed — use `animated-bar-chart`.
- You want a filtered table with bulk actions — use `table-filter`.
- You want a dashboard with live stats and a feed — use `live-dashboard`.