Circle Match Iris
Circle Match Iris is a transitions Remotion shot (with a public demo.tsx). Watch the video preview, read the recipe notes, and copy the agent brief to implement it from tuned TSX.
- Category
- Transitions
- Duration
- 4.7s (anchor pulse 30f + iris expansion 45f + chart growth 55f + stillness 40f)
- Energy
- Medium-High
- Styles
- 1
Recipe notes
Circle-matched iris transition — the iris bursts from the center of a circular element on the foreground page, and the new page's circular chart inside the iris picks up on the same circle; the match cut gives the iris a semantic anchor
When to use it
Seams where the foreground has a circular element (avatar/icon/round button) and the background has a circular subject (donut chart/ring progress); transition technique card
Intent
A plain iris (the glossary's original entry) opens from an arbitrary point and viewers only read "page changed". This card welds it to a match cut: the iris must burst from the center of a **real circular element** in the foreground, and inside the circle the growing new page contains a circular chart that happens to continue on the same circle — what viewers see is "the avatar's circle became the chart's circle", with the circle itself completing the narrative (this person → this person's data). This is the match cut's grounded form in a UI context: it doesn't rely on compositional coincidence, it relies on semantic circle-to-circle. It belongs to the same "background pre-present in foreground" family as the three travel variants, but the anchor is an abstract shape rather than a container.