Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · AniCanon™

Stages

A job's stages in order, while it runs and after: done ones ticked with the time they took, the running one with AniCanon™'s loader, the rest numbered.

@anicanon/sakuga/anicanonkitv1.0Used onWeb · iOS · AndroidFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

Stages for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

Stages for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for
A job's stages in order, while it runs and after: done ones with the time they took, the running one with AniCanon™'s loader, a failed one with why ("Designing the first look").
Not for

Guidelines

  • A failed stage is ringed and says why in its text, in the creator's words; the stages after it wait.
  • size="sm" on a phone.
  • Say what each stage makes ("Designing the first look"), never the model or the provider.
StagesExample.jsxReact
import { Stages } from '@anicanon/sakuga/anicanonkit';

const items = [
  {
    title: 'Face locked in',
    text: 'Studied the reference and drew the face sheet',
    state: 'done',
    time: '0:52',
  },
  {
    title: 'Designing the first look',
    text: 'Putting together the gray pinstripe dress',
    state: 'running',
    time: '0:31',
  },
  {
    title: 'Composing the identity sheet',
    text: 'The card every scene draws Kiko from',
    state: 'todo',
  },
];

export default function StagesExample() {
  return <Stages items={items} />;
}

PropsStagesProps

itemsrequired
{ title: string; text?: string; state?: 'done' | 'running' | 'todo' | 'failed'; time?: string; }[]
size
'md' | 'sm'
label
string
className
string
StagesExample.swiftiOS · coming soon
StagesExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Space and shape

stages-item-mark-icon-size
icon-size-sm
16px
stages-gap
gap-lg
12px
stages-item-gap
gap-lg
12px
stages-item-padding
inset-lg
16px
stages-item-radius
radius-lg
16px
stages-item-inset-ring-width
line-hairline
1px
stages-item-mark-size
its own value
32px
stages-item-mark-radius
radius-full
9999px
stages-item-mark-inset-ring-width
line-strong
2px
stages-item-running-inset-ring-width
line-strong
2px
stages-item-mark-running-inset-ring-width
line-strong
2px
stages-item-failed-inset-ring-width
line-strong
2px
stages-item-mark-failed-inset-ring-width
line-strong
2px
stages-item-words-gap
gap-2xs
2px
stages-gap-sm
gap-md
8px
stages-item-padding-y-sm
inset-md
12px
stages-item-padding-x-sm
inset-md
12px
stages-item-mark-size-sm
its own value
28px
stages-item-mark-radius-sm
radius-full
9999px
stages-item-sel-focus-outline-offset
focus-ring-offset
3px

Type

stages-font-family
font-sans
Funnel Sans
stages-item-mark-font
text-caption-strong
600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
stages-item-words-b-font
text-label
600 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
stages-item-words-span-font
text-caption
500 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
stages-item-time-font
text-caption-strong
600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
stages-item-font-size-sm
text-small-size
12px
Aa
stages-item-line-height-sm
text-small-line-height
16px

Motion

stages-item-mark-duration
motion-base
240ms
stages-item-mark-easing
ease-standard
cubic-bezier(0.2, 0, 0, 1)
stages-item-mark-settle-animation
motion-settle
sk-settle 240ms cubic-bezier(0, 0, 0, 1)

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
Not focusable; an ordered list named by label (default "Stages"), each stage read as its title, with "done" or "failed" where it applies, then its text and time. The running one is marked "current step", and its loader says the title once when it appears.
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.