Grainy Light Leak Shader Background

Grainy light leak shader background in WebGL2: an out-of-focus silver and violet haze on black film grain, cut by soft shadows. The haze gathers under the pointer and a click sends a ripple through it. Full-screen, with your content layered on top. No three.js, no textures, React only.

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

"use client"

import VelvetHaze from "@/components/ui/velvet-haze"

export default function Demo() {
  return (
    // w-full matters: 21st centres demos in a flex wrapper, and a flex item
    // left at width:auto shrinks the haze to 0px wide.
    <div className="relative w-full">
      <VelvetHaze />
    </div>
  )
}