diff --git a/Cargo.toml b/Cargo.toml
index e8fd058..10407ad 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "bevy_round_ui"
-version = "2.0.0"
+version = "4.0.0"
 edition = "2021"
 license = "MIT OR Apache-2.0"
 authors = ["Robert Dodd"]
@@ -23,4 +23,4 @@ round_rect = []
 superellipse = []
 
 [dependencies]
-bevy = "0.14"
+bevy = "0.15"
diff --git a/README.md b/README.md
index 478916c..d1acb17 100644
--- a/README.md
+++ b/README.md
@@ -89,6 +89,7 @@ allows you to toggle between the superellipse and round-rect materials to easily
 
 | `bevy_round_ui` | `bevy` |
 |:----------------|:-------|
+| `4.x`           | `0.15` |
 | `1.x` - `2.x`   | `0.13` |
 | `0.2`           | `0.13` |
 | `0.1`           | `0.12` |
diff --git a/examples/autosize.rs b/examples/autosize.rs
index 471c504..563abda 100644
--- a/examples/autosize.rs
+++ b/examples/autosize.rs
@@ -13,29 +13,20 @@ fn main() {
 
 fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMaterial>>) {
     // Camera so we can see UI
-    commands.spawn(Camera2dBundle::default());
+    commands.spawn(Camera2d);
 
     // Spawn two nested panels with flexible sizes in the middle of the window
     commands
-        .spawn(NodeBundle {
-            style: Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
+        .spawn((Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
             ..default()
-        })
+        },))
         .with_children(|p| {
-            p.spawn(MaterialNodeBundle {
-                material: materials.add(RoundRectUiMaterial {
-                    background_color: css::PINK.into(),
-                    border_color: LinearRgba::WHITE,
-                    border_radius: RoundUiBorder::all(20.).into(),
-                    offset: RoundUiOffset::all(6.).into(),
-                }),
-                style: Style {
+            p.spawn((
+                Node {
                     width: Val::Percent(50.),
                     height: Val::Percent(50.),
                     align_items: AlignItems::Center,
@@ -44,17 +35,17 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
                     padding: UiRect::all(Val::Px(12.)),
                     ..default()
                 },
-                ..default()
-            })
+                MaterialNode(materials.add(RoundRectUiMaterial {
+                    background_color: css::PINK.into(),
+                    border_color: LinearRgba::WHITE,
+                    border_radius: RoundUiBorder::all(20.).into(),
+                    offset: RoundUiOffset::all(6.).into(),
+                    ..default()
+                })),
+            ))
             .with_children(|p| {
-                p.spawn(MaterialNodeBundle {
-                    material: materials.add(RoundRectUiMaterial {
-                        background_color: Srgba::hex("5cb3af").unwrap().into(),
-                        border_color: LinearRgba::WHITE,
-                        border_radius: RoundUiBorder::all(20.0).into(),
-                        offset: RoundUiOffset::all(6.0).into(),
-                    }),
-                    style: Style {
+                p.spawn((
+                    Node {
                         width: Val::Percent(50.),
                         height: Val::Percent(50.),
                         align_items: AlignItems::Center,
@@ -63,16 +54,22 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
                         padding: UiRect::all(Val::Px(12.)),
                         ..default()
                     },
-                    ..default()
-                })
+                    MaterialNode(materials.add(RoundRectUiMaterial {
+                        background_color: Srgba::hex("5cb3af").unwrap().into(),
+                        border_color: LinearRgba::WHITE,
+                        border_radius: RoundUiBorder::all(20.0).into(),
+                        offset: RoundUiOffset::all(6.0).into(),
+                        ..default()
+                    })),
+                ))
                 .with_children(|p| {
-                    p.spawn(TextBundle::from_section(
-                        "Resize the window to see how flexible I am",
-                        TextStyle {
-                            color: Color::WHITE,
+                    p.spawn((
+                        Text::new("Resize the window to see how flexible I am"),
+                        TextFont {
                             font_size: 20.,
                             ..default()
                         },
+                        TextColor::WHITE,
                     ));
                 });
             });
diff --git a/examples/buttons.rs b/examples/buttons.rs
index 70d10fa..961ccdd 100644
--- a/examples/buttons.rs
+++ b/examples/buttons.rs
@@ -46,6 +46,7 @@ impl FromWorld for ButtonStyle {
                 border_color: Srgba::hex("#A53A3D").unwrap().into(),
                 border_radius: border_radius.into(),
                 offset: RoundUiOffset::bottom(BUTTON_OFFSET_SIZE).into(),
+                ..default()
             }),
             default_padding: UiRect::bottom(Val::Px(BUTTON_OFFSET_SIZE)),
             hover_material: materials.add(RoundRectUiMaterial {
@@ -53,6 +54,7 @@ impl FromWorld for ButtonStyle {
                 border_color: Srgba::hex("#A0102A").unwrap().into(),
                 border_radius: border_radius.into(),
                 offset: RoundUiOffset::bottom(BUTTON_OFFSET_SIZE).into(),
+                ..default()
             }),
             hover_padding: UiRect::bottom(Val::Px(BUTTON_OFFSET_SIZE)),
             press_material: materials.add(RoundRectUiMaterial {
@@ -60,6 +62,7 @@ impl FromWorld for ButtonStyle {
                 border_color: LinearRgba::NONE,
                 border_radius: border_radius.into(),
                 offset: RoundUiOffset::top(BUTTON_OFFSET_SIZE).into(),
+                ..default()
             }),
             press_padding: UiRect::top(Val::Px(BUTTON_OFFSET_SIZE)),
         }
@@ -85,7 +88,7 @@ fn setup(
     mut superellipse_materials: ResMut<Assets<SuperellipseUiMaterial>>,
 ) {
     // Camera so we can see UI
-    commands.spawn(Camera2dBundle::default());
+    commands.spawn(Camera2d);
 
     // Define a material for the panel.
     // This material looks like it has a border, because we applied an equal offset to all sides.
@@ -94,24 +97,22 @@ fn setup(
         border_color: Srgba::hex(PANEL_BORDER_COLOR).unwrap().into(),
         border_radius: RoundUiBorder::all(20.0).into(),
         border_thickness: 6.0,
+        ..default()
     });
 
     // Spawn the screen layout, containing a centered panel with menu items
     commands
-        .spawn(NodeBundle {
-            style: Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
+        .spawn((Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
             ..default()
-        })
+        },))
         .with_children(|p| {
-            p.spawn(MaterialNodeBundle {
-                material: panel_material,
-                style: Style {
+            p.spawn((
+                MaterialNode(panel_material),
+                Node {
                     width: Val::Px(PANEL_WIDTH),
                     padding: UiRect::axes(Val::Px(40.), Val::Px(60.)),
                     flex_direction: FlexDirection::Column,
@@ -119,29 +120,25 @@ fn setup(
                     justify_content: JustifyContent::Center,
                     ..default()
                 },
-                ..default()
-            })
+            ))
             .with_children(|p| {
                 // Spawn the title
-                p.spawn(NodeBundle {
-                    style: Style {
-                        align_items: AlignItems::Center,
-                        justify_content: JustifyContent::Center,
-                        margin: UiRect::bottom(Val::Px(40.)),
-                        ..default()
-                    },
+                p.spawn((Node {
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
+                    margin: UiRect::bottom(Val::Px(40.)),
                     ..default()
-                })
-                .with_children(|p| {
-                    p.spawn(TextBundle::from_section(
-                        "MENU",
-                        TextStyle {
-                            color: Color::WHITE,
-                            font_size: 40.,
-                            ..default()
-                        },
-                    ));
-                });
+                },))
+                    .with_children(|p| {
+                        p.spawn((
+                            Text::new("MENU"),
+                            TextFont {
+                                font_size: 40.,
+                                ..default()
+                            },
+                            TextColor::WHITE,
+                        ));
+                    });
 
                 // Spawn the buttons
                 spawn_button(p, &button_style, "Play", ButtonAction::Play);
@@ -161,29 +158,26 @@ fn spawn_button(
     parent
         .spawn((
             RoundButton,
-            MaterialNodeBundle {
-                material: button_style.default_material.clone(),
-                style: Style {
-                    align_items: AlignItems::Center,
-                    justify_content: JustifyContent::Center,
-                    width: Val::Percent(100.),
-                    height: Val::Px(BUTTON_HEIGHT),
-                    margin: UiRect::top(Val::Px(10.)),
-                    ..default()
-                },
+            Node {
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::Center,
+                width: Val::Percent(100.),
+                height: Val::Px(BUTTON_HEIGHT),
+                margin: UiRect::top(Val::Px(10.)),
                 ..default()
             },
+            MaterialNode(button_style.default_material.clone()),
             extras,
             Interaction::default(),
         ))
         .with_children(|p| {
-            p.spawn(TextBundle::from_section(
-                text,
-                TextStyle {
-                    color: Color::WHITE,
+            p.spawn((
+                Text::new(text),
+                TextFont {
                     font_size: 20.,
                     ..default()
                 },
+                TextColor::WHITE,
             ));
         })
         .id()
@@ -193,7 +187,11 @@ fn spawn_button(
 #[allow(clippy::type_complexity)]
 fn handle_button_interactions(
     mut interaction_query: Query<
-        (&Interaction, &mut Handle<RoundRectUiMaterial>, &mut Style),
+        (
+            &Interaction,
+            &mut MaterialNode<RoundRectUiMaterial>,
+            &mut Node,
+        ),
         (Changed<Interaction>, With<RoundButton>),
     >,
     button_style: Res<ButtonStyle>,
@@ -213,7 +211,7 @@ fn handle_button_interactions(
                 button_style.default_padding,
             ),
         };
-        *material = material_handle;
+        **material = material_handle;
         style.padding = padding;
     }
 }
diff --git a/examples/circle.rs b/examples/circle.rs
index 660d557..a32788d 100644
--- a/examples/circle.rs
+++ b/examples/circle.rs
@@ -20,7 +20,7 @@ const CIRCLE_BORDER_COLOR: &str = "#A53A3D";
 
 fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMaterial>>) {
     // Camera so we can see UI
-    commands.spawn(Camera2dBundle::default());
+    commands.spawn(Camera2d);
 
     // Add the material asset.
     // NOTE: To make a circle, the width, height and border radius should be equal
@@ -29,29 +29,26 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
         border_color: Srgba::hex(CIRCLE_BORDER_COLOR).unwrap().into(),
         border_radius: RoundUiBorder::all(CIRCLE_DIAMETER).into(),
         offset: RoundUiOffset::bottom(CIRCLE_OFFSET_SIZE).into(),
+        ..default()
     });
 
     // Spawn a round material node in the middle of the screen
     commands
-        .spawn(NodeBundle {
-            style: Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
+        .spawn((Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
             ..default()
-        })
+        },))
         .with_children(|p| {
-            p.spawn(MaterialNodeBundle {
-                material: circle_material,
-                style: Style {
+            p.spawn((
+                Node {
                     width: Val::Px(CIRCLE_DIAMETER),
                     height: Val::Px(CIRCLE_DIAMETER),
                     ..default()
                 },
-                ..default()
-            });
+                MaterialNode(circle_material),
+            ));
         });
 }
diff --git a/examples/compare.rs b/examples/compare.rs
index d10b2b0..d044d7e 100644
--- a/examples/compare.rs
+++ b/examples/compare.rs
@@ -32,7 +32,7 @@ fn setup(
     mut old_materials: ResMut<Assets<RoundRectUiMaterial>>,
 ) {
     // Camera so we can see UI
-    commands.spawn(Camera2dBundle::default());
+    commands.spawn(Camera2d);
 
     let border_radius: Vec4 = RoundUiBorder::all(PANEL_WIDTH / 4.).into();
     let background_color: LinearRgba = Srgba::hex("#F76161").unwrap().into();
@@ -44,6 +44,7 @@ fn setup(
         border_color,
         border_radius,
         border_thickness: BORDER_THICKNESS,
+        ..default()
     });
     // Add the round rect material
     let panel_material_round_rect = old_materials.add(RoundRectUiMaterial {
@@ -51,17 +52,15 @@ fn setup(
         border_color,
         border_radius,
         offset: RoundUiOffset::all(BORDER_THICKNESS / 2.).into(),
+        ..default()
     });
 
     // Spawn help text
     commands
-        .spawn(NodeBundle {
-            style: Style {
-                flex_direction: FlexDirection::Column,
-                ..default()
-            },
+        .spawn((Node {
+            flex_direction: FlexDirection::Column,
             ..default()
-        })
+        },))
         .with_children(|p| {
             help_text(p, "Toggle Material:    ENTER");
             help_text(p, "Toggle Height:      SPACE");
@@ -70,67 +69,55 @@ fn setup(
 
     // Spawn the material in the middle of the screen
     commands
-        .spawn(NodeBundle {
-            style: Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
+        .spawn((Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
             ..default()
-        })
+        },))
         .with_children(|p| {
             // Spawn a wrapper around the material node with a blue border
             p.spawn((
                 PanelBorder(true),
-                NodeBundle {
-                    style: Style {
-                        border: UiRect::all(Val::Px(1.)),
-                        align_items: AlignItems::Center,
-                        justify_content: JustifyContent::Center,
-                        ..default()
-                    },
-                    border_color: css::BLUE.into(),
+                Node {
+                    border: UiRect::all(Val::Px(1.)),
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
                     ..default()
                 },
+                BorderColor(css::BLUE.into()),
             ))
             .with_children(|p| {
                 // Spawn a superellipse material, displayed by default
                 p.spawn((
                     PanelSize::Short,
-                    MaterialNodeBundle {
-                        material: panel_material_superellipse,
-                        style: Style {
-                            width: Val::Px(PANEL_WIDTH),
-                            height: Val::Px(PANEL_HEIGHT),
-                            ..default()
-                        },
+                    Node {
+                        width: Val::Px(PANEL_WIDTH),
+                        height: Val::Px(PANEL_HEIGHT),
                         ..default()
                     },
+                    MaterialNode(panel_material_superellipse),
                 ));
                 // Spawn a round rect material, hidden by default
                 p.spawn((
                     PanelSize::Short,
-                    MaterialNodeBundle {
-                        material: panel_material_round_rect,
-                        style: Style {
-                            width: Val::Px(PANEL_WIDTH),
-                            height: Val::Px(PANEL_HEIGHT),
-                            display: Display::None,
-                            ..default()
-                        },
+                    Node {
+                        width: Val::Px(PANEL_WIDTH),
+                        height: Val::Px(PANEL_HEIGHT),
+                        display: Display::None,
                         ..default()
                     },
+                    MaterialNode(panel_material_round_rect),
                 ));
             });
         });
 }
 
 fn help_text(p: &mut ChildBuilder, val: impl Into<String>) {
-    p.spawn(TextBundle::from_section(
-        val,
-        TextStyle {
+    p.spawn((
+        Text::new(val),
+        TextFont {
             font_size: 24.,
             ..default()
         },
@@ -139,8 +126,8 @@ fn help_text(p: &mut ChildBuilder, val: impl Into<String>) {
 
 fn handle_keys(
     keys: Res<ButtonInput<KeyCode>>,
-    mut query: Query<(&mut PanelSize, &mut Style)>,
-    mut border_query: Query<(&mut PanelBorder, &mut Style), Without<PanelSize>>,
+    mut query: Query<(&mut PanelSize, &mut Node)>,
+    mut border_query: Query<(&mut PanelBorder, &mut Node), Without<PanelSize>>,
 ) {
     // Change height when "Space" is pressed
     if keys.just_pressed(KeyCode::Space) {
diff --git a/examples/shapes.rs b/examples/shapes.rs
index 02130f4..6456a6a 100644
--- a/examples/shapes.rs
+++ b/examples/shapes.rs
@@ -17,7 +17,7 @@ const SPACER_SIZE: f32 = 20.;
 
 fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMaterial>>) {
     // Camera so we can see UI
-    commands.spawn(Camera2dBundle::default());
+    commands.spawn(Camera2d);
 
     let rect_materials = [
         // Round rect without offset
@@ -32,6 +32,7 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
             border_color: Srgba::hex("#A53A3D").unwrap().into(),
             border_radius: RoundUiBorder::all(20.0).into(),
             offset: RoundUiOffset::bottom(10.0).into(),
+            ..default()
         }),
         // Round rect with border
         materials.add(RoundRectUiMaterial {
@@ -39,6 +40,7 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
             border_color: Srgba::hex("#FFFFFF").unwrap().into(),
             border_radius: RoundUiBorder::all(20.0).into(),
             offset: RoundUiOffset::all(4.0).into(),
+            ..default()
         }),
         // Round rect with offset to bottom right
         materials.add(RoundRectUiMaterial {
@@ -46,6 +48,7 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
             border_color: Srgba::hex("#A53A3D").unwrap().into(),
             border_radius: RoundUiBorder::all(20.0).into(),
             offset: RoundUiOffset::bottom_right(5.0).into(),
+            ..default()
         }),
     ];
     let circle_materials = [
@@ -61,6 +64,7 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
             border_color: Srgba::hex("#A53A3D").unwrap().into(),
             border_radius: RoundUiBorder::all(SHAPE_SIZE).into(),
             offset: RoundUiOffset::bottom(10.0).into(),
+            ..default()
         }),
         // Circle with border
         // NOTE: The border is not perfect
@@ -69,6 +73,7 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
             border_color: Srgba::hex("#FFFFFF").unwrap().into(),
             border_radius: RoundUiBorder::all(SHAPE_SIZE).into(),
             offset: RoundUiOffset::all(4.0).into(),
+            ..default()
         }),
         // Circle with border-radius longer than sides
         materials.add(RoundRectUiMaterial {
@@ -76,47 +81,41 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
             border_color: Srgba::hex("#A53A3D").unwrap().into(),
             border_radius: RoundUiBorder::all(SHAPE_SIZE * 2.).into(),
             offset: RoundUiOffset::bottom(10.0).into(),
+            ..default()
         }),
     ];
 
     // Spawn two rows of material nodes in the center of the screen
     commands
-        .spawn(NodeBundle {
-            style: Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                flex_direction: FlexDirection::Column,
-                ..default()
-            },
+        .spawn((Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            flex_direction: FlexDirection::Column,
             ..default()
-        })
+        },))
         .with_children(|p| {
             for row in [rect_materials.iter(), circle_materials.iter()] {
-                p.spawn(NodeBundle {
-                    style: Style {
-                        width: Val::Percent(100.0),
-                        align_items: AlignItems::Center,
-                        justify_content: JustifyContent::Center,
-                        ..default()
-                    },
+                p.spawn((Node {
+                    width: Val::Percent(100.0),
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
                     ..default()
-                })
-                .with_children(|p| {
-                    for material in row {
-                        p.spawn(MaterialNodeBundle {
-                            material: material.clone(),
-                            style: Style {
-                                margin: UiRect::all(Val::Px(SPACER_SIZE)),
-                                width: Val::Px(SHAPE_SIZE),
-                                height: Val::Px(SHAPE_SIZE),
-                                ..default()
-                            },
-                            ..default()
-                        });
-                    }
-                });
+                },))
+                    .with_children(|p| {
+                        for material in row {
+                            p.spawn((
+                                Node {
+                                    margin: UiRect::all(Val::Px(SPACER_SIZE)),
+                                    width: Val::Px(SHAPE_SIZE),
+                                    height: Val::Px(SHAPE_SIZE),
+                                    ..default()
+                                },
+                                MaterialNode(material.clone()),
+                            ));
+                        }
+                    });
             }
         });
 }
diff --git a/examples/simple.rs b/examples/simple.rs
index d11a036..997a7bd 100644
--- a/examples/simple.rs
+++ b/examples/simple.rs
@@ -8,45 +8,135 @@ fn main() {
     App::new()
         .add_plugins((DefaultPlugins, BevyRoundUiDefaultPlugins))
         .add_systems(Startup, setup)
+        .add_systems(Update, inc_value)
         .run();
 }
 
-const PANEL_WIDTH: f32 = 200.0;
-const PANEL_HEIGHT: f32 = 200.0;
+fn inc_value(mut rect_materials: ResMut<Assets<RoundRectUiMaterial>>, time: Res<Time>) {
+    for (_, mat) in rect_materials.iter_mut() {
+        mat.value = time.elapsed_secs() / 10.0;
+    }
+}
+
+fn setup(
+    mut commands: Commands,
+    mut materials: ResMut<Assets<RoundRectUiMaterial>>,
+    mut windows: Query<&mut Window>,
+) {
+    let window = windows.single_mut();
 
-fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMaterial>>) {
     // Camera so we can see UI
-    commands.spawn(Camera2dBundle::default());
+    commands.spawn(Camera2d);
+
+    let panel_width = 200.0;
+    let panel_height = 200.0;
+    //let panel_width = window.width();
+    //let panel_height = window.height();
 
     // Add the material
     let panel_material = materials.add(RoundRectUiMaterial {
-        background_color: Srgba::hex("#F76161").unwrap().into(),
+        //background_color: Srgba::hex("#F76161").unwrap().into(),
+        background_color: LinearRgba::GREEN,
         border_color: Srgba::hex("#A53A3D").unwrap().into(),
         border_radius: RoundUiBorder::all(20.0).into(),
         offset: RoundUiOffset::bottom(10.0).into(),
+        turbulence_color: LinearRgba::BLUE,
+        power: 1f32,
+        time: 0f32,
+        resolution: Vec2::new(window.width(), window.height()),
+        value: 0f32,
+        /*
+        texture0: Some(asset_server.load("textures/tex0.png")),
+        texture1: Some(asset_server.load("textures/tex1.png")),
+        texture2: Some(asset_server.load("textures/tex2.png")),
+        */
+        ..default()
     });
 
     // Spawn the material in the middle of the screen
     commands
-        .spawn(NodeBundle {
-            style: Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
+        .spawn((Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        },))
+        .with_children(|p| {
+            p.spawn((
+                Node {
+                    width: Val::Px(panel_width),
+                    height: Val::Px(panel_height),
+                    ..default()
+                },
+                MaterialNode(panel_material.clone()),
+            ));
+            p.spawn((
+                Node {
+                    width: Val::Px(panel_width / 2.0),
+                    height: Val::Px(panel_height / 2.0),
+                    ..default()
+                },
+                MaterialNode(panel_material.clone()),
+            ));
+            p.spawn((
+                Node {
+                    width: Val::Px(panel_width),
+                    height: Val::Px(panel_height),
+                    ..default()
+                },
+                MaterialNode(panel_material.clone()),
+            ));
+        });
+
+    // Spawn a progress bar
+    let bar_width = 600.0;
+    let bar_height = 10.0;
+    let bar_material = materials.add(RoundRectUiMaterial {
+        //background_color: Srgba::hex("#F76161").unwrap().into(),
+        background_color: LinearRgba::RED,
+        border_color: Srgba::hex("#A53A3D").unwrap().into(),
+        border_radius: RoundUiBorder::all(0.0).into(),
+        offset: RoundUiOffset::all(1.0).into(),
+        turbulence_color: LinearRgba::WHITE,
+        power: 1f32,
+        time: 0f32,
+        resolution: Vec2::new(window.width(), window.height()),
+        value: 0f32,
+        ..default()
+    });
+    commands
+        .spawn((Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            //margin: UiRect::all(Val::Px(50.)),
+            align_items: AlignItems::End,
+            justify_content: JustifyContent::Center,
             ..default()
-        })
+        },))
         .with_children(|p| {
-            p.spawn(MaterialNodeBundle {
-                material: panel_material,
-                style: Style {
-                    width: Val::Px(PANEL_WIDTH),
-                    height: Val::Px(PANEL_HEIGHT),
+            p.spawn((
+                Node {
+                    width: Val::Px(bar_width),
+                    height: Val::Px(bar_height),
+                    flex_direction: FlexDirection::Column,
+                    align_self: AlignSelf::End,
+                    //position_type: PositionType::Absolute,
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
                     ..default()
                 },
-                ..default()
+                MaterialNode(bar_material.clone()),
+            ))
+            .with_children(|parent| {
+                parent.spawn((
+                    Text::new("0.00%"),
+                    TextFont {
+                        font_size: 10.,
+                        ..default()
+                    },
+                    TextColor::BLACK,
+                ));
             });
         });
 }
diff --git a/examples/superellipse.rs b/examples/superellipse.rs
index 8f46dce..bb47611 100644
--- a/examples/superellipse.rs
+++ b/examples/superellipse.rs
@@ -25,7 +25,7 @@ pub enum PanelSize {
 
 fn setup(mut commands: Commands, mut materials: ResMut<Assets<SuperellipseUiMaterial>>) {
     // Camera so we can see UI
-    commands.spawn(Camera2dBundle::default());
+    commands.spawn(Camera2d);
 
     let border_radius: Vec4 = RoundUiBorder::all(PANEL_WIDTH / 4.).into();
     let background_color: LinearRgba = Srgba::hex("#5cb3af").unwrap().into();
@@ -37,61 +37,53 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<SuperellipseUiMate
         border_color,
         border_radius,
         border_thickness: BORDER_THICKNESS,
+        ..default()
     });
 
     // Spawn help text
     commands
-        .spawn(NodeBundle {
-            style: Style {
-                flex_direction: FlexDirection::Column,
-                padding: UiRect::all(Val::Px(20.)),
-                ..default()
-            },
+        .spawn((Node {
+            flex_direction: FlexDirection::Column,
+            padding: UiRect::all(Val::Px(20.)),
             ..default()
-        })
+        },))
         .with_children(|p| {
             help_text(p, "Toggle Height:      SPACE");
         });
 
     // Spawn the material in the middle of the screen
     commands
-        .spawn(NodeBundle {
-            style: Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
+        .spawn((Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
             ..default()
-        })
+        },))
         .with_children(|p| {
             p.spawn((
                 PanelSize::Short,
-                MaterialNodeBundle {
-                    material: panel_material_superellipse,
-                    style: Style {
-                        width: Val::Px(PANEL_WIDTH),
-                        height: Val::Px(PANEL_HEIGHT),
-                        ..default()
-                    },
+                Node {
+                    width: Val::Px(PANEL_WIDTH),
+                    height: Val::Px(PANEL_HEIGHT),
                     ..default()
                 },
+                MaterialNode(panel_material_superellipse),
             ));
         });
 }
 
 fn help_text(p: &mut ChildBuilder, val: impl Into<String>) {
-    p.spawn(TextBundle::from_section(
-        val,
-        TextStyle {
+    p.spawn((
+        Text::new(val),
+        TextFont {
             font_size: 24.,
             ..default()
         },
     ));
 }
 
-fn handle_keys(keys: Res<ButtonInput<KeyCode>>, mut query: Query<(&mut PanelSize, &mut Style)>) {
+fn handle_keys(keys: Res<ButtonInput<KeyCode>>, mut query: Query<(&mut PanelSize, &mut Node)>) {
     if keys.just_pressed(KeyCode::Space) {
         for (mut panel_size, mut style) in query.iter_mut() {
             *panel_size = match *panel_size {
diff --git a/examples/superellipse_transparency.rs b/examples/superellipse_transparency.rs
index 95561f7..51186b7 100644
--- a/examples/superellipse_transparency.rs
+++ b/examples/superellipse_transparency.rs
@@ -24,7 +24,7 @@ pub enum PanelSize {
 
 fn setup(mut commands: Commands, mut materials: ResMut<Assets<SuperellipseUiMaterial>>) {
     // Camera so we can see UI
-    commands.spawn(Camera2dBundle::default());
+    commands.spawn(Camera2d);
 
     let border_radius: Vec4 = RoundUiBorder::all(PANEL_WIDTH / 4.).into();
     let background_color: LinearRgba = Color::srgba(0.36078432, 0.7019608, 0.6862745, 0.5).into();
@@ -36,66 +36,56 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<SuperellipseUiMate
         border_color,
         border_radius,
         border_thickness: BORDER_THICKNESS,
+        ..default()
     });
 
     // Spawn 2 colored columns so we can see the transparency of the material
     commands
-        .spawn(NodeBundle {
-            style: Style {
-                flex_direction: FlexDirection::Row,
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                ..default()
-            },
+        .spawn((Node {
+            flex_direction: FlexDirection::Row,
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
             ..default()
-        })
+        },))
         .with_children(|p| {
-            p.spawn(NodeBundle {
-                style: Style {
+            p.spawn((
+                Node {
                     flex_direction: FlexDirection::Column,
                     width: Val::Percent(50.0),
                     height: Val::Percent(100.0),
                     ..default()
                 },
-                background_color: css::DARK_GRAY.into(),
-                ..default()
-            });
-            p.spawn(NodeBundle {
-                style: Style {
+                BackgroundColor(css::DARK_GRAY.into()),
+            ));
+            p.spawn((
+                Node {
                     flex_direction: FlexDirection::Column,
                     width: Val::Percent(50.0),
                     height: Val::Percent(100.0),
                     ..default()
                 },
-                background_color: css::ORANGE_RED.into(),
-                ..default()
-            });
+                BackgroundColor(css::ORANGE_RED.into()),
+            ));
         });
 
     // Spawn the material in the middle of the screen
     commands
-        .spawn(NodeBundle {
-            style: Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
+        .spawn((Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
             ..default()
-        })
+        },))
         .with_children(|p| {
             p.spawn((
                 PanelSize::Short,
-                MaterialNodeBundle {
-                    material: panel_material_superellipse,
-                    style: Style {
-                        width: Val::Px(PANEL_WIDTH),
-                        height: Val::Px(PANEL_HEIGHT),
-                        ..default()
-                    },
+                Node {
+                    width: Val::Px(PANEL_WIDTH),
+                    height: Val::Px(PANEL_HEIGHT),
                     ..default()
                 },
+                MaterialNode(panel_material_superellipse),
             ));
         });
 }
diff --git a/src/lib.rs b/src/lib.rs
index ed36128..09b7377 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -25,6 +25,21 @@ pub mod prelude {
             app.add_plugins(RoundRectMaterialPlugin);
             #[cfg(feature = "superellipse")]
             app.add_plugins(SuperellipseMaterialPlugin);
+
+            app.add_systems(Update, timer_update);
+        }
+    }
+
+    fn timer_update(
+        mut rect_materials: ResMut<Assets<RoundRectUiMaterial>>,
+        mut ellipse_materials: ResMut<Assets<SuperellipseUiMaterial>>,
+        time: Res<Time>,
+    ) {
+        for (_, material) in rect_materials.iter_mut() {
+            material.time = time.elapsed_secs();
+        }
+        for (_, material) in ellipse_materials.iter_mut() {
+            material.time = time.elapsed_secs();
         }
     }
 }
diff --git a/src/round_rect.rs b/src/round_rect.rs
index acfbb12..9c3ccef 100644
--- a/src/round_rect.rs
+++ b/src/round_rect.rs
@@ -16,7 +16,19 @@ impl Plugin for RoundRectMaterialPlugin {
             Shader::from_wgsl
         );
 
-        app.add_plugins(UiMaterialPlugin::<RoundRectUiMaterial>::default());
+        app.add_plugins(UiMaterialPlugin::<RoundRectUiMaterial>::default())
+            .add_systems(PreUpdate, update_round_rect_inverse_scale_factor);
+    }
+}
+
+pub fn update_round_rect_inverse_scale_factor(
+    query: Query<(&ComputedNode, &MaterialNode<RoundRectUiMaterial>)>,
+    mut materials: ResMut<Assets<RoundRectUiMaterial>>,
+) {
+    for (computed_node, material) in &query {
+        if let Some(mat) = materials.get_mut(material) {
+            mat.inverse_scale_factor = computed_node.inverse_scale_factor();
+        }
     }
 }
 
@@ -41,6 +53,42 @@ pub struct RoundRectUiMaterial {
     /// E.g. Vec4::new((top, left, bottom, right)
     #[uniform(0)]
     pub offset: Vec4,
+
+    /// The ComputedNode inverse scale factor
+    #[uniform(0)]
+    pub inverse_scale_factor: f32,
+
+    /// The background color of the material
+    #[uniform(0)]
+    pub turbulence_color: LinearRgba,
+
+    /// The size of the material on screen in pixels
+    #[uniform(0)]
+    pub power: f32,
+
+    /// Time
+    #[uniform(0)]
+    pub time: f32,
+
+    /// Screen resolution
+    #[uniform(0)]
+    pub resolution: Vec2,
+
+    /// Value if used as progress bar
+    #[uniform(0)]
+    pub value: f32,
+    /*
+
+    #[texture(1)]
+    #[sampler(2)]
+    pub texture0: Option<Handle<Image>>,
+    #[texture(3)]
+    #[sampler(4)]
+    pub texture1: Option<Handle<Image>>,
+    #[texture(5)]
+    #[sampler(6)]
+    pub texture2: Option<Handle<Image>>,
+    */
 }
 
 impl Default for RoundRectUiMaterial {
@@ -50,6 +98,18 @@ impl Default for RoundRectUiMaterial {
             border_color: LinearRgba::NONE,
             border_radius: Vec4::splat(0.),
             offset: Vec4::splat(0.),
+            inverse_scale_factor: 1.,
+
+            turbulence_color: LinearRgba::RED,
+            power: 1f32,
+            time: 0f32,
+            resolution: Vec2::new(1024.0, 768.0),
+            value: 1f32,
+            /*
+            texture0: None,
+            texture1: None,
+            texture2: None,
+            */
         }
     }
 }
diff --git a/src/round_rect.wgsl b/src/round_rect.wgsl
index 2940471..9e4d9d4 100644
--- a/src/round_rect.wgsl
+++ b/src/round_rect.wgsl
@@ -8,11 +8,32 @@ struct RoundUiMaterial {
     @location(2) border_radius: vec4<f32>,
     /// border offset: (top, left, bottom, right)
     @location(3) offset: vec4<f32>,
+    /// Inverse scale factor: must be updated to match the ComputedNode
+    @location(4) inverse_scale_factor: f32,
+
+    @location(5) turbulence_color: vec4<f32>,
+    @location(6) power: f32,
+    @location(7) time: f32,
+    @location(8) resolution: vec2<f32>,
+    @location(9) value: f32,
 }
 
 @group(1) @binding(0)
 var<uniform> input: RoundUiMaterial;
 
+@group(1) @binding(1)
+var texture0: texture_2d<f32>;
+@group(1) @binding(2)
+var sampler0: sampler;
+@group(1) @binding(3)
+var texture1: texture_2d<f32>;
+@group(1) @binding(4)
+var sampler1: sampler;
+@group(1) @binding(5)
+var texture2: texture_2d<f32>;
+@group(1) @binding(6)
+var sampler2: sampler;
+
 // MIT License. © 2023 Inigo Quilez, Munrocket
 // https://gist.github.com/munrocket/30e645d584b5300ee69295e54674b3e4
 // https://compute.toys/view/398
@@ -34,37 +55,166 @@ fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
 
     // position offset to account for border
     let border_offset = vec2<f32>(
-        input.offset.w - input.offset.y, // right - left
-        input.offset.z - input.offset.x, // bottom - top
+        (input.offset.w - input.offset.y) / input.inverse_scale_factor, // right - left
+        (input.offset.z - input.offset.x) / input.inverse_scale_factor, // bottom - top
     );
 
     // SDF distance in the inner button area
     // The inner button size is equal to actual size - offset size
     let size = in.size - vec2<f32>(
-        input.offset.y + input.offset.w, // left + right
-        input.offset.x + input.offset.z, // top + bottom
+        (input.offset.y + input.offset.w) / input.inverse_scale_factor, // left + right
+        (input.offset.x + input.offset.z) / input.inverse_scale_factor, // top + bottom
     );
     let d_shape = sdf_rounded_rect(
         uv + border_offset,
         size,
-        input.border_radius,
+        input.border_radius / input.inverse_scale_factor,
     );
 
     // SDF distance in border area
-    let d_border = sdf_rounded_rect(uv, in.size, input.border_radius);
+    let d_border = sdf_rounded_rect(uv, in.size, input.border_radius / input.inverse_scale_factor);
 
     // define the alpha value. Opaque if within the button or border area,
     // transparent otherwise.
     let alpha = select(1., 0., (d_shape > 0. && d_border > 0.));
     // define the final color. Use `input.border_color` if within border
     // radius, otherwise `input.background_color`.
-    let color = select(
-        input.background_color,
+    var color = select(
+        turbulence(in, input.turbulence_color, input.background_color),
+//        water(in, input.background_color),
         input.border_color,
         (d_shape > 0. && d_border <= 0.),
     );
 
     // TODO: Add color smoothing
+    //color = (input.background_color * 7 + color) / 8.0;
+    if input.value < in.uv.x {
+      let color_factor = 1.0;
+      let gray = (0.21 * color.r + 0.71 * color.g + 0.07 * color.b) * 0.1;
+      //let gray = 0.21 * input.background_color.r + 0.71 * input.background_color.g + 0.07 * input.background_color.b;
+      return vec4<f32>(color.rgb * (1.0 - color_factor) + (gray * color_factor), alpha * color.a);
+    }
 
     return vec4<f32>(color.rgb, alpha * color.a);
 }
+
+fn rgba_shift(color: vec4<f32>) -> vec4<f32> {
+	let shift = color.a - min(color.r, min(color.g, color.b)) - max(color.r, max(color.g, color.b));
+	return vec4(shift + color.r, shift + color.g, shift + color.b, color.a);
+}
+
+// Found this on GLSL sandbox. I really liked it, changed a few things and made it tileable.
+// :)
+// by David Hoskins.
+// Original water turbulence effect by joltz0r
+
+
+// Redefine below to see the tiling...
+//#define SHOW_TILING
+
+const TAU = 6.28318530718;
+const MAX_ITER = 5;
+
+fn turbulence(in: UiVertexOutput, turbulence_color: vec4<f32>, base_color: vec4<f32>) -> vec4<f32> {
+
+    let time = input.time * 0.5 + 23.0;
+    // uv should be the 0-1 uv of texture...
+    //var uv = in.uv;
+    //var uv = in.uv + vec2(in.position.x / 1280.0, in.position.y / 720.0);
+    //var uv = in.uv + in.position.xy / input.resolution.xy;
+    var uv = in.uv / in.size.yx + in.position.xy / input.resolution.xy;
+
+#ifdef SHOW_TILING
+    let p = ((uv * TAU * 2.0) % TAU) - 250.0;
+#else
+    let p = ((uv * TAU) % TAU) - 250.0;
+#endif
+    var i = vec2(p);
+    var c = 1.0;
+    let inten = 0.005;
+
+    for (var n = 0; n < MAX_ITER; n++) {
+        let t = time * (1.0 - (3.5 / (f32(n) + 1.0)));
+        i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));
+        c += 1.0 / length(vec2(p.x / (sin(i.x + t) / inten), p.y / (cos(i.y + t) / inten)));
+    }
+    c = c / f32(MAX_ITER);
+    c = 1.17 - pow(c, 1.4);
+    var color = vec3(pow(abs(c), 8.0));
+    color = color * input.power;
+	let t_color = color * turbulence_color.rgb;
+	color = rgba_shift(vec4(color, 1.0)).rgb;
+	color = mix(color * base_color.rgb, t_color, 0.5);
+
+#ifdef SHOW_TILING
+    // Flash tile borders...
+    let pixel = 2.0 / vec2(input.resolution.x, input.resolution.y);
+    uv *= 2.0;
+    let f = floor(((input.time * 0.5) % 2.0)); 	// Flash value.
+    let first = step(pixel, uv) * f;			// Rule out first screen pixels and flash.
+    uv = step(fract(uv), pixel);				// Add one line of pixels per tile.
+    color = mix(color, vec3(1.0, 1.0, 0.0), (uv.x + uv.y) * first.x * first.y); // Yellow line
+#endif
+
+    return vec4(color, base_color.a);
+}
+
+fn avg(color: vec4<f32>) -> f32 {
+    return (color.r + color.g + color.b) / 3.0;
+}
+
+fn water(in: UiVertexOutput, base_color: vec4<f32>) -> vec4<f32> {
+
+    // Flow Speed, increase to make the water flow faster.
+    let speed = 1.0;
+
+    // Water Scale, scales the water, not the background.
+    let scale = 0.8;
+
+    // Water opacity, higher opacity means the water reflects more light.
+    let opacity = 0.025;
+
+
+    // Normalized pixel coordinates (from 0 to 1)
+    //let uv = fragCoord / resolution;
+    let uv = in.uv;
+    let scaled_uv = uv * scale;
+
+    // Water layers, layered on top of eachother to produce the reflective effect
+    // Add 0.1 to both uv vectors to avoid the layers stacking perfectly and creating a huge unnatural highlight
+    var water1 = textureSample(texture0, sampler0, scaled_uv + input.time * 0.02 * speed - 0.1);
+    //let water1 = texture(iChannel0, scaled_uv + time * 0.02 * speed - 0.1);
+    var water2 = textureSample(texture0, sampler0, scaled_uv + input.time * speed * vec2(-0.02, -0.02) + 0.1);
+    //let water2 = texture(iChannel0, scaled_uv.xy + time * speed * vec2(-0.02, -0.02) + 0.1);
+
+    // Water highlights
+    var highlights1 = textureSample(texture2, sampler2, scaled_uv + input.time * speed / vec2(-10, 100));
+    //let highlights1 = texture(iChannel2, scaled_uv.xy + time * speed / vec2(-10, 100));
+    var highlights2 = textureSample(texture2, sampler2, scaled_uv + input.time * speed / vec2( 10, 100));
+    //let highlights2 = texture(iChannel2, scaled_uv.xy + time * speed / vec2( 10, 100));
+
+    // Background image
+    let background = textureSample(texture1, sampler1, uv + avg(water1) * 0.05);
+    //let background = texture(iChannel1, vec2(uv) + avg(water1) * 0.05);
+
+    // Average the colors of the water layers (convert from 1 channel to 4 channel
+    water1 = vec4(vec3(avg(water1)), water1.a);
+    water2 = vec4(vec3(avg(water2)), water2.a);
+
+    // Average and smooth the colors of the highlight layers
+    highlights1 = vec4(vec3(avg(highlights1) / 1.5), highlights1.a);
+    highlights2 = vec4(vec3(avg(highlights2) / 1.5), highlights2.a);
+
+    var alpha = opacity;
+
+    if (avg(water1 + water2) > 0.3) {
+        alpha = 0.0;
+    }
+
+    if (avg(water1 + water2 + highlights1 + highlights2) > 0.75) {
+        alpha = 5.0 * opacity;
+    }
+
+    // Output to screen
+    return (water1 + water2) * alpha + background;
+}
diff --git a/src/superellipse.rs b/src/superellipse.rs
index e648acc..054fc96 100644
--- a/src/superellipse.rs
+++ b/src/superellipse.rs
@@ -14,7 +14,19 @@ impl Plugin for SuperellipseMaterialPlugin {
             Shader::from_wgsl
         );
 
-        app.add_plugins(UiMaterialPlugin::<SuperellipseUiMaterial>::default());
+        app.add_plugins(UiMaterialPlugin::<SuperellipseUiMaterial>::default())
+            .add_systems(PreUpdate, update_superellipse_inverse_scale_factor);
+    }
+}
+
+pub fn update_superellipse_inverse_scale_factor(
+    query: Query<(&ComputedNode, &MaterialNode<SuperellipseUiMaterial>)>,
+    mut materials: ResMut<Assets<SuperellipseUiMaterial>>,
+) {
+    for (computed_node, material) in &query {
+        if let Some(mat) = materials.get_mut(material) {
+            mat.inverse_scale_factor = computed_node.inverse_scale_factor();
+        }
     }
 }
 
@@ -44,6 +56,14 @@ pub struct SuperellipseUiMaterial {
     /// The thickness of the border
     #[uniform(0)]
     pub border_thickness: f32,
+
+    /// The ComputedNode inverse scale factor
+    #[uniform(0)]
+    pub inverse_scale_factor: f32,
+
+    /// Time
+    #[uniform(0)]
+    pub time: f32,
 }
 
 impl Default for SuperellipseUiMaterial {
@@ -53,6 +73,8 @@ impl Default for SuperellipseUiMaterial {
             border_color: LinearRgba::NONE,
             border_radius: Vec4::splat(0.),
             border_thickness: 0.,
+            inverse_scale_factor: 1.,
+            time: 0f32,
         }
     }
 }
diff --git a/src/superellipse.wgsl b/src/superellipse.wgsl
index e1521b6..b95e843 100644
--- a/src/superellipse.wgsl
+++ b/src/superellipse.wgsl
@@ -10,6 +10,10 @@ struct SuperellipseUiMaterial {
     @location(2) border_radius: vec4<f32>,
     /// Border thickness: ignored if `border_color.a == 0.0`
     @location(3) border_thickness: f32,
+    /// Inverse scale factor: must be updated to match the ComputedNode
+    @location(4) inverse_scale_factor: f32,
+
+    @location(5) time: f32,
 }
 
 @group(1) @binding(0)
@@ -44,7 +48,7 @@ fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
     // adjust size by subtracting the border thickness
     var size = in.size;
     if is_border {
-        size -= vec2f(input.border_thickness);
+        size -= vec2f(input.border_thickness / input.inverse_scale_factor);
     }
 
     // adjust UVs around the middle of the rect, and convert to pixel
@@ -57,7 +61,7 @@ fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
 
     // IMPORTANT: Minimum border radius of 0.2, otherwise the approximation
     // behaves strangely.
-    let border_radius = max(input.border_radius / min_size, vec4f(0.2));
+    let border_radius = max(input.border_radius / input.inverse_scale_factor / min_size, vec4f(0.2));
 
     // Compute signed distance
     let d = approx_sd_super_ellipse(
@@ -77,7 +81,7 @@ fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
     // Apply border color
     var result = vec4f(col, alpha);
     if is_border {
-        let border_thickness_uv = input.border_thickness / min_size;
+        let border_thickness_uv = input.border_thickness / input.inverse_scale_factor / min_size;
         result = mix(result, input.border_color, 1.0 - smoothstep(0.0, border_thickness_uv, abs(d)));
     }