diff --git a/studio-frontend/src/app/anim-editor.element.ts b/studio-frontend/src/app/anim-editor.element.ts
index 74be637..790b92a 100644
--- a/studio-frontend/src/app/anim-editor.element.ts
+++ b/studio-frontend/src/app/anim-editor.element.ts
@@ -28,7 +28,7 @@ export class AnimEditorElement extends LitElement {
 	@state() timelineEnd = 5;
 
 	@state() clipStart = 0;
-	@state() clipEnd = 15_000;
+	@state() clipEnd = 0;
 
 	@state() playHead = 0;
 	@state() playing = false;
@@ -103,21 +103,22 @@ export class AnimEditorElement extends LitElement {
 
 		this.keyframes = keyframes;
 
-		let min = 0;
-		let max = 5;
+		let min = Infinity
+		let max = -Infinity;
 		for (const keyframe of Object.keys(this.keyframes)) {
 			let time = this.keyframes[keyframe].time;
 			if (typeof time != "number") {
 				continue;
 			}
 			if (time > max) {
-				max = time + 1;
+				max = time;
+			}
+			if (time < min) {
+				min = time;
 			}
 		}
-		this.clipStart = min;
-		this.clipEnd = max;
-		this.timelineEnd = max;
-		this.timelineStart = min;
+		this.clipStart = Math.max(min, 0.);
+		this.clipEnd = Math.max(max, min);
 	}
 
 	
@@ -136,6 +137,17 @@ export class AnimEditorElement extends LitElement {
 		}
 	}
 
+	@on("rangeStart-change")
+	onRangeStartChange({detail}: {detail:number}): void {
+		this.timelineStart = detail;
+	}
+
+	
+	@on("rangeEnd-change")
+	onRangeEndChange({detail}: {detail:number}): void {
+		this.timelineStart = detail;
+	}
+
 	onSidebarResize(event: PointerEvent): void {
 		this.sidebarWidth = Math.max(Math.min(this.sidebarWidth + event.movementX, 512), 128);
 	}
@@ -225,10 +237,16 @@ export class AnimEditorElement extends LitElement {
 		const selected = typeof this.selected_track === "object" && "track" in this.selected_track ? this.selected_track.track : false;
 		const can_add_selected = typeof this.selected_track === "object" && "outside_entity" in this.selected_track ? this.selected_track.outside_entity : false;
 
+		let length = this.timelineEnd - this.timelineStart;
+		let clip_start = (this.clipStart - this.timelineStart) / length;
+		let clip_end = (this.clipEnd - this.timelineStart) / length;
+
 		
-		let track_count = {
+		let timeline_css_variables = {
 			'--track-count': `${this.trackCount()}`,
-			'--row-count': `calc(var(--track-count) + ${can_add_selected ? 2 : 1})`
+			'--row-count': `calc(var(--track-count) + ${can_add_selected ? 2 : 1})`,
+			'--clip-end': `${clip_end * 100}%`,
+			'--clip-start': `${clip_start * 100}%`
 		};
 
 		const tracklist = this.track_ordered.map((entity) => {
@@ -263,7 +281,7 @@ export class AnimEditorElement extends LitElement {
 		<div class="sidebar"
 			style=${styleMap({
 				width: `${this.sidebarWidth}px`,
-				...track_count
+				...timeline_css_variables
 			})}
 		>
 			<sts-toolbar>
@@ -314,14 +332,14 @@ export class AnimEditorElement extends LitElement {
 			</div>
 		</div>
 
-		<div class="divider" style=${styleMap(track_count)}
+		<div class="divider" style=${styleMap(timeline_css_variables)}
 			${drag({
 				move: this.onSidebarResize,
 			})}
 		></div>
 
 		<sts-anim-timeline class="timeline"
-		style=${styleMap(track_count)}
+		style=${styleMap(timeline_css_variables)}
 			.rangeStart=${bind(this, "timelineStart")}
 			.rangeEnd=${bind(this, "timelineEnd")}
 			.clipStart=${this.clipStart}
diff --git a/studio-frontend/src/app/anim-timeline.element.scss b/studio-frontend/src/app/anim-timeline.element.scss
index 78d0e10..8993cc8 100644
--- a/studio-frontend/src/app/anim-timeline.element.scss
+++ b/studio-frontend/src/app/anim-timeline.element.scss
@@ -18,6 +18,8 @@
 	inset: 0;
 	grid-row: 1 / span var(--row-count);
 
+	background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) calc(var(--clip-start) - 1px), rgba(255,255,255,0.1) var(--clip-start), rgba(255,255,255,0.1) var(--clip-end), rgba(0,0,0,0.2) calc(var(--clip-end) + 1px));
+
 	&.panning {
 		cursor: grabbing;
 	}
diff --git a/studio-frontend/src/app/anim-timeline.element.ts b/studio-frontend/src/app/anim-timeline.element.ts
index 91d1b43..dd81cca 100644
--- a/studio-frontend/src/app/anim-timeline.element.ts
+++ b/studio-frontend/src/app/anim-timeline.element.ts
@@ -58,6 +58,12 @@ export class AnimTimelineElement extends LitElement {
 	@property({ type: Number }) rangeStart = 0;
 	/** The time (in seconds) at the right edge of the timeline view */
 	@property({ type: Number }) rangeEnd = 5;
+	
+	
+	/** The time (in seconds) at the start of the clip */
+	@property({ type: Number }) clipStart = 0;
+	/** The time (in seconds) at the end of the clip */
+	@property({ type: Number }) clipEnd = 5;
 
 	/** The time (in seconds) of the current play-head position */
 	@property({ type: Number }) playHead = 0;
@@ -151,8 +157,8 @@ export class AnimTimelineElement extends LitElement {
 
 		const deltaTimeScale = delta * 0.001 * currentRange;
 
-		const rangeStart = this.rangeStart - deltaTimeScale * focusPoint;
-		const rangeEnd = this.rangeEnd + deltaTimeScale * (1 - focusPoint);
+		const rangeStart = Math.max(this.rangeStart - deltaTimeScale * focusPoint, 0.);
+		const rangeEnd = Math.max(this.rangeEnd + deltaTimeScale * (1 - focusPoint), rangeStart + 0.01);
 
 		this.dispatchEvent(new CustomEvent("rangeStart-change", { detail: rangeStart }));
 		this.dispatchEvent(new CustomEvent("rangeEnd-change", { detail: rangeEnd }));
@@ -174,8 +180,8 @@ export class AnimTimelineElement extends LitElement {
 		const deltaChange = deltaPx * 0.001;
 		const scaledChange = (this.rangeEnd - this.rangeStart) * deltaChange;
 
-		const rangeStart = this.rangeStart - scaledChange;
-		const rangeEnd = this.rangeEnd - scaledChange;
+		const rangeStart = Math.max(this.rangeStart - scaledChange, 0);
+		const rangeEnd = Math.max(this.rangeEnd - scaledChange, rangeStart + 0.01);
 
 		this.dispatchEvent(new CustomEvent("rangeStart-change", { detail: rangeStart }));
 		this.dispatchEvent(new CustomEvent("rangeEnd-change", { detail: rangeEnd }));
diff --git a/studio/src/anim/timeline_animation.rs b/studio/src/anim/timeline_animation.rs
index 7c8c94c..7541ab7 100644
--- a/studio/src/anim/timeline_animation.rs
+++ b/studio/src/anim/timeline_animation.rs
@@ -205,7 +205,7 @@ fn process_timeline_events(
                 r_global_seek_time.playing = false;
             }
             TimelineInteractionEvent::Seek(time) => {
-                r_global_seek_time.time = *time;
+                r_global_seek_time.time = time.max(0.);
             }
         }
 
@@ -316,7 +316,7 @@ fn generate_transform_animation(
                     if (time - last_time).abs() > 0.00001 {
                         translation_list.push(Tween::new(
                             EaseMethod::Linear,
-                            Duration::from_secs_f32(time - last_time),
+                            Duration::from_secs_f32((time - last_time).max(0.00001)),
                             TransformPositionLens {
                                 start,
                                 end: translation,
@@ -336,7 +336,7 @@ fn generate_transform_animation(
                     if (time - last_time).abs() > 0.00001 {
                         rotation_list.push(Tween::new(
                             EaseMethod::Linear,
-                            Duration::from_secs_f32(time - last_time),
+                            Duration::from_secs_f32((time - last_time).max(0.00001)),
                             TransformRotationLens {
                                 start,
                                 end: rotation,
@@ -353,7 +353,7 @@ fn generate_transform_animation(
                     if (time - last_time).abs() > 0.00001 {
                         scale_list.push(Tween::new(
                             EaseMethod::Linear,
-                            Duration::from_secs_f32(time - last_time),
+                            Duration::from_secs_f32((time - last_time).max(0.00001)),
                             TransformScaleLens { start, end: scale },
                         ));
                     }
@@ -433,7 +433,7 @@ pub fn timeline_bound_component_animator_system<T: Component>(
     mut query: Query<(Entity, &mut T, &mut Animator<T>)>,
     events: ResMut<Events<TweenCompleted>>,
 ) {
-    if time.is_changed() {
+    if time.is_changed() && time.time >= 0.0 {
         info!("Animating with time: {time:?}");
         let mut events: Mut<Events<TweenCompleted>> = events.into();
         for (entity, target, mut animator) in query.iter_mut() {
@@ -452,7 +452,7 @@ pub fn timeline_bound_component_animator_system<T: Component>(
             } else {
                 info!("setting tween time to {}", time.time);
                 let tween = animator.tweenable_mut();
-                tween.set_elapsed(Duration::from_secs_f32(time.time));
+                tween.set_elapsed(Duration::from_secs_f32(time.time.max(0.)));
                 info!("Tween time set successfully");
                 tween.tick(Duration::ZERO, &mut target, entity, &mut events);
             }