Gradient Blinds Shader

Gradient with venetian blind effect and spotlight.

Required Dependencies

npm install ogl

NPM Installation (Recommended)

npx shaderz add

Select "Gradient Blinds" from the interactive list.

Basic Usage

import GradientBlinds from '@/components/shaders/gradient-blinds/Hero';

export default function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <GradientBlinds />
    </div>
  );
}

Full Screen Hero Background

To use the shader as a background, position it absolutely within a relative container and place your content on top using z-index.

import GradientBlinds from '@/components/shaders/gradient-blinds/Hero';

export default function HeroSection() {
  return (
    <div className="relative w-full h-screen overflow-hidden">
      {/* Shader Background */}
      <div className="absolute inset-0 z-0">
        <GradientBlinds />
      </div>

      {/* Content Layer */}
      <div className="relative z-10 flex flex-col items-center justify-center h-full text-white">
        <h1 className="text-6xl font-bold">Your Content Here</h1>
      </div>
    </div>
  );
}

Manual Installation

Alternatively, copy the component code directly into your project at components/shaders/gradient-blinds/Hero.tsx

Full Component Code

'use client';
import React from 'react';
import GradientBlinds from './GradientBlinds';

const Hero = () => {
    return (
        <div className="absolute inset-0 w-full h-full bg-black overflow-hidden">
            <GradientBlinds
                gradientColors={['#FF9FFC', '#5227FF']}
                angle={0}
                noise={0.05}
                blindCount={16}
                spotlightRadius={0.5}
                spotlightSoftness={1}
                spotlightOpacity={1}
                mirrorGradient={false}
                distortAmount={0}
                shineDirection="left"
                mixBlendMode="lighten"
            />
        </div>
    );
};

export default Hero;