@viniciuskoitin/motion-kit

Componentes de vídeo para Remotion: títulos animados, gráficos (barras, partes de um todo, linha, comparação, cronologia), kit editorial (tarja, documento, foto de arquivo, mapa), 47 estilos visuais prontos, animações Lottie nas cores do estilo, apresentador com pele trocável, grafos e kit 3D. Cada peça é um componente React que anima pelo frame do vídeo.

| Pop art | Art déco | Swiss | | --- | --- | --- | | | | |

O pacote ainda não está publicado no npm. As instruções abaixo valem a partir da primeira versão publicada.

Instalação

Num projeto Remotion (crie um com npx create-video@latest):

npm install @viniciuskoitin/motion-kit
# os pacotes do Remotion que o kit usa, na MESMA versão do remotion do projeto:
npm install @remotion/layout-utils@<versão> @remotion/paths@<versão>
# só se for usar estilos com fonte própria (40 dos 47): as fontes, para public/fonts
npm install @viniciuskoitin/motion-kit-fonts
npx motion-kit fonts

Para um apresentador com desenho próprio, npx motion-kit sprites init <pasta> escreve o manifesto da pele a partir dos nomes das imagens, e npx motion-kit sprites check <pasta> o confere (COMPONENTS.md, "Pele de sprites em camadas").

npx remotion versions mostra a versão do Remotion do projeto. Pacotes @remotion/* em versões diferentes fazem o Remotion avisar "Version mismatch".

Primeiro vídeo

import { AbsoluteFill, Composition } from 'remotion';
import { SequenceBuilder } from '@viniciuskoitin/motion-kit';
import { BarList } from '@viniciuskoitin/motion-kit/charts';
import { KineticHeadline } from '@viniciuskoitin/motion-kit/editorial';
import { StyleFonts, StyleProvider, resolveStyle } from '@viniciuskoitin/motion-kit/styles';

const Video: React.FC = () => {
  const style = resolveStyle('pop-art');
  return (
    <StyleProvider style={style}>
      {/* As fontes do estilo chegam antes do primeiro frame. */}
      <StyleFonts>
        <AbsoluteFill style={{ background: style.theme.bg, color: style.theme.text, fontFamily: style.theme.font }}>
          <SequenceBuilder scenes={[
            { id: 'titulo', durationSec: 3, component: <KineticHeadline text="Vendas por região" highlight="região" /> },
            { id: 'barras', durationSec: 4, component: (
              <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
                <BarList items={[{ label: 'Norte', value: 12 }, { label: 'Sul', value: 30 }]} unit="%" />
              </AbsoluteFill>
            ) },
          ]} />
        </AbsoluteFill>
      </StyleFonts>
    </StyleProvider>
  );
};

export const Root: React.FC = () => (
  <Composition id="Video" component={Video} width={1080} height={1920} fps={30} durationInFrames={210} />
);

Os tamanhos das peças são dados em px de um quadro de 1080 de altura e acompanham a altura real do vídeo. O título animado e os gráficos ajustam a largura padrão ao quadro, deitado ou vertical.

Estilos

resolveStyle(slug) devolve um dos 47 estilos (STYLE_SLUGS lista todos): cores, tipografia, blocos, fundo e ritmo. Dentro de um <StyleProvider>, os componentes seguem o estilo. Quarenta estilos usam fontes próprias, que vêm num pacote à parte, @viniciuskoitin/motion-kit-fonts, para quem não as usa não precisar baixá-las: npx motion-kit fonts as copia, e <StyleFonts> as carrega antes do primeiro frame. Uma fonte ausente interrompe o render dizendo qual é e como resolver. Guia de escolha: estilos visuais.

Subpaths

A raiz (@viniciuskoitin/motion-kit) traz os hooks, os componentes básicos e o tema. Os kits maiores ficam em subpaths, para não entrar no bundle de quem não usa:

| Subpath | O que tem | | --- | --- | | ./charts | barras, partes de um todo, linha, comparação, cronologia | | ./editorial | título animado, tarja, selo de data, documento, foto de arquivo | | ./styles | os 47 estilos, StyleProvider, Surface, contas de cor | | ./styles/3d | os estilos de palco 3D (precisa dos pacotes do ./three) | | ./lottie | <LottieAsset>: Lottie no tempo do vídeo e nas cores do estilo | | ./host, ./host/dicebear | apresentador com pele trocável; peles do DiceBear | | ./pixel | mascote em pixel art | | ./three | kit cinematográfico 3D | | ./motion, ./fx | câmera, parallax, inclinação; fundos, grão, neon | | ./graph, ./complexity, ./genetic, ./nearest | grafos e diagramas didáticos | | ./geo | mapa com câmera (sem dados embutidos) | | ./i18n, ./audio, ./theme, ./schema, ./data | textos que cabem, áudio, tema injetável, esquemas zod, dados de apoio |

O catálogo completo, com as props de cada componente e quadros de exemplo, está em COMPONENTS.md.

Dependências

Sempre: react, react-dom, remotion, @remotion/layout-utils e @remotion/paths, com os pacotes @remotion/* na mesma versão do remotion. Só para alguns subpaths, e só se for usá-los:

| Subpath | Instale também | | --- | --- | | ./lottie | @remotion/lottie (mesma versão do remotion), lottie-web (5.11 ou mais nova) | | ./three, ./styles/3d | three, @react-three/fiber, @react-three/drei, @react-three/postprocessing, @remotion/three | | ./host/dicebear | @dicebear/core, @dicebear/collection (MIT; peças em CC0 1.0) | | ./data | react-icons |

Para os estilos com fonte própria: @viniciuskoitin/motion-kit-fonts, e depois npx motion-kit fonts.

Fora do Remotion

Os componentes calculam a animação com useCurrentFrame() e useVideoConfig(), que só existem dentro de uma <Composition> ou de um <Player> do @remotion/player. Para usá-los numa página React comum, use o <Player>; com controls={false}, autoPlay, loop e fundo transparente, a peça parece uma animação nativa da página.

'use client';
import { Player } from '@remotion/player';
import { PixelHost } from '@viniciuskoitin/motion-kit/pixel';

export function HostWidget() {
  return (
    <Player
      component={() => <PixelHost speaking gesticulate size={320} />}
      durationInFrames={150}
      fps={30}
      compositionWidth={320}
      compositionHeight={640}
      controls={false}
      autoPlay
      loop
      style={{ width: 320, height: 640, background: 'transparent' }}
    />
  );
}

Componentes de imagem, vídeo e som (ImageBackground, FootageBackground, MusicBed, SfxTrack) recebem src como texto: o pacote não chama staticFile(). Aponte para um caminho servido pelo seu projeto.

Licença

MIT (LICENSE). As fontes, no pacote @viniciuskoitin/motion-kit-fonts, seguem as licenças delas (OFL e Apache), uma por pasta.

O kit roda sobre o Remotion, que tem licença própria: gratuita para pessoas e empresas pequenas; empresas maiores precisam de uma licença paga. Confira os termos em remotion.dev/license antes de usar comercialmente.

Desenvolver o kit

Exemplos, testes, a produção de vídeos por JSON e MCP e o empacotamento estão em docs/DEVELOPMENT.md.