delphinereverse794/remotion-transitions

O que remotion-transitions faz?

Construa transições de cena personalizadas no Remotion usando um plugin com matemática de animação, padrões de temporização e exemplos prontos para uso.

Visão Geral

Este plugin para o Remotion permite criar transições de cena altamente personalizáveis, combinando funções matemáticas para animações, padrões de temporização (easing) e exemplos práticos. Ele é ideal para desenvolvedores que buscam controle fino sobre as transições em vídeos gerados programaticamente.

Recursos

• Matemática de Animação: Funções para calcular interpolações, curvas e efeitos visuais.
• Padrões de Temporização: Easing functions como linear, ease-in, ease-out, ease-in-out e curvas personalizadas.
• Exemplos Prontos: Transições como fade, slide, zoom e wipe, com código demonstrativo.
• Fácil Integração: Funciona com componentes React no Remotion, sem necessidade de ferramentas externas.

Instalação

npm install delphinereverse794/remotion-transitions

Uso Básico

import { useTransition } from 'delphinereverse794/remotion-transitions';

const MyScene = () => {
  const transition = useTransition({
    from: { opacity: 0 },
    to: { opacity: 1 },
    duration: 30,
    easing: 'ease-in-out'
  });

  return (
    <div style={{ opacity: transition.opacity }}>
      <h1>Minha Cena</h1>
    </div>
  );
};

Exemplo de Transição Personalizada

import { interpolate } from 'delphinereverse794/remotion-transitions';
import { useCurrentFrame } from 'remotion';

const CustomTransition = () => {
  const frame = useCurrentFrame();
  const progress = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });

  return (
    <div style={{
      transform: `translateX(${progress * 100}px)`,
      opacity: progress
    }}>
      <p>Transição personalizada</p>
    </div>
  );
};

Configuração

O plugin aceita opções como duration, easing e delay. Você também pode usar funções de easing personalizadas.

Licença

Este projeto está sob a licença MIT. Consulte o arquivo LICENSE para mais detalhes.