Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Maki

MakiTurn

MakiTurn is one thing Maki says in the chat, under Maki's face and name.

@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

MakiTurn 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

MakiTurn 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
One thing Maki says in the chat, under Maki's face and name: plain sentences, with any cards inside it.
Not for
  • The person's own messageChatMessage
  • Something Maki proposes or reports, such as a story editMakiCard
  • A check pinned to work on a sheetSlip

Guidelines

  • Plain sentences. Quote the exact words an issue collides with in a <q>. Cards (MakiCard) go inside the turn.
  • avatarSize grows the mascot for a moment worth marking (a fix accepted).
MakiTurnExample.jsxReact
import { MakiTurn } from '@anicanon/sakuga/anicanonkit';

const MAKI = '/art/maki-avatar.png';

export default function MakiTurnExample() {
  return (
    <MakiTurn avatar={MAKI}>
      <p>Sé station has been burning since Fire at Sé.</p>
    </MakiTurn>
  );
}

PropsMakiTurnProps

avatarrequired
string
childrenrequired
ReactNode
avatarSize
number
name
string
className
string
MakiTurnExample.swiftiOS · coming soon
MakiTurnExample.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

maki-turn-gap
gap-md
8px
maki-turn-img-size
its own value
28px
maki-turn-say-gap
gap-md
8px
maki-turn-say-q-padding-y
inset-sm
8px
maki-turn-say-q-padding-x
inset-sm
8px
maki-turn-say-q-radius
radius-sm
8px

Type

maki-turn-name-font
text-micro
700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
maki-turn-say-p-font
text-body
400 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
maki-turn-say-q-font
text-caption
500 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

maki-turn-rise-in-animation
motion-rise
sk-rise-in 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 itself; read as the speaker's name ("Maki", or name) followed by what Maki says, with the avatar hidden. Any controls in the turn take focus in order.
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.