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}
/>