Jump to a component
AniCanonKit · Productions
CutSheet
CutSheet is a scene read the way anime reads it: an ekonte sheet. Rows are numbered cuts; columns are set per view (Plan: C · Picture · Action · Dialogue · Sec · Notes; Make: C · Board · Latest take · Video · Sec; lists: art · title · where it is · story). Rules between rows, no boxes. Rows are CutRows. surface sets the sheet on its page, the paper it is printed on; what follows the sheet (the next scene, a quote) goes in slot="footer" under it.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Web only
CutSheet is made for the web, and isn’t part of Sakuga for iOS yet.
Android
Web only
CutSheet is made for the web, and isn’t part of Sakuga for Android yet.
- Use it for
- A scene read as an ekonte sheet: numbered cuts as rows, columns set per view (Plan, Make, lists), rules between rows and no boxes.
- Not for
- The cut's tracks in timeTimeline
- What gets generated for one cut, on a frame gridTimesheet
- One row of the sheetCutRow
- A plain list of things with a title and a quiet lineList
- The script as it is writtenManuscript
import { CutCell, CutRow, CutSheet } from '@anicanon/sakuga/anicanonkit';
export default function CutSheetExample() {
return (
<CutSheet
columns={[
{ label: 'C', width: '62px' },
{ label: 'Action' },
{ label: 'Sec', width: '70px', align: 'end' },
]}
>
<CutRow>
<div>
<CutCell number="2A" state="approved" />
</div>
<div>The platform before the last train.</div>
<div style={{ textAlign: 'right' }}>8+00</div>
</CutRow>
<CutRow selected>
<div>
<CutCell number="2B" state="waiting" />
</div>
<div>Kiko steps out of the smoke.</div>
<div style={{ textAlign: 'right' }}>10+00</div>
</CutRow>
</CutSheet>
);
}PropsCutSheetProps
columnsrequired{ label: string; width?: string; align?: 'end'; }[]labelstringsurfacebooleanchildrenReactNodeclassNamestringEach token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.
Colour
cutsheet-textCutSheet: cell text.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffcutsheet-headCutSheet: column labels.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7cutsheet-ruleCutSheet: the rule between rows.border-hairlineshade-a08rgba(11,10,16,0.08)border-hairlinewhite-a06rgba(255,255,255,0.06)cutsheet-rule-headCutSheet: the rule under the column labels.border-dividershade-a12rgba(11,10,16,0.12)border-dividerwhite-a12rgba(255,255,255,0.12)cutsheet-selected-bgCutSheet: the selected row.bg-surface-raisedneutral-100#ececf0bg-surface-raisedneutral-875#1a1a21cutsheet-changedCutSheet: the margin bar on a row changed since you last read it.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffcutsheet-page-bgCutSheet on its page: the paper.bg-surfaceneutral-0#ffffffbg-surfaceneutral-900#111117cutsheet-page-edgeCutSheet on its page: the page's edge.border-hairlineshade-a08rgba(11,10,16,0.08)border-hairlinewhite-a06rgba(255,255,255,0.06)Space and shape
cut-check-icon-sizeicon-size-xscutsheet-h-padding-rightinset-lgcutsheet-h-padding-bottominset-smcutsheet-h-border-bottom-widthline-hairlinecutsheet-h-first-padding-leftinset-mdcutsheet-row-padding-yinset-lgcutsheet-row-padding-rightinset-lgcutsheet-row-border-bottom-widthline-hairlinecutsheet-row-first-padding-leftinset-mdcutsheet-row-selected-first-radiusradius-mdcutsheet-row-selected-last-radiusradius-mdcutsheet-row-before-changed-first-insetinset-lgcutsheet-row-before-changed-first-widthline-strongcutsheet-row-before-changed-first-radiusradius-fullcutsheet-page-padding-topinset-xlcutsheet-page-padding-xinset-mdcutsheet-page-padding-bottominset-smcutsheet-page-radiusradius-xlcutsheet-page-inset-ring-widthline-hairlinecutsheet-forced-selected-widthline-strongType
cutsheet-font-familyfont-sanscutsheet-h-fonttext-eyebrowcutsheet-h-letter-spacingtracking-capsMotion
cutsheet-row-durationmotion-fastcutsheet-row-easingease-standardChecked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.
- Result
- No issues found, in light or in dark.
- By design
- Not focusable; a table named by
label, its first row the column headers, then a row per CutRow, and withsurfacethe footer slot follows the table. - Not tested
- The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.