BulletList

The BulletList component formats lists with customizable bullet markers and interactive row selection.

import { BulletList } from "stageroutine";

const list = BulletList([
  "Item 1",
  ["Sub-item A", "Sub-item B"],
  "Item 2",
], {
  position: [80, 45],
  origin: "center",
});

Pass nested arrays to create indented sub-items. Items can also be objects with per-item marker, markerColor, color, className, style, and theme.

Per-Item Properties

Each row can override list-level properties.

import { BulletList } from "stageroutine";

// Small helpers that build pre-styled items.
const pro = (text: string) => ({ text, marker: "+", markerColor: "#22c55e" });
const con = (text: string) => ({ text, marker: "-", markerColor: "#ef4444" });

const list = BulletList([
  pro("Fast startup"),
  pro("Tiny bundle size"),
  con("More memory usage"),
  con("Steeper learning curve"),
], {
  position: [80, 45],
  origin: "center",
});

Any item without a marker falls back to the list-level marker.

Item Selection

Clicking or dragging bullet items interactively highlights selected rows and dims unselected items.

Reveal

Items are visible by default. Pass { itemsHidden: true } to opt into reveal animations:

const list = BulletList([
  "First bullet point",
  "Second bullet point",
  "Third bullet point",
], { itemsHidden: true });

// Continuous staggered reveal in a single step
list.reveal();

// Or reveal step-by-step across presenter clicks
list.items.forEach((item) => {
  item.to({ opacity: 1, x: 0 }).duration(0.4);
  stage.pause();
});

API Reference

For configuration options, see the BulletList reference.