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.
// use-time-synced key: "synced-timeline"
A
B
time A 0.0s = 0.0s time B
category · hook
sheet · sheet 01 / 01
⟳ to re-run