Strata - v1.4.10
    Preparing search index...

    Interface HealthBarProps

    Props for the HealthBar component.

    Renders a world-space health bar that tracks a 3D target. Useful for NPCs, players, and destructible objects.

    interface HealthBarProps {
        animationDuration?: number;
        backgroundColor?: string;
        borderColor?: string;
        borderRadius?: number;
        borderWidth?: number;
        className?: string;
        distanceFade?: { end: number; start: number };
        fillColor?: string;
        glowColor?: string;
        glowIntensity?: number;
        height?: number;
        maxValue?: number;
        occlude?: boolean;
        offset?: [number, number];
        position?: [number, number, number];
        segments?: number;
        showText?: boolean;
        style?: CSSProperties;
        textFormat?: "value" | "none" | "percentage" | "fraction";
        value?: number;
        width?: number;
    }

    Hierarchy

    Index

    Properties

    animationDuration? backgroundColor? borderColor? borderRadius? borderWidth? className? distanceFade? fillColor? glowColor? glowIntensity? height? maxValue? occlude? offset? position? segments? showText? style? textFormat? value? width?

    Properties

    animationDuration?: number

    Duration of fill animations in milliseconds.

    backgroundColor?: string

    CSS-compatible background color string.

    borderColor?: string

    CSS-compatible border color string.

    borderRadius?: number

    Border radius in pixels for rounded corners.

    borderWidth?: number

    Border thickness in pixels.

    className?: string

    Custom CSS class for the root HTML element.

    distanceFade?: { end: number; start: number }

    Distances { start, end } for automatic opacity fading based on camera proximity.

    fillColor?: string

    CSS-compatible fill color string.

    glowColor?: string

    CSS-compatible glow color string.

    glowIntensity?: number

    Intensity of the glow effect (0-1).

    height?: number

    Physical or pixel height.

    maxValue?: number

    Maximum value representing 100% completion.

    occlude?: boolean

    Whether the bar can be hidden by 3D objects in the scene. Default: true.

    offset?: [number, number]

    Screen-space pixel offset [x, y] from the anchor point. Default: [0, 0].

    position?: [number, number, number]

    World position [x, y, z] to anchor the bar. Default: [0, 0, 0].

    segments?: number

    Number of visual segments (e.g., for segmented health bars).

    showText?: boolean

    Whether to display text (e.g., "75%").

    style?: CSSProperties

    Custom inline CSS styles for the root HTML element.

    textFormat?: "value" | "none" | "percentage" | "fraction"

    Format for the displayed progress text.

    value?: number

    Current progress value.

    width?: number

    Physical or pixel width.

    Settings

    Member Visibility

    On This Page

    Properties