WebGL Shader

Heroes 2.6K

About

Now the WebGL shader component is properly imported and rendered on the main page. The colorful wave distortion effect should display fullscreen when you view the page.

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

Code

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

Usage.tsx

import { WebGLShader } from "@/components/ui/web-gl-shader";
import { LiquidButton } from '@/components/ui/liquid-glass-button' 

export default function DemoOne() {
  return (
    <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
      <WebGLShader/> 
      <div className="relative border border-[#27272a] p-2 w-full mx-auto max-w-3xl">
      <main className="relative border border-[#27272a] py-10 overflow-hidden">
                <h1 className="mb-3 text-white text-center text-7xl font-extrabold tracking-tighter md:text-[clamp(2rem,8vw,7rem)]">Design is Everything</h1>
                <p className="text-white/60 px-6 text-center text-xs md:text-sm lg:text-lg">Unleashing creativity through bold visuals, seamless interfaces, and limitless possibilities.</p>
                <div className="my-8 flex items-center justify-center gap-1">
                    <span className="relative flex h-3 w-3 items-center justify-center">
                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
                        <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
                    </span>
                    <p className="text-xs text-green-500">Available for New Projects</p>
                </div>
                
            <div className="flex justify-center"> 
                <LiquidButton className="text-white border rounded-full" size={'xl'}>Let's Go</LiquidButton> 
            </div> 
            </main>
            </div>
    </div>
  )
}