Balatro Shader

A WebGL-powered animated flame shader effect inspired by Balatro's visual style. Creates dynamic flame buttons with customizable colors and effects.

Requirements

This package requires Tailwind CSS to be installed and configured in your project.

Installation

npm install balatrobutton

Quick Start

<!-- Add buttons with the flame class -->
<button class="btn-flame">0</button>

import Balatro from 'balatrobutton';
import 'balatrobutton/style'; // required

// Create flame effects for any buttons has "btn-flames" class
const flameButtons = new Balatro();


// Or with custom options, and custom classes
const flameButtons = new Balatro({
  selector: '.my-flame-buttons', // class
  colorStart: '#ff0000', // low power
  colorMid: '#ff5500',  // mid power
  colorEnd: '#ffff00', // high power
  power: () => 750, // power that trigger fire
  score: 100, // number text content
  gpu: true // enables hardware acceleration (default: false)
});

Constructor

new Balatro(options)

Creates flame effects for all elements with "btn-flame" class by default.

Options

Option	Type	Default	Description
selector	string	'.btn-flame'	CSS selector for elements to apply flame effect
duration	number	0	Duration of flame effect in milliseconds (0 = infinite)
power	function or number	() => 500	Function returning power value or static number
score	number	0	Initial score/number text content
textAlign	string	'center'	Text alignment for button content
colorStart	string	'#f00'	Color for low power state (hex, rgb, or rgba)
colorMid	string	'#f50'	Color for mid power state
colorEnd	string	'#ff0'	Color for high power state
gpu	boolean	false	Enable hardware acceleration for rendering

Methods

setScore(score, power)

Updates the score and optionally the flame power for the first button instance.

flameButtons.setScore(50);        // Add 50 to score
flameButtons.setScore(100, 1000); // Add 100 to score and set power to 1000

stopAll()

Stops all flame animations.

flameButtons.stopAll();

getColors()

Returns current color values for all flame instances.

const colors = flameButtons.getColors();
console.log(colors); // Array of color objects

Examples

Basic Usage

import Balatro from 'balatrobutton';
const flames = new Balatro();

Custom Colors

const flames = new Balatro({
  selector: '.my-buttons',
  colorStart: '#4f46e5',  // Indigo
  colorMid: '#7c3aed',    // Purple
  colorEnd: '#ec4899'     // Pink
});

Dynamic Score Updates

const flames = new Balatro({
  score: 0,
  power: () => Math.random() * 1000
});

// Update score or number
function scoreSet(points) {
  flames.setScore(points);
}

// Update fire power
function powerSet(power) {
  flames.setPower(power);
}

Multiple Button Sets

// Create different flame effects for different button types
const scoreButtons = new Balatro({
  selector: '.score-btn',
  colorStart: '#22c55e',
  colorEnd: '#16a34a'
});

const multiplierButtons = new Balatro({
  selector: '.multiplier-btn',
  colorStart: '#f59e0b',
  colorEnd: '#d97706'
});

Styling

The package includes custom CSS classes and uses the m6x11plus font for authentic Balatro styling:

.flame-wrapper {
  /* Container for flame effect */
}

.flame-canvas {
  /* WebGL canvas for flame rendering */
}

Color Formats

Colors can be specified in multiple formats:

// Hex colors
colorStart: '#ff0000'
colorStart: '#f00'

// RGB colors  
colorStart: 'rgb(255, 0, 0)'
colorStart: 'rgba(255, 0, 0, 0.8)'

Utility Functions

The package also exports utility functions:

import Balatro, { hexToVec4 } from 'balatrobutton';

// Convert hex/rgb to vec4 for WebGL
const color = hexToVec4('#ff5500');
console.log(color); // [1.0, 0.33, 0.0, 1.0]

Browser Support

• Modern browsers with WebGL support
• Chrome 56+
• Firefox 51+
• Safari 10.1+
• Edge 79+

Development

# Install dependencies
npm install

# Development server
npm run dev

# Build for production
npm run build

# Build JavaScript only
npm run build:js

# Build CSS only
npm run build:css

File Structure

balatrobutton/
├── src/
│   ├── main.js          # Main Balatro class
│   ├── effect.js        # WebGL flame effect
│   ├── style.css        # Styling
│   ├── shaders/
│   │   └── flame.fs     # Fragment shader
│   └── fonts/
│       ├── m6x11plus.woff
│       └── m6x11plus.woff2
└── dist/
    └── balatro-shader.min.js

License

Proprietary

Contributing

Issues and feature requests are welcome! Please check the existing issues before creating new ones.