Implement hardware acceleration (like OpenGL,Vulkan). (this seems to be some support already with the GLDraw)
Scene graph-like data structure for efficient UI management.
Use retained mode rendering to store and manage UI element states.
Support asynchronous loading of resources and UI elements.
Minimize unnecessary redraws with efficient invalidation and update mechanisms.
Develop a  animation and transition system.
Integrating widgets to use this styling,  override default behaviours

#include <Core/Core.h>
#include <CtrlCore/CtrlCore.h>

class BaseAnimation {
public:

    enum EasingCurveType {
        LINEAR,
        EASE_IN_QUAD,
        EASE_OUT_QUAD,
        EASE_IN_OUT_QUAD,
        EASE_IN_CUBIC,
        EASE_OUT_CUBIC,
        EASE_IN_OUT_CUBIC,
        CUSTOM
    };

    BaseAnimation(Ctrl& target, int duration)
        : target_(target), duration_(duration), easing_curve_(LINEAR) {}

    Callback WhenAnimationCompleted;

    BaseAnimation& Loop(bool loop);
    bool IsLooping() const;

    BaseAnimation& Reverse(bool reverse);
    bool IsReversed() const;

    BaseAnimation& Duration(int duration);
    int GetDuration() const;

    void Start();
    void Pause();
    void Resume();
    void Stop();

    double GetProgress() const;   

    BaseAnimation& EasingCurve(EasingCurveType curve);
    BaseAnimation& CustomCurve(const Vector<Pointf>& curve_points);

protected:
    virtual void UpdateProgress(double progress) = 0;
    double ApplyEasingCurve(double progress);

private:
    Ctrl& target_;
    int duration_;
    EasingCurveType easing_curve_;
    Vector<Pointf> custom_curve_points_;
    int timer_;

    void OnTimer();
};

#include "BaseAnimation.h"
#include <CtrlCore/ctrl.h> // For Color and Point
#include <CtrlLib/CtrlLib.h> // For Widget class

class PositionAnimation : public BaseAnimation {
public:
    PositionAnimation(Widget& target, const Point& end_position, int duration);

protected:
    virtual void UpdateProgress(double progress) override;

private:
    Widget& target_;
    Point start_position_;
    Point end_position_;
};

PositionAnimation::PositionAnimation(Widget& target, const Point& end_position, int duration)
    : BaseAnimation(duration), target_(target), end_position_(end_position) {
    start_position_ = target.GetScreenView().TopLeft();
}

void PositionAnimation::UpdateProgress(double progress) {
    Point current_position;
    current_position.x = start_position_.x + (end_position_.x - start_position_.x) * progress;
    current_position.y = start_position_.y + (end_position_.y - start_position_.y) * progress;
    target_.SetRect(target_.GetScreenView().SetTopLeft(current_position));
}

class ColorAnimation : public BaseAnimation {
public:
    ColorAnimation(Widget& target, const Color& end_color, int duration);

protected:
    virtual void UpdateProgress(double progress) override;

private:
    Widget& target_;
    Color start_color_;
    Color end_color_;
};

ColorAnimation::ColorAnimation(Widget& target, const Color& end_color, int duration)
    : BaseAnimation(duration), target_(target), end_color_(end_color) {
    start_color_ = target.GetBackground();
}

void ColorAnimation::UpdateProgress(double progress) {
    Color current_color;
    current_color.r = start_color_.r + (end_color_.r - start_color_.r) * progress;
    current_color.g = start_color_.g + (end_color_.g - start_color_.g) * progress;
    current_color.b = start_color_.b + (end_color_.b - start_color_.b) * progress;
    target_.SetBackground(current_color);
}

#include "PositionAnimation.h"
#include "ColorAnimation.h"

namespace Upp {

class StaticText : public Ctrl {
public:
    // ... existing class content ...

    StaticText& AnimatePosition(const Point& end_position, int duration);
    StaticText& AnimateColor(const Color& end_color, int duration);
    // ... other animations ?
private:
    void OnAnimationCompleted();
};

} // namespace Upp

#include <CtrlLib/CtrlLib.h>

using namespace Upp;

GUI_APP_MAIN {
    TopWindow win;
    win.SetRect(0, 0, 800, 600);

    StaticText static_text;
    static_text.SetLabel("Hello, Animated World!");
    static_text.SetRect(10, 10, 200, 50);
    win.Add(static_text);

    win.Run();

    // Example usage of the animation methods
    static_text.AnimatePosition(Point(100, 100), 500); // Move StaticText to (100, 100) in 500 ms
    static_text.AnimateColor(Blue(), 1000); // Change background color to blue in 1000 ms
}

Vector<Pointf> custom_curve_points = {
    {0.0, 0.0},
    {0.4, 0.8},
    {0.6, 0.2},
    {1.0, 1.0}
};

PositionAnimation animation(static_text, Point(100, 100), 500);
animation.CustomCurve(custom_curve_points);
animation.Start();

BaseAnimation& BaseAnimation::EasingCurve(EasingCurve curve) {
    easing_curve_ = curve;
    return *this;
}

//allow for a user style curve
BaseAnimation& BaseAnimation::CustomCurve(const Vector<Pointf>& curve_points) {
    easing_curve_ = CUSTOM;
    custom_curve_points_ = curve_points;
    return *this;
}

double BaseAnimation::ApplyEasingCurve(double progress) {
    switch (easing_curve_) {
        case EASE_IN_QUAD:
            return progress * progress;
        case EASE_OUT_QUAD:
            return progress * (2 - progress);
        case EASE_IN_OUT_QUAD:
            return progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
        case EASE_IN_CUBIC:
            return progress * progress * progress;
        case EASE_OUT_CUBIC:
            return (--progress) * progress * progress + 1;
        case EASE_IN_OUT_CUBIC:
            return progress < 0.5 ? 4 * progress * progress * progress : (progress - 1) * (2 * progress - 2) * (2 * progress - 2) + 1;
        case CUSTOM:
            if (custom_curve_points_.IsEmpty()) {
                return progress;
            }
            
            int index = 0;
            while (index + 1 < custom_curve_points_.GetCount() && progress > custom_curve_points_[index + 1].x) {
                ++index;
            }
            
            if (index + 1 < custom_curve_points_.GetCount()) {
                Pointf p1 = custom_curve_points_[index];
                Pointf p2 = custom_curve_points_[index + 1];
                double ratio = (progress - p1.x) / (p2.x - p1.x);
                return p1.y + ratio * (p2.y - p1.y);
            } else {
                return custom_curve_points_.Top().y;
            }
        case LINEAR:
        default:
            return progress;
    }
}

typedef double (*EasingFunction)(double);

struct ChDuration : ChStyle<ChDuration> { int value; };
#define CH_DURATION(name, init) CH_VAR(ChDuration, int, name, init)

struct ChEasing : ChStyle<ChEasing> { EasingFunction value; };

#define CH_EASING(name, init) CH_VAR(ChEasing, EasingFunction, name, init)
double LinearEasing(double t) {
    return t;
}

double EaseInQuad(double t) {
    return t * t;
}

double EaseOutQuad(double t) {
    return t * (2 - t);
}

double EaseInOutQuad(double t) {
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

double EaseInCubic(double t) {
    return t * t * t;
}

double EaseOutCubic(double t) {
    double f = t - 1;
    return f * f * f + 1;
}

double EaseInOutCubic(double t) {
    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}

double EaseInExpo(double t) {
    return (t == 0) ? 0 : pow(2, 10 * (t - 1));
}

double EaseOutExpo(double t) {
    return (t == 1) ? 1 : 1 - pow(2, -10 * t);
}

double EaseInOutExpo(double t) {
    if (t == 0) return 0;
    if (t == 1) return 1;
    if ((t *= 2) < 1) return 0.5 * pow(2, 10 * (t - 1));
    return 0.5 * (-pow(2, -10 * --t) + 2);
}

CH_DURATION(ButtonAnimationDuration, 300) // Define animation duration for button, e.g., 300ms
CH_EASING(ButtonEasingFunction, EaseInOutQuad) // Define easing function for button animation

void ChLookFn(Value (*fn)(Draw& w, const Rect& r, const Value& look, int lookop, Color ink, int duration, EasingFunction easing=NoEasing ?? ));

Value MyCustomLookFunction(Draw& w, const Rect& r, const Value& look, int lookop, Color ink, int duration, EasingFunction easing);

ChLookFn(MyCustomLookFunction, ButtonAnimationDuration(), ButtonEasingFunction());

class BaseAnimation {
public:
    BaseAnimation(int duration, EasingFunction easing)
        : duration_(duration), easing_(easing) {}

    double GetProgress(double t) const {
        return easing_(t / duration_);
    }

    Color LerpColor(const Color& start, const Color& end, double progress) const {
        int red = start.GetR() + progress * (end.GetR() - start.GetR());
        int green = start.GetG() + progress * (end.GetG() - start.GetG());
        int blue = start.GetB() + progress * (end.GetB() - start.GetB());
        int alpha = start.GetA() + progress * (end.GetA() - start.GetA());
        return Color(red, green, blue, alpha);
    }

    Point LerpPosition(const Point& start, const Point& end, double progress) const {
        int x = start.x + progress * (end.x - start.x);
        int y = start.y + progress * (end.y - start.y);
        return Point(x, y);
    }

    Size LerpSize(const Size& start, const Size& end, double progress) const {
        int cx = start.cx + progress * (end.cx - start.cx);
        int cy = start.cy + progress * (end.cy - start.cy);
        return Size(cx, cy);
    }

    float LerpFloat(float start, float end, double progress) const {
        return start + progress * (end - start);
    }

    double LerpScale(double start, double end, double progress) const {
        return start + progress * (end - start);
    }

private:
    int duration_;
    EasingFunction easing_;
};

Color start_color = SColorFace();
Color end_color = SColorHighlight();
Color current_color = animation.LerpColor(start_color, end_color);

...

ChPaint(w, r, look, current_color);

...

ChLookFn(MyCustomLookFunction, ButtonAnimationDuration(), ButtonEasingFunction());

	struct Style : ChStyle<Style> {
		Value look[4];
		Color monocolor[4], textcolor[4];
		Point pressoffset;
		int   focusmargin;
		int   overpaint;
		Font  font;
		Image ok, cancel, exit;
		bool  transparent;
		bool  focus_use_ok;
	};

struct Style : ChStyle<Style> {
    Value look[4];
    Color monocolor[4], textcolor[4];
    Point pressoffset;
    int   focusmargin;
    int   overpaint;
    Font  font;
    Image ok, cancel, exit;
    bool  transparent;
    bool  focus_use_ok;

    // Animation properties
  enum AnimationFinishBehavior {
        GOTO_FIRST,      // Go to the first frame when the animation is interrupted
        GOTO_LAST,       // Go to the last frame when the animation is interrupted
        COMPLETE,        // Complete the animation normally when interrupted
        COMPLETE_FAST,   // Complete the animation quickly when interrupted
        HOLD,            // Hold the current frame when the animation is interrupted
        REVERSE          // Reverse the animation when interrupted
    };

    AnimationFinishBehavior animationFinishBehavior;
    double animation_duration; // Duration of the animation in seconds
    double (*animation_easing_function)(double); // Easing function for the animation
};

template <class T>
struct ChStyle {
    // ...
    std::vector<T> animationStates;
    double animationDuration;
    EasingFunction easingFunction;
    // ...
};

void Button::OnMouseEnter() {
    // notify Update the animation state
    // ...

    // notify Start the animation
    // ...
}

void Button::OnMouseLeave() {
    // notify Update the animation state
    // ...

    // notify Start the animation
    // ...
}

/**
@brief Structure representing a style in the GUI toolkit.
This structure encapsulates the visual and animation properties of a style
for use in the GUI toolkit. It includes values for look, colors, font, images,
and animation properties such as duration and easing function. By using this
structure, the look and feel of various widgets in the toolkit can be easily
customized and animated.
*/
template <class T>
struct ChStyle {
    // ...
    std::vector<T> animationStates;
    double animationDuration;
    EasingFunction easingFunction;
    Ctrl* widget; // Pointer to the widget this style is applied to
    // ...
};

struct Style : ChStyle<Style> {
    Value look[4];
    Color monocolor[4], textcolor[4];
    Point pressoffset;
    int   focusmargin;
    int   overpaint;
    Font  font;
    Image ok, cancel, exit;
    bool  transparent;
    bool  focus_use_ok;

    // Animation properties
    enum AnimationFinishBehavior {
        GOTO_FIRST,      // Go to the first frame when the animation is interrupted
        GOTO_LAST,       // Go to the last frame when the animation is interrupted
        COMPLETE,        // Complete the animation normally when interrupted
        COMPLETE_FAST,   // Complete the animation quickly when interrupted
        HOLD,            // Hold the current frame when the animation is interrupted
        REVERSE          // Reverse the animation when interrupted
    };

    AnimationFinishBehavior animationFinishBehavior;
    double animation_duration; // Duration of the animation in seconds
    double (*animation_easing_function)(double); // Easing function for the animation
};

/**
@brief Structure representing a style in the GUI toolkit.
This structure encapsulates the visual and animation properties of a style
for use in the GUI toolkit. It includes values for look, colors, font, images,
and animation properties such as duration and easing function. By using this
structure, the look and feel of various widgets in the toolkit can be easily
customized and animated.
*/
struct Style : ChStyle<Style> {
    Value look[4];
    //Color monocolor[4], textcolor[4];
    Point pressoffset;
    int   focusmargin;
    int   overpaint;
    Font  font;
    //Image ok, cancel, exit;
    bool  transparent;
    bool  focus_use_ok;

    // Adjusted properties for images and colors (not sure if you need the array of 4 this might be for states)
    Image MainImage, SubImage, UserImage;
    Color textcolor[4], textBackground[4];
    Color bordercolour[4], foregroundcolor[4], altforegroundcolor[4] backgroundcolor[4],altbackgroundcolor[4];
    //EDIT: monocolor should just be desaturated of the main and not needed
    // Animation properties
    enum AnimationFinishBehavior {
        GOTO_FIRST,      // Go to the first frame when the animation is interrupted
        GOTO_LAST,       // Go to the last frame when the animation is interrupted
        COMPLETE,        // Complete the animation normally when interrupted
        COMPLETE_FAST,   // Complete the animation quickly when interrupted
        HOLD,            // Hold the current frame when the animation is interrupted
        REVERSE          // Reverse the animation when interrupted
    };

    AnimationFinishBehavior animationFinishBehavior;
    double animation_duration; // Duration of the animation in seconds
    double (*animation_easing_function)(double); // Easing function for the animation
};