Eine Liste, deren Elemente Starrkörper sind, gestapelt in einer Box: Greif eine Karte an einer Ecke (sie dreht sich um den Griffpunkt), wirf sie, der Stapel fällt unter der Schwerkraft zurück, und die DOM-Reihenfolge folgt der visuellen Reihenfolge.
So funktioniert es
Eine Liste, deren Elemente starre Körper sind, in einer Box gestapelt: Greif eine Karte an einer Ecke (sie dreht sich um den Griffpunkt), wirf sie, der Stapel fällt unter der Schwerkraft zurück, und die DOM-Reihenfolge folgt der sichtbaren Reihenfolge. Eigene Physik-Engine (orientierte Boxen, Reibung, Abprall), keine Abhängigkeiten.
Kategorie
Mikrointeraktionen
Typ
Web Component (<mv-physics-stack>)
Status
stabil
Keywords
physics, rigid-body, todo, list, reorder, drag, toss, gravity, tactile
When to use
A short to-do or idea list should feel tactile, with cards users can grab, toss and let fall into place
A playful demo or portfolio section should let visitors reorder items by throwing them around
Avoid when
Items must be reordered precisely across columns or statuses → use Kanban instead
Items are records with several fields to compare; a physics pile suits a handful of short cards, not dozens → use Table instead
Notifications should pile up physically in a corner tray → use Toast Physics instead
List items, in DOM order (= visual order once settled).
strings
Partial<Record<string, string>>
Overrides for the default text (en-US): hint (drag and keyboard help read through aria-describedby), announceMoved (live announcement after Alt + arrow: {item}, {position}, {total} placeholders). App-wide translations: setStrings() from core/i18n.js, under the key "physics-stack". Can be set before the element is defined.
Methods
Name
Beschreibung
arrange()
Tidies the pile into a straight tower, in DOM order (smooth transition).
toss(item)
Spins the item out of the box, then removes it from the DOM; the cards above fall into the gap.
shake(strength = 1)
Gives every card a shake.
Events
Name
Beschreibung
mv-reorder
detail: { order, item }. The visual order changed (toss, Alt + arrows).
mv-settle
detail: { order }. The pile is at rest (the animation loop stops).
mv-toss
detail: { item }. An item was tossed out by toss().
Content structure
Name
Beschreibung
(children)
Each direct child becomes a card (mv-physics-stack-item class, role listitem). Adding or removing children is picked up: a new child drops in from the top.
CSS classes
Name
Beschreibung
mv-physics-stack-item
Set on each child; default card style, overridable.
CSS variables
Name
Standard
Beschreibung
--mv-physics-stack-height
22rem
Box height.
--mv-physics-stack-item-width
min(19rem, 88%)
Card width.
--mv-physics-stack-bg
var(--mv-bg-subtle)
Box background.
Accessibility
role=list / listitem, each card is focusable. ↑/↓ move focus, Alt + ↑/↓ move the card (announced in a polite live region placed right after the list, since a list may only own list items; it is removed with the element). The keyboard hint is a hidden aria-describedby text. The DOM is reordered to match the visual order and focus is preserved. Inner controls (buttons, links, fields) stay clickable and don’t start a grab. Reduced motion: the pile settles instantly, without animation. Without JS: a regular vertical list.
