Svelte Bits reúne 130+ componentes animados e personalizáveis

O que é

O Svelte Bits é uma biblioteca de componentes animados e personalizáveis para Svelte, voltada a desenvolvedores que criam interfaces visuais. O catálogo reúne mais de 130 componentes, incluindo fundos, efeitos de texto, animações e padrões de interface. Entre os exemplos exibidos estão DotField, ColorBends, Line Waves, Blob Cursor, Soft Aurora, Magic Rings, Radar, Shape Grid, Ribbons, Aurora e Dock.

Organização e tecnologias

A biblioteca organiza os componentes em quatro categorias, com exemplos de fundos, animações, animações de texto e componentes. Os itens são fornecidos como componentes tipados para Svelte 5, escritos em TypeScript e estilizados com Tailwind. A página afirma que eles podem ser personalizados e incorporados diretamente aos projetos, evitando que cada elemento precise ser construído do zero.

O site também apresenta um editor que permite alterar valores de configuração por meio de arraste ou clique. No exemplo do ColorBends, parâmetros como cor, velocidade, frequência, ruído, largura de faixa, rotação, desvanecimento, iterações e intensidade podem ser ajustados.

Instalação e uso

Os componentes podem ser adicionados ao código por meio do jsrepo ou do shadcn, usando gerenciadores e executores como npx, pnpm, Bun ou Yarn. A página fornece, por exemplo, o comando npx jsrepo add https://sveltebits.xyz/r/aurora.json. Depois da instalação, os componentes ficam disponíveis no código do projeto para uso e adaptação.

O Svelte Bits se apresenta como um projeto de código aberto e gratuito. A página também afirma que a biblioteca funciona com ferramentas como Cursor, Copilot e v0: o usuário pode descrever o que precisa, adicionar o componente e utilizá-lo no projeto.

Relação com outros projetos

O Svelte Bits é descrito como uma adaptação para Svelte do React Bits, projeto associado a davidhdev. O site mantém links para documentação, comunidade e GitHub, além de referências a versões relacionadas para React e Vue. A proposta central é oferecer componentes visuais animados já prontos, personalizáveis e integráveis a aplicações Svelte.