Getting Started

Copy-paste WebGL shaders for React/Next.js. No dependencies.

Pick a shader

Browse the collection and find one you like.

View shaders

Download or copy

Click to download the .tsx file, or copy the code directly.

Add to your project

Drop it in your components folder and import.

page.tsx

import { LiquidMetal } from "@/components/LiquidMetal"

export default function Page() {
  return (
    <div className="relative min-h-screen">
      <LiquidMetal className="absolute inset-0 -z-10" />
      {/* Your content */}
    </div>
  )
}

Requirements

Framework

React 18+
Next.js 13+

Browser

WebGL support (all modern browsers)

Each shader is self-contained. No npm packages needed.

MIT Licensed — Free for personal and commercial use.