Theme

Sound

Jump to a component

AniCanonKit · Manga

IssueStrip

IssueStrip shows the issue as the reader turns it: the cover alone, then the content pages paired into spreads, with a rule at every page turn.

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

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

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

Android

Web only

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

Use it for: The issue as the reader turns it, in Layout and under the editor's canvas: the cover alone, then the pages in spreads with a rule at every page turn.
Not for: Proof, every page with how far it has comePageWall
One page on its ownMangaPage
A page's panels, lettering and sound effectsLayerStrip
An issue on a shelfMediaCard

Guidelines

spreads is a list of spreads, each a list of MangaPage props. Mark the open page selected.
selectSpread (Spread mode) rings the whole spread that holds the selected page instead of the page.
size is the page width: 56 in Layout, 30 or 18 under the editor's canvas. label names the strip; false hides it.
It is a map, not a reader: it shows where a page sits and where the turns fall. Page turns matter to the story, so never hide them.

IssueStripExample.jsxReact

import { IssueStrip } from '@anicanon/sakuga/anicanonkit';

const spreads = [
  [{ image: '/art/bad-memories-the-winter-p00.webp', label: 'Front cover' }],
  [
    { image: '/art/bad-memories-the-winter-bruce.webp', label: 'Page 3' },
    { image: '/art/bad-memories-the-winter-p04.webp', label: 'Page 4' },
  ],
  [
    {
      image: '/art/bad-memories-the-winter-alarm.webp',
      label: 'Page 5',
      selected: true,
    },
    {
      frames: [
        { x: 4, y: 4, w: 92, h: 30 },
        { x: 4, y: 36, w: 44, h: 28, state: 'drawing' },
        { x: 52, y: 36, w: 44, h: 28 },
        { x: 4, y: 66, w: 92, h: 30 },
      ],
      label: 'Page 6, drawing',
    },
  ],
  [
    {
      frames: [
        { x: 4, y: 4, w: 56, h: 44 },
        { x: 62, y: 4, w: 34, h: 44 },
        { x: 4, y: 50, w: 92, h: 46 },
      ],
      label: 'Page 7, laid out',
    },
    {
      frames: [
        { x: 4, y: 4, w: 92, h: 22 },
        { x: 4, y: 28, w: 44, h: 34 },
        { x: 52, y: 28, w: 44, h: 34 },
        { x: 4, y: 64, w: 30, h: 32 },
        { x: 36, y: 64, w: 60, h: 32 },
      ],
      label: 'Page 8, laid out',
    },
  ],
  [
    {
      frames: [
        { x: 4, y: 4, w: 92, h: 58 },
        { x: 4, y: 64, w: 92, h: 32 },
      ],
      label: 'Page 9, laid out',
    },
    { blank: true, label: 'Back cover, not made' },
  ],
];

export default function IssueStripExample() {
  return <IssueStrip size={30} spreads={spreads} />;
}

Props`IssueStripProps`

spreadsrequired

MangaPageProps[][]

size

number

Page width; 30 in the editor, 56 in Layout.

selectSpread

boolean

A selected page selects its whole spread (Spread mode).

label

string | false

The header; false hides it.

turnLabel

string

className

string

Types

interface MangaPageProps {
    /** The area an edit redraws, in percent. Slot: slot="action" beside the caption. */
    mask?: Area;
    maskLabel?: string;
    width?: number;
    /** Height over width; defaults to the B5 trim. */
    ratio?: number;
    image?: string;
    frames?: MangaFrame[];
    numbers?: boolean;
    selected?: boolean;
    /** A page not made yet, e.g. the back cover. */
    blank?: boolean;
    /** One item selected on the page, with handles, in percent. */
    selection?: Area;
    selectionLabel?: string;
    label?: string;
    alt?: string;
    title?: string;
    meta?: string;
    /** The caption's alignment: the right page of a spread reads from its outer edge. */
    align?: 'end';
    children?: ReactNode;
    className?: string;
}

IssueStripExample.swiftiOS · coming soon

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

istrip-turnIssueStrip and PageWall: a page turn.

border-controlshade-a52rgba(11,10,16,0.52)

border-controlwhite-a45rgba(255,255,255,0.45)

istrip-textIssueStrip: its label and key.

text-mutedneutral-600#5c5b67

text-mutedneutral-400#a3a3a7

istrip-selectedIssueStrip: the selected spread in Spread mode.

accentcamellia-600#c2335f

accentcamellia-400#f4779f

Space and shape

istrip-gap

gap-md

8px

istrip-key-gap

gap-sm

6px

istrip-key-before-width

line-hairline

1px

istrip-key-before-height

its own value

12px

istrip-row-gap

gap-md

8px

istrip-spread-gap

gap-2xs

2px

istrip-spread-radius

radius-xs

4px

istrip-spread-selected-ring-width

line-strong

2px

istrip-turn-width

line-hairline

1px

istrip-turn-margin-y

gap-sm

6px

istrip-turn-radius

radius-xs

4px

istrip-forced-selected-width

line-strong

2px

Type

istrip-key-font

text-micro

700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

istrip-spread-duration

motion-base

240ms

istrip-spread-easing

ease-standard

cubic-bezier(0.2, 0, 0, 1)