Liquid Metal Logo
Liquid metal shader effect with chromatic aberration and animated ripples. Uses the LiquidMetal shader from @paper-design/shaders-react.
Variants
Emerald
Silver
Gold
Props
colorTintTint color applied to the metallic surface (hex)colorBackBackground color (hex)speedAnimation speed (0-1, default: 0.5)repetitionNumber of ripple layers (1-10, default: 4)shiftRedRed channel chromatic offset (-1 to 1)shiftBlueBlue channel chromatic offset (-1 to 1)distortionSurface distortion amount (0-1)sizeSize in pixels (default: 200)Usage
import { LiquidMetalLogo } from "@/components/liquid-metal-logo";
<LiquidMetalLogo
size={180}
colorBack="#000000"
colorTint="#10b981"
speed={0.5}
repetition={4}
/>