Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Productions

ScreenplayLine

ScreenplayLine is one block of a screenplay inside a ManuscriptSection: slug, action, cue (with extension such as O.S.), paren, dialogue, transition.

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

ScreenplayLine is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

ScreenplayLine is made for the web, and isn’t part of Sakuga for Android yet.

Use it for
One block of a screenplay inside a section of the script: a slugline, action, a cue with its extension (O.S.), a parenthetical, dialogue or a transition.
Not for

Guidelines

  • flagged underlines a line Maki found a story conflict in.
ScreenplayLineExample.jsxReact
import { ScreenplayLine } from '@anicanon/sakuga/anicanonkit';

export default function ScreenplayLineExample() {
  return (
    <>
      <ScreenplayLine type="action" flagged>
        A white room with no windows. A watch lies face down.
      </ScreenplayLine>
      <ScreenplayLine type="cue">Professor</ScreenplayLine>
      <ScreenplayLine type="dialogue">You kept it.</ScreenplayLine>
      <ScreenplayLine type="cue" extension="O.S.">
        Kiko
      </ScreenplayLine>
      <ScreenplayLine type="paren">(not looking at it)</ScreenplayLine>
      <ScreenplayLine type="transition">Cut to:</ScreenplayLine>
    </>
  );
}

PropsScreenplayLineProps

type
'slug' | 'action' | 'cue' | 'paren' | 'dialogue' | 'transition'
extension
string
flagged
boolean
children
ReactNode
The block's words.
className
string
ScreenplayLineExample.swiftiOS · coming soon
ScreenplayLineExample.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.

Colour

screenplay-textScreenplayLine: text.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
screenplay-metaScreenplayLine: parentheticals, extensions and transitions.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7
screenplay-flagScreenplayLine: a line Maki flagged.
accentcamellia-600#c2335f
accentcamellia-400#f4779f

Space and shape

screenplay-max-width
its own value
600px
screenplay-slug-margin-top
gap-xs
4px
screenplay-action-margin-top
gap-2xs
2px
screenplay-action-margin-bottom
gap-sm
6px
screenplay-cue-margin-top
gap-md
8px
screenplay-cue-padding-left
its own value
200px
screenplay-paren-padding-left
its own value
160px
screenplay-paren-max-width
its own value
420px
screenplay-dialogue-padding-left
its own value
108px
screenplay-dialogue-max-width
its own value
468px
screenplay-dialogue-margin-bottom
gap-sm
6px
screenplay-flagged-underline-offset
underline-offset
3px
screenplay-flagged-underline-thickness
line-hairline
1px

Type

screenplay-font
text-body-lg
400 15px/24px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
screenplay-slug-font-weight
weight-bold
700
screenplay-slug-letter-spacing
tracking-caps
.06em
screenplay-cue-font-weight
weight-bold
700
screenplay-cue-letter-spacing
tracking-caps
.06em
screenplay-cue-small-font-weight
weight-strong
600

Motion

screenplay-transition-margin-y
gap-md
8px
screenplay-transition-font-weight
weight-bold
700
screenplay-transition-letter-spacing
tracking-caps
.06em

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; the block reads as plain text, a cue followed by its extension in brackets ("(O.S.)"), and a flagged block ends with "story conflict".
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.