Lottie

Apresentação

O componente Lottie é responsável por exibir animações Lottie em sua aplicação. Ele utiliza a biblioteca @lottiefiles/react-lottie-player para renderizar animações vetoriais de forma eficiente e interativa.

Quando usar

• Para exibir animações vetoriais
• Para criar elementos de loading
• Para adicionar ilustrações animadas
• Para implementar micro-interações
• Para criar animações de transição
• Para exibir animações de sucesso/erro

Forma básica de uso

import { Lottie } from 'eitri-luminus';

// Animação básica
<Lottie
  src="/animations/loading.json"
  autoPlay
  loop
/>

// Animação com tamanho personalizado
<Lottie
  src="/animations/success.json"
  width={200}
  height={200}
  speed={1.5}
/>

// Animação com estilo personalizado
<Lottie
  src="/animations/error.json"
  className="custom-animation"
  style={{ backgroundColor: '#f0f0f0' }}
/>

// Animação sem loop
<Lottie
  src="/animations/notification.json"
  loop={false}
  autoPlay={true}
/>

Propriedades

Propriedade	Tipo	Descrição
src	string	URL ou caminho do arquivo de animação Lottie
autoPlay	boolean	Define se a animação deve iniciar automaticamente (padrão: true)
loop	boolean	Define se a animação deve repetir (padrão: true)
speed	number	Velocidade da animação (padrão: 1)
height	string | number	Altura do container da animação
width	string | number	Largura do container da animação
style	object	Estilos inline para o container da animação
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente

Heranças

O componente Lottie herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente utiliza a biblioteca @lottiefiles/react-lottie-player
• Suporta arquivos de animação no formato JSON
• É possível controlar a reprodução através das props
• O componente é responsivo por padrão
• Recomenda-se usar para animações vetoriais leves
• Ideal para micro-interações e feedback visual
• Pode ser combinado com outros componentes para criar interfaces mais ricas
• Suporta personalização através de classes CSS e estilos inline