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.
O que faz
metal-fx é um componente React de efeito animado de metal líquido em WebGL. Envolva um botão, chip ou ícone e ele renderiza um anel metálico em tempo real como sobreposição, mantendo o filho totalmente interativo. Instale via npm; licença MIT.
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.
Recursos
Notas de campo
Revisado em Jun 21, 2026
Ideal para
Resultados para quem cria
Atenção
Testado com
Custo
Gratuito e de código aberto (MIT).
Ferramentas usadas
Aprofunde-se
First-person practitioner deep-dive explaining how Apple's MetalFX upscaling API actually works when repurposed for iOS video—covers internals and real implementation findings.
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.
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.
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.
Uma biblioteca de efeito liquid-glass para a web, aplica refração realista de vidro, blur, aberração cromática e iluminação em qualquer elemento HTML usando shaders WebGL.
Best for Refração realista de vidro na web via WebGLUma biblioteca de componentes glassmórficos inspirada na Apple, construída sobre shadcn/ui e Base UI, com componentes estilizados em vidro prontos para uso (alert, button, card, calendar, popover, sidebar e mais), instaláveis via o registro do shadcn.
Best for Adicionar UI com glassmorphism a um projeto shadcn/uiUma biblioteca de animações de carregamento reutilizáveis no estilo dotmatrix para React e Next.js, instalável pelo registro do shadcn ou copiando o código-fonte direto da documentação.
Best for Loaders com estilo dotmatrix distintoUma coleção de spinners, loaders e animações de carregamento para aplicações web modernas, construída com React, Next.js, shadcn/ui, Tailwind CSS e Framer Motion.
Best for Adicionar spinners e animações de carregamento rapidamenteUma galeria leve de animações de carregamento baseadas em curvas matemáticas - curvas rosa, figuras de Lissajous, hipotrocoides, cardioides e muito mais - construída com HTML, CSS e JavaScript puros, com notas de fórmulas e código copiável.
Best for Animações de carregamento distintas e orientadas por matemática78+ animated shadcn/ui components plus 100+ AI agent patterns, distributed as copy-paste source, free, open-source, and zero npm lock-in.
Best for React and Tailwind teams already using shadcn/ui who want animated, accessible components without npm package overhead