# Metal FX By **jakubantalik** · Software & Tools Un efecto animado de metal líquido con WebGL para React; envuelve un botón, chip o icono para darle un anillo de metal en tiempo real, con presets, tematización, intensidad ajustable y reflejo de proximidad opcional en elementos vecinos. - 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 - Anillo de metal líquido WebGL en tiempo real para botones, chips e iconos de React - Mantiene el elemento hijo envuelto completamente interactivo - Variantes button y circle con presets chromatic, silver y gold - El tema sigue el esquema de color del sistema operativo o el estado de tu aplicación (compatible con SSR) - Intensidad ajustable, modo paused y border-radius personalizado - Reflejo de proximidad en modo oscuro para elementos vecinos - Contexto WebGL compartido y un único bucle RAF para mayor eficiencia --- metal-fx es un efecto animado de metal líquido con WebGL para React. Envuelve un único elemento hijo, ya sea un botón, chip o icono, y el componente lo mide y pinta un anillo de metal en tiempo real por encima, mientras el hijo permanece totalmente interactivo (las superposiciones usan `pointer-events: none`). Ofrece variantes de botón y de círculo, tres paletas incluidas (chromatic, silver, gold), cada una con bloques ajustados para modo oscuro y claro, y una prop `theme` que sigue el esquema de color del sistema operativo por defecto (compatible con SSR, con rehidratación en el cliente) o puede ser controlada desde el estado de tu aplicación. Es muy configurable: una prop `strength` ajustable de 0 a 1, un modo `paused` que congela el shader, una anulación personalizada de `border-radius`, y un reflejo de proximidad exclusivo para modo oscuro que replica el anillo de metal en los elementos vecinos que referencie. El rendimiento es prioritario: un único contexto WebGL compartido y un bucle `requestAnimationFrame` gestionan cada instancia, `IntersectionObserver` pausa las instancias fuera de pantalla, los callbacks de `ResizeObserver` están con debounce, y el contexto GL se libera cuando se desmonta la última instancia. Se instala desde npm; licencia MIT. ## FAQ ### ¿Qué es metal-fx? Un componente de React que pinta un anillo animado de metal líquido con WebGL alrededor de un botón, chip o icono, con presets, tematización y reflejo de proximidad, manteniendo el elemento envuelto interactivo. ### ¿Es eficiente con muchas instancias? Sí. Un único contexto WebGL compartido y un bucle `requestAnimationFrame` gestionan cada instancia, `IntersectionObserver` pausa las que están fuera de pantalla, y el contexto se libera cuando se desmonta la última instancia. ### ¿Es compatible con la renderización en el servidor (SSR)? Sí. Renderiza un marcador de posición transparente durante el SSR y solo monta el pipeline WebGL tras la hidratación, por lo que no hay ningún destello de efecto roto ni errores de SSR. --- [View on Analog](https://analoghq.ai/es/jakubantalik/software-tools/metal-fx)