loading code fetching the highlighted snippet
FIG-001/ HOOK
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.
- 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.
A
B
Synchronized Timeline
time A: 0.0s
=
time B: 0.0s
category · hook
sheet · sheet 01 / 01
⟳ to re-run