# useTime (Synced)
> Synchronized time-based animations across multiple elements using a shared Svelte Motion useTime store for coordinated motion effects.
**Source:** [https://motion.svelte.page/examples/use-time-synced](https://motion.svelte.page/examples/use-time-synced)
**Markdown mirror:** [https://motion.svelte.page/examples/use-time-synced.md](https://motion.svelte.page/examples/use-time-synced.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: shared timeline.
`useTime(key)` returns the same motion value for every caller passing the same key. Two independent components stay locked in phase without a shared store — perfect for orchestrating ambient motion across disjoint subtrees.
**Metadata:** tag: `HOOK` | pattern: `keyed shared clock`
### Notes
- Both elements call `useTime('synced-timeline')`. Motion looks the key up in a registry — first call creates the clock, every subsequent call gets the same store. Identical ticks, no prop-drilling.
- Each side derives its own animations from the shared time value. Same period, same phase — element A and element B rotate in lockstep even though their derived stores are unrelated.
- Skip the key (`useTime()`) for a per-component clock when you want independence. Use a key when you want different parts of the page — different routes, even — to share a heartbeat.
### Source
#### Default.svelte
Source file: [src/lib/examples/use-time-synced/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/use-time-synced/demos/Default.svelte)
```svelte
// use-time-syncedkey: "synced-timeline"
A
B
time A
{($time / 1000).toFixed(1)}s = {($time2 / 1000).toFixed(1)}s
time B