finnished clay-official-website example

examples/clay-official-website/src/main.zig

@@ -25,7 +25,6 @@ const COLOR_LIGHT = cl.Color{ 244, 235, 230, 255 };
 const COLOR_LIGHT_HOVER = cl.Color{ 224, 215, 210, 255 };
 const COLOR_BUTTON_HOVER = cl.Color{ 238, 227, 225, 255 };
 const COLOR_BROWN = cl.Color{ 61, 26, 5, 255 };
-//COLOR_R= :: cl.Color {252, 67, 27, 255};
 const COLOR_RED = cl.Color{ 168, 66, 28, 255 };
 const COLOR_RED_HOVER = cl.Color{ 148, 46, 8, 255 };
 const COLOR_ORANGE = cl.Color{ 225, 138, 50, 255 };
@@ -53,21 +52,21 @@ const border_data = cl.BorderData{ .width = 2, .color = COLOR_RED };
 var window_height: isize = 0;
 var window_width: isize = 0;
 
-fn LandingPageBlob(index: u32, fontSize: u16, fontId: u16, color: cl.Color, text: []const u8, image: *rl.Texture2D) void {
+fn LandingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, text: []const u8, image: *rl.Texture2D) void {
     cl.UI(&.{
         .IDI("HeroBlob", index),
-        .layout(.{ .size = .{ .w = .fGrow(.{ .max = 480 }) }, .padding = .uniform(16), .gap = 16, .alignment = .{ .y = .CENTER } }),
+        .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 480 }) }, .padding = .all(16), .gap = 16, .alignment = .{ .y = .CENTER } }),
         .border(.outside(color, 2, 10)),
     });
     {
         defer cl.CLOSE();
         cl.UI(&.{
             .IDI("CheckImage", index),
-            .layout(.{ .size = .{ .w = .fixed(32) } }),
+            .layout(.{ .sizing = .{ .w = .fixed(32) } }),
             .image(.{ .image_data = image, .source_dimensions = .{ .w = 128, .h = 128 } }),
         });
         cl.CLOSE();
-        cl.text(text, cl.Config.text(.{ .font_size = fontSize, .font_id = fontId, .color = color }));
+        cl.text(text, cl.Config.text(.{ .font_size = font_size, .font_id = font_id, .color = color }));
     }
 }
 
@@ -75,7 +74,7 @@ fn landingPageDesktop() void {
     cl.UI(&.{
         .ID("LandingPage1Desktop"),
         .layout(.{
-            .size = .{ .w = .grow, .h = .fFit(.{ .min = @floatFromInt(window_height - 70) }) },
+            .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
             .alignment = .{ .y = .CENTER },
             .padding = .{ .x = 50 },
             .gap = 16,
@@ -85,14 +84,14 @@ fn landingPageDesktop() void {
         defer cl.CLOSE();
         cl.UI(&.{
             .ID("LandingPage1"),
-            .layout(.{ .size = .grow, .alignment = .{ .y = .CENTER }, .padding = .uniform(32), .gap = 32 }),
+            .layout(.{ .sizing = .grow, .alignment = .{ .y = .CENTER }, .padding = .all(32), .gap = 32 }),
             .border(.{ .left = border_data, .right = border_data }),
         });
         {
             defer cl.CLOSE();
             cl.UI(&.{
                 .ID("LeftText"),
-                .layout(.{ .size = .{ .w = .percent(0.55) }, .direction = .TOP_TO_BOTTOM, .gap = 8 }),
+                .layout(.{ .sizing = .{ .w = .percent(0.55) }, .direction = .TOP_TO_BOTTOM, .gap = 8 }),
             });
             {
                 defer cl.CLOSE();
@@ -100,17 +99,17 @@ fn landingPageDesktop() void {
                     "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
                     cl.Config.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }),
                 );
-                cl.UI(&.{ .ID("Spacer"), .layout(.{ .size = .{ .w = .grow, .h = .fixed(32) } }) });
+                cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) });
                 cl.CLOSE();
                 cl.text(
-                    "Clay is laying out this webpage right now!",
+                    "Clay is laying out this webpage .right now!",
                     cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
                 );
             }
 
             cl.UI(&.{
                 .ID("HeroImageOuter"),
-                .layout(.{ .size = .{ .w = .percent(0.45) }, .direction = .TOP_TO_BOTTOM, .alignment = .{ .x = .CENTER }, .gap = 16 }),
+                .layout(.{ .sizing = .{ .w = .percent(0.45) }, .direction = .TOP_TO_BOTTOM, .alignment = .{ .x = .CENTER }, .gap = 16 }),
             });
             {
                 defer cl.CLOSE();
@@ -124,23 +123,391 @@ fn landingPageDesktop() void {
     }
 }
 
-const ScrollbarData = struct {
+fn landingPageMobile() void {
-    clickOrigin: cl.Vector2,
+    cl.UI(&.{
-    positionOrigin: cl.Vector2,
+        .ID("LandingPage1Mobile"),
-    mouseDown: bool,
+        .layout(.{
-};
+            .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
+            .direction = .TOP_TO_BOTTOM,
+            .alignment = .CENTER,
+            .padding = .{ .x = 16, .y = 32 },
+            .gap = 16,
+        }),
+    });
+    {
+        defer cl.CLOSE();
+        cl.UI(&.{
+            .ID("LeftText"),
+            .layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .gap = 8 }),
+        });
+        {
+            defer cl.CLOSE();
+            cl.text(
+                "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
+                cl.Config.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }),
+            );
+            cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) });
+            cl.CLOSE();
+            cl.text(
+                "Clay is laying out this webpage .right now!",
+                cl.Config.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
+            );
+        }
 
-const scrollbarData = ScrollbarData{};
+        cl.UI(&.{
-const animationLerpValue: f32 = -1.0;
+            .ID("HeroImageOuter"),
+            .layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .alignment = .{ .x = .CENTER }, .gap = 16 }),
+        });
+        {
+            defer cl.CLOSE();
+            LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, "High performance", &checkImage5);
+            LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, "Flexbox-style responsive layout", &checkImage4);
+            LandingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, "Declarative syntax", &checkImage3);
+            LandingPageBlob(4, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_2, "Single .h file for C/C++", &checkImage2);
+            LandingPageBlob(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, "Compile to 15kb .wasm", &checkImage1);
+        }
+    }
+}
 
-fn createLayout(lerpValue: f32) cl.ClayArray(cl.RenderCommand) {
+fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
-    _ = lerpValue; // autofix
+    const text_config = cl.Config.text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_RED });
+    cl.UI(&.{
+        .ID("HFileBoxOuter"),
+        .layout(.{
+            .direction = .TOP_TO_BOTTOM,
+            .sizing = .{ .w = width_sizing },
+            .alignment = .{ .y = .CENTER },
+            .padding = .{ .x = outer_padding, .y = 32 },
+            .gap = 8,
+        }),
+    });
+    {
+        defer cl.CLOSE();
+        cl.UI(&.{
+            .ID("HFileIncludeOuter"),
+            .layout(.{ .padding = .{ .x = 8, .y = 4 } }),
+            .rectangle(.{ .color = COLOR_RED, .corner_radius = .all(8) }),
+        });
+        {
+            defer cl.CLOSE();
+            cl.text("#include cl.h", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_LIGHT }));
+        }
+        cl.text("~2000 lines of C99.", text_config);
+        cl.text("Zero dependencies, including no C standard library", text_config);
+    }
+    cl.UI(&.{
+        .ID("BringYourOwnRendererOuter"),
+        .layout(.{
+            .direction = .TOP_TO_BOTTOM,
+            .sizing = .{ .w = width_sizing },
+            .alignment = .{ .y = .CENTER },
+            .padding = .{ .x = outer_padding, .y = 32 },
+            .gap = 8,
+        }),
+    });
+    {
+        defer cl.CLOSE();
+        cl.text("Renderer agnostic.", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_ORANGE }));
+        cl.text("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", text_config);
+        cl.text("Flexible output for easy compositing in your custom engine or environment.", text_config);
+    }
+}
+
+fn featureBlocksDesktop() void {
+    cl.UI(&.{
+        .ID("FeatureBlocksOuter"),
+        .layout(.{
+            .sizing = .{ .w = .grow },
+            .alignment = .{ .y = .CENTER },
+        }),
+        .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }),
+    });
+    {
+        defer cl.CLOSE();
+        featureBlocks(.percent(0.5), 50);
+    }
+}
+
+fn featureBlocksMobile() void {
+    cl.UI(&.{
+        .ID("FeatureBlocksOuter"),
+        .layout(.{
+            .sizing = .{ .w = .grow },
+            .direction = .TOP_TO_BOTTOM,
+        }),
+        .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }),
+    });
+    {
+        defer cl.CLOSE();
+        featureBlocks(.grow, 16);
+    }
+}
+
+fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
+    cl.UI(&.{ .ID("SyntaxPageLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .gap = 8 }) });
+    {
+        defer cl.CLOSE();
+        cl.text("Declarative Syntax", .text(title_text_config));
+        cl.UI(&.{
+            .ID("SyntaxSpacer"),
+            .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }),
+        });
+        cl.CLOSE();
+        const text_conf = cl.Config.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED });
+        cl.text("Flexible and readable declarative syntax with nested UI element hierarchies.", text_conf);
+        cl.text("Mix elements with standard C code like loops, conditionals and functions.", text_conf);
+        cl.text("Create your own library of re-usable components from UI primitives like text, images and rectangles.", text_conf);
+    }
+    cl.UI(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER } }) });
+    {
+        defer cl.CLOSE();
+        cl.UI(&.{
+            .ID("SyntaxPageRightImage"),
+            .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 568 }) } }),
+            .image(.{ .image_data = &syntaxImage, .source_dimensions = .{ .h = 1136, .w = 1194 } }),
+        });
+        cl.CLOSE();
+    }
+}
+
+fn declarativeSyntaxPageDesktop() void {
+    cl.UI(&.{
+        .ID("SyntaxPageDesktop"),
+        .layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 } }),
+    });
+    {
+        defer cl.CLOSE();
+        cl.UI(&.{
+            .ID("SyntaxPage"),
+            .layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .alignment = .{ .y = .CENTER }, .padding = .all(32), .gap = 32 }),
+            .border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }),
+        });
+        {
+            defer cl.CLOSE();
+            declarativeSyntaxPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .percent(0.5));
+        }
+    }
+}
+
+fn declarativeSyntaxPageMobile() void {
+    cl.UI(&.{
+        .ID("SyntaxPageMobile"),
+        .layout(.{
+            .direction = .TOP_TO_BOTTOM,
+            .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
+            .alignment = .CENTER,
+            .padding = .{ .x = 16, .y = 32 },
+            .gap = 16,
+        }),
+    });
+    {
+        defer cl.CLOSE();
+        declarativeSyntaxPage(.{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_RED }, .grow);
+    }
+}
+
+fn colorLerp(a: cl.Color, b: cl.Color, amount: f32) cl.Color {
+    return cl.Color{ a[0] + (b[0] - a[0]) * amount, a[1] + (b[1] - a[1]) * amount, a[2] + (b[2] - a[2]) * amount, a[3] + (b[3] - a[3]) * amount };
+}
+
+const LOREM_IPSUM_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+
+fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
+    cl.UI(&.{ .ID("PerformanceLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .gap = 8 }) });
+    {
+        defer cl.CLOSE();
+        cl.text("High Performance", .text(title_text_tonfig));
+        cl.UI(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) });
+        cl.CLOSE();
+        cl.text(
+            "Fast enough to recompute your entire UI every frame.",
+            .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }),
+        );
+        cl.text(
+            "Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free.",
+            .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }),
+        );
+        cl.text(
+            "Simplify animations and reactive UI design by avoiding the standard performance hacks.",
+            .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }),
+        );
+    }
+    cl.UI(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER } }) });
+    {
+        defer cl.CLOSE();
+        cl.UI(&.{
+            .ID("PerformanceRightBorder"),
+            .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(400) } }),
+            .border(.all(COLOR_LIGHT, 2, 0)),
+        });
+        {
+            defer cl.CLOSE();
+            cl.UI(&.{
+                .ID("AnimationDemoContainerLeft"),
+                .layout(.{ .sizing = .{ .w = .percent(0.35 + 0.3 * lerp_value), .h = .grow }, .alignment = .{ .y = .CENTER }, .padding = .all(16) }),
+                .rectangle(.{ .color = colorLerp(COLOR_RED, COLOR_ORANGE, lerp_value) }),
+            });
+            {
+                defer cl.CLOSE();
+                cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT }));
+            }
+            cl.UI(&.{
+                .ID("AnimationDemoContainerRight"),
+                .layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .alignment = .{ .y = .CENTER }, .padding = .all(16) }),
+                .rectangle(.{ .color = colorLerp(COLOR_ORANGE, COLOR_RED, lerp_value) }),
+            });
+            {
+                defer cl.CLOSE();
+                cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT }));
+            }
+        }
+    }
+}
+
+fn highPerformancePageDesktop(lerp_value: f32) void {
+    cl.UI(&.{
+        .ID("PerformanceDesktop"),
+        .layout(
+            .{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .alignment = .{ .y = .CENTER }, .padding = .{ .x = 82, .y = 32 }, .gap = 64 },
+        ),
+        .rectangle(.{ .color = COLOR_RED }),
+    });
+    {
+        defer cl.CLOSE();
+        highPerformancePage(lerp_value, .{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_LIGHT }, .percent(0.5));
+    }
+}
+
+fn highPerformancePageMobile(lerp_value: f32) void {
+    cl.UI(&.{
+        .ID("PerformanceMobile"),
+        .layout(
+            .{
+                .direction = .TOP_TO_BOTTOM,
+                .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
+                .alignment = .CENTER,
+                .padding = .{ .x = 16, .y = 32 },
+                .gap = 32,
+            },
+        ),
+        .rectangle(.{ .color = COLOR_RED }),
+    });
+    {
+        defer cl.CLOSE();
+        highPerformancePage(lerp_value, .{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_LIGHT }, .grow);
+    }
+}
+
+fn rendererButtonActive(text: []const u8) void {
+    cl.UI(&.{
+        .layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }),
+        .rectangle(.{ .color = COLOR_RED, .corner_radius = .all(10) }),
+    });
+    {
+        defer cl.CLOSE();
+        cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_LIGHT }));
+    }
+}
+
+fn rendererButtonInactive(index: u32, text: []const u8) void {
+    cl.UI(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) });
+    {
+        cl.CLOSE();
+        cl.UI(&.{
+            .ID("RendererButtonInactiveInner", index),
+            .layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }),
+            .rectangle(.{ .color = COLOR_LIGHT, .corner_radius = .all(10) }),
+        });
+        {
+            defer cl.CLOSE();
+            cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED }));
+        }
+    }
+}
+
+fn rendererPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
+    cl.UI(&.{ .ID("RendererLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .gap = 8 }) });
+    {
+        defer cl.CLOSE();
+        cl.text("Renderer & Platform Agnostic", .text(title_text_config));
+        cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) });
+        cl.CLOSE();
+        cl.text(
+            "Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.",
+            .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
+        );
+        cl.text(
+            "Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more.",
+            .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
+        );
+        cl.text(
+            "There's even an HTML renderer - you're looking at it .right now!",
+            .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
+        );
+    }
+    cl.UI(&.{
+        .ID("RendererRightText"),
+        .layout(.{ .sizing = .{ .w = width_sizing }, .alignment = .{ .x = .CENTER }, .direction = .TOP_TO_BOTTOM, .gap = 16 }),
+    });
+    {
+        defer cl.CLOSE();
+        cl.text("Try changing renderer!", .text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }));
+        cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) });
+        cl.CLOSE();
+        rendererButtonActive("Raylib Renderer");
+    }
+}
+
+fn rendererPageDesktop() void {
+    cl.UI(&.{
+        .ID("RendererPageDesktop"),
+        .layout(.{
+            .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
+            .alignment = .{ .y = .CENTER },
+            .padding = .{ .x = 50 },
+        }),
+    });
+    {
+        defer cl.CLOSE();
+        cl.UI(&.{
+            .ID("RendererPage"),
+            .layout(.{ .sizing = .grow, .alignment = .{ .y = .CENTER }, .padding = .all(32), .gap = 32 }),
+            .border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }),
+        });
+        {
+            defer cl.CLOSE();
+            rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .percent(0.5));
+        }
+    }
+}
+
+fn rendererPageMobile() void {
+    cl.UI(&.{
+        .ID("RendererMobile"),
+        .layout(
+            .{
+                .direction = .TOP_TO_BOTTOM,
+                .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
+                .alignment = .CENTER,
+                .padding = .{ .x = 16, .y = 32 },
+                .gap = 32,
+            },
+        ),
+        .rectangle(.{ .color = COLOR_LIGHT }),
+    });
+    {
+        defer cl.CLOSE();
+        rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .grow);
+    }
+}
+
+fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
     const mobileScreen = window_width < 750;
     cl.beginLayout();
 
     cl.UI(&.{
         .ID("OuterContainer"),
-        .layout(.{ .size = .grow, .direction = .TOP_TO_BOTTOM }),
+        .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }),
         .rectangle(.{ .color = COLOR_LIGHT }),
     });
     {
@@ -148,7 +515,7 @@ fn createLayout(lerpValue: f32) cl.ClayArray(cl.RenderCommand) {
         cl.UI(&.{
             .ID("Header"),
             .layout(.{
-                .size = .{ .h = .fixed(50), .w = .grow },
+                .sizing = .{ .h = .fixed(50), .w = .grow },
                 .alignment = .{ .y = .CENTER },
                 .padding = .{ .x = 32 },
                 .gap = 24,
@@ -161,11 +528,11 @@ fn createLayout(lerpValue: f32) cl.ClayArray(cl.RenderCommand) {
                 .font_size = 24,
                 .color = .{ 61, 26, 5, 255 },
             }));
-            cl.UI(&.{ .ID("LinkExamplesOuter"), .layout(.{ .size = .{ .w = .grow } }) });
+            cl.UI(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) });
             cl.CLOSE();
 
             if (!mobileScreen) {
-                cl.UI(&.{ .ID("LinkExamplesOuter"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) });
+                cl.UI(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) });
                 {
                     defer cl.CLOSE();
                     cl.text("Examples", cl.Config.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }));
@@ -177,7 +544,6 @@ fn createLayout(lerpValue: f32) cl.ClayArray(cl.RenderCommand) {
                 }
             }
 
-            // clay.Rectangle({cornerRadius = clay.CornerRadiusAll(10), color = clay.PointerOver(clay.GetElementId(clay.MakeString("LinkGithubOuter"))) ? COLOR_LIGHT_HOVER : COLOR_LIGHT})
             cl.UI(&.{
                 .ID("LinkGithubOuter"),
                 .layout(.{ .padding = .{ .x = 32, .y = 6 } }),
@@ -198,7 +564,7 @@ fn createLayout(lerpValue: f32) cl.ClayArray(cl.RenderCommand) {
         inline for (COLORS_TOP_BORDER, 0..) |color, i| {
             cl.UI(&.{
                 .ID("TopBorder" ++ .{i}),
-                .layout(.{ .size = .{ .h = .fixed(4), .w = .grow } }),
+                .layout(.{ .sizing = .{ .h = .fixed(4), .w = .grow } }),
                 .rectangle(.{ .color = color }),
             });
             cl.CLOSE();
@@ -207,25 +573,24 @@ fn createLayout(lerpValue: f32) cl.ClayArray(cl.RenderCommand) {
         cl.UI(&.{
             .ID("ScrollContainerBackgroundRectangle"),
             .scroll(.{ .vertical = true }),
-            .layout(.{ .size = .grow, .direction = .TOP_TO_BOTTOM }),
+            .layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }),
             .rectangle(.{ .color = COLOR_LIGHT }),
             .border(.{ .between_children = .{ .width = 2, .color = COLOR_RED } }),
         });
         {
             defer cl.CLOSE();
-            // if (!mobileScreen) {
+            if (!mobileScreen) {
-            if (true) {
                 landingPageDesktop();
-                // FeatureBlocksDesktop()
+                featureBlocksDesktop();
-                // DeclarativeSyntaxPageDesktop()
+                declarativeSyntaxPageDesktop();
-                // HighPerformancePageDesktop(lerpValue)
+                highPerformancePageDesktop(lerp_value);
-                // RendererPageDesktop()
+                rendererPageDesktop();
             } else {
-                // LandingPageMobile()
+                landingPageMobile();
-                // FeatureBlocksMobile()
+                featureBlocksMobile();
-                // DeclarativeSyntaxPageMobile()
+                declarativeSyntaxPageMobile();
-                // HighPerformancePageMobile(lerpValue)
+                highPerformancePageMobile(lerp_value);
-                // RendererPageMobile()
+                rendererPageMobile();
             }
         }
     }
@@ -249,6 +614,7 @@ pub fn main() anyerror!void {
     cl.setMeasureTextFunction(renderer.measureText);
 
     // init raylib
+    rl.setTraceLogLevel(.log_error);
     rl.setConfigFlags(.{
         .msaa_4x_hint = true,
         .vsync_hint = true,
@@ -256,7 +622,8 @@ pub fn main() anyerror!void {
         .window_resizable = true,
     });
     rl.initWindow(1000, 1000, "Raylib zig Example");
-    rl.setTargetFPS(60);
+    rl.setWindowMinSize(300, 100);
+    rl.setTargetFPS(120);
 
     // load assets
     loadFont(@embedFile("resources/Calistoga-Regular.ttf"), FONT_ID_TITLE_56, 56);
@@ -277,6 +644,9 @@ pub fn main() anyerror!void {
     checkImage4 = rl.loadTextureFromImage(rl.loadImageFromMemory(".png", @embedFile("resources/check_4.png")));
     checkImage5 = rl.loadTextureFromImage(rl.loadImageFromMemory(".png", @embedFile("resources/check_5.png")));
 
+    rl.setTextureFilter(syntaxImage, .texture_filter_bilinear);
+
+    var animation_lerp_value: f32 = -1.0;
     var debug_mode_enabled = false;
     while (!rl.windowShouldClose()) {
         if (rl.isKeyPressed(.key_d)) {
@@ -284,6 +654,11 @@ pub fn main() anyerror!void {
             cl.setDebugModeEnabled(debug_mode_enabled);
         }
 
+        animation_lerp_value += rl.getFrameTime();
+        if (animation_lerp_value > 1) {
+            animation_lerp_value = animation_lerp_value - 2;
+        }
+
         window_width = rl.getScreenWidth();
         window_height = rl.getScreenHeight();
 
@@ -293,11 +668,18 @@ pub fn main() anyerror!void {
             .y = mouse_pos.y,
         }, rl.isMouseButtonDown(.mouse_button_left));
 
+        const scroll_delta = rl.getMouseWheelMoveV().multiply(.{ .x = 6, .y = 6 });
+        cl.updateScrollContainers(
+            false,
+            .{ .x = scroll_delta.x, .y = scroll_delta.y },
+            rl.getFrameTime(),
+        );
+
         cl.setLayoutDimensions(.{
             .w = @floatFromInt(window_width),
             .h = @floatFromInt(window_height),
         });
-        var render_commands = createLayout(0);
+        var render_commands = createLayout(if (animation_lerp_value < 0) animation_lerp_value + 1 else 1 - animation_lerp_value);
 
         rl.beginDrawing();
         renderer.clayRaylibRender(&render_commands, allocator);

examples/raylib-sidebar-container/src/main.zig

@@ -8,7 +8,7 @@ const red: cl.Color = .{ 168, 66, 28, 255 };
 const orange: cl.Color = .{ 225, 138, 50, 255 };
 const white: cl.Color = .{ 250, 250, 255, 255 };
 
-const sidebar_item_layout: cl.LayoutConfig = .{ .size = .{ .w = .grow, .h = .fixed(50) } };
+const sidebar_item_layout: cl.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } };
 
 fn sidebarItemCompoment(index: usize) void {
     cl.UI(&.{
@@ -24,7 +24,7 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
     {
         cl.UI(&.{
             .ID("OuterContainer"),
-            .layout(.{ .direction = .LEFT_TO_RIGHT, .size = .grow, .padding = .uniform(16), .gap = 16 }),
+            .layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .gap = 16 }),
             .rectangle(.{ .color = white }),
         });
         defer cl.CLOSE();
@@ -33,9 +33,9 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
             .ID("SideBar"),
             .layout(.{
                 .direction = .TOP_TO_BOTTOM,
-                .size = .{ .h = .grow, .w = .fixed(300) },
+                .sizing = .{ .h = .grow, .w = .fixed(300) },
-                .padding = .uniform(16),
+                .padding = .all(16),
-                .alignment = .top_center,
+                .alignment = .{ .x = .CENTER, .y = .TOP },
                 .gap = 16,
             }),
             .rectangle(.{ .color = light_grey }),
@@ -44,14 +44,14 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
             defer cl.CLOSE();
             cl.UI(&.{
                 .ID("ProfilePictureOuter"),
-                .layout(.{ .size = .{ .w = .grow }, .padding = .uniform(16), .alignment = .center_left, .gap = 16 }),
+                .layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .alignment = .{ .x = .LEFT, .y = .CENTER }, .gap = 16 }),
                 .rectangle(.{ .color = red }),
             });
             {
                 defer cl.CLOSE();
                 cl.UI(&.{
                     .ID("ProfilePicture"),
-                    .layout(.{ .size = .{ .h = .fixed(60), .w = .fixed(60) } }),
+                    .layout(.{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } }),
                     .image(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @ptrCast(profile_picture) }),
                 });
                 cl.CLOSE();
@@ -63,7 +63,7 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
 
         cl.UI(&.{
             .ID("MainContent"),
-            .layout(.{ .size = .grow }),
+            .layout(.{ .sizing = .grow }),
             .rectangle(.{ .color = light_grey }),
         });
         cl.CLOSE();
@@ -88,6 +88,7 @@ pub fn main() anyerror!void {
     cl.setMeasureTextFunction(renderer.measureText);
 
     // init raylib
+    rl.setTraceLogLevel(.log_error);
     rl.setConfigFlags(.{
         .msaa_4x_hint = true,
         .vsync_hint = true,
@@ -114,6 +115,13 @@ pub fn main() anyerror!void {
             .y = mouse_pos.y,
         }, rl.isMouseButtonDown(.mouse_button_left));
 
+        const scroll_delta = rl.getMouseWheelMoveV().multiply(.{ .x = 6, .y = 6 });
+        cl.updateScrollContainers(
+            false,
+            .{ .x = scroll_delta.x, .y = scroll_delta.y },
+            rl.getFrameTime(),
+        );
+
         cl.setLayoutDimensions(.{
             .w = @floatFromInt(rl.getScreenWidth()),
             .h = @floatFromInt(rl.getScreenHeight()),

src/root.zig

@@ -185,21 +185,21 @@ pub const SizingAxis = extern struct {
     pub const grow = SizingAxis{ .type = .GROW, .constraints = .{ .size_minmax = .{ .min = 0, .max = 0 } } };
     pub const fit = SizingAxis{ .type = .FIT, .constraints = .{ .size_minmax = .{ .min = 0, .max = 0 } } };
 
-    pub fn fGrow(size_minmax: SizingConstraintsMinMax) SizingAxis {
+    pub fn growMinMax(size_minmax: SizingConstraintsMinMax) SizingAxis {
         return .{ .type = .GROW, .constraints = .{ .size_minmax = size_minmax } };
     }
 
+    pub fn fitMinMax(size_minmax: SizingConstraintsMinMax) SizingAxis {
+        return .{ .type = .FIT, .constraints = .{ .size_minmax = size_minmax } };
+    }
+
     pub fn fixed(size: f32) SizingAxis {
-        return .{ .type = .FIT, .constraints = .{ .size_minmax = .{ .max = size, .min = size } } };
+        return .{ .type = .FIXED, .constraints = .{ .size_minmax = .{ .max = size, .min = size } } };
     }
 
     pub fn percent(size_percent: f32) SizingAxis {
         return .{ .type = .PERCENT, .constraints = .{ .size_percent = size_percent } };
     }
-
-    pub fn fFit(size_minmax: SizingConstraintsMinMax) SizingAxis {
-        return .{ .type = SizingType.FIT, .constraints = .{ .size_minmax = size_minmax } };
-    }
 };
 
 pub const Sizing = extern struct {
@@ -215,7 +215,7 @@ pub const Padding = extern struct {
     x: u16 = 0,
     y: u16 = 0,
 
-    pub fn uniform(size: u16) Padding {
+    pub fn all(size: u16) Padding {
         return Padding{
             .x = size,
             .y = size,
@@ -243,20 +243,13 @@ pub const LayoutAlignmentY = enum(EnumBackingType) {
 pub const ChildAlignment = extern struct {
     x: LayoutAlignmentX = .LEFT,
     y: LayoutAlignmentY = .TOP,
-    pub const top_center = ChildAlignment{ .x = .CENTER, .y = .TOP };
+
-    pub const bottom_center = ChildAlignment{ .x = .LEFT, .y = .BOTTOM };
+    pub const CENTER = ChildAlignment{ .x = .CENTER, .y = .CENTER };
-    pub const top_left = ChildAlignment{ .x = .LEFT, .y = .TOP };
-    pub const top_right = ChildAlignment{ .x = .RIGHT, .y = .TOP };
-    pub const bottom_right = ChildAlignment{ .x = .RIGHT, .y = .BOTTOM };
-    pub const bottom_left = ChildAlignment{ .x = .LEFT, .y = .BOTTOM };
-    pub const center_left = ChildAlignment{ .x = .LEFT, .y = .CENTER };
-    pub const center_right = ChildAlignment{ .x = .RIGHT, .y = .CENTER };
-    pub const centered = ChildAlignment{ .x = .CENTER, .y = .CENTER };
 };
 
 pub const LayoutConfig = extern struct {
     /// sizing of the element
-    size: Sizing = .{},
+    sizing: Sizing = .{},
     /// padding arround children
     padding: Padding = .{},
     /// gap between the children
@@ -308,7 +301,7 @@ pub const BorderElementConfig = extern struct {
             .top = data,
             .bottom = data,
             .between_children = data,
-            .corner_radius = .{ radius, radius, radius, radius },
+            .corner_radius = .all(radius),
         };
     }
 };