# Metal FX

By **jakubantalik** · Software & Tools

Um efeito animado de metal líquido em WebGL para React. Envolva um botão, chip ou ícone para adicionar um anel metálico em tempo real, com presets, temas, intensidade ajustável e reflexo de proximidade opcional em elementos vizinhos.

- Source: https://metal.jakubantalik.com
- Repository: https://github.com/Jakubantalik/metal-fx
- Install: `npm i metal-fx`
- Tags: react, webgl, animation, ui-component, open-source, shader, dark-mode, npm
- Pricing: free
- Upvotes: 0

## Features

- Anel de metal líquido WebGL em tempo real para botões, chips e ícones em React
- Mantém o elemento filho totalmente interativo
- Variantes button e circle com presets chromatic, silver e gold
- O tema segue o esquema de cores do sistema operacional ou o estado da sua aplicação (compatível com SSR)
- Intensidade ajustável, modo pausado e border-radius personalizado
- Reflexo de proximidade em modo escuro para elementos vizinhos
- Contexto WebGL compartilhado e um único loop RAF para maior eficiência

---

metal-fx é um efeito animado de metal líquido em WebGL para React. Envolva um único elemento filho, um botão, chip ou ícone, e o componente o mede e renderiza um anel metálico em tempo real por cima, enquanto o filho permanece totalmente interativo (as sobreposições usam `pointer-events: none`). Ele oferece variantes de botão e círculo, três paletas incluídas (chromatic, silver, gold), cada uma com blocos ajustados para modo escuro e claro, e uma prop `theme` que segue o esquema de cores do sistema operacional por padrão (compatível com SSR, reidratando no cliente) ou pode ser controlada pelo estado da sua aplicação.

É altamente configurável: intensidade ajustável de 0 a 1, um modo pausado que congela o shader, uma substituição personalizada de `border-radius` e um reflexo de proximidade exclusivo para modo escuro que espelha o anel metálico nos elementos vizinhos referenciados. A performance é prioridade: um único contexto WebGL compartilhado e um único loop `requestAnimationFrame` gerenciam todas as instâncias, o `IntersectionObserver` pausa instâncias fora da tela, os callbacks do `ResizeObserver` são debounced e o contexto GL é liberado quando a última instância é desmontada. Instale via npm; licença MIT.

## FAQ

### O que é metal-fx?

Um componente React que renderiza um anel animado de metal líquido em WebGL ao redor de um botão, chip ou ícone, com presets, temas e reflexo de proximidade, mantendo o elemento envolvido interativo.

### Ele é eficiente com muitas instâncias?

Sim. Um único contexto WebGL compartilhado e um único loop `requestAnimationFrame` gerenciam todas as instâncias, o `IntersectionObserver` pausa as instâncias fora da tela e o contexto é liberado quando a última instância é desmontada.

### Ele suporta renderização no servidor (SSR)?

Sim. Ele renderiza um placeholder transparente durante o SSR e só inicializa o pipeline WebGL após a hidratação, portanto não há falha visual no efeito nem erros de SSR.

---
[View on Analog](https://analoghq.ai/pt-br/jakubantalik/software-tools/metal-fx)