diff --git a/examples/shader/animate_shader.rs b/examples/shader/animate_shader.rs
index dd46d6293d985..6226395da707a 100644
--- a/examples/shader/animate_shader.rs
+++ b/examples/shader/animate_shader.rs
@@ -56,20 +56,9 @@ pub struct CustomMaterialPlugin;
 
 impl Plugin for CustomMaterialPlugin {
     fn build(&self, app: &mut App) {
-        let render_device = app.world.resource::<RenderDevice>();
-        let buffer = render_device.create_buffer(&BufferDescriptor {
-            label: Some("time uniform buffer"),
-            size: std::mem::size_of::<f32>() as u64,
-            usage: BufferUsages::UNIFORM | BufferUsages::COPY_DST,
-            mapped_at_creation: false,
-        });
-
         app.sub_app_mut(RenderApp)
             .add_render_command::<Transparent3d, DrawCustom>()
-            .insert_resource(TimeMeta {
-                buffer,
-                bind_group: None,
-            })
+            .init_resource::<TimeMeta>()
             .init_resource::<CustomPipeline>()
             .init_resource::<SpecializedMeshPipelines<CustomPipeline>>()
             .add_system_to_stage(RenderStage::Extract, extract_time)
@@ -133,34 +122,35 @@ fn queue_custom(
     }
 }
 
-#[derive(Default)]
-struct ExtractedTime {
+#[derive(Default, Clone, ShaderType)]
+struct TimeUniform {
+    // on WebGL, uniforms need to be at least 16 bytes wide
+    #[align(16)]
     seconds_since_startup: f32,
 }
 
 // extract the passed time into a resource in the render world
 fn extract_time(mut commands: Commands, time: Res<Time>) {
-    commands.insert_resource(ExtractedTime {
+    commands.insert_resource(TimeUniform {
         seconds_since_startup: time.seconds_since_startup() as f32,
     });
 }
 
+#[derive(Default)]
 struct TimeMeta {
-    buffer: Buffer,
+    buffer: UniformBuffer<TimeUniform>,
     bind_group: Option<BindGroup>,
 }
 
 // write the extracted time into the corresponding uniform buffer
 fn prepare_time(
-    time: Res<ExtractedTime>,
-    time_meta: ResMut<TimeMeta>,
+    time: Res<TimeUniform>,
+    mut time_meta: ResMut<TimeMeta>,
+    render_device: Res<RenderDevice>,
     render_queue: Res<RenderQueue>,
 ) {
-    render_queue.write_buffer(
-        &time_meta.buffer,
-        0,
-        bevy::core::cast_slice(&[time.seconds_since_startup]),
-    );
+    time_meta.buffer.set(time.clone());
+    time_meta.buffer.write_buffer(&render_device, &render_queue);
 }
 
 // create a bind group for the time uniform buffer
@@ -174,7 +164,7 @@ fn queue_time_bind_group(
         layout: &pipeline.time_bind_group_layout,
         entries: &[BindGroupEntry {
             binding: 0,
-            resource: time_meta.buffer.as_entire_binding(),
+            resource: time_meta.buffer.binding().unwrap(),
         }],
     });
     time_meta.bind_group = Some(bind_group);
@@ -202,7 +192,7 @@ impl FromWorld for CustomPipeline {
                     ty: BindingType::Buffer {
                         ty: BufferBindingType::Uniform,
                         has_dynamic_offset: false,
-                        min_binding_size: BufferSize::new(std::mem::size_of::<f32>() as u64),
+                        min_binding_size: Some(TimeUniform::min_size()),
                     },
                     count: None,
                 }],