loading code fetching the highlighted snippet
FIG-001/ USEMOTIONTEMPLATE
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>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.
-
useMotionValue(0)holds the rotation. On mount,animate(turn, [0, 1], …)withease: 'linear',duration, andrepeat: Infinityloops it forever; the returned controls are stopped on cleanup. -
useMotionTemplateinterpolatesturnintoconic-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-imageso only the spill at the edges shows — a soft halo without a second animation. - Original design: the AI Gradient Animation Card by hover.dev, ported to Svelte 5 with Svelte Motion.
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...
category · usemotiontemplate
sheet · sheet 01 / 01
⟳ to re-run