DocumentationGetting Started

Getting Started

Pixel provides production-ready WebGL shader backgrounds. Follow this guide to add high-performance visuals to your application in minutes.

Prerequisites

React 18+ or Next.js
Tailwind CSS installed
shadcn/ui initialized

Installation

1

Add a shader component

Use the CLI to add a specific shader to your project. This will install necessary dependencies (like three.js) automatically.

$ pnpm dlx shadcn add https://pixel.devsethi.site/r/ocean-wave.json
2

Import and use

Import the component into your page or layout. The component fills its parent container by default.

import OceanWave from "@/components/shaders/ocean-wave"export default function Hero(): JSX.Element {  return (    <OceanWave className="min-h-screen">      <div className="flex items-center justify-center h-full p-8">        <h1 className="text-5xl font-bold text-white">          Hello World        </h1>      </div>    </OceanWave>  )}

What's Next?

Browse Gallery

Explore our collection of liquid, grain, and geometric shaders.

Coming Soon
Customization

Learn how to tweak uniforms, colors, and performance settings.