🌍 World Population Shift (D3)

Você tem uma planilha: país, ano, população. São apenas números até que D3 os converta em barras que crescem, trocam de posição e revelam o drama geopolítico de quatro décadas. O espectador não lê a tabela — ele assiste a ela acontecer.

A cada frame do Remotion, o dataset do ano correspondente é lido, as barras são reordenadas e as posições Y interpoladas suavemente. Quando a China e a Índia trocam de lugar, o bar race pausa por 12 frames — o momento dramático.

A integração D3+Remotion funciona porque D3 calcula geometria e Remotion avança no tempo. A cada chamada de useCurrentFrame(), você computa o frame de dados correspondente e deixa D3 mapear pixels.

const frame = useCurrentFrame();
const fps = useVideoConfig().fps;
const year = Math.floor(interpolate(frame, [0, durationInFrames], [1990, 2030]));

const data = getDataForYear(year);
const xScale = scaleLinear().domain([0, maxPop]).range([0, width]);
const yScale = scaleBand().domain(data.map(d => d.country)).range([0, height]);

Labels que seguem as barras são a alma do bar race. O contador de ano no canto inferior direito ancora o espectador no tempo. Ambos precisam ser calculados no mesmo frame — sem estado separado.

Este é o prompt literal que você dá ao Claude Code. Cada instrução mapeia para um comportamento específico do bar race — o Claude gera a composição Remotion com D3 integrado em uma resposta.

Create an animated bar race showing the ten most populous
countries from 1990 to 2030.
Animate transitions smoothly.
Display ranking changes in real time.
Pause briefly when leadership changes.

O deliverable é um vídeo infográfico estilo YouTube — mas o componente é um template parametrizado que funciona com qualquer dataset de ranking temporal. Troque a planilha, mude o título, renderize outro vídeo.