Something new is coming.Join the waitlist

Liquid Metal Border

PreviousNext

A wrapper component with an animated liquid metal shader effect border.

Installation

npx shadcn@latest add https://tentui.com/r/liquid-metal-border.json

Usage

LiquidMetalBorder is a wrapper <div> that accepts an inner contentClassName.

import { LiquidMetalBorder } from "@/components/liquid-metal-border";
 
export function LiquidMetalCard() {
  return (
    <LiquidMetalBorder
      borderWidth={4}
      borderRadius={16}
      contentClassName="bg-card p-4"
    >
      <div>
        <h3>Animated Border</h3>
        <p>A shader-driven border around the element.</p>
      </div>
    </LiquidMetalBorder>
  );
}

Props

PropTypeDefaultDescription
borderWidthnumber2Width of the liquid metal border.
borderRadiusnumber16Outer border radius of the wrapper.
contentClassNamestring—Class applied to the inner content layer.
speednumber0.6Animation speed of the shader effect.
repetitionnumber4Number of pattern repetitions.
softnessnumber0.5Softness of the metallic highlights.
shiftRednumber0.3Red color shift amount.
shiftBluenumber0.3Blue color shift amount.
distortionnumber0Distortion amount applied to the pattern.
contournumber0Contour intensity.
anglenumber45Angle of the shader pattern in degrees.
scalenumber8Scale of the shader pattern.
offsetXnumber0.1Horizontal offset of the pattern.
offsetYnumber-0.1Vertical offset of the pattern.

All standard <div> props (className, style, onClick, etc.) are applied to the outer container.

How it works

The component consists of a padding-based parent container that holds an absolute background and a relative foreground element.

  1. Shader layer. LiquidMetal component from @paper-design/shaders-react is rendered as the absolute background of the parent div.
  2. Padding border. The border's visual thickness is controlled by the outer div's inline padding value, revealing the shader beneath the content area.
  3. Inner layer. The inner layer holds the children with an appropriate inner borderRadius formula calculated dynamically.