liftbox

O liftbox é uma lightbox open source com licença MIT para React 18 e 19, publicada no npm como liftbox (começou como @esdrassantos06/gallery). Abre imagens, vídeos e embeds por cima da página com uma animação que sai da miniatura clicada, recortada da mesma forma, e volta para ela ao fechar. O pacote inteiro não tem dependências em runtime e pesa cerca de 13 kB de JavaScript e 3 kB de CSS, minificados e comprimidos com brotli.

O input assenta em Pointer Events: swipe entre slides, pinch, roda do rato ou toque duplo para fazer zoom, arrastar para mover uma imagem ampliada sem perder as margens e pinch para fora para fechar. Os slides podem ser rodados, abertos em ecrã inteiro, passados em slideshow, descarregados ou partilhados. Os vídeos tocam do YouTube através do youtube-nocookie.com, do Vimeo com do not track, como vídeo nativo ou em qualquer player personalizado renderizado num slot.

Traz ainda grelhas masonry, justified e uniformes com filtro por categoria, serve AVIF ou WebP através de fontes picture e guarda o slide aberto no hash do URL, pelo número ou por nome, para que uma foto possa ser partilhada e o botão de voltar a feche. Mantém-se rápida com milhares de slides: a imagem atual carrega primeiro, o pré-carregamento adapta-se a ligações lentas e a faixa de miniaturas e as grelhas só renderizam o que está à vista.

A acessibilidade veio primeiro. A lightbox é um diálogo modal com focus trap, o foco volta para a miniatura ao fechar, uma live region anuncia o slide atual, todas as ações têm atalho de teclado e o movimento reduzido é respeitado. Também suporta layouts da direita para a esquerda, renderiza em segurança no servidor e expõe todo o tema como propriedades CSS personalizadas.

A biblioteca foi escrita com testes primeiro: testes unitários com Vitest, testes end to end com Playwright em desktop e num perfil mobile, CI em React 18 e 19, orçamentos de tamanho e verificações ao pacote publicado. As releases saem do GitHub Actions com Trusted Publishing do npm e provenance, e a documentação vive em liftbox.digital, um site em Next.js e Fumadocs servido como páginas estáticas a partir da CDN, com uma Content Security Policy fixa, uma comparação honesta com outras cinco lightboxes para React e guias de migração a partir do yet-another-react-lightbox e do lightGallery.