boxel: Skill for Claude Code

A whole scene: <Choreo>

{{motion}} animates elements one at a time; what the screen does is emergent. <Choreo> is for statements about a render pass: it watches its region, computes the changeset — inserted / removed / kept participants with bounds before and after — and plays your declared timeline over it.

import { beacon, Choreo } from '@cardstack/choreo';
import { motion, spring } from 'glimmer-motion';

<Choreo as |c|>
  {{#each @rows key='id' as |row|}}
    <article {{motion id=row.id role='row'}}>{{row.subject}}</article>
  {{/each}}

  <c.Sequence>
    <c.Tween @of={{c.removed 'row'}} @opacity={{0}} @duration={{0.16}} />
    <c.Move @of={{c.moved 'row'}} @spring={{spring stiffness=300 damping=24}} />
  </c.Sequence>
</Choreo>

• Participants are normal motion elements with two extra args: id (identity) and role (the group a step selects). Everything else about them (animate, drag, layout) still works.
• Leavers are handled for you: a removed participant stays on screen, locked where it stood, exactly as long as the timeline names it. No <Presence> inside a Choreo scene.
• Blocks: c.Sequence (one after another — including after a spring, whose length is computed with the engine's generator) and c.Parallel; nest freely. Steps: c.Tween, c.Spring, c.Move (FLIP kept sprites; by default it animates size too — @size={{false}} to move only, 'crop' / 'scale' to resize by transform), c.Hold (set properties for a window — this is the whole z-index story; @fill={{true}} to keep after), c.Wait. c.Crossing (the canned route crossing), c.Gate, c.Follow, c.Tether, c.Raise, c.Scroll, c.Perform, c.Attach and the camera steps are in choreo-create/references/advanced-orchestration.md and spatial-and-film.md.
• Every time arg is seconds: @duration, @delay, @stagger (the @ms / @overlap spellings throw, naming the seconds arg). Name a step with @name and place another against it with @at={{at 'name' 0.4}} or {{after 'name'}} (at / after from @cardstack/choreo).
• Selectors: c.all / c.kept / c.inserted / c.removed (optional role arg), c.role 'card', c.id 'card-1', c.still / c.moved (kept whose bounds did not / did change), c.received / c.counterpart (the two halves of a counterpart match — so a flight step fires only on flight passes, never on a plain resize). c.onstage (query) narrows a query to what the viewport can see.