SIGN IN SIGN UP
remotion-dev / remotion UNCLAIMED

🎥 Make videos programmatically with React

0 0 8 TypeScript

`@remotion/rive`: Draw + flush synchronously so the first paint isn't empty

The previous draw path wrapped the rive draw ops in
\`riveCanvasInstance.requestAnimationFrame(...)\`. The Rive runtime only
flushes the renderer's queued draw calls at the *end* of that callback,
but \`runEffectChain\` reads from \`sourceCanvas\` from *inside* the same
callback - i.e. before the flush.

Symptom: the first paint after mount composites an empty source canvas
onto the visible canvas, so nothing is shown. After the user seeks (or
otherwise re-runs the effect), the source canvas has the *previous*
frame's pixels, which is why "it draws after seek".

Fix: drop the Rive-wrapped rAF and do the draw synchronously inside
\`useEffect\`, calling \`resolveAnimationFrame()\` ourselves between the
rive draw and the effect chain. This is exactly the pattern the
\`resolveAnimationFrame\` docstring describes for non-rive-rAF draw loops.

Co-authored-by: Cursor <cursoragent@cursor.com>
J
Jonny Burger committed
e1d021939fc162462833218746061bedeb470463
Parent: 05b029f