React Balatro Background

React Balatro-style background with WebGL rendering. Features swirling psychedelic patterns, mouse interaction, and customizable colors inspired by the card game aesthetic.

React

OGL

Creating Balatro-style psychedelic effects?

Join our Discord community for help from other developers working with shader effects and WebGL.

Ever played Balatro and been mesmerized by those swirling, psychedelic card backgrounds that seem to pulse and flow with hypnotic energy? The way colors spiral and blend in endless patterns, creating that perfect mix of chaos and control that makes each hand feel electric? Most backgrounds are static, predictable, and lack the dynamic energy that makes interfaces feel alive. This React component recreates that iconic Balatro aesthetic with WebGL shaders, mathematical spiral algorithms, and mouse interaction that transforms any surface into a mesmerizing vortex of color.

Interactive Balatro-style spirals with mouse control

Watch psychedelic patterns swirl and respond to mouse movement with authentic game-inspired effects:

Loading component...

// @ts-nocheck'use client';import React, { useEffect, useRef, forwardRef } from "react";// @ts-ignoreimport { Renderer, Program, Mesh, Triangle } from "ogl";import { cn } from '@/lib/utils';export interface BalatroBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {  spinRotation?: number;  spinSpeed?: number;  offset?: [number, number];  color1?: string;  color2?: string;  color3?: string;  contrast?: number;  lighting?: number;  spinAmount?: number;  pixelFilter?: number;  spinEase?: number;  isRotate?: boolean;  mouseInteraction?: boolean;}function hexToVec4(hex: string): [number, number, number, number] {  let hexStr = hex.replace("#", "");  let r = 0,    g = 0,    b = 0,    a = 1;  if (hexStr.length === 6) {    r = parseInt(hexStr.slice(0, 2), 16) / 255;    g = parseInt(hexStr.slice(2, 4), 16) / 255;    b = parseInt(hexStr.slice(4, 6), 16) / 255;  } else if (hexStr.length === 8) {    r = parseInt(hexStr.slice(0, 2), 16) / 255;    g = parseInt(hexStr.slice(2, 4), 16) / 255;    b = parseInt(hexStr.slice(4, 6), 16) / 255;    a = parseInt(hexStr.slice(6, 8), 16) / 255;  }  return [r, g, b, a];}const vertexShader = `attribute vec2 uv;attribute vec2 position;varying vec2 vUv;void main() {  vUv = uv;  gl_Position = vec4(position, 0, 1);}`;const fragmentShader = `precision highp float;#define PI 3.14159265359uniform float iTime;uniform vec3 iResolution;uniform float uSpinRotation;uniform float uSpinSpeed;uniform vec2 uOffset;uniform vec4 uColor1;uniform vec4 uColor2;uniform vec4 uColor3;uniform float uContrast;uniform float uLighting;uniform float uSpinAmount;uniform float uPixelFilter;uniform float uSpinEase;uniform bool uIsRotate;uniform vec2 uMouse;varying vec2 vUv;vec4 effect(vec2 screenSize, vec2 screen_coords) {    float pixel_size = length(screenSize.xy) / uPixelFilter;    vec2 uv = (floor(screen_coords.xy * (1.0 / pixel_size)) * pixel_size - 0.5 * screenSize.xy) / length(screenSize.xy) - uOffset;    float uv_len = length(uv);        float speed = (uSpinRotation * uSpinEase * 0.2);    if(uIsRotate){       speed = iTime * speed;    }    speed += 302.2;        float mouseInfluence = (uMouse.x * 2.0 - 1.0);    speed += mouseInfluence * 0.1;        float new_pixel_angle = atan(uv.y, uv.x) + speed - uSpinEase * 20.0 * (uSpinAmount * uv_len + (1.0 - uSpinAmount));    vec2 mid = (screenSize.xy / length(screenSize.xy)) / 2.0;    uv = (vec2(uv_len * cos(new_pixel_angle) + mid.x, uv_len * sin(new_pixel_angle) + mid.y) - mid);        uv *= 30.0;    float baseSpeed = iTime * uSpinSpeed;    speed = baseSpeed + mouseInfluence * 2.0;        vec2 uv2 = vec2(uv.x + uv.y);        for(int i = 0; i < 5; i++) {        uv2 += sin(max(uv.x, uv.y)) + uv;        uv += 0.5 * vec2(            cos(5.1123314 + 0.353 * uv2.y + speed * 0.131121),            sin(uv2.x - 0.113 * speed)        );        uv -= cos(uv.x + uv.y) - sin(uv.x * 0.711 - uv.y);    }        float contrast_mod = (0.25 * uContrast + 0.5 * uSpinAmount + 1.2);    float paint_res = min(2.0, max(0.0, length(uv) * 0.035 * contrast_mod));    float c1p = max(0.0, 1.0 - contrast_mod * abs(1.0 - paint_res));    float c2p = max(0.0, 1.0 - contrast_mod * abs(paint_res));    float c3p = 1.0 - min(1.0, c1p + c2p);    float light = (uLighting - 0.2) * max(c1p * 5.0 - 4.0, 0.0) + uLighting * max(c2p * 5.0 - 4.0, 0.0);        return (0.3 / uContrast) * uColor1 + (1.0 - 0.3 / uContrast) * (uColor1 * c1p + uColor2 * c2p + vec4(c3p * uColor3.rgb, c3p * uColor1.a)) + light;}void main() {    vec2 uv = vUv * iResolution.xy;    gl_FragColor = effect(iResolution.xy, uv);}`;export const BalatroBackground = forwardRef<HTMLDivElement, BalatroBackgroundProps>(({  className,  spinRotation = -2.0,  spinSpeed = 7.0,  offset = [0.0, 0.0],  color1 = "#DE443B",  color2 = "#006BB4",  color3 = "#162325",  contrast = 3.5,  lighting = 0.4,  spinAmount = 0.25,  pixelFilter = 745.0,  spinEase = 1.0,  isRotate = false,  mouseInteraction = true,  ...props}, ref) => {  // props already contains only DOM props after destructuring above  const domProps = props;  const containerRef = useRef<HTMLDivElement | null>(null);  useEffect(() => {    const container = containerRef.current;    if (!container) return;    const renderer = new Renderer();    const gl = renderer.gl;    gl.clearColor(0, 0, 0, 1);    let program: Program;    function resize() {      if (!container) return;      renderer.setSize(container.offsetWidth, container.offsetHeight);      if (program) {        program.uniforms.iResolution.value = [          gl.canvas.width,          gl.canvas.height,          gl.canvas.width / gl.canvas.height,        ];      }    }    window.addEventListener("resize", resize);    resize();    const geometry = new Triangle(gl);    program = new Program(gl, {      vertex: vertexShader,      fragment: fragmentShader,      uniforms: {        iTime: { value: 0 },        iResolution: {          value: [            gl.canvas.width,            gl.canvas.height,            gl.canvas.width / gl.canvas.height,          ],        },        uSpinRotation: { value: spinRotation },        uSpinSpeed: { value: spinSpeed },        uOffset: { value: offset },        uColor1: { value: hexToVec4(color1) },        uColor2: { value: hexToVec4(color2) },        uColor3: { value: hexToVec4(color3) },        uContrast: { value: contrast },        uLighting: { value: lighting },        uSpinAmount: { value: spinAmount },        uPixelFilter: { value: pixelFilter },        uSpinEase: { value: spinEase },        uIsRotate: { value: isRotate },        uMouse: { value: [0.5, 0.5] },      },    });    const mesh = new Mesh(gl, { geometry, program });    let animationFrameId: number;    function update(time: number) {      animationFrameId = requestAnimationFrame(update);      program.uniforms.iTime.value = time * 0.001;      renderer.render({ scene: mesh });    }    animationFrameId = requestAnimationFrame(update);    container.appendChild(gl.canvas);    function handleMouseMove(e: MouseEvent) {      if (!mouseInteraction || !container) return;      const rect = container.getBoundingClientRect();      const x = (e.clientX - rect.left) / rect.width;      const y = 1.0 - (e.clientY - rect.top) / rect.height;      program.uniforms.uMouse.value = [x, y];    }    container.addEventListener("mousemove", handleMouseMove);    return () => {      cancelAnimationFrame(animationFrameId);      window.removeEventListener("resize", resize);      container.removeEventListener("mousemove", handleMouseMove);      if (container && gl.canvas.parentElement === container) {        container.removeChild(gl.canvas);      }      gl.getExtension("WEBGL_lose_context")?.loseContext();    };  }, [    spinRotation,    spinSpeed,    offset,    color1,    color2,    color3,    contrast,    lighting,    spinAmount,    pixelFilter,    spinEase,    isRotate,    mouseInteraction  ]);  return (    <div      ref={(node) => {        containerRef.current = node;        if (typeof ref === 'function') ref(node);        else if (ref) ref.current = node;      }}      className={cn("w-full h-full relative overflow-hidden", className)}      {...domProps}    />  );});BalatroBackground.displayName = 'BalatroBackground';export default BalatroBackground;

Built for React applications with TypeScript and Next.js. Uses WebGL through OGL for hardware-accelerated shader rendering that maintains smooth 60fps with complex mathematical spiral calculations and mouse tracking. The mathematical pattern generation creates authentic Balatro-style effects while interactive controls add dynamic responsiveness. Perfect for gaming interfaces, card game UIs, or any design needing that distinctive psychedelic energy.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/balatro-background.json

npx shadcn@latest add https://www.shadcn.io/registry/balatro-background.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/balatro-background.json

bunx shadcn@latest add https://www.shadcn.io/registry/balatro-background.json

Why static patterns feel lifeless

Developers create CSS gradients with basic rotation and call it dynamic. Maybe they add a simple spin animation that loops predictably. The problem? Linear transformations can't capture the organic, mathematical complexity of true spiral patterns that make backgrounds feel hypnotic and alive.

Balatro-style backgrounds with shader mathematics change everything. They tap into our fascination with infinite patterns—the way mathematical spirals create endless complexity from simple rules, how colors blend and separate in mesmerizing flows. The shader calculations use trigonometric functions and iterative feedback loops to generate true psychedelic physics.

This component handles complex WebGL mathematics automatically. Spiral generation, color blending, pixel filtering, and mouse distortion all work together seamlessly. The result feels like the authentic Balatro experience, not a simple spinning texture.

Features

Mathematical spiral generation with trigonometric algorithms for authentic psychedelic patterns
Three-color system with customizable hex colors and dynamic blending
Mouse interaction with real-time spiral distortion based on cursor position
Rotation controls including static positioning and continuous spinning modes
Pixel filtering for retro-style pixelated effects with adjustable resolution
Contrast and lighting controls for fine-tuning visual intensity
Spin easing and amount controls for customizing spiral characteristics
Performance optimization with efficient WebGL rendering and cleanup
TypeScript support with complete prop forwarding and type safety
Responsive design with automatic canvas resizing and proper cleanup

API Reference

BalatroBackground

Prop	Type	Default	Description
`spinRotation`	`number`	`-2.0`	Base rotation speed multiplier (-10 to 10)
`spinSpeed`	`number`	`7.0`	Animation speed for time-based effects (0.1 to 20)
`offset`	`[number, number]`	`[0.0, 0.0]`	Pattern offset coordinates (-1 to 1 each)
`color1`	`string`	`"#DE443B"`	Primary spiral color (hex format)
`color2`	`string`	`"#006BB4"`	Secondary spiral color (hex format)
`color3`	`string`	`"#162325"`	Accent/background color (hex format)
`contrast`	`number`	`3.5`	Pattern contrast intensity (1 to 10)
`lighting`	`number`	`0.4`	Lighting effect strength (0 to 2)
`spinAmount`	`number`	`0.25`	Spiral distortion amount (0 to 1)
`pixelFilter`	`number`	`745.0`	Pixel resolution filter (100 to 2000)
`spinEase`	`number`	`1.0`	Spiral easing curve factor (0.1 to 5)
`isRotate`	`boolean`	`false`	Enable continuous rotation animation
`mouseInteraction`	`boolean`	`true`	Enable mouse-based distortion effects
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

Color Combinations

Classic Balatro-inspired color schemes:

Theme	Color1	Color2	Color3	Visual Style
Classic Red	`#DE443B`	`#006BB4`	`#162325`	Traditional Balatro aesthetic
Neon Nights	`#FF0080`	`#00FFFF`	`#000000`	High-contrast electric
Forest Dream	`#228B22`	`#FFD700`	`#2F4F2F`	Natural earth tones
Ocean Depths	`#1E90FF`	`#FF6347`	`#191970`	Deep water vibes

Effect Configurations

// Classic Balatro card background
<BalatroBackground 
  color1="#DE443B"
  color2="#006BB4" 
  color3="#162325"
  contrast={4.0}
  isRotate={true}
  spinSpeed={5.0}
/>

// High-energy psychedelic mode
<BalatroBackground 
  color1="#FF0080"
  color2="#00FF00"
  color3="#0000FF"
  contrast={6.0}
  spinSpeed={12.0}
  spinAmount={0.8}
  pixelFilter={400.0}
/>

// Subtle ambient background
<BalatroBackground 
  color1="#4A5568"
  color2="#2D3748"
  color3="#1A202C"
  contrast={2.0}
  lighting={0.2}
  spinSpeed={2.0}
  mouseInteraction={false}
/>

// Retro pixel art style
<BalatroBackground 
  color1="#FF6B35"
  color2="#004E89"
  color3="#1A1A1A"
  pixelFilter={150.0}
  contrast={5.0}
  spinEase={2.0}
/>

Shader mathematics

Spiral Generation: Uses polar coordinate transformation with trigonometric functions to create authentic mathematical spirals with proper angular progression.

Iterative Feedback: Implements feedback loops with sine/cosine functions that build complexity through multiple iterations, creating the characteristic Balatro swirl patterns.

Color Blending: Calculates dynamic color mixing based on spiral intensity, using mathematical weighting to blend between the three color channels smoothly.

Mouse Distortion: Transforms mouse coordinates into spiral influence factors, affecting both rotation speed and pattern density in real-time.

Performance considerations

Shader Complexity: The fragment shader uses iterative loops and multiple trigonometric calculations. Consider reducing iterations or simplifying effects on lower-end hardware.

Pixel Filter Impact: Lower pixelFilter values create more pixelated effects but may impact performance. Values below 200 can cause frame drops on some devices.

Mouse Interaction Cost: Mouse tracking adds minimal CPU overhead but affects shader uniforms every frame. Disable for static backgrounds to optimize performance.

Color Calculation Overhead: Three-color blending with mathematical weighting is computationally intensive. Consider using fewer colors for better performance.

Common gotchas

Color Format: Only hex colors are supported. RGB values must be converted to hex format before passing to the component.

Spiral Direction: Negative spinRotation values create counter-clockwise spirals. Positive values spiral clockwise. Very high values may cause visual artifacts.

Offset Boundaries: Offset values outside -1 to 1 range may cause pattern clipping or unexpected visual behavior.

Pixel Filter Range: Extremely low pixelFilter values (below 50) may make patterns unrecognizable. Very high values (above 2000) provide minimal visual benefit.

Mouse Coordinate System: Mouse interaction uses normalized 0-1 coordinates internally. The component handles screen coordinate conversion automatically.

WebGL Context: Component manages its own WebGL context and may conflict with other WebGL applications running simultaneously.

React Balatro Background

Interactive Balatro-style spirals with mouse control

Installation

Why static patterns feel lifeless

Features

API Reference

BalatroBackground

Color Combinations

Effect Configurations

Shader mathematics

Performance considerations

Common gotchas

You might also like

Plasma Background

Northern Lights

Silk Background

Light Waves

Questions developers actually ask

On this page

React Balatro Background