Sheet Formula

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

Installation

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

Props12

Prop	Type	Default
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	number1 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

rowsSheetRow[]
Data rows: month, signups, paid and revenue
DefaultDEFAULT_ROWS
formulastring
Formula typed into the first new cell; references use columns A to D
Default"=D2/C2"
formulaHeaderstring
Header of the formula column
Default"ARPU"
valueFormat"currency" | "percent" | "number"
Format of computed values: currency, percent or number
Default"currency"
titlestring
Sheet title in the window
Default"Signups 2026"
chartTitlestring
Title of the chart that drops in
Default"ARPU by month"
theme"light" | "dark"
Light or dark palette
Default"light"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
lines[string, string, string]
Three captions beside the sheet: type, fill, chart
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters