Encapsular como componente y "congelar" usando delayRender() y useCurrentFrame()

Paso 1: Exporta RadialChart como componente configurable

Ya lo tienes como:

export const RadialChart: React.FC = () => { ... }

Modifícalo así:

export const RadialChart: React.FC<{ freezeAt?: number }> = ({ freezeAt }) => {
  const rawFrame = useCurrentFrame();
  const frame = freezeAt !== undefined ? Math.min(rawFrame, freezeAt) : rawFrame;
  const { fps } = useVideoConfig();
  ...
  // usa `frame` en lugar de `useCurrentFrame()` directamente
};

Así podrás “congelarla” después de cierto frame.

---

🧩 Paso 2: Usarla en una composición padre

import { AbsoluteFill, Sequence } from 'remotion';
import { RadialChart } from './RadialChart';

export const FullScene: React.FC = () => {
  return (
    <AbsoluteFill>
      {/* Animación de entrada de la gráfica */}
      <Sequence from={0} durationInFrames={40}>
        <RadialChart />
      </Sequence>

      {/* Mantener congelada después */}
      <Sequence from={40} durationInFrames={Infinity}>
        <RadialChart freezeAt={40} />
      </Sequence>

      {/* Aquí puedes decidir cuándo eliminarla, por ejemplo en frame 150 */}
      {/* <Sequence from={150}> */}
        {/* Aquí ya no la muestras */}
      {/* </Sequence> */}
    </AbsoluteFill>
  );
};

freezeAt={40} asegura que los valores y frames se detienen, y no se recalculan animaciones.

✅ Resultado

• La animación de las barras se reproduce normalmente hasta el frame 40.
• A partir del frame 41 en adelante, todo se ve igual (congelado).
• Puedes removerla, reemplazarla o transicionar a otra escena cuando quieras.