Hudini Section Header Component

A stylized section header component with shadow, text stroke and auto-sizing, perfect for menus, panels and sections.

Section Header Component

A stylized section header component with shadow, text stroke and auto-sizing, perfect for menus, panels and sections.

Features

  • 📏 Auto-sizing: Automatically adjusts to text size + margin
  • 🌑 Vertical Shadow: Shadow that projects only downward, ideal for headers
  • ✍ī¸ Text Stroke: Text borders for better readability and visual impact
  • 🎨 Phaser Wind Integration: Uses design tokens for colors, sizes, borders and spacing
  • ⚙ī¸ Fully Customizable: Control over font, colors, borders, stroke and spacing
  • 🔗 Fluent API: Method chaining support for easy customization

Props

  • text - Header text content
  • fontSize - Font size token ('xs', 'sm', 'base', 'lg', 'xl'...) or pixel value - default: 'lg'
  • font - Font family token ('primary', 'secondary', 'monospace', 'display') or CSS string - default: 'display'
  • backgroundColor - Background color token or CSS color - default: 'blue-600'
  • textColor - Text color token or CSS color - default: 'white'
  • strokeColor - Text stroke color (auto-calculated if not provided)
  • borderRadius - Border radius token ('none', 'sm', 'md', 'lg', 'xl', 'full') or pixel value - default: 'md'
  • margin - Internal padding using spacing tokens ('0', '1', '2', '3', '4'...) or pixel value - default: '4'

Live Example

Loading game...

Usage Example

import Phaser from 'phaser';
import {
    Color,
    createTheme,
    HUDINI_KEY,
    HudiniPlugin,
    SceneWithHudini,
    SectionHeader
} from 'hudini';

const theme = createTheme({});
type Theme = typeof theme;

class PreviewScene extends SceneWithHudini<Theme> {
    constructor() {
        super('preview');
    }

    create(): void {
        const { pw } = this.hudini;
        this.cameras.main.setBackgroundColor(pw.color.slate(900));

        // Create a simple section header
        const header = new SectionHeader({
            scene: this,
            x: this.cameras.main.centerX,
            y: 150,
            text: 'Game Settings',
        });
        this.add.existing(header);

        // Create a custom styled header
        const customHeader = new SectionHeader({
            scene: this,
            x: this.cameras.main.centerX,
            y: 250,
            text: 'Audio Settings',
            fontSize: 'xl',
            backgroundColor: 'green-600',
            textColor: 'white',
            borderRadius: 'lg',
            margin: '6',
        });
        this.add.existing(customHeader);
    }
}

Advanced Examples

Main Menu Header

const mainHeader = new SectionHeader({
    scene: this,
    x: 400,
    y: 80,
    text: 'MAIN MENU',
    fontSize: 'xl',
    font: 'display',
    backgroundColor: 'slate-700',
    textColor: 'white',
    strokeColor: 'slate-900',
    borderRadius: 'lg',
    margin: '6',
});

Pill Style Header

const pillHeader = new SectionHeader({
    scene: this,
    x: 300,
    y: 200,
    text: '🏆 Achievements',
    fontSize: 'lg',
    backgroundColor: 'yellow-600',
    textColor: 'white',
    strokeColor: 'yellow-800',
    borderRadius: 'full',
    margin: '5',
});

Dynamic Updates with Method Chaining

const dynamicHeader = new SectionHeader({
    scene: this,
    x: 400,
    y: 250,
    text: 'Dynamic Header',
});

// Customize using method chaining
dynamicHeader
    .setText('Updated Title')
    .setFontSize('2xl')
    .setBackgroundColor('purple-600')
    .setTextColor('white')
    .setStrokeColor('purple-800')
    .setBorderRadius('full')
    .setMargin('8');