Theme
Sound
Jump to a component
AniCanonKit · Productions
Monitor
Monitor is the editor's picture: the frame being edited, with its corner labels, the guides and the region an edit works on.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Web only
Monitor is made for the web, and isn’t part of Sakuga for iOS yet.
Android
Web only
Monitor is made for the web, and isn’t part of Sakuga for Android yet.
- Not for
- A take shown in a list or a stripThumb
Guidelines
imageis the picture (imageStyleto place it,altto name it);fit="contain"shows all of it.labelssit in one corner andlabelsEndin the other;guidesdraw title-safe or an effect's area (accentfor the selected one);regionthe area an edit works on, with its label.centeredputs a frame in the middle;filltakes the column's height (a manga page); otherwiseheightsets it.- Nothing floats over the picture except the labels and what you are editing on it.
import { Monitor } from '@anicanon/sakuga/anicanonkit';
export default function MonitorExample() {
return (
<Monitor
image="/art/eba-cinema.webp"
labels={['2C · take 3', '2:41 + 04f']}
height={180}
/>
);
}PropsMonitorProps
guides{ x: number; y: number; w: number; h: number; accent?: boolean; }[]Title-safe or an effect's area, in percent; accent for the selected one.
region{ x: number; y: number; w: number; h: number; label?: string; }The area an edit works on, with its label.
labelsEndstring[]Labels in the other corner.
fillbooleanTakes the column's height instead of
height.imagestringimageStylestringCSS, e.g. "object-position:50% 40%".
altstringlabelsstring[]Corner labels: the cut and the timecode.
heightnumbercenteredbooleanA 9:16 frame in the middle.
fit'cover' | 'contain'contain: the whole picture, not filling the frame.
childrenReactNodeclassNamestringEach 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
monitor-guide-accentMonitor: the guide of what is selected (an effect's area).accentcamellia-600#c2335faccentcamellia-400#f4779fmonitor-regionMonitor: the region an edit works on.accentcamellia-600#c2335faccentcamellia-400#f4779fmonitor-region-fgMonitor: the region's label.on-accentneutral-0#ffffffon-accentneutral-925#0b0a10monitor-guideMonitor: a dashed guide over the picture (title-safe, an area).white-a62rgba(255,255,255,0.62)white-a62rgba(255,255,255,0.62)Space and shape
monitor-radiusradius-md12px
monitor-hud-leftinset-md12px
monitor-hud-topinset-sm8px
monitor-hud-gapgap-md8px
monitor-hud-span-padding-yinset-2xs2px
monitor-hud-span-padding-xinset-sm8px
monitor-hud-span-radiusradius-xs4px
monitor-guide-border-widthline-hairline1px
monitor-guide-radiusradius-full9999px
monitor-hud-end-rightinset-md12px
monitor-region-border-widthline-hairline1px
monitor-region-radiusradius-xs4px
monitor-region-b-leftits own value
calc(-1 * 2px)
monitor-region-b-margin-bottomgap-xs4px
monitor-region-b-padding-yinset-2xs2px
monitor-region-b-padding-xinset-xs4px
monitor-region-b-radiusradius-xs4px
monitor-fill-gapgap-2xs2px
Type
monitor-hud-fonttext-small-strong600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
monitor-region-b-fonttext-micro700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
Checked 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
- The picture is an image named by
alt(decorative without it); the labels are read as text; the guides are hidden, and the region is read by its label. - 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.