Recreate Balatro’s Animated Shader Effect with WebGL – balatroShader.js

balatroShader is a WebGL-based JavaScript library that recreates the distinctive animated background shader from the game Balatro.

It renders GPU-accelerated, infinitely looping geometric patterns with customizable colors, rotation, and pixel sizing.

Features:

• Pure WebGL Implementation: Runs entirely on the GPU with custom vertex and fragment shaders for optimal performance.
• Zero External Dependencies:
  The library is fully self-contained at approximately 6KB minified.
• Highly Customizable: Control colors, animation speed, spin intensity, pixel block sizing, zoom level, and positioning offsets.
• Automatic Canvas: Handles canvas creation, positioning, and responsive resizing automatically.
• Frame Rate Control: Built-in FPS limiting to balance visual quality with system resource usage.
• Lifecycle Methods: Provides pause, resume, and destroy methods for complete animation control.

See It In Action:

How To Use It:

1. Load the balatroShader library and create a container element in your HTML:

<script src="balatroShader.js"></script>

<div id="background"></div>

2. Create a new shader instance by targeting an HTML element and optionally configuring parameters. The shader creates a canvas element, positions it absolutely within the container, and starts the animation loop automatically. The canvas fills the container’s dimensions and updates on window resize by default.

const instance = new BalatroShader({
  container: "#background",
  colours: { c1: "#DE443B", c2: "#006BB4", c3: "#162325" },
  speed: 1.4,
  contrast: 2,
  spinAmount: 0.5,
  pixelSizeFac: 1000,
  spinEase: 0.5
});

3. All possible configuration options:

• container: The CSS selector string or HTML element where the shader canvas attaches.
• colours: An object containing three hex color strings (c1, c2, c3) that define the visual palette.
• speed: A number that acts as a multiplier for the overall animation velocity.
• spinAmount: A number between 0 and 1 that determines the intensity of the rotation effect.
• contrast: A number that adjusts the separation and intensity of the colors.
• pixelSizeFac: A number defining the “pixel block” resolution; higher values create smaller, finer pixels.
• spinEase: A number that controls the smoothness of the spin animation.
• zoom: A number that sets the scale of the pattern.
• offsetX: A number that shifts the pattern horizontally.
• offsetY: A number that shifts the pattern vertically.
• enableSpin: A boolean that toggles the rotation animation on or off.
• autoResize: A boolean that allows the canvas to automatically adjust its dimensions when the window resizes.
• opacity: A number between 0 and 1 that sets the transparency of the canvas.
• maxFPS: A number that limits the maximum frames per second to manage performance.

4. API methods.

• instance.pause(): Stops the rendering loop to save GPU resources.
• instance.resume(): Restarts the animation loop.
• instance.destroy(): Removes the canvas from the DOM and cleans up event listeners.

FAQs

Q: The shader appears pixelated but I want a smoother look. How do I fix this?
A: Increase the pixelSizeFac value substantially. The default of 700 creates visible pixel blocks. Try values between 2000 and 5000 for much finer detail. Keep in mind that higher values increase GPU calculation load, so test performance on target devices. If you want completely smooth rendering, set pixelSizeFac to 10000 or higher.

Q: The animation causes performance issues on mobile devices. What are my options?
A: Reduce maxFPS to 30 or even 24 for mobile users. You can detect mobile devices and pass a lower frame rate during initialization. Also consider lowering pixelSizeFac to around 400-500, which reduces the number of calculations per frame. The combination of fewer frames and larger pixels significantly improves mobile performance. You can also use pause() when the element scrolls out of view using an Intersection Observer.

Q: How do I layer content on top of the shader?
A: The canvas uses pointer-events: none by default, so clicks pass through to underlying elements. Position your content elements within the same container and use z-index to control stacking order. Make sure your content elements have position: relative or position: absolute with a z-index higher than the canvas. The shader automatically applies to the container’s background layer.

The post Recreate Balatro’s Animated Shader Effect with WebGL – balatroShader.js appeared first on CSS Script.