Metal
Real-time liquid metal for buttons, icons, text and badges — a wandering halo, reflections on neighbours, a cursor that bends the ring. Built on Paper Shaders.
Installation
npm install metal-fx
Usage
import { MetalFx, MetalText, MetalBadge } from 'metal-fx';
<MetalFx preset="chromatic" strength={1}>
<button>Upgrade to Pro</button>
</MetalFx>
<MetalText font="500 24px/1.2 Inter" color="#E2E2E2">Pro</MetalText>
<MetalBadge>New</MetalBadge>
Installation
iOS 17+. Build through Xcode: the Metal shader is compiled by Xcode's build system, not by SwiftPM alone. The phone's tilt bends the rings; source: .magnet bends them toward a magnet near the phone instead.
// Package.swift — or Xcode: File › Add Package Dependencies… › paste the URL (Branch: main) .package(url: "https://github.com/Jakubantalik/Libraries.dev", branch: "main") // …and in your target's dependencies: .product(name: "MetalFxKit", package: "Libraries.dev")
Usage
import MetalFxKit
MetalFx(variant: .circle, preset: .chromatic, strength: 0.9, innerShadow: true, id: "send") {
Image(systemName: "arrow.up").frame(width: 40, height: 40)
}
Text("Auto").metalReflection(of: "send")
MetalText("Pro")
MetalBadge("New")
// Bend toward a magnet near the phone instead of the tilt:
MetalFx(variant: .circle, source: .magnet) {
Image(systemName: "arrow.right").frame(width: 52, height: 52)
}
Add the Metal effect from Libraries.dev to my React app.
Install:
npm install metal-fx
Usage (v2):
import { MetalFx, MetalText, MetalBadge, useMetalBend, useMetalTextReflection } from 'metal-fx';
<MetalFx preset="chromatic" strength={1}>
<button>Upgrade to Pro</button>
</MetalFx>
<MetalFx preset="chromatic" variant="circle" innerShadow ref={ref}> // useMetalBend(ref) for the cursor dent
<button aria-label="Send"><ArrowUpIcon /></button>
</MetalFx>
<MetalText font="500 24px/1.2 Inter" color="#E2E2E2">Pro</MetalText>
<MetalBadge>New</MetalBadge>
Props (MetalFx):
- preset: "chromatic" | "silver" | "gold" — each ships dark and light tunings
- variant: "button" | "circle"
- strength: 0-1, multiplies the shader opacity and glow alpha
- theme: "light" | "dark", picks the preset's matching side
- innerShadow: light rim on the ring's top inside edge
- reflectionTargets: refs of neighbours that catch the metal
- disableGlow, glowGain, paused
Metal wraps a button, icon, text or badge in a real-time WebGL liquid-metal
effect with a wandering halo. Needs React 18+ and WebGL2 (falls back to the
plain child).
Docs: https://libraries.dev/metal.html