loading code fetching the highlighted snippet
Seven cards. One variants map with three function-form states (fanned, exploded, stacked). Each card resolves the active state by passing its own index in via custom={i} — per-instance values without writing seven keyframe blocks.
(i) => keyframes — instead of a
literal object. The function receives whatever the motion component's custom prop holds, and resolves at evaluation time.custom={i} on each card forwards its array index into the variant
function. x: offset * 22, rotate: offset * 9, etc. become
per-card values; the variants map stays a single source of truth.whileHover — a plain object since hover
doesn't need custom. Function and object form variants co-exist in the
same map.// state: fanned — every card resolves variants[fanned](i)