How would you display a colorized ASCII art banner?

[smcallis]

I'd like it to be a fixed thing up at the top and probably setup so that it overflows to the right if you make things too small (rather than wrapping lines, like this:

[ArthurSonzogni]

Alignment

Assuming the image is a dom element named "image"

image | focusPosition(0,0) | frame

would produce an image, in frame, scrolled so that (0,0) is visible.

Image

To increase your resolution by 2 (2 colors per cells), you can use a ftxui::Canvas:

/**
 * @brief Converts a raw RGB buffer into an FTXUI Canvas using Block characters.
 * * Note: Block characters (Quadrants) provide a virtual resolution of 2x2 per
 * terminal cell. This is half the vertical resolution of Braille (DrawPoint).
 * * @param rgb_data A vector containing pixels in R, G, B order.
 * @param width    The width of the source image.
 * @param height   The height of the source image.
 * @return Canvas  The populated canvas element.
 */
Canvas CreateBlockCanvasFromRGB(const std::vector<uint8_t>& rgb_data, int width, int height) {
    // 1. Initialize the Canvas with the image dimensions.
    //    FTXUI will map these coordinates to terminal cells automatically.
    //    (e.g., a 100x100 canvas will take up 50x50 terminal cells in Block mode).
    Canvas canvas(width, height);

    for (int y = 0; y < height; ++y) {
        for (int x = 0; x < width; ++x) {
            size_t index = (y * width + x) * 3;

            uint8_t r = rgb_data[index];
            uint8_t g = rgb_data[index + 1];
            uint8_t b = rgb_data[index + 2];

            // 2. Draw using DrawBlock
            //    Args: x, y, is_set (true), color
            canvas.DrawBlock(x, y, true, Color::RGB(r, g, b));
        }
    }

    return canvas;
}

Together

Demo

#include <vector>
#include <cmath>
#include <memory>

// FTXUI Includes
#include "ftxui/component/component.hpp"       // For Renderer
#include "ftxui/component/screen_interactive.hpp" // For ScreenInteractive
#include "ftxui/dom/elements.hpp"             // For vbox, text, canvas, etc.
#include "ftxui/dom/canvas.hpp"               // For Canvas
#include "ftxui/screen/color.hpp"

using namespace ftxui;

// --- The Helper Function ----------------------------------------------------

Canvas CreateBlockCanvasFromRGB(const std::vector<uint8_t>& rgb_data, int width, int height) {
    Canvas canvas(width, height);

    for (int y = 0; y < height; ++y) {
        for (int x = 0; x < width; ++x) {
            size_t index = (y * width + x) * 3;
            if (index + 2 >= rgb_data.size()) continue;

            uint8_t r = rgb_data[index];
            uint8_t g = rgb_data[index + 1];
            uint8_t b = rgb_data[index + 2];

            canvas.DrawBlock(x, y, true, Color::RGB(r, g, b));
        }
    }
    return canvas;
}

// --- Main Application -------------------------------------------------------

int main() {
    // 1. Generate Dummy Image Data (A Rainbow Gradient)
    //    We make it fairly wide (120px) to test the overflow behavior.
    int img_w = 120; 
    int img_h = 30;
    std::vector<uint8_t> rgb_data;
    rgb_data.reserve(img_w * img_h * 3);

    for (int y = 0; y < img_h; ++y) {
        for (int x = 0; x < img_w; ++x) {
            // Simple logic to create a smooth color gradient
            float hue = float(x) / img_w;
            float sat = 1.0f - (float(y) / img_h) * 0.5f;
            
            // Quick HSV to RGB conversion for demo purposes
            // (Simulated with simple sine waves for R, G, B)
            uint8_t r = static_cast<uint8_t>(sin(hue * 6.28f + 0) * 127 + 128);
            uint8_t g = static_cast<uint8_t>(sin(hue * 6.28f + 2) * 127 + 128);
            uint8_t b = static_cast<uint8_t>(sin(hue * 6.28f + 4) * 127 + 128);

            rgb_data.push_back(r);
            rgb_data.push_back(g);
            rgb_data.push_back(b);
        }
    }

    // 2. Create the Canvas
    //    We create it once here. If you need dynamic updates, move this 
    //    inside the Renderer loop.
    Canvas my_canvas = CreateBlockCanvasFromRGB(rgb_data, img_w, img_h);

    // 3. Define the UI Component
    auto component = Renderer([&] {
        // Construct the top-level element
        return vbox({
            // --- THE HEADER IMAGE ---
            // 1. canvas(my_canvas): Renders the canvas.
            // 2. focusPosition(0, 0): Ensures the view is anchored to top-left.
            // 3. xframe: Allows the element to be wider than the terminal. 
            //    It will crop/scroll horizontally instead of wrapping or breaking.
            canvas(my_canvas) 
                | focusPosition(0, 0) 
                | frame,

            separator(),

            // --- THE BODY ---
            vbox({
                text("Welcome to the application.") | bold,
                paragraph("This is a demo of an image that overflows horizontally without wrapping. The image above should stay fixed at the top and not wrap when you resize the terminal window."),
            })
        }) | border;
    });

    int split = 40;

    component = ResizableSplitLeft(component, Container::Vertical({}), &split);

    // 4. Run the interactive screen
    auto screen = ScreenInteractive::Fullscreen();
    screen.Loop(component);

    return 0;
}

Header image aligned left:

test-2026-02-15_16.45.07.mp4

Header image aligned right (I used focusedPositionRelative(1.0, 0.0))

test-2026-02-15_16.45.47.mp4

[smcallis]

This is a brilliant answer, thank you so much for taking the time to write all that out. I hadn't even considered just using an image , I planned to color the title myself with lolcat.