# AI Gradient Card > Animated conic-gradient border with a masked glow spill, built with Svelte Motion useMotionValue, animate, and useMotionTemplate. **Source:** [https://motion.svelte.page/examples/ai-gradient-card](https://motion.svelte.page/examples/ai-gradient-card) **Markdown mirror:** [https://motion.svelte.page/examples/ai-gradient-card.md](https://motion.svelte.page/examples/ai-gradient-card.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: rotating gradient border. A single `turn` motion value sweeps 0 → 1 on an infinite linear loop. `useMotionTemplate` composes it into a `conic-gradient(from turn, …)` string that paints two layers — the crisp border ring and a blurred, radially-masked glow that spills a soft halo from under the card edges. **Metadata:** tag: `USEMOTIONTEMPLATE` | pattern: `animated-template` ### Notes - `useMotionValue(0)` holds the rotation. On mount, `animate(turn, [0, 1], …)` with `ease: 'linear'`, `duration`, and `repeat: Infinity` loops it forever; the returned controls are stopped on cleanup. - `useMotionTemplate` interpolates `turn` into `conic-gradient(from {'${turn}'}turn, …)`. The composed string re-emits every frame, driving both gradient layers from one source. - The glow layer reuses the same gradient, blurred and clipped with a radial `mask-image` so only the spill at the edges shows — a soft halo without a second animation. - Original design: the [AI Gradient Animation Card by hover.dev](https://www.hover.dev/components/cards#ai-gradient-animation-card), ported to Svelte 5 with Svelte Motion. ### Source #### Default.svelte Source file: [src/lib/examples/ai-gradient-card/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/ai-gradient-card/demos/Default.svelte) ```svelte
// ai-gradient-card generating…
({ display: 'flex', alignItems: 'center', gap: '0.5rem', width: '100%', padding: '0.875rem', border: '1px solid var(--brut-rule-2, #bbc4c0)', backgroundColor: 'var(--brut-bg-2, #eef4f1)', color: 'inherit', textAlign: 'left', cursor: 'pointer' }))} > avatar What is the meaning of life?

Hmm, that's a tough one... The traditional answer is 42, but I don't think that's clever enough for this demo application. Let me search the internet for some answers.

Committing tomfoolery...
useMotionValue → useMotionTemplate conic ring · masked glow
```