Shader Canvas

Heroes

About

a Next.js component based on your WebGL/GLea code

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shader Canvas to your project and fits it to your theme.

Code

How Shader Canvas is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ShaderCanvas } from "@/components/ui/shader-canvas";

export default function DemoOne() {
  return (
    <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden">
      <ShaderCanvas/>
       <div style={{ backdropFilter: 'url("#container-glass") blur(12px)' }}
         className="flex absolute h-[500px] w-[500px] items-center justify-between gap-3 rounded-3xl pl-6 pr-3 shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(0,0,0,0.9),inset_-3px_-3px_0.5px_-3px_rgba(0,0,0,0.85),inset_1px_1px_1px_-0.5px_rgba(0,0,0,0.6),inset_-1px_-1px_1px_-0.5px_rgba(0,0,0,0.6),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)] backdrop-blur-md transition-all dark:shadow-[0_0_8px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3.5px_rgba(255,255,255,0.09),inset_-3px_-3px_0.5px_-3.5px_rgba(255,255,255,0.85),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.6),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.6),inset_0_0_6px_6px_rgba(255,255,255,0.12),inset_0_0_2px_2px_rgba(255,255,255,0.06),0_0_12px_rgba(0,0,0,0.15)]"> 
      <span className="pointer-events-none p-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap text-white">
        Shader Canvas
      </span>
       </div>
    </div>
  )
}


// GlassFilter.tsx
export function GlassFilter() {
    return (
        <svg className="hidden">
            <defs>
                <filter
                    id="container-glass"
                    x="0%"
                    y="0%"
                    width="100%"
                    height="100%"
                    colorInterpolationFilters="sRGB">
                    <feTurbulence
                        type="fractalNoise"
                        baseFrequency="0.02 0.02"
                        numOctaves="1"
                        seed="1"
                        result="turbulence"
                    />
                    <feGaussianBlur
                        in="turbulence"
                        stdDeviation="2"
                        result="blurredNoise"
                    />
                    <feDisplacementMap
                        in="SourceGraphic"
                        in2="blurredNoise"
                        scale="120"
                        xChannelSelector="R"
                        yChannelSelector="B"
                        result="displaced"
                    />
                    <feGaussianBlur
                        in="displaced"
                        stdDeviation="4"
                        result="finalBlur"
                    />
                    <feComposite
                        in="finalBlur"
                        in2="finalBlur"
                        operator="over"
                    />
                </filter>
            </defs>
        </svg>
    )
}