boxel: Skill for Claude Code

Arriving and leaving: <Presence>

An element Glimmer has removed is gone — there is no frame left to animate. <Presence> keeps a removed item rendered until its exit finishes.

import { motion, Presence, to } from 'glimmer-motion';

const keyOf = (todo) => todo.id;

<Presence @items={{@todos}} @key={{keyOf}} as |todo h|>
  <li
    {{motion
      presence=h
      initial=(to opacity=0 x=-20)
      animate=(to opacity=1 x=0)
      exit=(to opacity=0 x=20)
    }}
  >{{todo.title}}</li>
</Presence>

• @key decides identity (same job as key on {{#each}}). The block yields the item and a handle; the handle goes into presence= on the element that owns the exit. h.isPresent is tracked.
• Single conditional element? Model it as a 0-or-1-item array (get panel() { return this.open ? [{ id: 'panel' }] : NO_PANEL; } — see packages/choreo-gallery/realm/shell/gallery-grid.gts).
• @mode: "sync" (default — leavers and newcomers together), "wait" (newcomer holds until the leaver finishes), "popLayout" (leaver out of flow immediately so siblings close up; @anchorX/@anchorY available).
• @initial={{false}} skips the first-render entrance. Caution: the presence context is inherited — blocking the first entrance blocks it for every motion node inside the block too. If children animate on mount, prefer computing initial per item (the gallery grid's cardInitial) over @initial={{false}}.
• @onExitComplete, @custom (for exit-direction), nested presence under a leaving parent: @propagate={{true}} @parent={{outerHandle}}.

The rule that bites

A leaving child stays live. React freezes a leaver's tree; a Glimmer block re-runs from live tracked state while the leaver plays its exit. So anything the exit needs — the label the panel showed, the row the modal flew from — must ride on the item <Presence> yields, not be read back out of state that has already moved on. The modifier freezes an exiting element's props, but your template's own bindings are yours to keep stable.