boxel: Skill for Claude Code

One element: the {{motion}} modifier

{{motion}} goes on the element you already have — any HTML or SVG element, no wrapper. Named args are Motion's props, same names and types.

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

<article
  {{motion
    initial=(to opacity=0 y=12)
    animate=(to opacity=1 y=0)
    transition=(spring visualDuration=0.4 bounce=0.2)
  }}
>…</article>

• Helpers to, spring, tween, inertia, stagger, ease, styles are plain functions used as template helpers — they exist so Glint typechecks the target. (hash …) also works.
• A target used more than once belongs in a module constant, not inline — the gallery is written that way throughout: const soft = spring({ bounce: 0.14, visualDuration: 0.48 });
• animate is a target, not an event: it re-runs whenever its value changes. Drive it from a getter.
• Transforms are values: animate x, y, scale, rotate — never compose a transform string yourself; the engine owns transform.
• Keyframes: pass arrays (animate=(to x=(array 0 40 0)) or a constant).
• Variants, custom, staggerChildren/delayChildren, when: all work as in Motion; inherit controls propagation.
• Gestures: whileHover, whileTap, whileFocus, whileInView plus their handlers. Keyboard activates tap.
• <MotionConfig @transition @reducedMotion …> sets tree-wide defaults. @reducedMotion defaults to "user" here (not React's "never"): prefers-reduced-motion is honoured by default — transform/layout animation off, opacity/colour still animate. Don't "fix" that.

Motion values: per-frame data without re-render

Anything updating at pointer/frame rate (a follower, a scrub readout, a progress fill) must NOT go through tracked state — that is a render per frame. Make a motionValue, bind it once with style=(styles …), and drive it: .set(v) writes a value, animate(this.x, v, transition) animates to one (a spring chasing the pointer), .jump(v) teleports and stops what was driving it (the scrub case):