Remotion Code Analysis — Sequence and Timeline Time Management Implementation
Internal mechanism implementing local time with SequenceContext and how useCurrentFrame() works
GitHub: remotion-dev/remotion/packages/core
One of Remotion's cleverest designs is the local time concept. Components inside <Sequence from={60}> see global frame 60 as their frame 0.
useCurrentFrame() simply subtracts SequenceContext.from from the global frame. Sequence components accumulate parent offsets with absoluteFrom, check isInRange to auto-mount/unmount, and propagate local time via SequenceContext.Provider.
Series is just a convenience wrapper that auto-calculates Sequence from values by accumulating currentOffset.
How It Works
TimelineContext provides global frame (value injected by renderer via window.remotion_setFrame)
<Sequence from={60}> propagates from=60 via SequenceContext.Provider
useCurrentFrame() returns localFrame = globalFrame - sequenceContext.from
Nested Sequence: parent from + own from = absoluteFrom (accumulated)
isInRange check: returns null when frame is out of range → auto scene enter/exit
Pros
- ✓ Timeline implemented with just React Context: pure React pattern without additional libraries
- ✓ isInRange null pattern: performance optimization by not rendering out-of-range components
Cons
- ✗ Context overuse caution: deep nesting can widen re-render scope