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.
Qué hace
metal-fx es un componente de efecto animado de metal líquido con WebGL para React. Envuelve un botón, chip o icono y renderiza un anillo de metal en tiempo real como superposición, manteniendo el hijo completamente interactivo. Se instala vía npm; licencia MIT.
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.
Características
Notas de campo
Revisado el Jun 21, 2026
Ideal para
Resultados para creadores
Ten cuidado
Probado con
Costo
Gratuito y de código abierto (MIT).
Herramientas usadas
Profundiza
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.
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.
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.
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.
Una biblioteca de efecto liquid-glass para la web: aplica refracción de vidrio realista, desenfoque, aberración cromática e iluminación a cualquier elemento HTML mediante shaders WebGL.
Best for Refracción de vidrio realista en la web mediante WebGLUna biblioteca de componentes con glassmorfismo inspirada en Apple, construida sobre shadcn/ui y Base UI, con componentes de estilo glass listos para usar (alert, button, card, calendar, popover, sidebar y más) instalables mediante el registro de shadcn.
Best for Añadir UI con glassmorfismo a un proyecto shadcn/uiUna biblioteca de animaciones de carga reutilizables en estilo dotmatrix para React y Next.js, instalable a través del registro de shadcn o copiando el código fuente directamente desde la documentación.
Best for Loaders con el distintivo estilo dotmatrixUna colección de spinners, loaders y animaciones de carga para aplicaciones web modernas, construida con React, Next.js, shadcn/ui, Tailwind CSS y Framer Motion.
Best for Añadir spinners y animaciones de carga rápidamenteUna galería ligera de animaciones de carga basadas en curvas matemáticas: curvas de rosa, figuras de Lissajous, hipotrocoides, cardioedes y más, construida en HTML, CSS y JavaScript puro con notas de fórmulas y código listo para copiar.
Best for Animaciones de carga distintivas impulsadas por matemáticas78+ 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