Aora Bot
  • English

      • Components

      The React layer is deliberately small. Most of the work happens in the engine; these components decide when to animate, when to share an animation, and when not to animate at all.

      Core

      CharacterMarkA single animated character. The component everything else is built on.CharacterMarkMirrorDraws a running character again elsewhere for almost nothing.MarkStageProviderShares one animation between every character of the same appearance.useMarkCommandsHold facts and states on a mark from outside the tree, with priority and TTL.

      Avatars

      AgentAvatarPicture, group cluster or character, chosen automatically.AvatarStackOverlapping group members, each punched out of the one behind.UnreadBadgeCounters and presence dots that sit on an avatar.WorkingBadgeA small spinner badge for an avatar whose agent is busy.AvatarEditorCharacter, generated image or upload with crop, behind one dialog.

      Activity and effects

      ActivityMarkWhat an agent is doing, as a character and a label from one source.ActivityTickerCrossfading single line that cannot change the row height.ConfettiLayerCelebration particles with no character attached.OccupancyListWhich agents hold which shared resource, one row per resource.

      HUD

      HudPlateA caption plate around a character wearing a dial: title, value, unit.AgentHudThe arbiter's state and dial for one agent, on a plate.

      Agent

      AgentStateProviderOne arbiter for a tree of characters: sessions, priority, dwell.useIdleSleepLet an idle character grow drowsy, then fall asleep.SpriteMarkA painted sprite sheet that speaks the same protocol as the vectors.

      Editing and templates

      CharacterPickerShape and ink chooser, with a selection ring in the shape itself.AgentCharacterPickerA picker that stages the choice until it is confirmed.CompactCharacterPickerThe picker folded into a row for tight spaces.TemplateDialogName, instructions and visibility for an agent template, with a share card.usePublishMarkThe character's arc through saving, published and celebrated.

      Scenes

      RestrictedSceneA blocked, offline or unauthorised state, told by a character in a bezel.BootLoopA start-up sequence and a placeholder mark for loading rows.CastStageSeveral characters choreographed through a scripted scene.DemoDesktopOnboarding surfaces: desktop frame, job bubbles, cards, hand-off, composer.

      Other

      LocaleProviderLanguage for every component below it.

      How they relate

      Four tiers. The engine knows nothing about React; the core wraps it in components and decides when to share an animation; the agent layer feeds protocol ids into that core; everything else is composed from the two.

      Choosing a component

      One character, on its own. CharacterMark.

      Many characters, most of them alike. MarkStageProvider plus StagedMark. One engine per distinct shape-and-state pair, mirrors for the rest.

      An avatar for a user or agent. AgentAvatar. It picks between a picture, a group cluster and a character for you, and derives a stable appearance from an id so you do not have to store one.

      An agent that reports what it is doing. AgentStateProvider plus CharacterMark. Hooks and a relay speak the emotion protocol; the arbiter decides which session the face shows.

      A number next to the face. hud on any character, from a spec the protocol carries; HudPlate when it needs a title and a value beside it, AgentHud when the provider should supply both.

      One agent drawn in several places at once. Mark commands — publish facts once, and every roster row, avatar and activity line for that agent follows.

      Letting someone choose or edit an appearance. CharacterPicker in a settings form; AgentCharacterPicker in a dialog; CompactCharacterPicker beside a sign-up form; AvatarEditor when a picture is also allowed; TemplateDialog when the appearance belongs to a template being created.

      A whole scene. RestrictedScene for a dead end, BootLoop for an indeterminate wait, CastStage for a scripted piece, the walkthrough parts for an onboarding flow.

      A painted mascot instead of a generated one. SpriteMark, keyed by the same protocol ids.

      Hundreds, in a virtualised list. Neither — use renderAvatarDataUrl and render images.

      Every export

      Reachable in one page: the API index.

      Next