Theme

Sound

Jump to a component

Core · Media

Caption

Caption is one subtitle line drawn over video.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

Caption 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

Caption 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 subtitle line over an episode or a short, at most two lines, centred above the player controls.
Not for: The quiet line that explains a heading or a fieldText
The caption tracks of a cut in the editorTimeline
A planned line with its speaker and translationDialogueLine

Guidelines

On by default for every episode and short; the viewer turns it off with the captions toggle.
size="lg" (24px) in the desktop player, md (16px) on phone and in shorts.
At most two lines, centred, above the player controls. The lines balance, so a two-line subtitle splits evenly instead of leaving one word on the second line.

CaptionExample.jsxReact

import { Caption } from '@anicanon/sakuga/ui';

export default function CaptionExample() {
  return (
    <>
      <img
        src="/art/eba-s1e1.webp"
        alt=""
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          objectFit: 'cover',
        }}
      />
      <Caption>To the people who did what I couldn’t do alone.</Caption>
    </>
  );
}

Props`CaptionProps`

childrenrequired

ReactNode

size

'lg' | 'md'

className

string

CaptionExample.swiftiOS · coming soon

CaptionExample.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

caption-bgCaption: box behind a subtitle line.

bg-scrimblack-a72rgba(0,0,0,0.72)

caption-fgCaption: subtitle glyphs.

text-on-medianeutral-0#ffffff

Space and shape

caption-radius

radius-xs

4px

caption-padding-y-lg

inset-xs

4px

caption-padding-x-lg

inset-md

12px

caption-padding-y-md

inset-2xs

2px

caption-padding-x-md

inset-sm

8px

Type

caption-font-family

font-sans

Funnel Sans

caption-font-weight

weight-strong

600

caption-font-size-lg

text-subtitle-size

24px

caption-line-height-lg

text-subtitle-line-height

32px

caption-font-size-md

text-subtitle-sm-size

16px

caption-line-height-md

text-subtitle-sm-line-height

22px