---
name: layout-continuity
description: "Animate meaningful layout changes without losing object identity or focus. Use for FLIP, WAAPI, layout, перестановка."
---

# Непрерывность при перестановке

Animate meaningful layout changes without losing object identity or focus.

## Implementation decisions

1. Measure first rectangles before changing the order, then last rectangles in a layout effect after React commits.
2. Use stable data keys to match the same item across positions. Animate an inverse transform to identity with WAAPI.
3. Cancel previous Animation objects before starting a replacement and on unmount. If reduced motion is enabled, apply the final layout immediately.
4. Keep keyboard focus on the same semantic element. A transform must not change logical DOM ordering or tab behavior.

## Working source

Read [components/advanced-motion.tsx](../webcraft-shared/source/components/advanced-motion.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- The same card travels between its old and new positions.
- Repeated reorder clicks interrupt cleanly.
- Focus and reduced-motion behavior remain predictable.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Version 2.0.0 · Original WEBCRAFT content · MIT