# While Focus > Animate elements when they receive keyboard focus using Svelte Motion whileFocus. Enhance accessibility with visual feedback on focus events. **Source:** [https://motion.svelte.page/examples/while-focus](https://motion.svelte.page/examples/while-focus) **Markdown mirror:** [https://motion.svelte.page/examples/while-focus.md](https://motion.svelte.page/examples/while-focus.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: while focused. Tab through the three elements below — `whileFocus` animates them while they hold focus and reverses on blur. Works on natively focusable elements (button, input) and anything with `tabindex`. **Metadata:** tag: `FOCUS` | pattern: `focus-driven` ### Notes - `whileFocus` fires for both keyboard focus (Tab) and click focus. Same animation shape as `whileHover` — pass keyframes (or a variant key) and the value lasts as long as the element holds focus. - The card uses `tabindex="0"` to opt into the focus chain — any element can be focusable, not just buttons and inputs. Useful for custom UI surfaces. - Pair `onFocusStart` / `onFocusEnd` callbacks with your own state if you need to react beyond the visual animation (e.g. announce to screen readers, fetch preview data). ### Source #### Default.svelte Source file: [src/lib/examples/while-focus/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/while-focus/demos/Default.svelte) ```svelte
// while-focus focus: {focused}

Tab through or click the targets to see focus animations.

(focused = 'button')} onFocusEnd={() => (focused = 'none')} style={styleString(() => ({ width: 160, height: 48, fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.8125rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', border: '1px solid var(--brut-accent, #247768)', background: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', color: 'var(--brut-accent, #247768)', cursor: 'pointer' }))} > Focus me (focused = 'input')} onFocusEnd={() => (focused = 'none')} style={styleString(() => ({ width: 240, padding: '0.75rem 1rem', fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.8125rem', border: '1px solid var(--brut-rule-2, #bbc4c0)', background: 'var(--brut-bg, #f8fcfb)', color: 'var(--brut-ink, #0a0a0a)' }))} /> (focused = 'card')} onFocusEnd={() => (focused = 'none')} style={styleString(() => ({ width: 200, height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.75rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', border: '1px solid var(--brut-ink, #0a0a0a)', background: 'var(--brut-bg-2, #eef4f1)', color: 'var(--brut-ink, #0a0a0a)', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)', cursor: 'pointer', userSelect: 'none' }))} > Focusable card
gesture: whileFocus reverses on blur
```