# useMotionTemplate > Compose a MotionValue from multiple motion values using a tagged template literal. **Source:** [https://motion.svelte.page/docs/use-motion-template](https://motion.svelte.page/docs/use-motion-template) --- `useMotionTemplate` is a tagged template literal that builds an augmented `MotionValue` from interpolated motion values (or Svelte readables). When any input emits, the template is recomposed. ```svelte
Content
``` ## Usage Pass motion values (or any Svelte readable) as template interpolations. Static strings and current values are interleaved to produce the result. ```svelte
Dynamic shadow
``` ### Multiple stores You can interpolate as many stores as needed: ```svelte
Reactive color
``` ### With useTransform Combine with `useTransform` to map values before composing: ```svelte
Animated filter
``` ## How it works 1. The tagged template function receives the static string parts and the interpolated inputs (motion values or Svelte readables) 2. Seeds the result motion value by sampling each input once via `sampleSource` 3. Subscribes to every input. The first synchronous emit from each input is skipped (we've already seeded) — subsequent emits recompose the template and write to the result via `result.set(...)` 4. All subscriptions and the result motion value are torn down when the surrounding `$effect` scope unmounts ## Performance - **Subscription-driven**: Recomposes only when an input emits, no animation frames or polling - **Single allocation per recompose**: The static-parts array is constant; only the composed string is rebuilt - **SSR-safe**: Returns a static augmented motion value composed from the seed snapshots on the server ## Common patterns ### Dynamic CSS filter ```svelte Filtered ``` ### Animated gradient ```svelte
Rotating gradient
``` ### Reactive box-shadow ```svelte
Hover to lift
``` ## API Reference ### Signature ```ts useMotionTemplate( strings: TemplateStringsArray, ...values: MotionTemplateInput[] ): AugmentedMotionValue type MotionTemplateInput = | AugmentedMotionValue | Readable ``` ### Parameters - **strings** `TemplateStringsArray` — Static template string parts (provided automatically by the tagged template syntax). - **values** `MotionTemplateInput[]` — Motion values or Svelte readables to interpolate into the template. ### Returns An `AugmentedMotionValue` — a real motion-dom `MotionValue` containing the composed string, plus: - `.current` — Svelte 5 reactive getter (templates, `$derived`, `$effect`). - `.subscribe(run)` — Svelte readable store contract (powers `$filter` template syntax). - All other `MotionValue` methods from motion-dom (`get`, `on`, etc.). ## When to use - **CSS filter chains**: Compose `blur()`, `brightness()`, `saturate()` from reactive values - **Dynamic gradients**: Build `linear-gradient()` or `radial-gradient()` with animated stops - **Complex box-shadows**: Animate shadow offsets, blur, and spread independently - **Any CSS value**: Anywhere you need to compose a string from multiple reactive sources For single-value CSS properties, you can use Svelte's built-in `{$store}` interpolation directly. `useMotionTemplate` is most useful when combining multiple reactive values into one CSS string. ## See also - [useVelocity](/docs/use-velocity) - Track velocity of store values - [useTransform](/docs/use-transform) - Map and transform reactive values - [styleString](/docs/style-string) - Build complete CSS style strings with automatic unit handling --- Based on [Motion's useMotionTemplate](https://motion.dev/docs/react-use-motion-template) API.