diff --git a/AGENTS.md b/AGENTS.md
index bcd1915..5bdd33d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -114,6 +114,8 @@ which helps to check what the server holds.
   (`theme/themes.ts`) are passed to core's `ThemeManager`, which the mobile app uses with its own default themes.
 - Styles that need container queries (`@container`, `cqw`), such as the board's, are plain `.css` files imported by the
   component; styled-jsx 5.0 does not handle them. `BoardView` fills its container and stands upright below 600 px.
+- `PitAnimator` sends the same `BoardViewModel` object, changed, at every animation step. Put a new object (or a new
+  id in its own state, as `GamePage` does) into React state, or React skips the update and only the first step shows.
 - The rules, lessons and move explanations live in `packages/core/src/tutorial`; their boards after a move come from
   the engine (`getMoveOutcome`). After a rule change, run core's tests: they fail if a lesson no longer works, and
   the rule texts in `en.ts`/`tr.ts` may need updating.
diff --git a/apps/frontend/src/routes/LessonPage.tsx b/apps/frontend/src/routes/LessonPage.tsx
index bb26d92..dff950d 100644
--- a/apps/frontend/src/routes/LessonPage.tsx
+++ b/apps/frontend/src/routes/LessonPage.tsx
@@ -63,9 +63,9 @@ const LessonPage: FunctionComponent<{ context: Context, theme: Theme }> = ({ con
 
     useEffect(() => {
         hideTutorialBanner(context.storage);
+        // The animator sends the same model, changed, at every step; a new one makes React draw each step.
         animator.current = new PitAnimator(context.themeManager, (model) => {
-            model.id = v4();
-            setBoardViewModel(model);
+            setBoardViewModel(new BoardViewModel(v4(), model.pits));
         });
         start();
         return () => {