boxel: Skill for Claude Code

Magic Move navigation

The gallery ⇄ demo transition is a Choreo crossing: the gallery card's site frame wraps the page in <Choreo @route={{true}} @quiet={{true}} @scroll={{@crossing.scrollIntent}}> and the whole move is its timeline (packages/choreo-gallery/realm/shell/site-frame.gts). Moving between the grid and a demo page is state inside the gallery card, not a host route change, so the region sees each move as one render pass and the gallery never writes the host's URL or title. animateView is for transitions where a snapshot is the point (motion-page-transition); it is not part of this crossing.

The tiles and their stages are in packages/choreo-gallery/realm/shell/gallery-grid.gts, the demo page in packages/choreo-gallery/realm/shell/demo-page.gts.

The cast (Keynote's grammar, spoken by the region)

• MOVES — an id on both pages: id='stage-<slug>' role='stage' on the tile's stage AND on the demo page's .stage-wrap. The pass pairs them as counterpart/received, the receiver flies FLIP from the old box, the old skin rides the flight above it. Type pairs the same way (title-/lede-/group-<id>).
• LEAVES — removed participants nobody claims (role='card', the hero's role='scene'): the crossing dissolves them. Naming a container of named things is LEGAL — claimed skins are lifted out (a seat div holds their place in the fading card).
• ARRIVES — inserted participants: fade in near the settle; role='late' (code sample, pager) arrives on its own later tween.
• STEADY — the topbar and footer sit OUTSIDE the region and simply never re-render. The api pills share one id (id='apis') on every demo page: demo-to-demo they pair and identical content crossfades invisibly; from the gallery they just arrive. The old "conditionally steady" special case is an ordinary pair now.

The knobs that carry the move

• @quiet — pauses every animation running at liftoff, resumes on landing (the old quietTheRest, as a region arg). Animations that START during the crossing aren't caught; the gallery gates its tile entrances with crossing.isCrossing for exactly that.
• @scroll={{@crossing.scrollIntent}} — the scroll is placed INSIDE the pass, after the swap renders and before final bounds are measured. The gallery's thunk (packages/choreo-gallery/realm/lib/crossing.ts): opening/demo-to-demo → top; closing → the saved gallery position; a demo opened directly, then closed → centre the counterpart tile so the flight lands on-screen. The region positions the window; inside the host the card scrolls in its stack item, so the thunk places that container itself and answers with the window's own position.
• onstage — the crossing only animates what a viewport can see; leavers judged in the old scene's window, arrivals in the new one's.
• The yield rule — a sibling step naming a sprite owns it (the hero's rising exit); the canned dissolve yields it.
• Color-true crossfade — backgrounded pairs never dip toward the ground: the receiver holds a solid tween between the two effective colors, the old skin dissolves above, the stylesheet's alpha returns on landing.
• @size='crop' (the crossing's default) — one UNIFORM scale plus a travelling clipPath window, iOS's rule. Never write layout size in a grid: @size={{true}} stretches the card's whole row mid-flight, and @size='scale' (transform-only, per-axis) still squashes a mismatched aspect. Crop does neither. Overridable on c.Crossing as @size.
• data-choreo-substance — the shape match is computed between the SUBSTANCE boxes, not the padded frames. .cam-sheet inside the camera stage, .pres-stage inside the presentation: mark the thing the eye actually follows, on either end, and the other is derived.
• pack="content" — same idea for type, without an extra node. Crossing matches the shrink-wrap (the ink) even when the layout box is a full-bleed strip. Default is 'box' (the layout border box) because plates and cards ARE their frame. Do not auto-pack every participant.
• Tempo composes: every duration derives from BASE * factor(); factor() === 0 renders no steps at all — no run, and the scroll still lands (the region applies it regardless of cues).