Magic Motion Graph

Layout Identity Graph

components/Shared.tsxrecovered

<motion.div layoutId="logo-main" />

<motion.div layoutId="hero-card" />

<motion.div layoutId="cta-primary" />

layout graph4 identities3 matched in-flight

Node IDLayout IDPagesMatch

node_B4hPxlogo-mainin 2 pagesmatch

node_JmKqehero-cardin 2 pagesmatch

node_aT1Kocta-primaryin 2 pagesmatch

node_xX9kefooter-blockin 4 pagessingle

Three identities appear on both Page A and Page B — those are the elements Framer will Magic-Motion between routes. yank emits each as a <motion.div layoutId="…" /> so the rebuilt site animates page-to-page identically to the original.

Magic Motion Graph

Framer’s Magic Motion animates elements across page navigations by matching shared layoutIds. yank reads the bundle’s layout graph — a map of nodeId → layoutId — and emits matching props on every node, so your output codebase animates page-to-page exactly like the original.