# LazyMotion > Use LazyMotion, m, domMin, domAnimation, and domMax to choose the motion feature bundle for a subtree. **Source:** [https://motion.svelte.page/examples/lazy-motion](https://motion.svelte.page/examples/lazy-motion) **Markdown mirror:** [https://motion.svelte.page/examples/lazy-motion.md](https://motion.svelte.page/examples/lazy-motion.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: load features around m. Wrap `m.*` components in LazyMotion and pass a feature bundle. The element still animates on mount, while gesture support comes from the selected bundle. **Metadata:** tag: `LAZY` | bundle: `domAnimation` ### Notes - `LazyMotion` provides the active feature bundle through context. Descendant `m.*` elements read that context before attaching gesture, drag, or layout behavior. - `domAnimation` is the usual interactive bundle: mount/update animations plus hover, tap, focus, pan, and in-view gestures. ### Source #### Default.svelte Source file: [src/lib/examples/lazy-motion/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/lazy-motion/demos/Default.svelte) ```svelte
// lazy motion features: domAnimation
{#key replayId} ({ fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.8125rem', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', border: '1px solid var(--brut-ink, #0a0a0a)', backgroundColor: 'var(--brut-bg-2, #eef4f1)', color: 'var(--brut-ink, #0a0a0a)', padding: '0.75rem 1.25rem', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)', cursor: 'pointer' }))} > Lazy m.button {/key}
(replayId += 1)} whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.96 }} transition={{ type: 'spring', stiffness: 500, damping: 30 }} style={styleString(() => ({ 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' }))} > ↻ replay lazy-loaded feature bundle
``` ## FIG-002: compare domMin/domAnimation/domMax. `domMin` keeps animation only, `domAnimation` enables gestures, and `domMax` adds drag/layout behavior for the subtree. **Metadata:** tag: `BUNDLES` | split: `min / animation / max` ### Notes - The same `m.div` receives different runtime capabilities depending on the nearest `LazyMotion` provider. - Try hover/tap across all three cards. Drag is intentionally available only under `domMax`. ### Source #### FeatureBundles.svelte Source file: [src/lib/examples/lazy-motion/demos/FeatureBundles.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/lazy-motion/demos/FeatureBundles.svelte) ```svelte
{#each bundles as bundle (bundle.label)}
// {bundle.label} {bundle.note}
({ // Wide enough for the longest label (DOMANIMATION) // with breathing room — 72px clipped it. width: '120px', height: '72px', display: 'grid', placeItems: 'center', border: '1px solid var(--brut-ink, #0a0a0a)', backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', boxShadow: '4px 4px 0 var(--brut-rule, #d6dedb)', color: 'var(--brut-ink, #0a0a0a)', fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.625rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em', cursor: 'grab', userSelect: 'none' }))} > {bundle.label}
{/each}
```