2 files changed, 26 insertions, 1 deletions
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index 271bad9b..2ff17345 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -357,6 +357,7 @@ export function Timeline() {
 										zoomLevel={zoomLevel}
 										dynamicTimelineWidth={dynamicTimelineWidth}
 										rulerRef={rulerRef}
+										tracksScrollRef={tracksScrollRef}
 										handleWheel={handleWheel}
 										handleTimelineContentClick={handleRulerClick}
 										handleRulerTrackingMouseDown={handleRulerMouseDown}
diff --git a/apps/web/src/components/editor/timeline/timeline-ruler.tsx b/apps/web/src/components/editor/timeline/timeline-ruler.tsx
index f5334f5a..dfa0534b 100644
--- a/apps/web/src/components/editor/timeline/timeline-ruler.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-ruler.tsx
@@ -3,12 +3,14 @@ import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { DEFAULT_FPS } from "@/constants/project-constants";
 import { useEditor } from "@/hooks/use-editor";
 import { getRulerConfig, shouldShowLabel } from "@/lib/timeline/ruler-utils";
+import { useScrollPosition } from "@/hooks/timeline/use-scroll-position";
 import { TimelineTick } from "./timeline-tick";
 
 interface TimelineRulerProps {
 	zoomLevel: number;
 	dynamicTimelineWidth: number;
 	rulerRef: React.Ref<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLElement | null>;
 	handleWheel: (e: React.WheelEvent) => void;
 	handleTimelineContentClick: (e: React.MouseEvent) => void;
 	handleRulerTrackingMouseDown: (e: React.MouseEvent) => void;
@@ -19,6 +21,7 @@ export function TimelineRuler({
 	zoomLevel,
 	dynamicTimelineWidth,
 	rulerRef,
+	tracksScrollRef,
 	handleWheel,
 	handleTimelineContentClick,
 	handleRulerTrackingMouseDown,
@@ -37,8 +40,29 @@ export function TimelineRuler({
 	});
 	const tickCount = Math.ceil(effectiveDuration / tickIntervalSeconds) + 1;
 
+	const { scrollLeft, viewportWidth } = useScrollPosition({
+		scrollRef: tracksScrollRef,
+	});
+
+	const bufferPx = 200;
+	const visibleStartTime = Math.max(
+		0,
+		(scrollLeft - bufferPx) / pixelsPerSecond,
+	);
+	const visibleEndTime =
+		(scrollLeft + viewportWidth + bufferPx) / pixelsPerSecond;
+
+	const startTickIndex = Math.max(
+		0,
+		Math.floor(visibleStartTime / tickIntervalSeconds),
+	);
+	const endTickIndex = Math.min(
+		tickCount - 1,
+		Math.ceil(visibleEndTime / tickIntervalSeconds),
+	);
+
 	const timelineTicks: Array<JSX.Element> = [];
-	for (let tickIndex = 0; tickIndex < tickCount; tickIndex += 1) {
+	for (let tickIndex = startTickIndex; tickIndex <= endTickIndex; tickIndex += 1) {
 		const time = tickIndex * tickIntervalSeconds;
 		if (time > effectiveDuration) break;