# Variants Dynamic (custom) > Per-instance variants using the custom prop and function-form factories in Svelte Motion. Staggered list reveals with index-driven delays. **Source:** [https://motion.svelte.page/examples/variants-dynamic](https://motion.svelte.page/examples/variants-dynamic) **Markdown mirror:** [https://motion.svelte.page/examples/variants-dynamic.md](https://motion.svelte.page/examples/variants-dynamic.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: function-form variants. 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. **Metadata:** tag: `VARIANTS` | pattern: `dynamic variants` ### Notes - Each variant value is a function — `(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. - Hovering a card raises it via `whileHover` — a plain object since hover doesn't need `custom`. Function and object form variants co-exist in the same map. ### Source #### Default.svelte Source file: [src/lib/examples/variants-dynamic/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/variants-dynamic/demos/Default.svelte) ```svelte
// variants-dynamic state: {state}
{#each cards as i (i)} ({ position: 'absolute', width: '110px', height: '160px', background: 'var(--brut-bg-2, #eef4f1)', border: '1px solid var(--brut-rule-2, #bbc4c0)', boxShadow: '5px 5px 0 var(--brut-rule, #d6dedb)', display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start', padding: '0.75rem', color: 'var(--brut-ink, #0a0a0a)', fontFamily: 'var(--brut-mono, monospace)', fontWeight: 700, fontSize: '0.9rem', letterSpacing: '0.04em', cursor: 'pointer', zIndex: i + 1 }))} > №{i + 1} {/each}
({ fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.6875rem', textTransform: 'uppercase', letterSpacing: '0.08em', border: '1px solid var(--brut-accent, #247768)', backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', color: 'var(--brut-accent, #247768)', padding: '0.5rem 0.875rem', cursor: 'pointer' }))} > {NEXT_LABEL[state]} every card resolves variants[{state}](i)
```