Physics Tags

type

component

files

2

registry deps

skeleton

npm deps

none

• ①Hand-rolled AABB physics in lib/automindz/physics-world.ts, no dependency
• ②Base state is a CSS-wrapped list: server, reduced motion and print get the same picture
• ③Drag and throw with the pointer; the grip pushes a pile a few pixels a sub-step, never teleports
• ④icon on a tag, appearance="tile" for a wall of marks — none ship in the default config
• ⑤Loop stops on its own once the pile is still

Edit lib/automindz/physics-world.ts, not the component, and pass it — tags has no default here (<PhysicsTags tags={PHYSICS_TAGS} label="What ships in every plan" />). There is no stylesheet to import and no npm dependency: the world is six hundred lines of arithmetic in the lib file, and the component writes one transform per chip per frame. **The base state is the finished pile, laid out by CSS** — a flex-wrapped <ul> of <li> chips packed along the bottom of a box height tall — and it is what the server sends, what paints before hydration, what prefers-reduced-motion gets and what a print stylesheet gets; the simulation is layered on after mount and only when motion is allowed, so there is exactly one picture to design. height is a floor, not a ceiling: if the chips need more room to wrap than that, the box is as tall as the wrap, so nothing under the band moves when the drop takes over. **The chips are not interactive elements** — no button, no tabIndex, no keyboard equivalent, on purpose: the drag is a pointer-only enhancement over a list that already carries everything the pile does, and a focus stop for nudging a decorative chip is a chore added to the tab order. interactive={false} is the drop with no listeners, no grab cursor and no user-select: none. startOnView (default on) holds the chips above the box until it scrolls into view and pauses the loop while it is off screen; the loop also stops on its own the moment the pile is still, so a settled band costs nothing. Ceilings, in arithmetic rather than in a note: one frame advances the world at most 1/30s however long a background tab was away, so a pile cannot launch itself through the floor when someone looks back; speed is capped at 2400px/s and integrated in 1/120s sub-steps, so a chip can never cover more than 20px between collision checks and never passes through another; a throw carries your last movement's velocity, capped the same way. Chips never rotate — a static ±6° lean is cosmetic — so tipping is stood in for by sliding: a chip whose centre hangs past the union of what is under it slides toward the drop, a chip bridging two others stays, and a chip on a two-pixel corner falls past it. A flipped reduced-motion preference stops the loop where it is. A tag may carry an icon — an inline SVG component in currentColor — drawn before the label; appearance="tile" makes every tag *with* an icon a 56px square of the mark alone with the label as its accessible name and tooltip (the logo wall that fell over), while a tag without one stays a chip, so a half-licensed config still reads as one pile. The default config names no vendor and ships no mark: which brands you may display is between you and the mark's owner. The pointer holds a chip at PHYSICS_GRIP — it closes on the pointer a fraction per sub-step rather than being written to it — so a chip dragged through a pile pushes the pile a few pixels at a time along the axis it actually arrived on, and a held chip dragged down onto a grounded one rides over it, because nothing pushes a chip through the floor. Pass label to name the list, and pass tags while loading too — the skeleton chips take their widths from the labels. An empty tags renders nothing at all rather than an empty box. Gravity, bounce, friction, the slide and the sleep threshold are constants in the lib file with their reasoning beside them, not props.