Jump to a component
AniCanonKit · Productions
Timesheet
Timesheet is what gets generated for a cut, on a frame grid (24 a second, a heavier tick each second): each video's bracket, the key frames it starts and ends on, and one line per video (where it opens, how it continues). A key sits on a rail above the frames, its number centred in its badge, with a hairline down to its exact frame, which may fall between the ticks.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Web only
Timesheet is made for the web, and isn’t part of Sakuga for iOS yet.
Android
Web only
Timesheet is made for the web, and isn’t part of Sakuga for Android yet.
- Use it for
- What gets generated for a cut, on a frame grid: each video's bracket, the key frames it starts and ends on, and one line per video.
- Not for
- The cut's tracks under the previewTimeline
- The whole cut at a glanceProgramBar
- Camera and timing notation in a lineShorthand
- A cut's in and out frames while trimmingTrimFrames
import { Timesheet } from '@anicanon/sakuga/anicanonkit';
export default function TimesheetExample() {
return (
<Timesheet
seconds={9}
note="Keys are the frames a video starts and ends on"
spans={[
{ start: 0, end: 120, label: 'Video 3', detail: 'opens on the board' },
{
start: 120,
end: 216,
label: 'Video 4',
detail: 'continues from key 2',
},
]}
keys={[
{ at: 10, label: '1' },
{ at: 120, label: '2' },
{ at: 206, label: '3' },
]}
/>
);
}PropsTimesheetProps
secondsrequirednumberspansrequired{ start: number; end: number; label: string; detail?: string; }[]fpsnumberlabelstringnotestringkeys{ at: number; label: string; }[]classNamestringEach 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
tsheet-bgTimesheet: the frame grid.bg-canvasneutral-50#f6f6f8bg-canvasneutral-950#07070atsheet-tickTimesheet: a quarter-second tick.border-hairlineshade-a08rgba(11,10,16,0.08)border-hairlinewhite-a06rgba(255,255,255,0.06)tsheet-tick-secondTimesheet: a second.border-controlshade-a52rgba(11,10,16,0.52)border-controlwhite-a45rgba(255,255,255,0.45)tsheet-spanTimesheet: a video's bracket.text-secondaryneutral-800#2e2d36text-secondaryneutral-200#dcdcdetsheet-key-bgTimesheet: a key frame.text-primaryneutral-925#0b0a10text-primaryneutral-0#fffffftsheet-key-fgTimesheet: key number.bg-canvasneutral-50#f6f6f8bg-canvasneutral-950#07070atsheet-metaTimesheet: labels on top.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7tsheet-labelTimesheet: span labels.text-secondaryneutral-800#2e2d36text-secondaryneutral-200#dcdcdetsheet-label-strongTimesheet: span names.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffSpace and shape
tsheet-gapgap-smtsheet-top-gapgap-lgtsheet-grid-heighttsheet-grid-radiusradius-xstsheet-grid-i-widthline-hairlinetsheet-span-toptsheet-span-heighttsheet-span-border-widthline-hairlinetsheet-span-radiusradius-xstsheet-key-topinset-xstsheet-key-sizeicon-size-mdtsheet-key-margin-lefttsheet-key-radiusradius-fulltsheet-labels-span-padding-rightinset-mdtsheet-key-gapgap-xstsheet-key-line-widthline-hairlineType
tsheet-top-fonttext-eyebrowtsheet-top-letter-spacingtracking-capstsheet-top-span-font-weightweight-mediumtsheet-key-fonttext-microtsheet-labels-fonttext-smalltsheet-labels-b-font-weightweight-boldChecked 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 group named by
label(default "Videos to make") whose label, note, key frame labels (with "at frame 24") and each video's line (with "frames 0 to 48") read as text. - 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.