How do I optimise the remotion player?

[gajraj-gan]

Hi,

I am trying to optimise the remotion player, i have bunch of transitionSeries.Sequence and transitionSeries.Transition, in form of Sequence -> Transition -> Sequence -> Transition and so on.....the thing the components inside my Sequence are getting heavy, I have noticed all the sequence are rendered at once and they are behind each other altho only one is visible at a time.

When I play the player, the components using useCurrentFrame start re rendering, I thought they were bound to the nearest sequence and others should not start re rendering ? Is this obvious behavior or am I missing something?

[Akkikens]

Biggest wins, roughly in order of impact:

1. Memoize everything — the Player re-renders your component tree every frame (30–60x/sec). Wrap inputProps in useMemo, wrap child components in React.memo, and hoist any expensive computation out of the render path.
2. Precompute per-frame math — anything expensive that depends on frame number (physics, layout math) can be computed once into a lookup table keyed by frame instead of recalculated live.
3. Use <Video> in the Player, <OffthreadVideo> only for renders — OffthreadVideo's frame-accurate extraction is for encoding; in the interactive Player, plain <Video> is much cheaper.
4. Animate only transform and opacity — properties that trigger layout/paint (width, top, box-shadow, filters) are what usually tank Player FPS.
5. prefetch() heavy assets before playback starts so the first play-through doesn't stutter on network fetches.

Profiling tip: React DevTools' profiler on the playing Player will show you exactly which component is re-rendering expensively per frame — it's usually one or two offenders, not everything.