Pixel Blast

Clique no preview: cada clique dispara uma onda e, a cada cinco, o formato dos pixels avança (quadrado → círculo → losango).

Instalação

bun add @adila-sh/ui

Uso

Como fundo de uma seção — o container precisa de position: relative e o PixelBlast se posiciona sobre ele:

import { PixelBlast } from '@adila-sh/ui';

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden">
      <PixelBlast className="absolute inset-0 -z-10" />
      <h1 className="text-white">Design System</h1>
    </section>
  );
}

Sem className, o default é fixed inset-0 -z-10 — cobre a viewport inteira.

Props

Comportamento

• Cor: lê o token --primary do tema e re-lê quando o tema muda — acompanha light e dark sem configuração.
• Sem dependências: WebGL cru, sem three.js.
• Degradação: sem suporte a WebGL, o canvas é escondido e o fundo bg-primary assume.
• Movimento reduzido: respeita prefers-reduced-motion, atenuando a animação.
• Performance: o loop pausa quando o canvas sai da viewport e retoma sem salto.
• Interação: os listeners de ponteiro são registrados em window, então cliques em qualquer ponto da página disparam ondas — não apenas os cliques sobre o canvas.