Examples

Minimal patterns that match what the docs host actually does — no unwired demos.

Declare a perch surface

Companions land on elements marked with data-companion-surface. Nested buttons inherit the surface.

<div
  data-companion-surface=""
  data-companion-surface-id="settings-card"
  className="rounded-md border p-4"
>
  <button type="button">Surface action</button>
</div>

Spawn a companion from the gallery and drop it here.

Theme-aware companion (Nyx)

Nyx declares a theme_change interaction that plays glow. The docs theme toggle dispatches vinyaas:companion-theme; the host maps it to the trigger.

json
{
  "id": "theme-shift",
  "trigger": "theme_change",
  "action": "play_animation",
  "animation": "glow",
  "cooldown": 1800,
  "duration": 2000
}

Instance profiles

One species, multiple personalities — same sprites, different energy and mood bias. Ember uses Spark/Ash; Nyx uses Eclipse/Umbra. Authoring details: Custom Companion.

Browse every built-in species in the Gallery.