#MarkStageProvider

import { MarkStageProvider, StagedMark, COLOR_IDS } from '@aora-bot/react';

export default function Demo() {
  return (
    <MarkStageProvider>
      <div className="site-demo">
        {Array.from({ length: 44 }, (_, i) => (
          <StagedMark
            key={i}
            shape="pebble"
            state={i % 3 === 0 ? 'happy' : i % 3 === 1 ? 'thinking' : 'idle'}
            color={COLOR_IDS[i % COLOR_IDS.length]}
            sizePx={34}
          />
        ))}
      </div>
    </MarkStageProvider>
  );
}

import { useRef, type CSSProperties } from 'react';
import { MarkStageProvider, StagedMark, type CharacterHandle } from '@aora-bot/react';

export default function Demo() {
  const own = useRef<CharacterHandle>(null);
  const mirror = useRef<CharacterHandle>(null);
  return (
    <div className="site-demo site-demo--center">
      <MarkStageProvider>
        <StagedMark
          shape="hex"
          color="cyan"
          state="happy"
          sizePx={72}
          style={{ '--aora-fg': '#0ea5e9' } as CSSProperties}
        />
        <StagedMark ref={mirror} shape="hex" color="cyan" state="happy" sizePx={72} />
      </MarkStageProvider>
      <StagedMark ref={own} shape="hex" color="cyan" state="happy" sizePx={72} />
      <button className="site-btn" onClick={() => (mirror.current ?? own.current)?.bounce()}>
        bounce
      </button>
    </div>
  );
}