Balatro

Shaders 9

About

background beautiful animated using shaders

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

Code

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

Usage.tsx


import { Component } from "@/components/ui/balatro"; 

const DemoOne = () => {
  return (
    <div className="flex w-full h-screen justify-center items-center bg-zinc-950 p-4">
      <div className="relative w-[600px] h-[400px] sm:w-[800px] sm:h-[500px] lg:w-[1000px] lg:h-[600px] rounded-xl overflow-hidden shadow-2xl border border-zinc-800">
        <Component
          isRotate={true}         
          mouseInteraction={true} 
          pixelFilter={700}      
          color1="#FF4500"        
          color2="#4169E1"        
          color3="#2F4F4F"        
          contrast={4.0}
          lighting={0.5}
        />
      </div>
    </div>
  );
};

export { DemoOne };