Shaderz

Introdcution

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

Shaders UI is a collection of reusable components, each with a bunch of examples in different styles that can be used in various positions. I wondered how users would enjoy the journey of scrolling through a website if they didn't feel there was something special about it.

Installation

Step 1: Install the shaderz package

npm install shaderz

Step 2: Add a shader component using CLI

npx shaderz add

This will prompt you to select a shader component. Once selected, the component will be automatically added to your /components/shaderz folder.

Step 3: How to apply a shader on your website's hero section background?

After adding the shader component, import and use it in your hero section:

app/page.tsx

import GradientWavesShader from '@/components/shaderz/GradientWavesShader';

export default function Home() {
  return (
    <section className="relative min-h-screen">
      {/* Shader background */}
      <div className="absolute inset-0 -z-10">
        <GradientWavesShader />
      </div>
      
      {/* Your hero content */}
      <div className="relative z-10 flex items-center justify-center min-h-screen">
        <h1 className="text-6xl font-bold text-white">
          Welcome to Your Site
        </h1>
      </div>
    </section>
  );
}

Required Dependencies

You must install tailwindcss, three.js and framer-motion:

npm install three @types/three framer-motion