Back

Customization

All shaders accept props for colors, speed, and effects.

Props

classNamestring

Position and size the shader.

<LiquidMetal className="absolute inset-0 -z-10" />
speednumber (default: 1)

Animation speed multiplier.

<SilkFlow speed={0.5} />  // Slower
<SilkFlow speed={2} />    // Faster
baseColor / color1string (hex)

Primary color. Use hex format.

<LiquidMetal baseColor="#1a1a2e" highlightColor="#ffffff" />
scale / distortion / intensitynumber

Effect-specific parameters. Check each shader's controls panel for available options.

Colors

Use hex format (#rrggbb). Each shader has different color props.

LiquidMetalbaseColor, highlightColor
SilkFlowcolor1, color2, color3, bgColor
NeonHorizonskyColor1, skyColor2, gridColor, sunColor
GradientOrbscolor1-4, bgColor

Full Example

page.tsx
import { SilkFlow } from "@/components/SilkFlow"

export default function Hero() {
  return (
    <section className="relative h-screen">
      <SilkFlow
        className="absolute inset-0 -z-10"
        color1="#6366f1"
        color2="#8b5cf6"
        color3="#ec4899"
        bgColor="#0f0f23"
        speed={0.8}
        scale={1.2}
      />
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1>Your Content</h1>
      </div>
    </section>
  )
}
Getting StartedBrowse Shaders