ALLPERSONAS / DEVELOPERS

Customization

Fit the face into your product’s layout, style, and accessibility.

Layout and styling

The face fills its host. Set the host’s size, background, border, and classes in your app. SDK classes use the ap- prefix.

assistant.ts

import { createFace } from '@allpersonas/core';

export function mountStyledAssistant(host: HTMLElement) {
  Object.assign(host.style, {
    width: 'min(100%, 360px)',
    height: '400px',
    borderRadius: '24px',
    background: '#fbefee',
    overflow: 'hidden',
  });
  const face = createFace(host, {
    avatar: 'ruby',
    label: 'Ruby, your assistant',
  });
  return () => face.destroy();
}

Your app owns chat bubbles, controls, and the surrounding interface.

Motion and accessibility

Core respects prefers-reduced-motion. Disable movement explicitly with animated: false. Both disable breathing, blinks, gaze, and mouth movement; static expression geometry remains.

Accessible states

import { createFace } from '@allpersonas/core';

export function mountStillAssistant(host: HTMLElement) {
  const face = createFace(host, {
    avatar: 'leo',
    animated: false,
    label: 'Leo, your assistant',
  });
  return () => face.destroy();
}

Give an informative face a label. If nearby text already identifies a purely decorative face, set decorative: true to hide it from assistive technology.

Character artwork

The npm package includes the default character sheet. To cache one shared image across multiple faces, host that sheet yourself and set artworkSrc.

Hosted artwork

import { createFace } from '@allpersonas/core';

export function mountHostedAssistant(host: HTMLElement) {
  const face = createFace(host, {
    avatar: 'ruby',
    artworkSrc: '/your-assets/characters.png',
  });
  return () => face.destroy();
}

Keep the 1788 × 1334 sheet layout and feature coordinates. An arbitrary portrait needs its own facial rig.