Jakubantalik

Jakubantalik / metal-fx

Public

Animated WebGL liquid-metal effect for React buttons and UI components

metal.jakubantalik.com
17
2
100% credibility
Found May 05, 2026 at 17 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A React component library that adds real-time animated liquid metal visual effects to buttons, chips, or icons, with customizable variants, color presets, themes, glow intensity, and proximity reflections on neighboring elements.

How It Works

1
🔍 Discover the shiny effect

You stumble upon a live demo of buttons and icons that look like liquid metal, glowing and reflecting beautifully.

2
💾 Add it to your project

You grab the ready-made tool and drop it into your website builder.

3
✨ Wrap your button

You surround your upgrade button or icon with the special wrapper, and instantly it gets a mesmerizing metal ring.

4
Choose your style
💊
Pill button

Perfect for long labels like 'Upgrade Now' with a sleek rounded frame.

⭕
Circle icon

Great for simple arrows or icons in a compact glowing ring.

5
🌙 Match your site's look

Set it to follow your site's dark or light mode, or tweak the glow brightness.

6
🔮 Add reflections

Point it at nearby buttons so they catch a soft glow from the metal shine.

🚀 Premium buttons alive

Your buttons now pulse with liquid metal magic, making your site feel ultra-modern and interactive.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 17 to 17 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is metal-fx?

metal-fx is a TypeScript React component that wraps buttons, chips, or icons with a real-time WebGL liquid-metal ring effect, complete with flowing shaders, glow halos, and proximity reflections on nearby elements. It solves the problem of flat UI accents by delivering premium, animated metallic borders that adapt to dark/light themes and OS preferences. Drop it in via npm, pick a preset like chromatic or gold, and your CTAs shimmer without custom shader code.

Why is it gaining traction?

It recreates a pixel-perfect, high-end WebGL animated background effect from pro demos, with smart optimizations like shared rendering and IntersectionObserver pauses that keep 60fps even with dozens of instances. Proximity reflections light up adjacent chips automatically in dark mode, and SSR-safe hydration means no flash on load. No alternatives match this blend of polish, theme sync, and zero-config presets.

Who should use this?

React frontend devs crafting SaaS upgrade buttons or send icons in dashboards. Designers prototyping fintech cards or gaming HUDs needing metallic pop. Teams building animated GitHub readmes or profiles where subtle WebGL flair stands out without perf hits.

Verdict

Solid for niche metallic effects—excellent docs, live demo, and MIT license make it easy to prototype. At 17 stars and 1.0% credibility, it's immature; vet perf in your app before prime time.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.