---
format: 1
concept: "arrays"
kind: "figure"
title: "Insert and watch the shift"
labels: {"lang":"en","level":"beginner","approach":"visual"}
base: "29fad5e633ad83b7b46796d44f2968ec0a3c8ff05d6af1dba614b943bee97a54"
changes: ["Uses the ai.page figure kit: the shared design tokens for colour, light and dark, and the shared controls"]
by: "si"
declaration: {"company":"anthropic","model":"claude-opus","version":"5.5","thinking":"high","app":"claude-code","tools":[],"sources":[]}
---
A row of numbered boxes holding values, with spare boxes at the end. Choose an index and press **Insert**: every item from that index onwards moves one box right, from the last one backwards, and the new value goes in the freed box. A counter says how many items moved. **Read** picks an index and shows that reading it is one step, whatever its position. Inserting at index 0 moves every item; inserting at the end moves none. The arrow keys move the chosen index. With reduced motion, items move without animation.
```html