diff --git a/assets/shaders/circle_shader.wgsl b/assets/shaders/circle_shader.wgsl
deleted file mode 100644
index 7e3f676626..0000000000
--- a/assets/shaders/circle_shader.wgsl
+++ /dev/null
@@ -1,20 +0,0 @@
-// This shader draws a circle with a given input color
-#import bevy_ui::ui_vertex_output::UiVertexOutput
-
-struct CustomUiMaterial {
-    @location(0) color: vec4<f32>
-}
-
-@group(1) @binding(0)
-var<uniform> input: CustomUiMaterial;
-
-@fragment
-fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
-    // the UVs are now adjusted around the middle of the rect.
-    let uv = in.uv * 2.0 - 1.0;
-
-    // circle alpha, the higher the power the harsher the falloff.
-    let alpha = 1.0 - pow(sqrt(dot(uv, uv)), 100.0);
-
-    return vec4<f32>(input.color.rgb, alpha);
-}
diff --git a/assets/shaders/custom_ui_material.wgsl b/assets/shaders/custom_ui_material.wgsl
new file mode 100644
index 0000000000..fa0344930d
--- /dev/null
+++ b/assets/shaders/custom_ui_material.wgsl
@@ -0,0 +1,18 @@
+// This shader draws a circle with a given input color
+#import bevy_ui::ui_vertex_output::UiVertexOutput
+
+@group(1) @binding(0) var<uniform> color: vec4<f32>;
+@group(1) @binding(1) var<uniform> slider: f32;
+@group(1) @binding(2) var material_color_texture: texture_2d<f32>;
+@group(1) @binding(3) var material_color_sampler: sampler;
+
+
+@fragment
+fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
+    if in.uv.x < slider {
+        let output_color = textureSample(material_color_texture, material_color_sampler, in.uv) * color;
+        return output_color;
+    } else {
+        return vec4(0.0);
+    }
+}
diff --git a/examples/ui/ui_material.rs b/examples/ui/ui_material.rs
index 89156cf53c..bfd06ad58f 100644
--- a/examples/ui/ui_material.rs
+++ b/examples/ui/ui_material.rs
@@ -5,26 +5,22 @@ use bevy::reflect::TypePath;
 use bevy::render::render_resource::*;
 
 /// This example uses a shader source file from the assets subdirectory
-const SHADER_ASSET_PATH: &str = "shaders/circle_shader.wgsl";
+const SHADER_ASSET_PATH: &str = "shaders/custom_ui_material.wgsl";
 
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
         .add_plugins(UiMaterialPlugin::<CustomUiMaterial>::default())
         .add_systems(Startup, setup)
-        .add_systems(Update, update)
+        .add_systems(Update, animate)
         .run();
 }
 
-fn update(time: Res<Time>, mut ui_materials: ResMut<Assets<CustomUiMaterial>>) {
-    for (_, material) in ui_materials.iter_mut() {
-        // rainbow color effect
-        let new_color = Color::hsl((time.elapsed_seconds() * 60.0) % 360.0, 1., 0.5);
-        material.color = LinearRgba::from(new_color).to_f32_array().into();
-    }
-}
-
-fn setup(mut commands: Commands, mut ui_materials: ResMut<Assets<CustomUiMaterial>>) {
+fn setup(
+    mut commands: Commands,
+    mut ui_materials: ResMut<Assets<CustomUiMaterial>>,
+    asset_server: Res<AssetServer>,
+) {
     // Camera so we can see UI
     commands.spawn(Camera2dBundle::default());
 
@@ -40,15 +36,18 @@ fn setup(mut commands: Commands, mut ui_materials: ResMut<Assets<CustomUiMateria
             ..default()
         })
         .with_children(|parent| {
+            let banner_scale_factor = 0.5;
             parent.spawn(MaterialNodeBundle {
                 style: Style {
                     position_type: PositionType::Absolute,
-                    width: Val::Px(250.0),
-                    height: Val::Px(250.0),
+                    width: Val::Px(905.0 * banner_scale_factor),
+                    height: Val::Px(363.0 * banner_scale_factor),
                     ..default()
                 },
                 material: ui_materials.add(CustomUiMaterial {
                     color: LinearRgba::WHITE.to_f32_array().into(),
+                    slider: 0.5,
+                    color_texture: asset_server.load("branding/banner.png"),
                 }),
                 ..default()
             });
@@ -57,8 +56,17 @@ fn setup(mut commands: Commands, mut ui_materials: ResMut<Assets<CustomUiMateria
 
 #[derive(AsBindGroup, Asset, TypePath, Debug, Clone)]
 struct CustomUiMaterial {
+    /// Color multiplied with the image
     #[uniform(0)]
     color: Vec4,
+    /// Represents how much of the image is visible
+    /// Goes from 0 to 1
+    #[uniform(1)]
+    slider: f32,
+    /// Image used to represent the slider
+    #[texture(2)]
+    #[sampler(3)]
+    color_texture: Handle<Image>,
 }
 
 impl UiMaterial for CustomUiMaterial {
@@ -66,3 +74,22 @@ impl UiMaterial for CustomUiMaterial {
         SHADER_ASSET_PATH.into()
     }
 }
+
+// Fills the slider slowly over 2 seconds and resets it
+// Also updates the color of the image to a rainbow color
+fn animate(
+    mut materials: ResMut<Assets<CustomUiMaterial>>,
+    q: Query<&Handle<CustomUiMaterial>>,
+    time: Res<Time>,
+) {
+    let duration = 2.0;
+    for handle in &q {
+        if let Some(material) = materials.get_mut(handle) {
+            // rainbow color effect
+            let new_color = Color::hsl((time.elapsed_seconds() * 60.0) % 360.0, 1., 0.5);
+            material.color = LinearRgba::from(new_color).to_f32_array().into();
+            material.slider =
+                ((time.elapsed_seconds() % (duration * 2.0)) - duration).abs() / duration;
+        }
+    }
+}