#6870 Studio: <Img> should also show up as a layer (#6892)

tiwariaayu · JonnyBurger · claude · web-flow · commit d08c4f54960d · 2026-03-25T13:23:04.000Z
* #6870 Studio: <Img> should also show up as a layer * Add image thumbnail rendering in timeline + refactor height calculation - Add TimelineImageInfo component that renders image thumbnails using canvas repeating pattern - Give image sequences the same 50px height as video in the timeline - Refactor getTimelineLayerHeight to accept sequence type directly, removing repeated ternaries - Add simple-img test composition - Exclude image sequences from frame number overlay Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Jonny Burger <jonathanburger11@gmail.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
diff --git a/packages/core/src/CompositionManager.tsx b/packages/core/src/CompositionManager.tsx
@@ -81,6 +81,10 @@ type EnhancedTSequenceData =
 			doesVolumeChange: boolean;
 			startMediaFrom: number;
 			playbackRate: number;
+	  }
+	| {
+			type: 'image';
+			src: string;
 	  };
 
 export type LoopDisplay = {
diff --git a/packages/core/src/Img.tsx b/packages/core/src/Img.tsx
@@ -5,13 +5,16 @@ import React, {
 	useImperativeHandle,
 	useLayoutEffect,
 	useRef,
+	useState,
 } from 'react';
 import type {IsExact} from './audio/props.js';
+import {addSequenceStackTraces} from './enable-sequence-stack-traces.js';
 import {getCrossOriginValue} from './get-cross-origin-value.js';
 import {usePreload} from './prefetch.js';
 import {SequenceContext} from './SequenceContext.js';
 import {useBufferState} from './use-buffer-state.js';
 import {useDelayRender} from './use-delay-render.js';
+import {useImageInTimeline} from './use-media-in-timeline.js';
 import {useRemotionEnvironment} from './use-remotion-environment.js';
 
 function exponentialBackoff(errorCount: number): number {
@@ -33,6 +36,12 @@ export type ImgProps = NativeImgProps & {
 	readonly delayRenderTimeoutInMilliseconds?: number;
 	readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
 	readonly src: string;
+	readonly showInTimeline?: boolean;
+	readonly name?: string;
+	/**
+	 * @deprecated For internal use only
+	 */
+	readonly stack?: string;
 };
 
 type Expected = Omit<NativeImgProps, 'onError' | 'src' | 'crossOrigin'>;
@@ -50,6 +59,9 @@ const ImgRefForwarding: React.ForwardRefRenderFunction<
 		delayRenderTimeoutInMilliseconds,
 		onImageFrame,
 		crossOrigin,
+		showInTimeline,
+		name,
+		stack,
 		...props
 	},
 	ref,
@@ -58,6 +70,7 @@ const ImgRefForwarding: React.ForwardRefRenderFunction<
 	const errors = useRef<Record<string, number>>({});
 	const {delayPlayback} = useBufferState();
 	const sequenceContext = useContext(SequenceContext);
+	const [timelineId] = useState(() => String(Math.random()));
 
 	if (!src) {
 		throw new Error('No "src" prop was passed to <Img>.');
@@ -73,6 +86,17 @@ const ImgRefForwarding: React.ForwardRefRenderFunction<
 		return imageRef.current as HTMLImageElement;
 	}, []);
 
+	useImageInTimeline({
+		src,
+		displayName: name ?? null,
+		id: timelineId,
+		stack: stack ?? null,
+		showInTimeline: showInTimeline ?? true,
+		premountDisplay: sequenceContext?.premountDisplay ?? null,
+		postmountDisplay: sequenceContext?.postmountDisplay ?? null,
+		loopDisplay: undefined,
+	});
+
 	const actualSrc = usePreload(src as string);
 
 	const retryIn = useCallback((timeout: number) => {
@@ -273,3 +297,4 @@ const ImgRefForwarding: React.ForwardRefRenderFunction<
  * @see [Documentation](https://remotion.dev/docs/img)
  */
 export const Img = forwardRef(ImgRefForwarding);
+addSequenceStackTraces(Img);
diff --git a/packages/core/src/test/wrap-sequence-context.tsx b/packages/core/src/test/wrap-sequence-context.tsx
@@ -5,6 +5,7 @@ import type {CompositionManagerContext} from '../CompositionManagerContext.js';
 import {CompositionManager} from '../CompositionManagerContext.js';
 import type {LoggingContextValue} from '../log-level-context.js';
 import {LogLevelContext} from '../log-level-context.js';
+import {SequenceManagerProvider} from '../SequenceManager.js';
 import type {TimelineContextValue} from '../TimelineContext.js';
 import {AbsoluteTimeContext, TimelineContext} from '../TimelineContext.js';
 
@@ -86,9 +87,11 @@ export const WrapSequenceContext: React.FC<{
 			<BufferingProvider>
 				<CanUseRemotionHooksProvider>
 					<MaybeTimelineProvider>
-						<CompositionManager.Provider value={mockCompositionContext}>
-							{children}
-						</CompositionManager.Provider>
+						<SequenceManagerProvider visualModeEnabled={false}>
+							<CompositionManager.Provider value={mockCompositionContext}>
+								{children}
+							</CompositionManager.Provider>
+						</SequenceManagerProvider>
 					</MaybeTimelineProvider>
 				</CanUseRemotionHooksProvider>
 			</BufferingProvider>
diff --git a/packages/core/src/use-media-in-timeline.ts b/packages/core/src/use-media-in-timeline.ts
@@ -35,7 +35,7 @@ export const useBasicMediaInTimeline = ({
 }: {
 	volume: VolumeProp | undefined;
 	mediaVolume: number;
-	mediaType: 'audio' | 'video';
+	mediaType: 'audio' | 'video' | 'image';
 	src: string | undefined;
 	displayName: string | null;
 	trimBefore: number | undefined;
@@ -105,6 +105,93 @@ export const useBasicMediaInTimeline = ({
 	};
 };
 
+export const useImageInTimeline = ({
+	src,
+	displayName,
+	id,
+	stack,
+	showInTimeline,
+	premountDisplay,
+	postmountDisplay,
+	loopDisplay,
+}: {
+	src: string | undefined;
+	displayName: string | null;
+	id: string;
+	stack: string | null;
+	showInTimeline: boolean;
+	premountDisplay: number | null;
+	postmountDisplay: number | null;
+	loopDisplay: LoopDisplay | undefined;
+}) => {
+	const parentSequence = useContext(SequenceContext);
+	const {registerSequence, unregisterSequence} = useContext(SequenceManager);
+
+	const {duration, nonce, rootId, isStudio, finalDisplayName} =
+		useBasicMediaInTimeline({
+			volume: undefined,
+			mediaVolume: 0,
+			mediaType: 'image',
+			src,
+			displayName,
+			trimAfter: undefined,
+			trimBefore: undefined,
+			playbackRate: 1,
+		});
+
+	useEffect(() => {
+		if (!src) {
+			throw new Error('No src passed');
+		}
+
+		if (!isStudio && window.process?.env?.NODE_ENV !== 'test') {
+			return;
+		}
+
+		if (!showInTimeline) {
+			return;
+		}
+
+		registerSequence({
+			type: 'image',
+			src,
+			id,
+			duration,
+			from: 0,
+			parent: parentSequence?.id ?? null,
+			displayName: finalDisplayName,
+			rootId,
+			showInTimeline: true,
+			nonce: nonce.get(),
+			loopDisplay,
+			stack,
+			premountDisplay,
+			postmountDisplay,
+			controls: null,
+		});
+
+		return () => {
+			unregisterSequence(id);
+		};
+	}, [
+		duration,
+		id,
+		parentSequence,
+		src,
+		registerSequence,
+		unregisterSequence,
+		nonce,
+		stack,
+		showInTimeline,
+		premountDisplay,
+		postmountDisplay,
+		isStudio,
+		loopDisplay,
+		rootId,
+		finalDisplayName,
+	]);
+};
+
 export const useMediaInTimeline = ({
 	volume,
 	mediaVolume,
diff --git a/packages/example/src/Root.tsx b/packages/example/src/Root.tsx
@@ -66,6 +66,7 @@ import EllipseTest from './Shapes/EllipseTest';
 import RectTest from './Shapes/RectTest';
 import StarTest from './Shapes/StarTest';
 import TriangleTest from './Shapes/TriangleTest';
+import {SimpleImg} from './SimpleImg';
 import {SkipZeroFrame} from './SkipZeroFrame';
 import {SlicedVideo} from './SlicedVideo';
 import {BaseSpring, SpringWithDuration} from './Spring/base-spring';
@@ -440,6 +441,14 @@ export const Index: React.FC = () => {
 				/>
 			</Folder>
 			<Folder name="regression-testing">
+				<Composition
+					id="simple-img"
+					component={SimpleImg}
+					width={1080}
+					height={1080}
+					fps={30}
+					durationInFrames={10}
+				/>
 				<Composition
 					id="missing-img"
 					component={MissingImg}
diff --git a/packages/example/src/SimpleImg/index.tsx b/packages/example/src/SimpleImg/index.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import {Img, staticFile} from 'remotion';
+
+export const SimpleImg = (): React.ReactNode => {
+	return <Img src={staticFile('1.jpg')} />;
+};
diff --git a/packages/studio/src/components/Timeline/Timeline.tsx b/packages/studio/src/components/Timeline/Timeline.tsx
@@ -88,9 +88,7 @@ const TimelineInner: React.FC = () => {
 						visualModeEnabled && (expandedTracks[track.sequence.id] ?? false);
 					return (
 						acc +
-						getTimelineLayerHeight(
-							track.sequence.type === 'video' ? 'video' : 'other',
-						) +
+						getTimelineLayerHeight(track.sequence.type) +
 						Number(TIMELINE_ITEM_BORDER_BOTTOM) +
 						(isExpanded
 							? getExpandedTrackHeight(track.sequence.controls) +
diff --git a/packages/studio/src/components/Timeline/TimelineImageInfo.tsx b/packages/studio/src/components/Timeline/TimelineImageInfo.tsx
@@ -0,0 +1,79 @@
+import React, {useEffect, useRef} from 'react';
+import {getTimelineLayerHeight} from '../../helpers/timeline-layout';
+
+const HEIGHT = getTimelineLayerHeight('image') - 2;
+
+const containerStyle: React.CSSProperties = {
+	height: HEIGHT,
+	width: '100%',
+	backgroundColor: 'rgba(0, 0, 0, 0.3)',
+	display: 'flex',
+	borderTopLeftRadius: 2,
+	borderBottomLeftRadius: 2,
+};
+
+export const TimelineImageInfo: React.FC<{
+	readonly src: string;
+	readonly visualizationWidth: number;
+}> = ({src, visualizationWidth}) => {
+	const ref = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const {current} = ref;
+		if (!current) {
+			return;
+		}
+
+		const canvas = document.createElement('canvas');
+		canvas.width = visualizationWidth * window.devicePixelRatio;
+		canvas.height = HEIGHT * window.devicePixelRatio;
+		canvas.style.width = visualizationWidth + 'px';
+		canvas.style.height = HEIGHT + 'px';
+		const ctx = canvas.getContext('2d');
+		if (!ctx) {
+			return;
+		}
+
+		current.appendChild(canvas);
+
+		const img = new Image();
+		img.crossOrigin = 'anonymous';
+
+		img.onload = () => {
+			const scale = (HEIGHT * window.devicePixelRatio) / img.naturalHeight;
+			const scaledWidth = img.naturalWidth * scale;
+			const scaledHeight = HEIGHT * window.devicePixelRatio;
+
+			const offscreen = document.createElement('canvas');
+			offscreen.width = scaledWidth;
+			offscreen.height = scaledHeight;
+			const offCtx = offscreen.getContext('2d');
+			if (!offCtx) {
+				return;
+			}
+
+			offCtx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
+
+			const pattern = ctx.createPattern(offscreen, 'repeat-x');
+			if (!pattern) {
+				return;
+			}
+
+			ctx.fillStyle = pattern;
+			ctx.fillRect(
+				0,
+				0,
+				visualizationWidth * window.devicePixelRatio,
+				HEIGHT * window.devicePixelRatio,
+			);
+		};
+
+		img.src = src;
+
+		return () => {
+			current.removeChild(canvas);
+		};
+	}, [src, visualizationWidth]);
+
+	return <div ref={ref} style={containerStyle} />;
+};
diff --git a/packages/studio/src/components/Timeline/TimelineListItem.tsx b/packages/studio/src/components/Timeline/TimelineListItem.tsx
@@ -90,8 +90,7 @@ export const TimelineListItem: React.FC<{
 	const outer: React.CSSProperties = useMemo(() => {
 		return {
 			height:
-				getTimelineLayerHeight(sequence.type === 'video' ? 'video' : 'other') +
-				TIMELINE_ITEM_BORDER_BOTTOM,
+				getTimelineLayerHeight(sequence.type) + TIMELINE_ITEM_BORDER_BOTTOM,
 			color: 'white',
 			fontFamily: 'Arial, Helvetica, sans-serif',
 			display: 'flex',
diff --git a/packages/studio/src/components/Timeline/TimelineSequence.tsx b/packages/studio/src/components/Timeline/TimelineSequence.tsx
@@ -10,12 +10,14 @@ import {getTimelineLayerHeight} from '../../helpers/timeline-layout';
 import {useMaxMediaDuration} from '../../helpers/use-max-media-duration';
 import {AudioWaveform} from '../AudioWaveform';
 import {LoopedTimelineIndicator} from './LoopedTimelineIndicators';
+import {TimelineImageInfo} from './TimelineImageInfo';
 import {TimelineSequenceFrame} from './TimelineSequenceFrame';
 import {TimelineVideoInfo} from './TimelineVideoInfo';
 import {TimelineWidthContext} from './TimelineWidthProvider';
 
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
+const IMAGE_GRADIENT = 'linear-gradient(to top, #2980b9, #3498db)';
 
 export const TimelineSequence: React.FC<{
 	readonly s: TSequence;
@@ -69,7 +71,8 @@ const Inner: React.FC<{
 					? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
 					: s.duration,
 				startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
-				startFromMedia: s.type === 'sequence' ? 0 : s.startMediaFrom,
+				startFromMedia:
+					s.type === 'sequence' || s.type === 'image' ? 0 : s.startMediaFrom,
 				maxMediaDuration,
 				video,
 				windowWidth,
@@ -85,11 +88,13 @@ const Inner: React.FC<{
 					? AUDIO_GRADIENT
 					: s.type === 'video'
 						? VIDEO_GRADIENT
-						: BLUE,
+						: s.type === 'image'
+							? IMAGE_GRADIENT
+							: BLUE,
 			border: SEQUENCE_BORDER_WIDTH + 'px solid rgba(255, 255, 255, 0.2)',
 			borderRadius: 2,
 			position: 'absolute',
-			height: getTimelineLayerHeight(s.type === 'video' ? 'video' : 'other'),
+			height: getTimelineLayerHeight(s.type),
 			marginLeft,
 			width,
 			color: 'white',
@@ -160,12 +165,16 @@ const Inner: React.FC<{
 					playbackRate={s.playbackRate}
 				/>
 			) : null}
+			{s.type === 'image' ? (
+				<TimelineImageInfo src={s.src} visualizationWidth={width} />
+			) : null}
 			{s.loopDisplay === undefined ? null : (
 				<LoopedTimelineIndicator loops={s.loopDisplay.numberOfTimes} />
 			)}
 
 			{s.type !== 'audio' &&
 			s.type !== 'video' &&
+			s.type !== 'image' &&
 			s.loopDisplay === undefined &&
 			(isInRange || isPremounting || isPostmounting) ? (
 				<div
diff --git a/packages/studio/src/components/Timeline/TimelineStack/index.tsx b/packages/studio/src/components/Timeline/TimelineStack/index.tsx
diff --git a/packages/studio/src/components/Timeline/TimelineTracks.tsx b/packages/studio/src/components/Timeline/TimelineTracks.tsx
diff --git a/packages/studio/src/helpers/timeline-layout.ts b/packages/studio/src/helpers/timeline-layout.ts
